You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/src/content/docs/components/accordion.mdx
+16-16Lines changed: 16 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ The accordion uses native HTML `<details>` and `<summary>` elements, leveraging
14
14
15
15
Click the accordions below to expand/collapse the accordion content. Each `<details>` element shares the same `name` attribute value, creating an exclusive accordion where opening one item automatically closes the others.
16
16
17
-
To render an accordion that's expanded by default, add the `open` attribute to the `<details>` element.
17
+
To render an accordion that’s expanded by default, add the `open` attribute to the `<details>` element.
<strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
26
+
<strong>This is the first item’s accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
<strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
35
+
<strong>This is the second item’s accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
<strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
44
+
<strong>This is the third item’s accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
45
45
</div>
46
46
</details>
47
47
</div>`} />
@@ -59,7 +59,7 @@ Use the contextual `.theme-{color}` classes to apply a semantic theme color to o
<strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
62
+
<strong>This is the first item’s accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code><details></code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
<strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
71
+
<strong>This is the second item’s accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
<strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
80
+
<strong>This is the third item’s accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code><details></code> elements.
81
81
</div>
82
82
</details>
83
83
</div>`} />
@@ -92,21 +92,21 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
95
+
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.</div>
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
102
+
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.</div>
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
109
+
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
110
110
</details>
111
111
</div>`} />
112
112
@@ -121,7 +121,7 @@ Omit the `name` attribute on each `<details>` element to allow multiple accordio
<strong>This is the first item's accordion body.</strong> Without the <code>name</code> attribute, each accordion item operates independently. You can open multiple items at the same time.
124
+
<strong>This is the first item’s accordion body.</strong> Without the <code>name</code> attribute, each accordion item operates independently. You can open multiple items at the same time.
125
125
</div>
126
126
</details>
127
127
<details class="accordion-item">
@@ -130,7 +130,7 @@ Omit the `name` attribute on each `<details>` element to allow multiple accordio
<strong>This is the second item's accordion body.</strong> Opening this won't close the first item because there's no <code>name</code> attribute linking them together.
133
+
<strong>This is the second item’s accordion body.</strong> Opening this won’t close the first item because there’s no <code>name</code> attribute linking them together.
134
134
</div>
135
135
</details>
136
136
<details class="accordion-item">
@@ -139,7 +139,7 @@ Omit the `name` attribute on each `<details>` element to allow multiple accordio
Copy file name to clipboardExpand all lines: site/src/content/docs/components/avatar.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ Avatars are used to represent users or entities. They can display an image or in
11
11
12
12
### Image
13
13
14
-
Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar` element provides an easy wrapper for additional avatar features like status indicators and stacks. You're welcome to use the `.avatar-img` class on its own if you only need a single HTML element.
14
+
Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar` element provides an easy wrapper for additional avatar features like status indicators and stacks. You’re welcome to use the `.avatar-img` class on its own if you only need a single HTML element.
Copy file name to clipboardExpand all lines: site/src/content/docs/components/button-group.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -160,7 +160,7 @@ Combine sets of button groups into button toolbars for more complex components.
160
160
</div>
161
161
</div>`} />
162
162
163
-
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
163
+
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
164
164
165
165
<Exampleclass="d-flex gap-3 flex-column"code={`<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
If there's an `href` attribute, add `tabindex="-1"` and `aria-disabled="true"` to prevent keyboard focus and assistive technologies from interacting with the link.
144
+
If there’s an `href` attribute, add `tabindex="-1"` and `aria-disabled="true"` to prevent keyboard focus and assistive technologies from interacting with the link.
@@ -311,7 +311,7 @@ Button sizes are defined in the `$button-sizes` Sass map. Each size specifies se
311
311
312
312
#### Variants
313
313
314
-
Button variants are defined in the `$button-variants` Sass map. Each variant specifies which theme color tokens to use for its base, hover, and active states. The map uses token names (like `"bg"`, `"contrast"`, `"border"`) that reference the current theme's color palette.
314
+
Button variants are defined in the `$button-variants` Sass map. Each variant specifies which theme color tokens to use for its base, hover, and active states. The map uses token names (like `"bg"`, `"contrast"`, `"border"`) that reference the current theme’s color palette.
0 commit comments