@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

package/dist/cjs/{store-D-QYoTfP.js → store-CBJaw2iH.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-8U_M7Dc3.js');
+var index = require('./index-Bt15Fpma.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "components/01-base-components/ds-text-area/ds-text-area.js",
     "components/01-base-components/ds-text-input/ds-text-input.js",
     "components/01-base-components/ds-assistive-text/ds-assistive-text.js",
+    "components/01-base-components/ds-badge/ds-badge.js",
     "components/01-base-components/ds-breadcrumbs/ds-breadcrumbs.js",
     "components/01-base-components/ds-breadcrumbs/ds-breadcrumb/ds-breadcrumb.js",
     "components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-collapsible/ds-breadcrumbs-collapsible.js",

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -1,40 +1,40 @@
-.ds-accordion__BahgnS__open-button:focus-visible {
+.ds-accordion__kfFKF0__open-button:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-accordion__BahgnS__open-button .ds-accordion__BahgnS:hover:not(:focus-visible) .ds-accordion__BahgnS--border-aligned::before, .ds-accordion__BahgnS__open-button .ds-accordion__BahgnS:hover:not(:focus-visible) .ds-accordion__BahgnS--border-aligned::after {
+.ds-accordion__kfFKF0__open-button .ds-accordion__kfFKF0:hover:not(:focus-visible) .ds-accordion__kfFKF0--border-aligned::before, .ds-accordion__kfFKF0__open-button .ds-accordion__kfFKF0:hover:not(:focus-visible) .ds-accordion__kfFKF0--border-aligned::after {
   content: "";
   position: absolute;
   top: 0;
   width: var(--ds-spacing-small);
   height: 100%;
 }
-.ds-accordion__BahgnS__open-button .ds-accordion__BahgnS:hover:not(:focus-visible) .ds-accordion__BahgnS--border-aligned::before {
+.ds-accordion__kfFKF0__open-button .ds-accordion__kfFKF0:hover:not(:focus-visible) .ds-accordion__kfFKF0--border-aligned::before {
   left: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__BahgnS__open-button .ds-accordion__BahgnS:hover:not(:focus-visible) .ds-accordion__BahgnS--border-aligned::after {
+.ds-accordion__kfFKF0__open-button .ds-accordion__kfFKF0:hover:not(:focus-visible) .ds-accordion__kfFKF0--border-aligned::after {
   right: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__BahgnS__open-button:hover {
+.ds-accordion__kfFKF0__open-button:hover {
   cursor: pointer;
 }
-.ds-accordion__BahgnS__open-button:hover, .ds-accordion__BahgnS__open-button:hover::before, .ds-accordion__BahgnS__open-button:hover::after {
+.ds-accordion__kfFKF0__open-button:hover, .ds-accordion__kfFKF0__open-button:hover::before, .ds-accordion__kfFKF0__open-button:hover::after {
   background: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__BahgnS__open-button:active, .ds-accordion__BahgnS__open-button:active::before, .ds-accordion__BahgnS__open-button:active::after {
+.ds-accordion__kfFKF0__open-button:active, .ds-accordion__kfFKF0__open-button:active::before, .ds-accordion__kfFKF0__open-button:active::after {
   background: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__BahgnS__open-button:focus-visible {
+.ds-accordion__kfFKF0__open-button:focus-visible {
   z-index: 1;
 }
-.ds-accordion__BahgnS__open-button {
+.ds-accordion__kfFKF0__open-button {
   color: var(--ds-textColor-default);
   outline: var(--ds-borderWidth-thick) solid transparent;
   fill: var(--ds-textColor-default);
   position: relative;
 }
-.ds-accordion__BahgnS__open-button.ds-accordion__BahgnS--default {
+.ds-accordion__kfFKF0__open-button.ds-accordion__kfFKF0--default {
   padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-18);
@@ -42,19 +42,19 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
-.ds-accordion__BahgnS__open-button.ds-accordion__BahgnS--compact {
+.ds-accordion__kfFKF0__open-button.ds-accordion__kfFKF0--compact {
   font-size: var(--ds-fontSize-16);
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   line-height: var(--ds-lineHeight-large);
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-accordion__BahgnS__open-button.ds-accordion__BahgnS--border-aligned:not(:focus-visible) {
+.ds-accordion__kfFKF0__open-button.ds-accordion__kfFKF0--border-aligned:not(:focus-visible) {
   padding-inline: 0;
   margin-inline: var(--ds-spacing-small);
   position: relative;
   width: calc(100% - var(--ds-spacing-large));
 }
-.ds-accordion__BahgnS__open-button {
+.ds-accordion__kfFKF0__open-button {
   all: unset;
   align-items: flex-start;
   box-sizing: border-box;
@@ -64,16 +64,16 @@
   position: relative;
   width: 100%;
 }
-:host(:first-child) .ds-accordion__BahgnS__open-button:not(.ds-accordion__BahgnS--hide-top-border) {
+:host(:first-child) .ds-accordion__kfFKF0__open-button:not(.ds-accordion__kfFKF0--hide-top-border) {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-:host(:first-child) .ds-accordion__BahgnS__open-button:not(.ds-accordion__BahgnS--hide-top-border):focus-visible {
+:host(:first-child) .ds-accordion__kfFKF0__open-button:not(.ds-accordion__kfFKF0--hide-top-border):focus-visible {
   border-top-color: transparent;
 }
-.ds-accordion__BahgnS__open-button:not(.ds-accordion__BahgnS--hide-bottom-border)[aria-expanded=false] {
+.ds-accordion__kfFKF0__open-button:not(.ds-accordion__kfFKF0--hide-bottom-border)[aria-expanded=false] {
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__BahgnS__panel--border-aligned::before {
+.ds-accordion__kfFKF0__panel--border-aligned::before {
   display: inline-block;
   content: " ";
   position: absolute;
@@ -83,7 +83,7 @@
   background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
-.ds-accordion__BahgnS__panel--border-aligned::after {
+.ds-accordion__kfFKF0__panel--border-aligned::after {
   display: inline-block;
   content: " ";
   position: absolute;
@@ -93,44 +93,44 @@
   background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
-.ds-accordion__BahgnS__panel--border-aligned {
+.ds-accordion__kfFKF0__panel--border-aligned {
   position: relative;
   width: calc(100% - 32px);
 }
-.ds-accordion__BahgnS__panel--expanded {
+.ds-accordion__kfFKF0__panel--expanded {
   display: block;
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   padding-inline: var(--ds-spacing-small);
 }
-.ds-accordion__BahgnS__panel--expanded self__panel--hide-bottom-border {
+.ds-accordion__kfFKF0__panel--expanded self__panel--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__BahgnS ::slotted([slot=header]) {
+.ds-accordion__kfFKF0 ::slotted([slot=header]) {
   color: var(--ds-textColor-default);
 }
-.ds-accordion__BahgnS__content {
+.ds-accordion__kfFKF0__content {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
   padding-block: var(--ds-spacing-2xSmall) var(--ds-spacing-small);
 }
-.ds-accordion__BahgnS__content .ds-accordion__BahgnS--default {
+.ds-accordion__kfFKF0__content .ds-accordion__kfFKF0--default {
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-xLarge);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
 @media (min-width: 30rem) {
-  .ds-accordion__BahgnS__content .ds-accordion__BahgnS--default {
+  .ds-accordion__kfFKF0__content .ds-accordion__kfFKF0--default {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-accordion__BahgnS__content .ds-accordion__BahgnS--compact {
+.ds-accordion__kfFKF0__content .ds-accordion__kfFKF0--compact {
   font-size: var(--fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
-.ds-accordion__BahgnS__close-button {
+.ds-accordion__kfFKF0__close-button {
   display: flex;
   flex-direction: row;
   gap: var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -68,9 +68,9 @@ export class DsAccordion {
                 [`${baseClass}__panel--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
                 [`${baseClass}__panel--hide-bottom-border`]: this.dsHideBottomBorder,
-            }), hidden: !this.isExpanded }, h("div", { key: '4ccc901a02799d39641145366730bf1726f95cf0', class: `${baseClass}__content` }, h("slot", { key: '7027a2e3dc1784ecfe8be6f18a12c7a2b414affb', name: "content" })), this.dsUseCloseButton && (h(DsButton, { key: 'c5230e81cdbe042a4578a4acd3c704087a2ba1b8', id: `${this.dsId}-close-button`, class: classNames(`${baseClass}__close-button`, `${baseClass}--${this.dsVariant}`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '4ccc901a02799d39641145366730bf1726f95cf0', class: `${baseClass}__content` }, h("slot", { key: '7027a2e3dc1784ecfe8be6f18a12c7a2b414affb', name: "content" })), this.dsUseCloseButton && (h(DsButton, { key: 'fc4ba607169579bf4caa03736fd8d585810dd83d', id: `${this.dsId}-close-button`, class: classNames(`${baseClass}__close-button`, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--border-aligned`]: this.dsBorderAligned,
-            }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsValue: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
+            }), dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel, dsSize: buttonSize, dsType: "button" }))))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-assistive-text/ds-assistive-text.css

@@ -1,4 +1,4 @@
-.ds-assistive-text__BahgnS {
+.ds-assistive-text__kfFKF0 {
   display: inline-block;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

package/dist/collection/components/01-base-components/ds-badge/ds-badge.css

@@ -0,0 +1,47 @@
+.ds-badge__kfFKF0 {
+  display: flex;
+  width: fit-content;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0 var(--ds-spacing-3xSmall, 4px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--ds-spacing-3xSmall, 4px);
+  border-radius: 12px;
+}
+.ds-badge__kfFKF0--default {
+  background-color: var(--ds-overlay-black-10);
+  color: var(--ds-textColor-default);
+}
+.ds-badge__kfFKF0--success {
+  background-color: var(--ds-bgColor-success);
+  color: var(--ds-textColor-success);
+}
+.ds-badge__kfFKF0--attention {
+  background-color: var(--ds-bgColor-attention);
+  color: var(--ds-textColor-attention);
+}
+.ds-badge__kfFKF0--danger {
+  background-color: var(--ds-bgColor-danger);
+  color: var(--ds-textColor-danger);
+}
+.ds-badge__kfFKF0--info {
+  background-color: var(--ds-bgColor-info);
+  color: var(--ds-textColor-info);
+}
+.ds-badge__kfFKF0--notification {
+  background-color: var(--ds-palette-red-50);
+  color: var(--ds-textColor-white);
+}
+.ds-badge__kfFKF0--primary {
+  background-color: var(--ds-bgColor-primary);
+  color: var(--ds-textColor-white);
+}
+.ds-badge__kfFKF0__content {
+  display: flex;
+  padding: 0 var(--ds-spacing-3xSmall, 4px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--ds-spacing-2xSmall, 8px);
+}

package/dist/collection/components/01-base-components/ds-badge/ds-badge.js

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { cx } from "../../../utils/cx";
+import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+const dsBadgeIdGenerator = idGenerator('ds-badge');
+export class DsBadge {
+    el;
+    dsId = dsBadgeIdGenerator.next().value;
+    dsText = '';
+    dsVariant = 'default';
+    dsHiddenAssistiveText;
+    dsAriaLabel;
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-badge', this.el);
+    }
+    render() {
+        const baseClass = cx('ds-badge');
+        return (h("div", { key: '6dd38424a4fcec26f23cd1cb786d157ce15b2b7b', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`) }, h("div", { key: '770553990729afbc0458ccde1e1a6b42b01d25cb', class: `${baseClass}__content` }, h("span", { key: '0b17909fc5964f7d6dc7d8d8dd61ba9c67455dec', class: "ds-text-semibold-xs", id: this.dsId, "aria-label": this.dsAriaLabel }, h("slot", { key: '8eb5b5c05ea8553aa67d69ef1c1c16183fcfcb69' }, this.dsText, this.dsHiddenAssistiveText && h(this.DsVisuallyHidden, { key: '811fd217607129b96888df7d5d2a122131cff3e4', dsTag: "span" }, this.dsHiddenAssistiveText))))));
+    }
+    static get is() { return "ds-badge"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-id",
+                "defaultValue": "dsBadgeIdGenerator.next().value as string"
+            },
+            "dsText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text content of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-text",
+                "defaultValue": "''"
+            },
+            "dsVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'attention' | 'danger' | 'info' | 'notification' | 'primary'",
+                    "resolved": "\"attention\" | \"danger\" | \"default\" | \"info\" | \"notification\" | \"primary\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant style of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-variant",
+                "defaultValue": "'default'"
+            },
+            "dsHiddenAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Assistive text for screen readers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-hidden-assistive-text"
+            },
+            "dsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-label` attribute of the `span` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+declareComponentDependencies([h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-badge/stories/ds-badge.features.stories.js

@@ -0,0 +1,56 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Badge/Features',
+    component: 'ds-badge',
+    args: {
+        dsVariant: 'default',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsText: '8',
+    },
+};
+export const Success = {
+    args: {
+        dsVariant: 'success',
+        dsText: '+53%',
+    },
+};
+export const Attention = {
+    args: {
+        dsVariant: 'attention',
+        dsText: '500+',
+    },
+};
+export const Danger = {
+    args: {
+        dsVariant: 'danger',
+        dsText: '500+',
+    },
+};
+export const Info = {
+    args: {
+        dsVariant: 'info',
+        dsText: '500+',
+    },
+};
+export const Notification = {
+    args: {
+        dsVariant: 'notification',
+        dsText: '15',
+    },
+};
+export const Primary = {
+    args: {
+        dsVariant: 'primary',
+        dsText: '15',
+    },
+};
+export const Slots = {
+    args: {
+        dsText: '',
+    },
+    render: args => html ` <ds-badge ds-variant="${args.dsVariant}"> Default slot </ds-badge> `,
+};

package/dist/collection/components/01-base-components/ds-badge/stories/ds-badge.stories.js

@@ -0,0 +1,11 @@
+const meta = {
+    title: 'Base Components/Badge',
+    component: 'ds-badge',
+    args: {
+        dsText: '8',
+        dsVariant: 'default',
+    },
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumb/ds-breadcrumb.css

@@ -2,20 +2,20 @@
   display: contents;
 }
 
-.ds-breadcrumb__BahgnS {
+.ds-breadcrumb__kfFKF0 {
   display: contents;
 }
-.ds-breadcrumb__BahgnS--hidden {
+.ds-breadcrumb__kfFKF0--hidden {
   display: none;
 }
-.ds-breadcrumb__BahgnS__content {
+.ds-breadcrumb__kfFKF0__content {
   display: inline;
   vertical-align: middle;
 }
-.ds-breadcrumb__BahgnS__content__link::part(link) {
+.ds-breadcrumb__kfFKF0__content__link::part(link) {
   vertical-align: middle;
 }
-.ds-breadcrumb__BahgnS__content__current-page {
+.ds-breadcrumb__kfFKF0__content__current-page {
   color: var(--ds-textColor-secondary);
   font-variant-numeric: lining-nums proportional-nums;
   font-family: var(--ds-fontFamily-body);

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumb/ds-breadcrumb.js

@@ -42,9 +42,9 @@ export class DsBreadcrumb extends Mixin(linkFactory) {
     render() {
         const baseClass = cx('ds-breadcrumb');
         const contentClass = `${baseClass}__content`;
-        return (h(Host, { key: '26bf34eeaba66b557f2582362b3dacc568813c17', role: "listitem" }, h("div", { key: '2ddd55205a47513b3d53892c5e0dd9580bb8cfb6', class: classNames(baseClass, {
+        return (h(Host, { key: '908f257c3483a57aace5356a3ee664abb016a385', role: "listitem" }, h("div", { key: 'c57fc14d4f1df21ec84a08adbf68e460b58326c0', class: classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, h("div", { key: '644d314c8c0359fc833a6d5a4afec6918aa04e2e', class: contentClass }, this.dsHasSeparator ? h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
+            }) }, h("div", { key: 'e7170fd4d6db6c355919f7b1a3185a522b3f584e', class: contentClass }, this.dsHasSeparator ? h(this.DsBreadcrumbsSeparator, { dsIcon: this.dsSeparatorIcon }) : null, this.dsIsCurrentPage ? this.renderCurrentPageCrumb(contentClass) : this.renderLinkCrumb(contentClass)))));
     }
     static get is() { return "ds-breadcrumb"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-collapsible/ds-breadcrumbs-collapsible.js

@@ -26,7 +26,7 @@ export class DsBreadcrumbsCollapsible {
         this.collapsibleTarget = this.el.querySelector(this.DsBreadcrumb);
     };
     render() {
-        return (h(Fragment, { key: '4893d8a7d27444d7d73a232d8df5039eb43c09e9' }, h(this.DsBreadcrumbsExpandButton, { key: '9d851cf0d95bf67df35eb1f507b05f09b50a4cbb', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), h("slot", { key: 'a294dff7129a7c53d6c06a40cea541712c061e0c', onSlotchange: this.handleDefaultSlotChange })));
+        return (h(Fragment, { key: '00b51db6395dda6347a68e2e0558ecc030ff0978' }, h(this.DsBreadcrumbsExpandButton, { key: '20010f18dda5bab38f2aed8fbe18769f318483c1', dsIsHidden: this.dsIsExpandButtonHidden, dsSeparatorIcon: this.dsSeparatorIcon }), h("slot", { key: '1a2fe714ff749a07a412589ead8a3fedff012494', onSlotchange: this.handleDefaultSlotChange })));
     }
     static get is() { return "ds-breadcrumbs-collapsible"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-expand-button/ds-breadcrumbs-expand-button.css

@@ -1,16 +1,16 @@
-.ds-breadcrumbs-expand-button__BahgnS {
+.ds-breadcrumbs-expand-button__kfFKF0 {
   display: inline;
   vertical-align: middle;
 }
-.ds-breadcrumbs-expand-button__BahgnS--hidden {
+.ds-breadcrumbs-expand-button__kfFKF0--hidden {
   display: none;
 }
-.ds-breadcrumbs-expand-button__BahgnS__button:focus-visible {
+.ds-breadcrumbs-expand-button__kfFKF0__button:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-breadcrumbs-expand-button__BahgnS__button {
+.ds-breadcrumbs-expand-button__kfFKF0__button {
   background: none;
   border: none;
   padding: 0;
@@ -32,7 +32,7 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-breadcrumbs-expand-button__BahgnS__button:hover, .ds-breadcrumbs-expand-button__BahgnS__button:active {
+.ds-breadcrumbs-expand-button__kfFKF0__button:hover, .ds-breadcrumbs-expand-button__kfFKF0__button:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-expand-button/ds-breadcrumbs-expand-button.js

@@ -26,9 +26,9 @@ export class DsBreadcrumbsExpandButton {
     };
     render() {
         const baseClass = cx('ds-breadcrumbs-expand-button');
-        return (h("div", { key: '6da34d42a909d8a1d0e2fe521f7a355d3b8e6a9b', role: "listitem", class: classNames(baseClass, {
+        return (h("div", { key: '613c93d1ecb890375e7c7707318c1562a13ef311', role: "listitem", class: classNames(baseClass, {
                 [`${baseClass}--hidden`]: this.dsIsHidden,
-            }) }, h(this.DsBreadcrumbsSeparator, { key: 'd2e406878b8545e823f554f77d5c7d215a386d2d', dsIcon: this.dsSeparatorIcon }), h("button", { key: 'e3b174f2ad1b474ea687a7ae62a7ed802b932498', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
+            }) }, h(this.DsBreadcrumbsSeparator, { key: 'eebadf5d1d4a04a3089ac79b84174781334310e8', dsIcon: this.dsSeparatorIcon }), h("button", { key: '54ef6065c84a1e8319b15ae78830ffddc147e677', "aria-label": this.showFullBreadcrumbTrail, class: `${baseClass}__button`, onClick: this.handleExpandButtonClick }, "\u2026")));
     }
     static get is() { return "ds-breadcrumbs-expand-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-separator/ds-breadcrumbs-separator.css

@@ -1,4 +1,4 @@
-.ds-breadcrumbs-separator__BahgnS {
+.ds-breadcrumbs-separator__kfFKF0 {
   display: inline-block;
   line-height: var(--ds-lineHeight-large);
   vertical-align: middle;
@@ -6,7 +6,7 @@
   margin-right: var(--ds-spacing-3xSmall, 4px);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs-separator__BahgnS {
+  .ds-breadcrumbs-separator__kfFKF0 {
     margin-left: var(--ds-spacing-2xSmall, 8px);
     margin-right: var(--ds-spacing-2xSmall, 8px);
   }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs-separator/ds-breadcrumbs-separator.js

@@ -9,7 +9,7 @@ export class DsBreadcrumbsSeparator {
     }
     render() {
         const baseClass = cx('ds-breadcrumbs-separator');
-        return h(this.DsIcon, { key: '0feda7224034bd4074c8fe7d0efaed862ab3daf4', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
+        return h(this.DsIcon, { key: 'fc224417870ebe248876aab41fe654882ac00b62', class: baseClass, dsName: this.dsIcon, dsSize: "1rem" });
     }
     static get is() { return "ds-breadcrumbs-separator"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs.css

@@ -1,4 +1,4 @@
-.ds-breadcrumbs__BahgnS {
+.ds-breadcrumbs__kfFKF0 {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -7,11 +7,11 @@
   line-height: var(--ds-lineHeight-small);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs__BahgnS {
+  .ds-breadcrumbs__kfFKF0 {
     min-height: 32px;
   }
 }
-.ds-breadcrumbs__BahgnS__breadcrumbs {
+.ds-breadcrumbs__kfFKF0__breadcrumbs {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
@@ -21,7 +21,7 @@
   font-size: var(--ds-fontSize-14);
 }
 @media (min-width: 60rem) {
-  .ds-breadcrumbs__BahgnS__breadcrumbs {
+  .ds-breadcrumbs__kfFKF0__breadcrumbs {
     padding: var(--ds-spacing-4xSmall, 2px) 0;
     font-size: var(--ds-fontSize-16);
   }

package/dist/collection/components/01-base-components/ds-breadcrumbs/ds-breadcrumbs.js

@@ -31,7 +31,7 @@ export class DsBreadcrumbs {
     }
     render() {
         const baseClass = cx('ds-breadcrumbs');
-        return (h("nav", { key: '9bd5d6670c943be0e1631af7f591655e751a7d05', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: '209853be22cc61d74ba970db4646bbc4ed3c9d1c', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '792d969633643099bc55d26aa4fd831de0c5b7e9' }))));
+        return (h("nav", { key: '3346bddfcd085024dfe2157733c16f87881413a0', class: baseClass, "aria-label": this.dsAriaLabel || this.breadcrumb }, h("div", { key: '0e221372dd91b3030a0329c77049046639f7e25a', role: "list", class: `${baseClass}__breadcrumbs` }, h("slot", { key: '5603b5cb178fb3b68a4c9aedec9f684aa668df6a' }))));
     }
     static get is() { return "ds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }