@uh-design-system/component-library 1.5.2-rc.1 → 1.6.0-rc.0

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

@@ -0,0 +1,89 @@
+import { html } from "lit";
+import { appData } from "../../../..";
+import { convertToRibbonLinks } from "../../../../utils/ribbon/ribbonUtils";
+const { ribbon: ribbonData } = appData.v1;
+const meta = {
+    title: 'Base Components/Ribbon/Internationalization',
+    component: 'ds-ribbon',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Ribbon component with internationalization support. Links and texts automatically adapt based on the language set in ds-store component. Default links are provided for University of Helsinki.',
+            },
+        },
+    },
+};
+export default meta;
+export const Finnish = {
+    render: () => html `
+    <ds-store ds-language="fi"></ds-store>
+    <ds-ribbon
+      ds-icon="${ribbonData.config.dsIcon}"
+      ds-site-name="${ribbonData.siteNames.fi}"
+      ds-sites-text="${ribbonData.uiTexts.sites.fi}"
+      ds-close-text="${ribbonData.uiTexts.close.fi}"
+      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.fi}"
+      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.fi}"
+      .dsLinks="${convertToRibbonLinks(ribbonData.links.fi, ribbonData, 'fi')}"
+      .dsBrandingUrls="${ribbonData.brandingUrls}"
+    ></ds-ribbon>
+  `,
+};
+export const Swedish = {
+    render: () => html `
+    <ds-store ds-language="sv"></ds-store>
+    <ds-ribbon
+      ds-icon="${ribbonData.config.dsIcon}"
+      ds-site-name="${ribbonData.siteNames.sv}"
+      ds-sites-text="${ribbonData.uiTexts.sites.sv}"
+      ds-close-text="${ribbonData.uiTexts.close.sv}"
+      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.sv}"
+      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.sv}"
+      .dsLinks="${convertToRibbonLinks(ribbonData.links.sv, ribbonData, 'sv')}"
+      .dsBrandingUrls="${ribbonData.brandingUrls}"
+    ></ds-ribbon>
+  `,
+};
+export const English = {
+    render: () => html `
+    <ds-store ds-language="en"></ds-store>
+    <ds-ribbon
+      ds-icon="${ribbonData.config.dsIcon}"
+      ds-site-name="${ribbonData.siteNames.en}"
+      ds-sites-text="${ribbonData.uiTexts.sites.en}"
+      ds-close-text="${ribbonData.uiTexts.close.en}"
+      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.en}"
+      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.en}"
+      .dsLinks="${convertToRibbonLinks(ribbonData.links.en, ribbonData, 'en')}"
+      .dsBrandingUrls="${ribbonData.brandingUrls}"
+    ></ds-ribbon>
+  `,
+};
+export const LanguageSwitcher = {
+    args: {
+        language: 'fi',
+    },
+    argTypes: {
+        language: {
+            control: 'select',
+            options: ['fi', 'sv', 'en'],
+            description: 'Select language to see the ribbon content change',
+        },
+    },
+    render: args => {
+        const lang = args.language;
+        return html `
+      <ds-store ds-language="${lang}"></ds-store>
+      <ds-ribbon
+        ds-icon="${ribbonData.config.dsIcon}"
+        ds-site-name="${ribbonData.siteNames[lang]}"
+        ds-sites-text="${ribbonData.uiTexts.sites[lang]}"
+        ds-close-text="${ribbonData.uiTexts.close[lang]}"
+        ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel[lang]}"
+        ds-logo-aria-label="${ribbonData.uiTexts.logoLabel[lang]}"
+        .dsLinks="${convertToRibbonLinks(ribbonData.links[lang], ribbonData, lang)}"
+        .dsBrandingUrls="${ribbonData.brandingUrls}"
+      ></ds-ribbon>
+    `;
+    },
+};

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

@@ -0,0 +1,139 @@
+import { html } from "lit";
+import { appData } from "../../../..";
+import { convertToRibbonLinks } from "../../../../utils/ribbon/ribbonUtils";
+const { ribbon: ribbonData } = appData.v1;
+const meta = {
+    title: 'Base Components/Ribbon',
+    component: 'ds-ribbon',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Navigation ribbon that appears at the top of the site as a banner. Shows logo and site name on the left, navigation links that adapt based on screen size. Links and texts are automatically translated based on the current language. **Note: This component renders as a <nav> element and can be placed inside a <header> element in your application.**',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        ...ribbonData.config,
+        dsSiteName: ribbonData.siteNames.en,
+        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
+        dsBrandingUrls: ribbonData.brandingUrls,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
+        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
+        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
+    },
+    render: args => html `
+    <ds-ribbon
+      ds-icon="${args.dsIcon}"
+      ds-site-name="${args.dsSiteName}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
+      ds-nav-aria-label="${args.dsNavAriaLabel}"
+      ds-logo-aria-label="${args.dsLogoAriaLabel}"
+      .dsLinks="${args.dsLinks}"
+      .dsBrandingUrls="${args.dsBrandingUrls}"
+    ></ds-ribbon>
+  `,
+};
+export const WithoutBranding = {
+    args: {
+        ...ribbonData.config,
+        dsSiteName: ribbonData.siteNames.en,
+        dsHideBranding: true,
+        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
+        dsBrandingUrls: ribbonData.brandingUrls,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
+        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
+        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
+    },
+    render: args => html `
+    <ds-ribbon
+      ds-icon="${args.dsIcon}"
+      ds-site-name="${args.dsSiteName}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
+      ds-nav-aria-label="${args.dsNavAriaLabel}"
+      ds-logo-aria-label="${args.dsLogoAriaLabel}"
+      ?ds-hide-branding="${args.dsHideBranding}"
+      .dsLinks="${args.dsLinks}"
+      .dsBrandingUrls="${args.dsBrandingUrls}"
+    ></ds-ribbon>
+  `,
+};
+export const CustomTagName = {
+    args: {
+        ...ribbonData.config,
+        dsSiteName: ribbonData.siteNames.en,
+        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
+        dsBrandingUrls: ribbonData.brandingUrls,
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
+        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
+        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
+    },
+    render: args => html `
+    <custom-ds-ribbon
+      ds-icon="${args.dsIcon}"
+      ds-site-name="${args.dsSiteName}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
+      ds-nav-aria-label="${args.dsNavAriaLabel}"
+      ds-logo-aria-label="${args.dsLogoAriaLabel}"
+      .dsLinks="${args.dsLinks}"
+      .dsBrandingUrls="${args.dsBrandingUrls}"
+    ></custom-ds-ribbon>
+  `,
+};
+export const WithExternalData = {
+    args: {
+        dsDataUrl: 'https://cdn.jsdelivr.net/npm/@uh-design-system/component-library@1.1.0/dist/data.json',
+    },
+    argTypes: {
+        dsDataUrl: { control: 'text' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Ribbon component that fetches data from an external JSON file using the dsDataUrl property. You can change the URL in the controls to test with different data sources.',
+            },
+        },
+    },
+    render: args => html ` <ds-ribbon ds-data-url="${args.dsDataUrl}"></ds-ribbon> `,
+};
+export const Playground = {
+    args: {
+        ...ribbonData.config,
+        dsSiteName: ribbonData.siteNames.en,
+        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
+        dsMobileToggleText: ribbonData.uiTexts.sites.en,
+        dsCloseButtonText: ribbonData.uiTexts.close.en,
+        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
+        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
+    },
+    argTypes: {
+        dsIcon: { control: 'text' },
+        dsSiteName: { control: 'text' },
+        dsHideBranding: { control: 'boolean' },
+        dsLinks: { control: 'object' },
+        dsMobileToggleText: { control: 'text' },
+        dsCloseButtonText: { control: 'text' },
+        dsNavAriaLabel: { control: 'text' },
+        dsLogoAriaLabel: { control: 'text' },
+    },
+    render: args => html `
+    <ds-ribbon
+      ds-icon="${args.dsIcon}"
+      ds-site-name="${args.dsSiteName}"
+      ds-mobile-toggle-text="${args.dsMobileToggleText}"
+      ds-close-button-text="${args.dsCloseButtonText}"
+      ds-nav-aria-label="${args.dsNavAriaLabel}"
+      ds-logo-aria-label="${args.dsLogoAriaLabel}"
+      ?ds-hide-branding="${args.dsHideBranding}"
+      .dsLinks="${args.dsLinks}"
+    ></ds-ribbon>
+  `,
+};

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.css

