@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-switch/stories/invalid.md

@@ -0,0 +1,18 @@
+The component gets `invalid` state when the form is not valid.
+For an invalid switch an error-text underneath is mandatory.
+
+```html
+<form id="invalid-form">
+  <sd-switch checked required id="invalid-switch">Invalid</sd-switch>
+</form>
+<script type="module">
+  // Wait for custom elements to be defined
+  await Promise.all([customElements.whenDefined('sd-switch')]).then(() => {
+    const sdSwitch = document.getElementById('invalid-switch');
+
+    sdSwitch.click();
+    sdSwitch.reportValidity();
+    sdSwitch.setCustomValidity('Error-text');
+  });
+</script>
+```

package/metadata/packages/components/sd-switch/stories/required.md

@@ -0,0 +1,5 @@
+Use the `required` attribute to mark the switch as required. This can be used for form validation purposes.
+
+```html
+<sd-switch required>Required</sd-switch>
+```

package/metadata/packages/components/sd-tab/info.md

@@ -0,0 +1,42 @@
+## Overview
+
+`<sd-tab>` — Used inside `sd-tab-group` to represent and activate `sd-tab-panel`.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-tab, example: variant
+- component: sd-tab, example: active
+- component: sd-tab, example: disabled
+- component: sd-tab, example: visually-disabled
+- component: sd-tab, example: icon
+
+### Key Properties
+
+- prop.variant: 'default'|'container', default='default' — When set to container, a border appears around the current tab and tab-panel.
+- prop.active: boolean, default=false — Draws the tab in an active state.
+- prop.disabled: boolean, default=false — Disables the tab and prevents selection.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the tab as if it was disabled and enables aria-disabled
+- prop.panel: string, default='' — The name of the tab panel this tab is associated with. The panel must be located in the same tab group.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The tab's label.
+- slot.left: Optional element (eg. icon) positioned to the left of the label.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.active-tab-indicator: The active tab indicator.
+- part.hover-bottom-border: The bottom border that appears when the tab is hovered.
+
+## Guidelines
+
+### Accessibility
+
+- Use the "visually disabled" attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.

package/metadata/packages/components/sd-tab/stories/active.md

@@ -0,0 +1,44 @@
+Use the `active` attribute to toggle the active state.
+
+```html
+<div class="grid grid-cols-2 gap-12">
+  <sd-tab-group activation="auto" id="active">
+    <sd-tab slot="nav" panel="tab-1" variant="default">Default 1</sd-tab>
+    <sd-tab-panel name="tab-1">
+      Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-2" variant="default">Default 2</sd-tab>
+    <sd-tab-panel name="tab-2"> Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-3" variant="default">Default 3</sd-tab>
+    <sd-tab-panel name="tab-3">
+      Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </sd-tab-panel>
+  </sd-tab-group>
+  <sd-tab-group activation="auto" id="active-container">
+    <sd-tab slot="nav" panel="tab-1" variant="container">Container 1</sd-tab>
+    <sd-tab-panel name="tab-1">
+      Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-2" variant="container">Container 2</sd-tab>
+    <sd-tab-panel name="tab-2"> Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-3" variant="container">Container 3</sd-tab>
+    <sd-tab-panel name="tab-3">
+      Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </sd-tab-panel>
+  </sd-tab-group>
+</div>
+<script type="module">
+  const tabGroups = document.querySelectorAll('sd-tab-group#active, sd-tab-group#active-container');
+  // Wait for controls to be defined before attaching form listeners
+  Promise.all([
+    customElements.whenDefined('sd-tab-group'),
+    customElements.whenDefined('sd-tab'),
+    customElements.whenDefined('sd-tab-panel')
+  ]).then(() => {
+    setTimeout(() => {
+      // To make this more robust and reduce race conditions use setTimeout
+      tabGroups.forEach(tab => tab.show('tab-2'));
+    }, 1);
+  });
+</script>
+```

package/metadata/packages/components/sd-tab/stories/disabled.md

@@ -0,0 +1,20 @@
+Use the `disabled` attribute to disable a tab.
+
+```html
+<sd-tab-group>
+  <sd-tab slot="nav" panel="tab-1" variant="default">Label</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>
+      Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2" variant="default" disabled>Disabled</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <div>Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3" variant="default">Label</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+```

