@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,79 @@
+## Overview
+
+`<sd-expandable>` — Used to display a brief summary that expands to reveal additional content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-expandable, example: open
+- component: sd-expandable, example: inverted
+- component: sd-expandable, example: gradient
+
+### Key Properties
+
+- prop.open: boolean, default=false — Used to check whether the component is expanded or not.
+- prop.inverted: boolean, default=false — Inverts the expandable and sets the color of the gradient to primary.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-show: Emitted when the expandable opens.
+- event.sd-after-show: Emitted after the expandable opens and all animations are complete.
+- event.sd-hide: Emitted when the expandable closes.
+- event.sd-after-hide: Emitted after the expandable closes and all animations are complete.
+
+### Slots
+
+- slot.default: Content of the expandable
+- slot.toggle-open: Content of the toggle button when the expandable is open
+- slot.toggle-closed: Content of the toggle button when the expandable is closed
+- slot.expand-icon: The icon of the toggle button when the expandable is closed
+- slot.collapse-icon: The icon of the toggle button when the expandable is open
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.content: The content of the expandable.
+- part.toggle: The toggle button of the expandable.
+- part.toggle-icon: The wrapper of the toggle icons.
+- part.summary: The summary of the expandable.
+- part.details: The details element of the expandable.
+
+## Guidelines
+
+### Use Cases
+
+- Display non-essential information that users can choose to read if interested.
+- Prevent clutter by truncating long text blocks and allowing users to expand them as needed.
+- Implement in product descriptions to show more details on demand.
+
+### Rules
+
+### Content and Labels
+
+- Use the ”default” slot to add content.
+- Use concise labels for the trigger (e.g., “Read more,” “Show more”).
+- The initial visible text should give a hint about the hidden content.
+- Make sure the expandable component only conceals supplementary, non-essential content. Essential information should be readily accessible without interaction, enabling users to obtain necessary details effortlessly.
+
+### Interaction and Usage
+
+- Avoid overloading with too much content. If a long text is required, consider other options for displaying it, e.g., triggering a [sd-dialog](./?path=/docs/components-sd-dialog--docs).
+- Do not nest expandable sections within other expandable sections.
+
+### Expandable vs. Accordion
+
+- The use of [sd-accordion](./?path=/docs/components-sd-accordion--docs) is generally recommended over the use of [sd-expandable](./?path=/docs/components-sd-expandable--docs): accordions give the user a quick scan header to decide if the content is relevant to them, offer a cleaner layout and are more accessible as a result.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Expandables are designed for text blocks, ensuring no interactive elements appear upon expansion. This keeps the focus on the expandable trigger, whether open or closed, with labels adjusted for each state.
+- The expandable component should only hide non-critical content, to ensure users can access essential information without unnecessary interaction.

package/metadata/packages/components/sd-expandable/stories/gradient.md