@@ -3,7 +3,7 @@
   width: var(--ds-select-narrow-width, 100%);
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__m9sbXh--full-width)):host {
+  :not(:has(.ds-select__cpPWV0--full-width)):host {
     width: var(--ds-select-wide-width, 20rem);
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select__m9sbXh-native, .ds-select__m9sbXh-custom {
+.ds-select__cpPWV0-native, .ds-select__cpPWV0-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@
   width: 100%;
 }
 
-.ds-select__m9sbXh-native__dropdown-icon, .ds-select__m9sbXh-custom__dropdown-icon {
+.ds-select__cpPWV0-native__dropdown-icon, .ds-select__cpPWV0-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -37,60 +37,60 @@
   padding: var(--ds-select-dropdown-icon-padding, 0 var(--ds-spacing-2xSmall));
 }
 
-.ds-select__m9sbXh-custom-wrapper {
+.ds-select__cpPWV0-custom-wrapper {
   position: relative;
 }
 
-.ds-select__m9sbXh-custom .ds-options__m9sbXh {
+.ds-select__cpPWV0-custom .ds-options__cpPWV0 {
   display: block;
 }
-.ds-select__m9sbXh-custom-input-container {
+.ds-select__cpPWV0-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__m9sbXh-custom-input-container:has(.ds-select__m9sbXh-custom__clear-button:hover) .ds-select__m9sbXh-custom {
+.ds-select__cpPWV0-custom-input-container:has(.ds-select__cpPWV0-custom__clear-button:hover) .ds-select__cpPWV0-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__m9sbXh-custom:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled):hover {
+.ds-select__cpPWV0-custom:not(.ds-select__cpPWV0-custom--open, .ds-select__cpPWV0-custom--invalid, .ds-select__cpPWV0-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__m9sbXh-custom:active:not(.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom--invalid, .ds-select__m9sbXh-custom--disabled) {
+.ds-select__cpPWV0-custom:active:not(.ds-select__cpPWV0-custom--open, .ds-select__cpPWV0-custom--invalid, .ds-select__cpPWV0-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__m9sbXh-custom--open, .ds-select__m9sbXh-custom:focus-visible {
+.ds-select__cpPWV0-custom--open, .ds-select__cpPWV0-custom: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-select__m9sbXh-custom--open:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid), .ds-select__m9sbXh-custom:focus-visible:not(.ds-select__m9sbXh-custom--open--invalid, .ds-select__m9sbXh-custom:focus-visible--invalid) {
+.ds-select__cpPWV0-custom--open:not(.ds-select__cpPWV0-custom--open--invalid, .ds-select__cpPWV0-custom:focus-visible--invalid), .ds-select__cpPWV0-custom:focus-visible:not(.ds-select__cpPWV0-custom--open--invalid, .ds-select__cpPWV0-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__m9sbXh-custom--disabled {
+.ds-select__cpPWV0-custom--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__m9sbXh-custom--disabled .ds-select__m9sbXh-custom__dropdown-icon {
+.ds-select__cpPWV0-custom--disabled .ds-select__cpPWV0-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__m9sbXh-custom--invalid {
+.ds-select__cpPWV0-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--open, .ds-select__m9sbXh-custom--invalid--disabled):active {
+.ds-select__cpPWV0-custom--invalid:not(.ds-select__cpPWV0-custom--invalid--open, .ds-select__cpPWV0-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__m9sbXh-custom--invalid:not(.ds-select__m9sbXh-custom--invalid--disabled):hover {
+.ds-select__cpPWV0-custom--invalid:not(.ds-select__cpPWV0-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__m9sbXh-custom__dropdown-icon--has-clear-button {
+.ds-select__cpPWV0-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__m9sbXh-custom__selected-option {
+.ds-select__cpPWV0-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -105,27 +105,27 @@
   padding-left: var(--ds-select-selected-option-padding, var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px)));
   padding-right: var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
 }
-.ds-select__m9sbXh-custom--has-icon .ds-select__m9sbXh-custom__selected-option {
+.ds-select__cpPWV0-custom--has-icon .ds-select__cpPWV0-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__m9sbXh-custom__selected-option__placeholder-icon {
+.ds-select__cpPWV0-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__m9sbXh-custom__selected-option__text {
+.ds-select__cpPWV0-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__m9sbXh-custom__selected-option__text--none-selected {
+.ds-select__cpPWV0-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__m9sbXh-custom__selected-option__text--disabled {
+.ds-select__cpPWV0-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__m9sbXh-custom input {
+.ds-select__cpPWV0-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -139,53 +139,53 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__m9sbXh-custom input::placeholder {
+.ds-select__cpPWV0-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__m9sbXh-custom input:disabled {
+.ds-select__cpPWV0-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__m9sbXh-custom input:disabled::placeholder {
+.ds-select__cpPWV0-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__m9sbXh-custom input:focus {
+.ds-select__cpPWV0-custom input:focus {
   outline: none;
 }
-.ds-select__m9sbXh-custom__clear-button {
+.ds-select__cpPWV0-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   top: 2px;
   bottom: 2px;
   cursor: pointer;
 }
-.ds-select__m9sbXh-custom__clear-button:has(button:focus) {
+.ds-select__cpPWV0-custom__clear-button:has(button:focus) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 2);
 }
-.ds-select__m9sbXh-custom__badge-container {
+.ds-select__cpPWV0-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__m9sbXh-custom__options-container {
+.ds-select__cpPWV0-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 10;
-  border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
+  border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__m9sbXh-custom__options-container--open {
+.ds-select__cpPWV0-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__m9sbXh-custom__options-container__options {
+.ds-select__cpPWV0-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -194,7 +194,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__m9sbXh-custom__options-container__options__inner {
+.ds-select__cpPWV0-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -205,7 +205,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim {
+.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim, .ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -215,61 +215,61 @@
   z-index: 1;
   display: none;
 }
-.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim--visible, .ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim--visible, .ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim {
+.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-select__m9sbXh-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__cpPWV0-custom__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__m9sbXh-custom__options-container__options__inner__bottom-scrim {
+.ds-select__cpPWV0-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
 
-.ds-select__m9sbXh-native:not(.ds-select__m9sbXh-native--invalid, .ds-select__m9sbXh-native--disabled):hover {
+.ds-select__cpPWV0-native:not(.ds-select__cpPWV0-native--invalid, .ds-select__cpPWV0-native--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__m9sbXh-native:has(.ds-select__m9sbXh-native__select:active):not(.ds-select__m9sbXh-native--invalid, .ds-select__m9sbXh-native--disabled) {
+.ds-select__cpPWV0-native:has(.ds-select__cpPWV0-native__select:active):not(.ds-select__cpPWV0-native--invalid, .ds-select__cpPWV0-native--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__m9sbXh-native:focus-within {
+.ds-select__cpPWV0-native:focus-within {
   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-select__m9sbXh-native--disabled {
+.ds-select__cpPWV0-native--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__m9sbXh-native--disabled .ds-select__m9sbXh-native__dropdown-icon {
+.ds-select__cpPWV0-native--disabled .ds-select__cpPWV0-native__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__m9sbXh-native--invalid {
+.ds-select__cpPWV0-native--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__m9sbXh-native--invalid:not(.ds-select__m9sbXh-native--invalid--disabled):has(.ds-select__m9sbXh-native__select:active) {
+.ds-select__cpPWV0-native--invalid:not(.ds-select__cpPWV0-native--invalid--disabled):has(.ds-select__cpPWV0-native__select:active) {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__m9sbXh-native--invalid:not(.ds-select__m9sbXh-native--invalid--disabled):hover {
+.ds-select__cpPWV0-native--invalid:not(.ds-select__cpPWV0-native--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__m9sbXh-native__dropdown-icon {
+.ds-select__cpPWV0-native__dropdown-icon {
   color: var(--ds-select-selected-option-color, inherit);
 }
-.ds-select__m9sbXh-native__selected-text {
+.ds-select__cpPWV0-native__selected-text {
   flex: 1;
   padding: 0 var(--ds-select-selected-option-padding, var(--ds-spacing-xSmall));
   margin-right: var(--ds-select-selected-text-margin-right, 0);
@@ -281,7 +281,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select__m9sbXh-native__select {
+.ds-select__cpPWV0-native__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -300,10 +300,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select__m9sbXh-native__select::placeholder {
+.ds-select__cpPWV0-native__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__m9sbXh-native__select:disabled {
+.ds-select__cpPWV0-native__select:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.js

@@ -100,11 +100,11 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
         const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
-        return (h("div", { key: '4ce1e5ddc0672318697ad4b0548ee457cec06b67' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: '76edd27f666762a39e257d3058cdf488407532d6', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '473538fcc0aa5847138a1b3b5c2e5b668632e7da', name: "label" }))), h("div", { key: 'ba5477be60e7709b7dd93c3627e4d1b18dc69f57', class: classNames(`${nativeSelectClass}`, {
+        return (h("div", { key: '30c1e71f8eb619ade5d516b41acca48dd0614b2b' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: 'dab4131acd82325f2e9c6fda4b23baae3c42da02', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'e06aadfad4493685d3f89425612c54676e65dfa8', name: "label" }))), h("div", { key: '4c688e61ac9e9775b0fcb6cea946ac49dab79801', class: classNames(`${nativeSelectClass}`, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '80c7b2f0dd80de0e1f75f685bc3078ca85314831', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '8429dbcf31a4f697351e362a33963e6c4262de78', ref: el => {
+            }) }, h("div", { key: '51b0a4871304c183df0c4deb5ce99a0d3567afd7', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '7169d2b1b9406d9c31b6e608cc955f2063dd94ad', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -112,7 +112,7 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: 'b6f1411fa144bc901a4d8809fcf439c841c05f1b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '2aef453e4145dee8a1f5f7dd43853e3b8eace84d', name: "native" })), h(this.DsIconTag, { key: '7f8e5c544a5ca03f0872ddeff7433c12678e282e', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '3204a6e6ff7523145c2d3880c73bdbf687aca075', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: '2f751ccd68d7b326ee84858d45ead0dee6f0be28', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '2e1644c8cd879b0842a6327f24034147a83a7e72', name: "native" })), h(this.DsIconTag, { key: 'cdd3078fb9c89f443cb460bc09a34431d7e166fb', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: 'b8f3addbd517ed233facab4a7d84e8fbd5df535a', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-select-native"; }
     static get encapsulation() { return "scoped"; }