package/metadata/packages/components/sd-tab/stories/icon.md

@@ -0,0 +1,29 @@
+Use the `left` slot to add system icons.
+
+```html
+<sd-tab-group>
+  <sd-tab slot="nav" panel="tab-1">
+    <sd-icon slot="left" name="system/image"></sd-icon>
+    Label 1
+  </sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>
+      Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2">
+    <sd-icon slot="left" name="system/image"></sd-icon>
+    Label 2
+  </sd-tab>
+  <sd-tab-panel name="tab-2">
+    <div>Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3">
+    <sd-icon slot="left" name="system/image"></sd-icon>
+    Label 3
+  </sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+```

package/metadata/packages/components/sd-tab/stories/variant.md

@@ -0,0 +1,42 @@
+Use the `variant` attribute to display to change the appearance:
+
+- `default`: Can be used independently or within components, often for full-page content
+- `container`: Highlighted tab and content linked to a background container, typically for specific sections like sub-pages or teasers
+
+```html
+<div class="grid grid-cols-2 gap-12">
+  <sd-tab-group>
+    <sd-tab slot="nav" panel="tab-1" variant="default">Default 1</sd-tab>
+    <sd-tab-panel name="tab-1">
+      <div>
+        Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+      </div>
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-2" variant="default">Default 2</sd-tab>
+    <sd-tab-panel name="tab-2">
+      <div>Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-3" variant="default">Default 3</sd-tab>
+    <sd-tab-panel name="tab-3">
+      <div>Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+    </sd-tab-panel>
+  </sd-tab-group>
+
+  <sd-tab-group>
+    <sd-tab slot="nav" panel="tab-1" variant="container">Container 1</sd-tab>
+    <sd-tab-panel name="tab-1">
+      <div>
+        Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+      </div>
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-2" variant="container">Container 2</sd-tab>
+    <sd-tab-panel name="tab-2">
+      <div>Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+    </sd-tab-panel>
+    <sd-tab slot="nav" panel="tab-3" variant="container">Container 3</sd-tab>
+    <sd-tab-panel name="tab-3">
+      <div>Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+    </sd-tab-panel>
+  </sd-tab-group>
+</div>
+```

package/metadata/packages/components/sd-tab/stories/visually-disabled.md

@@ -0,0 +1,24 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<sd-tab-group>
+  <sd-tab slot="nav" panel="tab-1" variant="default">Label</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>
+      Tab panel 1 - Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.
+    </div>
+  </sd-tab-panel>
+  <sd-tooltip slot="nav" content="Visually Disabled" trigger="hover focus" size="sm" placement="top" hoist>
+    <sd-tab panel="tab-2" variant="default" visually-disabled>Visually disabled</sd-tab>
+  </sd-tooltip>
+  <sd-tab-panel name="tab-2">
+    <div>Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3" variant="default">Label</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Tab panel 3 - Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+```

package/metadata/packages/components/sd-tab-group/info.md

@@ -0,0 +1,88 @@
+## Overview
+
+`<sd-tab-group>` — Used to organise content into a container that shows one section at a time.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-tab-group, example: activation
+- component: sd-tab-group, example: scrollable
+
+### Key Properties
+
+- prop.activation: 'auto'|'manual', default='auto' — When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+  manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-tab-show: Emitted when a tab is shown.
+- event.sd-tab-hide: Emitted when a tab is hidden.
+
+### Slots
+
+- slot.default: Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.
+- slot.nav: Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.nav: The tab group's navigation container where tabs are slotted in.
+- part.scroll-container: The container that wraps the tabs and active-tab-indicator.
+- part.tabs: The container that wraps the tabs.
+- part.separation: The line that separates tabs from panels.
+- part.body: The tab group's body where tab panels are slotted in.
+- part.scroll-button--start: The starting scroll button.
+- part.scroll-button--end: The ending scroll button.
+- part.scroll-button\_\_base: The scroll button's exported `base` part.
+
+## Guidelines
+
+### Use Cases
+
+- Organize content into different sections, allowing users to switch between them without leaving the page.
+- Implement in dashboards where users need to access different data views or widgets.
+- Group settings or configuration options into categories for easier navigation.
+- Display different aspects of a product, such as description, reviews, and specifications.
+- Arrange user profile information into sections like personal details, activity, and settings.
+
+### Rules
+
+### Content
+
+- Choose labels that are concise and use no more than two words.
+- Ensure the first tab is the most relevant for the user.
+- Place related tabs next to each other for logical grouping.
+- Avoid overloading each tab’s content with too much information; keep it manageable and focused.
+- Avoid using tabs for content that needs to be read in a specific order; use [sd-step-group](./?path=/docs/components-sd-step-group--docs) instead.
+
+### Behavior
+
+- Maintain a consistent tab order across different pages or sections to reduce confusion and enhance user familiarity.
+- Limit the number of tabs (typically no more than six) to avoid overwhelming users; for more options, consider using side navigation.
+- Do not nest tabs within other tab containers.
+
+### Tab Panel
+
+- Use [sd-tab-panel](./?path=/docs/components-sd-tab-panel--docs) optionally when applying the "default" tab group variant.
+- When applying the "container" tab group variant, [sd-tab-panel](./?path=/docs/components-sd-tab-panel--docs) is mandatory.
+
+### Styling
+
+- Bold labels if desired, keeping this decision consistent across the group.
+- Customize to suit user requirements by changing label alignment or deleting the separator between group and content.
+
+### Background
+
+- Use background options of white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Provide a clear label for the tab group (e.g., via aria-label or aria-labelledby).
+- The tab group takes a single tabstop, then focus moves to the first interactive element in the tab panel, or the tab panel if there is none. Arrow keys should be used to move between tabs.
+- Use only for non-critical information. Hiding content can become a potential barrier, making it more challenging for users to access information.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.

package/metadata/packages/components/sd-tab-group/stories/activation.md

@@ -0,0 +1,52 @@
+Use the `activation` attribute to define how the tab panel is shown when the user interacts with it:
+
+- `auto`: Automatically shows the corresponding tab panel
+- `manual`: Requires user interaction to show the corresponding tab panel
+
+```html
+<sd-tab-group activation="auto">
+  <sd-tab slot="nav" panel="tab-1" variant="default">Tab 1</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>Auto provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2" variant="default">Tab 2</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <div>Auto provident illo neque vel ex.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3" variant="default">Tab 3</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Auto provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-4" variant="default">Tab 4</sd-tab>
+  <sd-tab-panel name="tab-4">
+    <div>Auto Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-5" variant="default">Tab 5</sd-tab>
+  <sd-tab-panel name="tab-5">
+    <div>Auto provident nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+
+<sd-tab-group activation="manual">
+  <sd-tab slot="nav" panel="tab-1" variant="default">Tab 1</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>Manual provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2" variant="default">Tab 2</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <div>Manual provident illo neque vel ex.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3" variant="default">Tab 3</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Manual provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-4" variant="default">Tab 4</sd-tab>
+  <sd-tab-panel name="tab-4">
+    <div>Manual Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-5" variant="default">Tab 5</sd-tab>
+  <sd-tab-panel name="tab-5">
+    <div>Manual provident nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+```

package/metadata/packages/components/sd-tab-group/stories/scrollable.md