@@ -0,0 +1,75 @@
+Use the CSS properties `--gradient-color-start` and `--gradient-color-end` to set a gradient that matches the background color.
+
+```html
+<div>
+  <style>
+    .neutral-100 {
+      --gradient-color-end: rgba(var(--sd-color-background-neutral-100));
+    }
+
+    .primary-100 {
+      --gradient-color-end: rgba(var(--sd-color-background-primary-100));
+    }
+  </style>
+  <div class="flex flex-col gap-4">
+    <div class="bg-neutral-100 p-4">
+      <sd-expandable class="neutral-100">
+        <span slot="toggle-open"> Collapse: Learn more about our commitment to diversity </span>
+        <span slot="toggle-closed"> Expand: Learn more about our commitment to diversity </span>
+
+        <div class="sd-prose sd-prose--full-width">
+          <p>
+            For us, diversity equals strength. By taking the views and experiences of a wide range of people into
+            account, we provide room for creative solutions and ensure that we are equipped for the future. A diverse
+            and inclusive working environment is important to us. We benefit from the perspectives of different genders,
+            age groups, educational levels and backgrounds, thus guaranteeing that we are successful together.
+          </p>
+          <p>
+            As a member of the cooperative financial network, diversity and corporate citizenship are an integral part
+            of our corporate culture. Our approach is based around interacting with each other, our customers and our
+            partners on an equal footing. Our actions are defined by values such as respect, professionalism and
+            collaboration. In the true spirit of the cooperative principles, we channel a wide range of strengths in
+            order to be stronger together.
+          </p>
+          <p>
+            By signing the Diversity Charter in 2013, Union Investment underlined how highly it values diversity within
+            the company. We want to attract and retain the best candidates, irrespective of cultural or social
+            background, ethnicity, gender, sexual orientation, disability, religion or age. To do this, we have created
+            a working environment that is free of prejudice, where respect is paramount and people can achieve their
+            full potential. This is the policy that underpins the actions of our managers and employees.
+          </p>
+        </div>
+      </sd-expandable>
+    </div>
+    <div class="bg-primary-100 p-4">
+      <sd-expandable class="primary-100">
+        <span slot="toggle-open"> Collapse: Learn more about our commitment to diversity </span>
+        <span slot="toggle-closed"> Expand: Learn more about our commitment to diversity </span>
+
+        <div class="sd-prose sd-prose--full-width">
+          <p>
+            For us, diversity equals strength. By taking the views and experiences of a wide range of people into
+            account, we provide room for creative solutions and ensure that we are equipped for the future. A diverse
+            and inclusive working environment is important to us. We benefit from the perspectives of different genders,
+            age groups, educational levels and backgrounds, thus guaranteeing that we are successful together.
+          </p>
+          <p>
+            As a member of the cooperative financial network, diversity and corporate citizenship are an integral part
+            of our corporate culture. Our approach is based around interacting with each other, our customers and our
+            partners on an equal footing. Our actions are defined by values such as respect, professionalism and
+            collaboration. In the true spirit of the cooperative principles, we channel a wide range of strengths in
+            order to be stronger together.
+          </p>
+          <p>
+            By signing the Diversity Charter in 2013, Union Investment underlined how highly it values diversity within
+            the company. We want to attract and retain the best candidates, irrespective of cultural or social
+            background, ethnicity, gender, sexual orientation, disability, religion or age. To do this, we have created
+            a working environment that is free of prejudice, where respect is paramount and people can achieve their
+            full potential. This is the policy that underpins the actions of our managers and employees.
+          </p>
+        </div>
+      </sd-expandable>
+    </div>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-expandable/stories/inverted.md

@@ -0,0 +1,33 @@
+Use the `inverted` attribute when displayed on primary background.
+
+```html
+<div class="bg-primary p-8">
+  <sd-expandable inverted>
+    <span slot="toggle-open"> Collapse: Learn more about our commitment to diversity </span>
+    <span slot="toggle-closed"> Expand: Learn more about our commitment to diversity </span>
+
+    <div class="sd-prose sd-prose--full-width sd-prose--inverted">
+      <p>
+        For us, diversity equals strength. By taking the views and experiences of a wide range of people into account,
+        we provide room for creative solutions and ensure that we are equipped for the future. A diverse and inclusive
+        working environment is important to us. We benefit from the perspectives of different genders, age groups,
+        educational levels and backgrounds, thus guaranteeing that we are successful together.
+      </p>
+      <p>
+        As a member of the cooperative financial network, diversity and corporate citizenship are an integral part of
+        our corporate culture. Our approach is based around interacting with each other, our customers and our partners
+        on an equal footing. Our actions are defined by values such as respect, professionalism and collaboration. In
+        the true spirit of the cooperative principles, we channel a wide range of strengths in order to be stronger
+        together.
+      </p>
+      <p>
+        By signing the Diversity Charter in 2013, Union Investment underlined how highly it values diversity within the
+        company. We want to attract and retain the best candidates, irrespective of cultural or social background,
+        ethnicity, gender, sexual orientation, disability, religion or age. To do this, we have created a working
+        environment that is free of prejudice, where respect is paramount and people can achieve their full potential.
+        This is the policy that underpins the actions of our managers and employees.
+      </p>
+    </div>
+  </sd-expandable>
+</div>
+```

package/metadata/packages/components/sd-expandable/stories/open.md

@@ -0,0 +1,60 @@
+Use the `open` attribute to set the state of the expandable.
+
+```html
+<div class="flex flex-col gap-12">
+  <sd-expandable>
+    <span slot="toggle-open"> Collapse: Learn more about our commitment to diversity </span>
+    <span slot="toggle-closed"> Expand: Learn more about our commitment to diversity </span>
+
+    <div class="sd-prose sd-prose--full-width">
+      <p>
+        For us, diversity equals strength. By taking the views and experiences of a wide range of people into account,
+        we provide room for creative solutions and ensure that we are equipped for the future. A diverse and inclusive
+        working environment is important to us. We benefit from the perspectives of different genders, age groups,
+        educational levels and backgrounds, thus guaranteeing that we are successful together.
+      </p>
+      <p>
+        As a member of the cooperative financial network, diversity and corporate citizenship are an integral part of
+        our corporate culture. Our approach is based around interacting with each other, our customers and our partners
+        on an equal footing. Our actions are defined by values such as respect, professionalism and collaboration. In
+        the true spirit of the cooperative principles, we channel a wide range of strengths in order to be stronger
+        together.
+      </p>
+      <p>
+        By signing the Diversity Charter in 2013, Union Investment underlined how highly it values diversity within the
+        company. We want to attract and retain the best candidates, irrespective of cultural or social background,
+        ethnicity, gender, sexual orientation, disability, religion or age. To do this, we have created a working
+        environment that is free of prejudice, where respect is paramount and people can achieve their full potential.
+        This is the policy that underpins the actions of our managers and employees.
+      </p>
+    </div>
+  </sd-expandable>
+  <sd-expandable open>
+    <span slot="toggle-open"> Collapse: Learn more about our commitment to diversity </span>
+    <span slot="toggle-closed"> Expand: Learn more about our commitment to diversity </span>
+
+    <div class="sd-prose sd-prose--full-width">
+      <p>
+        For us, diversity equals strength. By taking the views and experiences of a wide range of people into account,
+        we provide room for creative solutions and ensure that we are equipped for the future. A diverse and inclusive
+        working environment is important to us. We benefit from the perspectives of different genders, age groups,
+        educational levels and backgrounds, thus guaranteeing that we are successful together.
+      </p>
+      <p>
+        As a member of the cooperative financial network, diversity and corporate citizenship are an integral part of
+        our corporate culture. Our approach is based around interacting with each other, our customers and our partners
+        on an equal footing. Our actions are defined by values such as respect, professionalism and collaboration. In
+        the true spirit of the cooperative principles, we channel a wide range of strengths in order to be stronger
+        together.
+      </p>
+      <p>
+        By signing the Diversity Charter in 2013, Union Investment underlined how highly it values diversity within the
+        company. We want to attract and retain the best candidates, irrespective of cultural or social background,
+        ethnicity, gender, sexual orientation, disability, religion or age. To do this, we have created a working
+        environment that is free of prejudice, where respect is paramount and people can achieve their full potential.
+        This is the policy that underpins the actions of our managers and employees.
+      </p>
+    </div>
+  </sd-expandable>
+</div>
+```

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

@@ -0,0 +1,84 @@
+## Overview
+
+`<sd-flipcard>` — Used to display content on both sides of a card by presenting information on one side and revealing additional information when flipped.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-flipcard, example: variants
+- component: sd-flipcard, example: aspect-ratios
+- component: sd-flipcard, example: placement
+- component: sd-flipcard, example: flip-direction
+
+### Key Properties
+
+- prop.flipDirection [attr: flip-direction]: 'horizontal'|'vertical', default='horizontal' — Allows the flipcard to flip vertically or horizontally.
+- prop.placement: 'top'|'bottom', default='top' — Determines the placement of the contents of the flipcard.
+- prop.frontVariant [attr: front-variant]: 'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='primary' — Determines the variant of the front face of the flipcard.
+- prop.backVariant [attr: back-variant]: 'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='primary' — Determines the variant of the back face of the flipcard.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-flip-front: Emmited when the front face of the flipcard is clicked.
+- event.sd-flip-back: Emmited when the back face of the flipcard is clicked.
+
+### Slots
+
+- slot.front: The front face of the flipcard.
+- slot.back: The back face of the flipcard.
+- slot.media-front: An optional media slot which can be as a background. Dependent from gradient variant.
+- slot.media-back: An optional media slot which can be as a background. Dependent from gradient variant.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.front: The container that wraps the front-side of the flipcard.
+- part.back: The container that wraps the back-side of the flipcard.
+- part.front-button: The button that flips the flipcard to the back.
+- part.back-button: The button that flips the flipcard to the front.
+- part.front-interactive-container: The container that wraps the front side and the flip button.
+- part.back-interactive-container: The container that wraps the back side and the flip button.
+- part.front-slot-container: The container that wraps the front slot.
+- part.back-slot-container: The container that wraps the back slot.
+- part.media-front: The container that wraps the media-front slot.
+- part.media-back: The container that wraps the media-back slot.
+- part.front-secondary-gradient: The container that wraps the secondary gradient of the front side.
+- part.back-secondary-gradient: The container that wraps the secondary gradient of the back side.
+
+## Guidelines
+
+### Use Cases
+
+- Present brief, essential information on the front with additional details on the back.
+- Highlight key features or benefits of a product or service.
+- Display before-and-after comparisons.
+- Showcase testimonials or quotes with more context on the flip side.
+
+### Rules
+
+### Content
+
+- Keep the front side simple and engaging to encourage users to flip the card.
+- Do not use for critical information that needs to be immediately visible.
+- Use with image, text or both content types.
+- Keep alignment consistent on both sides, i.e. if you have top-aligned content on the front side, the content on the flip side should also be top aligned.
+
+### Interaction
+
+- Ensure action items are placed exclusively on the back of the sd-flipcard with exception for the flip button that should be visible on both sides.
+
+### Context of Use
+
+- Avoid using in contexts where users might not understand the flipping interaction.
+- Avoid using in time-sensitive environments.
+
+### Accessibility
+
+- Use only for non-critical information. Hiding content can become a potential barrier, making it more challenging for users to access information.
+- Keep the flip button to make sure the flipping can be accessed over keyboard navigation.
+- 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-flipcard/stories/aspect-ratios.md

@@ -0,0 +1,26 @@
+Use the CSS property `aspect-ratio` to set the aspect ratio of the flipcard:
+
+- 3:4 ratio (default)
+- 16:9 ratio
+
+```html
+<sd-flipcard
+  flip-direction="horizontal"
+  front-variant="primary-100"
+  back-variant="primary-100"
+  style="aspect-ratio:3/4;"
+  class="mb-12"
+>
+  <p slot="front" class="slot slot--border slot--text h-12 w-full">Front slot</p>
+  <p slot="back" class="slot slot--border slot--text h-12 w-full">Back slot</p>
+</sd-flipcard>
+<sd-flipcard
+  flip-direction="horizontal"
+  front-variant="primary-100"
+  back-variant="primary-100"
+  style="aspect-ratio:16/9"
+>
+  <p slot="front" class="slot slot--border slot--text h-12 w-full">Front slot</p>
+  <p slot="back" class="slot slot--border slot--text h-12 w-full">Back slot</p>
+</sd-flipcard>
+```

package/metadata/packages/components/sd-flipcard/stories/flip-direction.md

@@ -0,0 +1,17 @@
+Use the `flip-direction` attribute to determine the direction of the flipcard:
+
+- `horizontal` (default)
+- `vertical`
+
+```html
+<div class="grid grid-cols-2 gap-8">
+  <sd-flipcard flip-direction="horizontal">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+  </sd-flipcard>
+  <sd-flipcard flip-direction="vertical">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+  </sd-flipcard>
+</div>
+```

package/metadata/packages/components/sd-flipcard/stories/placement.md

@@ -0,0 +1,17 @@
+Use the `placement` attribute to set the position variant:
+
+- `top`
+- `bottom`
+
+```html
+<div class="grid grid-cols-2 gap-8">
+  <sd-flipcard flip-direction="horizontal" placement="top">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+  </sd-flipcard>
+  <sd-flipcard flip-direction="horizontal" placement="bottom">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+  </sd-flipcard>
+</div>
+```

package/metadata/packages/components/sd-flipcard/stories/variants.md

@@ -0,0 +1,51 @@
+Use the `variant` attribute to set the color variant for front or back:
+
+- `primary` (default)
+- `primary-100`
+- `gradient-light`
+- `gradient-dark`
+
+```html
+<div class="grid grid-cols-2 gap-8">
+  <sd-flipcard flip-direction="horizontal" front-variant="primary" back-variant="primary">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+  </sd-flipcard>
+  <sd-flipcard flip-direction="horizontal" front-variant="primary-100" back-variant="primary-100">
+    <p slot="front" class="slot slot--border slot--text h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text h-12 w-full">Back slot</p>
+  </sd-flipcard>
+  <sd-flipcard flip-direction="horizontal" front-variant="gradient-light" back-variant="gradient-light">
+    <p slot="front" class="slot slot--border slot--text h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text h-12 w-full">Back slot</p>
+    <img
+      slot="media-front"
+      class="object-cover h-full w-full"
+      src="./placeholders/images/generic.jpg"
+      alt="Generic Alt"
+    />
+    <img
+      slot="media-back"
+      class="object-cover h-full w-full"
+      src="./placeholders/images/generic.jpg"
+      alt="Generic Alt"
+    />
+  </sd-flipcard>
+  <sd-flipcard flip-direction="horizontal" front-variant="gradient-dark" back-variant="gradient-dark">
+    <p slot="front" class="slot slot--border slot--text slot--inverted h-12 w-full">Front slot</p>
+    <p slot="back" class="slot slot--border slot--text slot--inverted h-12 w-full">Back slot</p>
+    <img
+      slot="media-front"
+      class="object-cover h-full w-full"
+      src="./placeholders/images/generic.jpg"
+      alt="Generic Alt"
+    />
+    <img
+      slot="media-back"
+      class="object-cover h-full w-full"
+      src="./placeholders/images/generic.jpg"
+      alt="Generic Alt"
+    />
+  </sd-flipcard>
+</div>
+```

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

@@ -0,0 +1,60 @@
+## Overview
+
+`<sd-header>` — Used as a container for the main navigation of a website.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-header, example: fixed
+
+### Key Properties
+
+- prop.fixed: boolean, default=false — Determines whether the header is fixed or not. If the header is fixed at the top of the page, a shadow is shown underneath.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The header's default content.
+
+### CSS Parts
+
+- part.main: The container that wraps the header's content.
+
+## Guidelines
+
+### Use Cases
+
+- Display primary navigation links for easy access to different sections of the website.
+- Showcase the company logo prominently to reinforce brand identity.
+- Include links for user account access.
+- Provide a prominent search function to help users quickly find content.
+
+### Rules
+
+### Navigation Structure and Content
+
+- Include the logo, main navigation, and, if applicable, sub-brand logos and meta navigation.
+- Use the number of navigation items that best suits the content, always ensuring categories are clearly labeled and mutually exclusive.
+- Regularly update the navigation links to reflect current content and structure.
+
+### Layout
+
+- Place navigation items to the left, the logo at the top left, and meta navigation on the right in wider viewports to keep consistency across products.
+- In smaller viewports, place an expandable menu on the right to host navigation items while keeping the logo consistently on the left across all viewport sizes.
+- Keep the navigation fixed at the top of the website when scrolling back to the top.
+
+### Visual Style and Branding
+
+- Provide clear visual indicators for active or selected navigation items.
+- Refrain from customizing elements in ways that deviate from the brand identity.
+- Include the company logo prominently; do not use a header without the corresponding logo.
+
+### Accessibility
+
+- Refrain from injecting non-navigation or unrelated content (like dynamic elements) into the header container to avoid distracting or confusing assistive technology.
+- Provide a unique ID on the header container for skip links, ensuring keyboard users can quickly bypass navigation if desired.
+- When placing a logo in the header, the alt text should describe its target (e.g., 'Union Investment Homepage') rather than the image itself (e.g., 'Union Investment Logo'), and it should either match the visual label or at least start with the same words.

package/metadata/packages/components/sd-header/stories/fixed.md

@@ -0,0 +1,9 @@
+Use the `fixed` attribute to set the header to a fixed position.
+
+```html
+<div>
+  <sd-header fixed>
+    <div class="slot slot--border slot--text">Default slot</div>
+  </sd-header>
+</div>
+```

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

@@ -0,0 +1,35 @@
+## Overview
+
+`<sd-icon>` — Used to display icons.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-icon, example: name
+- component: sd-icon, example: label
+- component: sd-icon, example: color
+- component: sd-icon, example: size
+- component: sd-icon, example: libraries
+- component: sd-icon, example: custom-libraries
+
+### Key Properties
+
+- prop.name: string|undefined — The name of the icon to draw. Available names depend on the icon library being used.
+- prop.src: string|undefined — An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+  can result in XSS attacks. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon,
+  it might make sense to register a custom icon library.
+- prop.label: string, default='' — An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+  ignored by assistive devices.
+- prop.library: string, default='default' — The name of a registered custom icon library.
+- prop.color: 'currentColor'|'primary'|'white', default='currentColor' — The color of the icon.
+  "current" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-load: Emitted when the icon has loaded.
+- event.sd-error: Emitted when the icon fails to load due to an error.

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

@@ -0,0 +1,15 @@
+Use the `color` attribute to change an icon’s color
+
+- `currentColor` (default): Inherits the current text color, which makes it easy to style icons via CSS.
+- `primary`: Sets the color to the primary color.
+- `white`: Sets the color to white.
+
+```html
+<div class="flex gap-6">
+  <sd-icon class="p-2" name="union-investment/content/image" color="currentColor"></sd-icon>
+  <sd-icon class="p-2" name="union-investment/content/image" color="primary"></sd-icon>
+  <div class="p-2 bg-primary">
+    <sd-icon name="union-investment/content/image" color="white"></sd-icon>
+  </div>
+</div>
+```