superdesk-ui-framework 4.0.82 → 4.0.83

package/app/styles/_tag-labels.scss

@@ -15,41 +15,41 @@ $tag-bg-colors: (
 /// Coloring classes. A map of classes to output in the CSS.
 $tag-label-palette: $tag-bg-colors !default;
 
-/// Default padding inside badges.
-$tag-label-padding: 1em 1em !default;
-
-/// Minimum width of a badge.
-$tag-label-minwidth: 1.8em !default;
-
-/// Default radius of a badge.
-$tag-label-radius: $border-radius__base--full;
-
-/// Default font size and line height for badges.
-$tag-label-font-size: 1.4rem !default;
-$tag-label-lineheight: 100% !default;
-
+:root {
+    --tag-label-height: calc(3 * var(--base-increment));
+    --tag-label-height-small: calc(2.25 * var(--base-increment));
+    --tag-label-padding: 1em 1em;
+    --tag-label-padding-small: 1em;
+
+    --tag-label-font-size: var(--text-size-small);
+    --tag-label-font-size-small: 1.1rem;    
+
+    --tag-label-minwidth: 1.8em;
+    --tag-label-radius: var(--b-radius--full);
+    --tag-label-lineheight: 1.1;
+}
 
 /// Generates the base styles for a badge.
 @mixin tag-label {
     display: inline-flex;
     align-items: center;
-    min-width: $tag-label-minwidth;
+    min-width: var(--tag-label-minwidth);
     padding: 0;
-    padding-inline: $tag-label-padding;
-    border-radius: $tag-label-radius;
-    font-size: $tag-label-font-size;
+    padding-inline: var(--tag-label-padding);
+    border-radius: var(--tag-label-radius);
+    font-size: var(--tag-label-font-size);
+    line-height: var(--tag-label-lineheight);
     position: relative;
     text-align: center;
     font-weight: 400;
     transition: background-color .2s ease-out, opacity .1s ease-out;
-    height: $sd-base-increment * 3;
+    height: var(--tag-label-height);
     color: var(--color-text);
 }
 
 .tag-label {
     @include tag-label;
-    background: $tag-label-BG-default;
-
+    background: var(--sd-colour__tag-label-Bg--1);
     @each $name, $color in $tag-label-palette {
         &.tag-label--#{$name} {
             background: $color;
@@ -75,7 +75,7 @@ $tag-label-lineheight: 100% !default;
         text-decoration: none;
         text-align: center;
         vertical-align: middle;
-        border-radius: $border-radius__base--full;
+        border-radius: var(--b-radius--full);
         background-color: var(--sd-colour__tag-label-remove-Bg);
         color: var(--color-text);
         cursor: pointer;
@@ -102,7 +102,7 @@ $tag-label-lineheight: 100% !default;
             }
         }
 
-          &:active {
+        &:active {
             background-color: var(--sd-colour__tag-label-remove-Bg--hover);
 
             [class^="icon-"], [class*=" icon-"] {
@@ -113,29 +113,57 @@ $tag-label-lineheight: 100% !default;
     }
 
     &.tag-label--inverse {
-        color: $tag-label-Txt-inverse;
-        background-color: $tag-label-BG-inverse;
+        color: var(--sd-colour__tag-label-Txt--inverse);
+        background-color: var(--sd-colour__tag-label-Bg--inverse);
     }
-
     .tag-label--text-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;
-        gap: 4px;
+        gap: var(--gap-0-5);
     }
-
     .tag-label--text-label {
         opacity: 0.7;
     }
+
+    &.tag-label--small {
+        height: var(--tag-label-height-small);
+        font-size: var(--tag-label-font-size-small);
+        padding-inline: var(--tag-label-padding-small);
+        letter-spacing: 0.025em;
+        .tag-label__remove {
+            height: 1.4rem;
+            width: 1.4rem;
+            margin-inline-start: 0.6rem;
+            margin-inline-end: -0.9rem;
+    
+            [class^="icon-"], [class*=" icon-"] {
+                --icon-size: 1.rem;
+                font-size: var(--icon-size);
+                height: var(--icon-size);
+                width: var(--icon-size);
+            }
+        }
+        &.tag-label--square {
+            padding-inline-start: var(--space--1);
+        }
+        &.tag-label--draggable {
+            border-radius: var(--b-radius--small);
+            padding-inline-start: 4px;
+            .drag-handle-wrapper {
+                margin-inline-end: 6px;
+            }
+        }
+    }
 }
 
 .tag-label--square {
-    border-radius: $border-radius__base--small;
+    border-radius: var(--b-radius--small);
     padding-inline-start: var(--space--1);
 }
 
 .tag-label--draggable {
-    border-radius: $border-radius__base--small;
+    border-radius: var(--b-radius--small);
     padding-inline-start: 6px;
     .drag-handle-wrapper {
         margin-inline-end: 6px;
@@ -157,11 +185,9 @@ $tag-label-lineheight: 100% !default;
 
 .sd-search-tags__tag-list {
     margin: 0.6rem 0;
-
     &:empty {
         padding: 0 !important;
     }
-
     .sd-search-tags__tag {
         margin-inline-start: 2px !important;
         margin-inline-end: 2px !important;

package/app/styles/components/_list-item.scss

@@ -269,7 +269,6 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    overflow: hidden;
     gap: var(--gap--small);
 
     &:first-child {

package/app/styles/design-tokens/_new-colors.scss

@@ -657,7 +657,7 @@
     --color-text-subdued:                 hsla(214, 13%, 60%, 1);
     --color-text--inverse:                hsla(214, 13%, 98%, 1);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
-    --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
+    --sd-slugline-color:                  hsl(197, 100%, 25%) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
     --sd-navy-color:                      hsla(240, 100%, 25%, 1);
     

package/app-typescript/components/Tag.tsx

@@ -6,6 +6,7 @@ interface IProps {
     text: string;
     label?: string;
     keyValue?: number;
+    size?: 'small' | 'normal'; // default normal
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
     shape?: 'round' | 'square'; // default round
     readOnly?: boolean;
@@ -13,11 +14,12 @@ interface IProps {
     onClick?(): void;
 }
 
-export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, draggable}: IProps) => {
+export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, draggable, size}: IProps) => {
     let classes = classNames('tag-label', {
         [`tag-label--${shade}`]: shade && shade !== 'light',
         'tag-label--square': shape === 'square',
         'tag-label--draggable': draggable === true,
+        [`tag-label--${size}`]: size !== 'normal' && size !== undefined,
     });
 
     const removeButton =

package/dist/components/Badges.tsx

@@ -158,13 +158,13 @@ export default class BadgeDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row">
                             <Badge text="8" type="primary">
-                                <Button text="default" onClick={() => false} />
+                                <Button text="secondary" type="secondary" onClick={() => false} />
                             </Badge>
                             <Badge text="6">
                                 <Button text="primary" type="primary" onClick={() => false} />
                             </Badge>
                             <Badge text="4" type="highlight">
-                                <Button text="hollow" style="hollow" onClick={() => false} />
+                                <Button text="tertiary" type="tertiary" onClick={() => false} />
                             </Badge>
                         </div>
                     </Markup.ReactMarkupPreview>

package/dist/components/Tags.tsx

@@ -6,6 +6,7 @@ import {Tag, Prop, PropsList} from '../../../app-typescript';
 interface ITag {
     tags: Array<any>;
     tags2: Array<any>;
+    tags3: Array<any>;
 }
 export default class TagDoc extends React.Component<{}, ITag> {
     constructor(props) {
@@ -23,6 +24,17 @@ export default class TagDoc extends React.Component<{}, ITag> {
             tags2: [
                 {text: 'Tag with label', label: 'Label'},
                 {text: 'I am', draggable: true, label: 'Draggable'},
+                {text: 'Tag with label', label: 'Label', size: 'small'},
+                {text: 'I am', draggable: true, label: 'Draggable', size: 'small'},
+            ],
+            tags3: [
+                {text: 'This is a small tag', size: 'small'},
+                {text: 'Another small tag', size: 'small', shade: 'darker'},
+                {text: 'Inverse small tag', size: 'small', shade: 'inverse'},
+                {text: 'Lorem ipsum', size: 'small', shade: 'highlight1'},
+                {text: 'Dolor amet ', size: 'small', shade: 'highlight2', shape: 'square'},
+                {text: 'Read only small tag', size: 'small', readOnly: true},
+                {text: 'Draggable small tag', size: 'small', draggable: true},
             ],
         };
         this.handleClick = this.handleClick.bind(this);
@@ -68,6 +80,26 @@ export default class TagDoc extends React.Component<{}, ITag> {
                                             label={tag.label}
                                             readOnly={tag.readOnly}
                                             draggable={tag.draggable}
+                                            size={tag.size}
+                                            onClick={() => this.handleClick(index)}
+                                        />
+                                    </React.Fragment>
+                                );
+                            })}
+                        </div>
+                        <div className="docs-page__content-row d-flex gap-1 mt-1">
+                            {this.state.tags3.map((tag, index) => {
+                                return (
+                                    <React.Fragment key={index}>
+                                        <Tag
+                                            keyValue={index}
+                                            text={tag.text}
+                                            shade={tag.shade}
+                                            shape={tag.shape}
+                                            label={tag.label}
+                                            readOnly={tag.readOnly}
+                                            draggable={tag.draggable}
+                                            size={tag.size}
                                             onClick={() => this.handleClick(index)}
                                         />
                                     </React.Fragment>
@@ -99,6 +131,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
                                             text={tag.text}
                                             label={tag.label}
                                             draggable={tag.draggable}
+                                            size={tag.size}
                                             onClick={() => this.handleClick2(index)}
                                         />
                                     </React.Fragment>

package/dist/design/checkbox-and-radio.html

@@ -44,7 +44,9 @@
             </div>
         </div>
 
-        <h4 class="docs-page__h4 mt-5 mb-2">Component Usage</h4>
+        <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
+
+        <h3 class="docs-page__h3 mt-0 mb-3">Component Usage</h3>
         <ul class="docs-page__unordered-list mt-1 mb-5">
             <li><strong>RadioGroup:</strong> Required for all radio button implementations - handles spacing, orientation, and group behavior automatically.</li>
             <li><strong>Checkbox:</strong> Individual checkbox component for single or multiple checkbox implementations</li>
@@ -65,7 +67,7 @@
                     <img src="/illustration-small--react.svg" alt="Components">
                 </figure>
                 <label class="docs-page__graphic-btn-label">
-                    <span>View Radio component</span>
+                    <span>View RadioGroup component</span>
                     <span class="docs-page__small-text">Components</span>
                 </label>
             </a>

package/dist/design/icon-buttons.html

@@ -0,0 +1,210 @@
+<section class="docs-page__container">
+    <h1 class="docs-page__h2">Icon Button Guidelines</h1>
+    <p class="docs-page__paragraph docs-page__paragraph--large">Icon buttons provide a compact way to trigger actions while maintaining clean interfaces. Since icons communicate meaning without text, choosing the right icon and providing clear tooltips becomes critical for usability. The <code>IconButton</code> component ensures consistent styling and behavior across all icon-based actions.</p>
+    
+    <h3 class="docs-page__h3 mt-5">Icon Selection</h3>
+    <h4 class="docs-page__h4 mt-3">Choose Recognizable Icons</h4>
+    <p class="docs-page__paragraph">Use icons that clearly represent their action. When in doubt, prioritize universal symbols over creative interpretations.</p>
+
+    <div class="docs-page__content-block d-flex flex-wrap gap-3">
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title">Do</h4>
+            <div class="docs-page__do-dont-block-content mt-0">
+                <ul class="docs-page__unordered-list">
+                    <li>Magnifying glass for search</li>
+                    <li>Pencil or edit icon for editing</li>
+                    <li>Download arrow for downloads</li>
+                    <li>Settings gear for configuration</li>
+                </ul>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
+            <h4 class="docs-page__do-dont-block-title">Don't</h4>
+            <div class="docs-page__do-dont-block-content">
+                <ul class="docs-page__unordered-list mt-1">
+                    <li>Abstract or ambiguous icons that require explanation</li>
+                    <li>Icons that could have multiple interpretations</li>
+                    <li>Custom icons when standard ones exist</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <h4 class="docs-page__h4 mt-4">Icon Meaning Consistency</h4>
+    <p class="docs-page__paragraph">Use the same icon for the same action throughout the application. Users learn and expect consistency.</p>
+
+    <div class="docs-page__content-block d-flex flex-wrap gap-3">
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title">Do</h4>
+            <div class="docs-page__do-dont-block-content">
+                <p class="docs-page__paragraph">
+                    Use the same edit icon across all edit functions in your app.
+                </p>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
+            <h4 class="docs-page__do-dont-block-title">Don't</h4>
+            <div class="docs-page__do-dont-block-content">
+                <p class="docs-page__paragraph">
+                    Use different edit icons (pencil, pen, edit text) for similar editing actions.
+                </p>
+            </div>
+        </div>
+    </div>
+
+
+    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
+
+    <h3 class="docs-page__h3 mt-5">Tooltip Guidelines</h3>
+    <h4 class="docs-page__h4 mt-3">Always Provide Tooltips</h4>
+    <p class="docs-page__paragraph">Every icon button must have a descriptive tooltip that clearly states what will happen when clicked.</p>
+ 
+    <div class="docs-page__content-block d-flex flex-wrap gap-3">
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title">Do</h4>
+            <div class="docs-page__do-dont-block-content">
+                <ul class="docs-page__unordered-list">
+                    <li>"Delete item"</li>
+                    <li>"Edit profile settings"</li>
+                    <li>"Download report as PDF"</li>
+                    <li>"Close dialog"</li>
+                </ul>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
+            <h4 class="docs-page__do-dont-block-title">Don't</h4>
+            <div class="docs-page__do-dont-block-content">
+                <ul class="docs-page__unordered-list">
+                    <li>"Delete" (too vague)</li>
+                    <li>"Edit" (edit what?)</li>
+                    <li>"Download" (download what format?)</li>
+                    <li>"Close" (close what?)</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <h4 class="docs-page__h4 mt-4">Tooltip Language</h4>
+    <p class="docs-page__paragraph">Use action-oriented language that describes the outcome, not just the icon name.</p>
+
+    <div class="docs-page__content-block d-flex flex-wrap gap-3">
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title">Do</h4>
+            <div class="docs-page__do-dont-block-content">
+                <p class="docs-page__paragraph">"Remove item from list" instead of "X button"</p>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
+            <h4 class="docs-page__do-dont-block-title">Don't</h4>
+            <div class="docs-page__do-dont-block-content">
+                <p class="docs-page__paragraph">"Trash can" or "Delete icon"</p>
+            </div>
+        </div>
+    </div>
+
+    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
+
+    <h3 class="docs-page__h3 mt-5 d-flex items-center gap-1">
+        Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> vs 
+        Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> Icons
+    </h3>
+    
+    <p class="docs-page__paragraph">Understanding when to use close versus delete icons is crucial for user expectations and preventing destructive actions. This is a common source of confusion that can lead to inconsistent user experiences.</p>
+    
+    <h4 class="docs-page__h4 mt-4 d-flex items-center gap-1">Use Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> icon for:</h4>
+    <h5 class="docs-page__h5 mt-2">Temporary removals or dismissals:</h5>
+    <ul class="docs-page__unordered-list mt-2 mb-2">
+        <li>Recommended in most cases but can be skipped occasionally</li>
+        <li>Rare exception: large and complex modals where actions happen inside the content area</li>
+        <li>Main action buttons always aligned to the right</li>
+        <li>Primary action positioned far right</li>
+    </ul>
+    <p class="docs-page__paragraph mt-0"><strong>Characteristics:</strong> Reversible, non-destructive, affects UI state rather than data.</p>
+    
+    <h4 class="docs-page__h4 mt-4 d-flex items-center gap-1">Use Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> icon for:</h4>
+    <h5 class="docs-page__h5 mt-2">Permanent data removal:</h5>
+    <ul class="docs-page__unordered-list mt-2 mb-2">
+        <li>Deleting files, records, or database entries</li>
+        <li>Removing user-created content permanently</li>
+        <li>Deleting accounts or user profiles</li>
+        <li>Deleting articles</li>
+    </ul>
+    <p class="docs-page__paragraph mt-0"><strong>Characteristics:</strong> Usually irreversible, destructive, affects actual data.</p>
+    
+    <h4 class="docs-page__h4 mt-4 ">Examples</h4>
+
+    <div class="docs-page__content-block d-flex flex-wrap gap-3">
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title d-flex items-center gap-0-5">Do - Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> icon</h4>
+            <div class="docs-page__do-dont-block-content mt-0">
+                <ul class="docs-page__unordered-list">
+                    <li>Closing a modal dialog: "Close dialog"</li>
+                    <li>Removing an item from related content: "Remove from related"</li>
+                    <li>Dismissing a notification: "Dismiss notification"</li>
+                    <li>Closing a sidebar: "Close preview"</li>
+                </ul>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
+            <h4 class="docs-page__do-dont-block-title d-flex items-center gap-0-5">Do - Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> icon</h4>
+            <div class="docs-page__do-dont-block-content">
+                <ul class="docs-page__unordered-list mt-1">
+                    <li>Deleting a user account: "Delete account permanently"</li>
+                    <li>Removing a saved document: "Delete document"</li>
+                    <li>Deleting a database record: "Delete customer record"</li>
+                </ul>
+            </div>
+        </div>
+        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
+            <h4 class="docs-page__do-dont-block-title">Don't</h4>
+            <div class="docs-page__do-dont-block-content">
+                <ul class="docs-page__unordered-list mt-1">
+                    <li>Using trash icon to close dialogs or dismiss notifications</li>
+                    <li>Using close (×) icon for permanent deletions</li>
+                    <li>Mixing these icons inconsistently for similar actions</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
+
+    <h3 class="docs-page__h3 mt-0">Accessibility Considerations</h3>
+    <h4 class="docs-page__h4 mt-2">Color and Contrast</h4>
+    <p class="docs-page__paragraph mt-0">Icons should meet accessibility contrast requirements. Don't rely on color alone to convey meaning.</p>
+
+
+
+    <h4 class="docs-page__h4 mt-5">Screen Readers</h4>
+    <p class="docs-page__paragraph mt-0">The <code>IconButton</code> component requires an ARIA label as a mandatory prop, which serves dual purposes: providing screen reader accessibility and generating the tooltip text. Screen reader support is built directly into the component.</p>
+
+    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
+
+    <h3 class="docs-page__h3 mt-0 mb-3">Component Usage</h3>
+
+    <ul class="docs-page__unordered-list mt-1 mb-5" style="max-width: 85ch;">
+        <li><strong>IconButton:</strong> Use for all icon-based actions with proper icon selection and mandatory tooltips for clear user communication.</li>
+        <li><strong>ButtonGroup:</strong> When grouping multiple icon buttons, use the <code>ButtonGroup</code> component for consistent spacing and alignment. The same spacing principles that apply to regular button grouping apply here.</li>
+    </ul>
+
+    <div class="docs-page__button-grid">
+        <a class="docs-page__graphic-btn" href="#/components/icon-buttons" target="_blank">
+            <figure class="docs-page__graphic-btn-graphic">
+                <img src="/illustration-small--react.svg" alt="React components">
+            </figure>
+            <label class="docs-page__graphic-btn-label">
+                <span>View IconButton component</span>
+                <span class="docs-page__small-text">Components</span>
+            </label>
+        </a>
+        <a class="docs-page__graphic-btn" href="#/components/button-groups" target="_blank">
+            <figure class="docs-page__graphic-btn-graphic">
+                <img src="/illustration-small--react.svg" alt="React components">
+            </figure>
+            <label class="docs-page__graphic-btn-label">
+                <span>View ButtonGroup component</span>
+                <span class="docs-page__small-text">Components</span>
+            </label>
+        </a>
+    </div>
+</section>

package/dist/design/modals-and-dialogs.html

@@ -1,5 +1,5 @@
 <section class="docs-page__container">
-    <h1 class="docs-page__h2">Modals & Dialogs</h1>
+    <h1 class="docs-page__h2">Modals & Dialogs Guidelines</h1>
     <p class="docs-page__paragraph docs-page__paragraph--large">Dialogs and modals are essential components in Superdesk, used frequently for everything from quick confirmations to complex workflows. Given the sophisticated nature of content management, our modals often contain substantial functionality. Consistent structure and content guidelines help users navigate these interfaces confidently.</p>
     
     <h3 class="docs-page__h3 mt-5">Structure</h3>
@@ -156,7 +156,7 @@
             </figure>
             <figcaption class="docs-page__figure-caption">
                 <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Use consistent spacing between buttons in the footer. The same spacing principles from our Button Guidelines apply here - use the <code>ButtonGroup</code> component when possible, or the <code>--gap-1</code> spacing variable for custom layouts. For more detailed information, see the guidelines for the <a href="#/design/buttons">Button component</a>.</p>
+                <p class="docs-page__caption-text">Use consistent spacing between buttons in the footer. The same spacing principles from our Button Guidelines apply here - use the <code>ButtonGroup</code> component when possible, or the <code>--gap-1</code> spacing variable for custom layouts. For more detailed information, see the guidelines for the <a class="docs-page__link" href="#/design/buttons">Button component</a>.</p>
             </figcaption>
         </div>
         <div class="docs-page__content-block-item">

package/dist/design/switch.html

@@ -42,26 +42,28 @@
             </div>
         </div>
 
-        <h4 class="docs-page__h4 mt-5 mb-2">Component Usage</h4>
+        <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
+        
+        <h3 class="docs-page__h3 mt-0 mb-3">Component Usage</h3>
         <ul class="docs-page__unordered-list mt-1 mb-5">
             <li><strong>Switch:</strong> Individual switch component for single or multiple switch implementations</li>
             <li><strong>SwitchGroup:</strong> Used to group multiple <code>Switch</code> components with consistent spacing and alignment</li>
         </ul>
 
-        <h4 class="docs-page__h4 mt-5 mb-2">When to Use Switches vs Checkboxes</h4>
+        <h4 class="docs-page__h4 mt-5 mb-2">When to use Switches vs Checkboxes</h4>
         <ul class="docs-page__unordered-list mt-1 mb-5">
             <li><strong>Switches:</strong> For settings that take effect immediately (toggle dark mode, enable notifications)</li>
             <li><strong>Checkboxes:</strong> For selections that require confirmation or submission (form selections, bulk actions)</li>
         </ul>
 
         <div class="docs-page__button-grid">
-            <a class="docs-page__graphic-btn" href="#/react/switch" target="_blank">
+            <a class="docs-page__graphic-btn" href="#/components/switch" target="_blank">
                 <figure class="docs-page__graphic-btn-graphic">
                     <img src="/illustration-small--react.svg" alt="React components">
                 </figure>
                 <label class="docs-page__graphic-btn-label">
-                    <span>View react component</span>
-                    <span class="docs-page__small-text">React components</span>
+                    <span>View Switch component</span>
+                    <span class="docs-page__small-text">Components</span>
                 </label>
             </a>
         </div>

package/dist/examples.bundle.css

@@ -492,7 +492,7 @@ hr {
 .docs-page__h3 {
     font-size: 32px;
     font-weight: 700;
-    line-height: 120%;
+    line-height: 1.2;
     font-family: 'Merriweather', serif;
     margin: 2em 0 0.4em 0;
 }
@@ -502,11 +502,17 @@ hr {
 .docs-page__h4 {
     font-size: 22px;
     font-weight: 700;
-    line-height: 120%;
+    line-height: 1.2;
     font-family: 'Merriweather', serif;
     margin: 1em 0 0.2em 0;
     color: var(--color-text-muted);
 }
+.docs-page__h5 {
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 0 0 0.25em;
+}
 .docs-page__group-heading {
     font-size: 36px;
     font-weight: 300;
@@ -743,9 +749,14 @@ hr {
     overflow-y: auto;
     position: relative;
     background-color: var(--docs-page-color-bg-00);
-    a {
-        color: var(--sd-colour-interactive);
-        text-decoration: dotted;
+    .docs-page__link {
+        color: var(--sd-colour-interactive--text);
+        text-decoration: underline dotted;
+        transition: all 0.2s ease;
+        &:hover {
+            color: var(--sd-colour-interactive);
+            text-decoration: underline;
+        }
     }
 }
 .docs-page__masthead {
@@ -1434,6 +1445,15 @@ doc-gif-img:hover img {
     cursor: pointer;
 }
 
+.docs-page__icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space--1);
+    background-color: var(--sd-item__main-Bg);
+    border-radius: var(--b-radius--full);
+}
+
 .docs-page__container table {
     margin-bottom: 32px;
     border-color: var(--docs-page-border__table) !important;
@@ -1463,7 +1483,6 @@ doc-gif-img:hover img {
     position: sticky;
     top: 0;
     background-color: var(--docs-page-color-bg-00);
-    border-bottom:;
 }
 
 .docs-page__container table.utilities-table tbody td {
@@ -1536,7 +1555,6 @@ pre[class*='language-'] {
     border: 1px solid var(--sd-colour-line--medium);
     flex: 1 1%;
     min-width: 400px;
-
     &.docs-page__do-dont-block--do {
         .docs-page__do-dont-block-title {
             border-color: var(--color-success-highlight);
@@ -1544,7 +1562,6 @@ pre[class*='language-'] {
             background-color: var(--color-success-translucent);
         }
     }
-
     &.docs-page__do-dont-block--dont {
         .docs-page__do-dont-block-title {
             border-color: var(--color-alert-highlight);
@@ -1568,6 +1585,10 @@ pre[class*='language-'] {
     .docs-page__unordered-list {
         margin-block: var(--space--1-5);
     }
+    .docs-page__paragraph {
+        margin: 0;
+        padding: var(--space--1);
+    }
 }
 
 /*// extra large screen media query /100em = 1600px/*/