@@ -0,0 +1,66 @@
+When there are more tabs than the available horizontal space, the sd-tab-group becomes scrollable.
+
+```html
+<sd-tab-group activation="auto">
+  <sd-tab slot="nav" panel="tab-1" variant="default">Tab 1</sd-tab>
+  <sd-tab-panel name="tab-1">
+    <div>Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-2" variant="default">Tab 2</sd-tab>
+  <sd-tab-panel name="tab-2">
+    <div>Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-3" variant="default">Tab 3</sd-tab>
+  <sd-tab-panel name="tab-3">
+    <div>Delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-4" variant="default">Tab 4</sd-tab>
+  <sd-tab-panel name="tab-4">
+    <div>Neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-5" variant="default">Tab 5</sd-tab>
+  <sd-tab-panel name="tab-5">
+    <div>Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-6" variant="default">Tab 6</sd-tab>
+  <sd-tab-panel name="tab-6">
+    <div>Doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-7" variant="default">Tab 7</sd-tab>
+  <sd-tab-panel name="tab-7">
+    <div>Illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-8" variant="default">Tab 8</sd-tab>
+  <sd-tab-panel name="tab-8">
+    <div>Delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-9" variant="default">Tab 9</sd-tab>
+  <sd-tab-panel name="tab-9">
+    <div>Perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-10" variant="default">Tab 10</sd-tab>
+  <sd-tab-panel name="tab-10">
+    <div>Ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-11" variant="default">Tab 11</sd-tab>
+  <sd-tab-panel name="tab-11">
+    <div>Provident illo neque vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-12" variant="default">Tab 12</sd-tab>
+  <sd-tab-panel name="tab-12">
+    <div>Provident vel ex. Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-13" variant="default">Tab 13</sd-tab>
+  <sd-tab-panel name="tab-13">
+    <div>Provident illo inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-14" variant="default">Tab 14</sd-tab>
+  <sd-tab-panel name="tab-14">
+    <div>Inventore perspiciatis delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+  <sd-tab slot="nav" panel="tab-15" variant="default">Tab 15</sd-tab>
+  <sd-tab-panel name="tab-15">
+    <div>Inventore delectus nisi doloremque soluta inventore.</div>
+  </sd-tab-panel>
+</sd-tab-group>
+```

package/metadata/packages/components/sd-tab-panel/info.md

@@ -0,0 +1,26 @@
+## Overview
+
+`<sd-tab-panel>` — Used inside `sd-tab-group` to display tabbed content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-tab-panel, example: open
+
+### Key Properties
+
+- prop.name: string, default='' — The tab panel's name.
+- prop.active: boolean, default=false — When true, the tab panel will be shown.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The tab panel's content.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.

package/metadata/packages/components/sd-tab-panel/stories/open.md

@@ -0,0 +1,9 @@
+Use the `active` attribute to set the state to open.
+
+```html
+<sd-tab-panel active>
+  <p class="sd-paragraph">
+    Nisi facilis doloremque odit ipsam impedit. Aspernatur maiores expedita. Aut voluptates unde dolores quisquam.
+  </p>
+</sd-tab-panel>
+```

package/metadata/packages/components/sd-tag/info.md

@@ -0,0 +1,75 @@
+## Overview
+
+`<sd-tag>` — Used to categorise or label content. Can also be used to filter or search for content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-tag, example: size
+- component: sd-tag, example: selected
+- component: sd-tag, example: removable
+- component: sd-tag, example: as-link
+- component: sd-tag, example: disabled
+- component: sd-tag, example: icon
+
+### Key Properties
+
+- prop.size: 'lg'|'sm', default='lg' — The tag's size.
+- prop.selected: boolean, default=false — Displays the tag in a selected state.
+- prop.toggleable: boolean, default=false — Defines the tag as toggleable, adding the `aria-pressed` attribute to indicate its selected state
+- prop.removable: boolean, default=false — Displays the tag with a removability indicator.
+- prop.disabled: boolean, default=false — Displays the tag in a disabled state.
+- prop.href: string, default='' — When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.download: string|undefined — Tells the browser to download the linked file as this filename. Only used when `href` is present.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the tag loses focus.
+- event.sd-focus: Emitted when the tag gains focus.
+- event.sd-remove: Emitted when the remove button is activated.
+- event.sd-hide: Emitted when the hide method is triggered.
+- event.sd-after-hide: Emitted after the tag is hidden and all animations are complete.
+
+### Slots
+
+- slot.default: The tag's content.
+- slot.icon-left: A prefix icon or similar element.
+- slot.removable-indicator: The tag's removability indicator.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.content: The tag's content.
+- part.removable-indicator: The tag's removability indicator.
+- part.icon-left: The container that wraps the left icon area.
+
+## Guidelines
+
+### Use Cases
+
+- Label and categorize items to help users filter and find relevant content.
+- Highlight important keywords or attributes associated with an item.
+- Allow users to filter content dynamically by clicking on tags.
+- Display topics or categories associated with an article, post or product.
+
+### Rules
+
+### Labels
+
+- Try to keep a similar text length for all labels, and specially avoid excessively long ones. If necessary, truncate the label and show the full text in a tooltip on hover.
+- Don’t use tags to indicate the status of a task, use [sd-status-badge](./?path=/docs/styles-sd-status-badge--docs) instead.
+
+### Behavior
+
+- Use the “removable” attribute to include a small close “x” button next to the label.
+- Avoid using a standalone, non-removable tag, as its selected/unselected state could be unclear. Apply the “removable” attribute for those cases.
+
+### Interactivity
+
+- Tags are interactive elements which trigger an action; to label or categorise items without any interaction use [sd-chip](./?path=/docs/styles-sd-chip--docs) or [sd-flag](./?path=/docs/styles-sd-flag--docs) instead.

package/metadata/packages/components/sd-tag/stories/as-link.md

@@ -0,0 +1,12 @@
+- Use the `href` attribute to render the tag as a link. By default a tag is rendered as a button.
+- Use the `target` attribute can to specify where to open the link.
+- Use the `download` attribute to tell the browser to download the linked file as this filename.
+
+```html
+<div class="flex gap-12">
+  <sd-tag href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
+    >Link</sd-tag
+  ><sd-tag href="https://union-investment.com" target="_blank">New window</sd-tag
+  ><sd-tag href="./placeholders/images/coffeeshop.jpg" download="">Download</sd-tag>
+</div>
+```

package/metadata/packages/components/sd-tag/stories/disabled.md

@@ -0,0 +1,10 @@
+Use the `disabled` attribute to disable a tag.
+**Hint:** If the href attribute is set i.e. the tag is rendered as a link (`<a>`),
+the disabled attribute is ignored, as links may not be disabled.
+To disable the tag in this case the href attribute has to be removed.
+
+```html
+<div class="flex gap-12">
+  <sd-tag disabled>Disabled</sd-tag>
+</div>
+```

package/metadata/packages/components/sd-tag/stories/icon.md

@@ -0,0 +1,10 @@
+Use the `icon-left` slot to add system icons.
+
+```html
+<div class="flex gap-12">
+  <sd-tag>
+    <sd-icon slot="icon-left" name="union-investment/system/image"></sd-icon>
+    Icon left
+  </sd-tag>
+</div>
+```

package/metadata/packages/components/sd-tag/stories/removable.md

@@ -0,0 +1,22 @@
+Use the `removable` attribute to include the removability indicator.
+This attribute is disabled when using the attributes `selected` or `toggleable`.
+**Hint:** Combine the `sd-remove` event and `hide` method to visually hide the tag
+when the removable button is triggered.
+
+```html
+<div class="flex gap-12">
+  <sd-tag id="removable-tag" size="lg" removable>Removable</sd-tag>
+</div>
+
+<script type="module">
+  const tag = document.querySelector('#removable-tag');
+
+  tag.addEventListener('sd-remove', event => tag.hide());
+  tag.addEventListener('sd-after-hide', event => {
+    setTimeout(() => {
+      event.target.style.opacity = '1';
+      event.target.hidden = false;
+    }, 2000);
+  });
+</script>
+```

package/metadata/packages/components/sd-tag/stories/selected.md

@@ -0,0 +1,20 @@
+Use the `selected` attribute to enable the selected state.
+**Accessibility hint**: Use the attribute `toggleable` to reflect the `selected` state on the `aria-pressed` attribute.
+
+```html
+<div id="tags-selected" class="flex gap-12">
+  <sd-tag selected toggleable>Selected</sd-tag>
+</div>
+
+<script type="module">
+  const handleToggle = event => {
+    const tag = event.target;
+    tag.toggleAttribute('selected');
+    const isSelected = tag.hasAttribute('selected');
+    tag.innerText = isSelected ? 'Selected' : 'Unselected';
+  };
+
+  const tags = document.querySelectorAll('#tags-selected sd-tag');
+  tags.forEach(tag => tag.addEventListener('click', handleToggle));
+</script>
+```

package/metadata/packages/components/sd-tag/stories/size.md

@@ -0,0 +1,11 @@
+Use the `size` attribute to change the tag size:
+
+- `lg` (default)
+- `sm`
+
+```html
+<div class="flex gap-12">
+  <sd-tag size="lg">Large</sd-tag>
+  <sd-tag size="sm">Small</sd-tag>
+</div>
+```