npm - @uh-design-system/component-library - Versions diffs - 1.1.0-rc.5 → 1.1.0-rc.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1610) hide show

package/dist/components/ds-radio-button.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { d as defineCustomElement$4 } from './ds-icon2.js';
 import { d as defineCustomElement$3 } from './ds-input-validity2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
-const dsRadioButtonCss = ".ds-radio-button__BahgnS.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__BahgnS--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__BahgnS.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__BahgnS__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__BahgnS__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__BahgnS__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__BahgnS.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__BahgnS.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__BahgnS.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__BahgnS.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__BahgnS.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__BahgnS.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled):not(.ds-radio-button__BahgnS--invalid) .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__BahgnS--disabled.sc-ds-radio-button .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__BahgnS--disabled.sc-ds-radio-button .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__BahgnS--disabled.sc-ds-radio-button .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__BahgnS--invalid.sc-ds-radio-button:active:not(.ds-radio-button__BahgnS--disabled) .ds-radio-button__BahgnS__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__BahgnS-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__BahgnS-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__BahgnS-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}";
+const dsRadioButtonCss = ".ds-radio-button__kfFKF0.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__kfFKF0--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__kfFKF0.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__kfFKF0__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__kfFKF0__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__kfFKF0__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__kfFKF0.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__kfFKF0.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__kfFKF0.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__kfFKF0.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__kfFKF0.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__kfFKF0.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled):not(.ds-radio-button__kfFKF0--invalid) .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__kfFKF0--disabled.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__kfFKF0--disabled.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__kfFKF0--disabled.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__kfFKF0--invalid.sc-ds-radio-button:active:not(.ds-radio-button__kfFKF0--disabled) .ds-radio-button__kfFKF0__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__kfFKF0-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__kfFKF0-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__kfFKF0-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}";
 const radioButtonIdGenerator = idGenerator('ds-radio-button');
 const DsRadioButton$1 = proxyCustomElement(class DsRadioButton extends H {

package/dist/components/ds-ribbon.js CHANGED Viewed

@@ -50,9 +50,9 @@ class DataService {
     }
 }
-const dsRibbonCss = ":host *,.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%;border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff);position:relative;z-index:1000}.ds-ribbon__BahgnS__container{display:grid;grid-template-columns:8rem auto;align-items:center;justify-content:space-between;padding:0 var(--ds-spacing-small, 16px);max-width:120rem;margin:0 auto;height:3rem}@media (min-width: 30rem){.ds-ribbon__BahgnS__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__BahgnS__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__BahgnS__container{grid-template-columns:auto auto}}.ds-ribbon__BahgnS__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__BahgnS__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__BahgnS__mobile-toggle{display:none}}.ds-ribbon__BahgnS__drawer-backdrop{position:fixed;inset:0;background-color:var(--ds-overlay-black-00);grid-column-end:-1;opacity:0;z-index:-1;pointer-events:none}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-backdrop{display:none}}.ds-ribbon__BahgnS--drawer-open .ds-ribbon__BahgnS__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__BahgnS__drawer-backdrop,.ds-ribbon__BahgnS--drawer-open .ds-ribbon__BahgnS__container .ds-ribbon__BahgnS__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__BahgnS--drawer-clicked .ds-ribbon__BahgnS__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__BahgnS--drawer-open .ds-ribbon__BahgnS__drawer-backdrop{background-color:var(--ds-overlay-black-50);opacity:1;transition:background-color 0.1s 0.3s, opacity 0s 0s;z-index:999}.ds-ribbon__BahgnS__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__BahgnS__desktop-nav{display:block}}.ds-ribbon__BahgnS__desktop-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:var(--ds-spacing-medium, 24px);align-items:center}.ds-ribbon__BahgnS__desktop-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__BahgnS__desktop-link{font-size:var(--ds-fontSize-12, 0.75rem);white-space:nowrap}.ds-ribbon__BahgnS__desktop-badge{font-size:var(--ds-font-size-small, 12px);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none;position:absolute;top:0;right:100%}.ds-ribbon__BahgnS__desktop-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__BahgnS__desktop-badge>* span{line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__BahgnS__drawer{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--ds-spacing-small, 16px));background-color:var(--ds-bgColor-white, #fff);box-shadow:var(--ds-shadow-medium);padding-top:0;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;cursor:default}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer{position:static;width:auto;max-width:none;background-color:transparent;box-shadow:none;padding-top:0;transform:none;transition:none;overflow-y:visible}}.ds-ribbon__BahgnS--drawer-open .ds-ribbon__BahgnS__drawer{transform:translateX(0%)}.ds-ribbon__BahgnS__drawer-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;height:3rem;z-index:1;padding:var(--ds-spacing-small, 16px) var(--ds-spacing-medium, 24px);border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff)}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-header{display:none}}.ds-ribbon__BahgnS__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__BahgnS__drawer-branding{max-width:unset}}.ds-ribbon__BahgnS__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__BahgnS__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-nav{padding:0}}.ds-ribbon__BahgnS__top-scrim,.ds-ribbon__BahgnS__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-ribbon__BahgnS__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__BahgnS__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.has-top-scrim .ds-ribbon__BahgnS__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__BahgnS__bottom-scrim{display:block}.ds-ribbon__BahgnS__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__BahgnS__drawer-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;border-bottom:1px solid var(--ds-color-border-subtle);height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__BahgnS__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__BahgnS__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__BahgnS__drawer-link{font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-link{font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__BahgnS__drawer-badge{font-size:var(--ds-font-size-small, 12px);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none}@media (min-width: 60rem){.ds-ribbon__BahgnS__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__BahgnS__drawer-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__BahgnS__drawer-badge>* span{line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__BahgnS--drawer-open) .ds-ribbon__BahgnS__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__BahgnS--drawer-open) .ds-ribbon__BahgnS__drawer-backdrop{display:block}}:host(.ds-ribbon__BahgnS--drawer-open) .ds-ribbon__BahgnS__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__BahgnS--drawer-open) .ds-ribbon__BahgnS__drawer{transform:none}}";
+const dsRibbonCss = ":host *,.ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:block;width:100%;border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff);position:relative;z-index:1000}.ds-ribbon__kfFKF0__container{display:grid;grid-template-columns:8rem auto;align-items:center;justify-content:space-between;padding:0 var(--ds-spacing-small, 16px);max-width:120rem;margin:0 auto;height:3rem}@media (min-width: 30rem){.ds-ribbon__kfFKF0__container{grid-template-columns:auto auto}}@media (min-width: 60rem){.ds-ribbon__kfFKF0__container{grid-template-columns:145px auto;padding:0 var(--ds-spacing-large, 32px)}}@media (min-width: 75rem){.ds-ribbon__kfFKF0__container{grid-template-columns:auto auto}}.ds-ribbon__kfFKF0__branding{display:flex;align-items:center;flex-shrink:0}.ds-ribbon__kfFKF0__mobile-toggle{display:block;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__kfFKF0__mobile-toggle{display:none}}.ds-ribbon__kfFKF0__drawer-backdrop{position:fixed;inset:0;background-color:var(--ds-overlay-black-00);grid-column-end:-1;opacity:0;z-index:-1;pointer-events:none}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-backdrop{display:none}}.ds-ribbon__kfFKF0--drawer-open .ds-ribbon__kfFKF0__drawer-backdrop{cursor:pointer;pointer-events:auto}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-backdrop{pointer-events:auto;z-index:1}.ds-ribbon__kfFKF0__drawer-backdrop,.ds-ribbon__kfFKF0--drawer-open .ds-ribbon__kfFKF0__container .ds-ribbon__kfFKF0__drawer-backdrop{position:static;background-color:unset;backdrop-filter:unset;opacity:1;transition:none}}.ds-ribbon__kfFKF0--drawer-clicked .ds-ribbon__kfFKF0__drawer-backdrop{transition:background-color 0.3s, opacity 0s 0.3s}.ds-ribbon__kfFKF0--drawer-open .ds-ribbon__kfFKF0__drawer-backdrop{background-color:var(--ds-overlay-black-50);opacity:1;transition:background-color 0.1s 0.3s, opacity 0s 0s;z-index:999}.ds-ribbon__kfFKF0__desktop-nav{display:none;grid-column-end:-1}@media (min-width: 60rem){.ds-ribbon__kfFKF0__desktop-nav{display:block}}.ds-ribbon__kfFKF0__desktop-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:var(--ds-spacing-medium, 24px);align-items:center}.ds-ribbon__kfFKF0__desktop-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__kfFKF0__desktop-link{font-size:var(--ds-fontSize-12, 0.75rem);white-space:nowrap}.ds-ribbon__kfFKF0__desktop-badge{font-size:var(--ds-font-size-small, 12px);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none;position:absolute;top:0;right:100%}.ds-ribbon__kfFKF0__desktop-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__kfFKF0__desktop-badge>* span{line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}.ds-ribbon__kfFKF0__drawer{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--ds-spacing-small, 16px));background-color:var(--ds-bgColor-white, #fff);box-shadow:var(--ds-shadow-medium);padding-top:0;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;cursor:default}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer{position:static;width:auto;max-width:none;background-color:transparent;box-shadow:none;padding-top:0;transform:none;transition:none;overflow-y:visible}}.ds-ribbon__kfFKF0--drawer-open .ds-ribbon__kfFKF0__drawer{transform:translateX(0%)}.ds-ribbon__kfFKF0__drawer-header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;height:3rem;z-index:1;padding:var(--ds-spacing-small, 16px) var(--ds-spacing-medium, 24px);border-bottom:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light, #ccc);background-color:var(--ds-bgColor-white, #fff)}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-header{display:none}}.ds-ribbon__kfFKF0__drawer-branding{display:flex;align-items:center;flex-shrink:0;max-width:8rem}@media (min-width: 30rem){.ds-ribbon__kfFKF0__drawer-branding{max-width:unset}}.ds-ribbon__kfFKF0__drawer-close{flex-shrink:0;margin-left:var(--ds-spacing-small, 16px)}.ds-ribbon__kfFKF0__drawer-nav{display:block;padding:var(--ds-spacing-medium, 24px);position:relative}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-nav{padding:0}}.ds-ribbon__kfFKF0__top-scrim,.ds-ribbon__kfFKF0__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-ribbon__kfFKF0__top-scrim{top:3rem;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-ribbon__kfFKF0__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.has-top-scrim .ds-ribbon__kfFKF0__top-scrim{display:block}.has-bottom-scrim .ds-ribbon__kfFKF0__bottom-scrim{display:block}.ds-ribbon__kfFKF0__drawer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-spacing-4xSmall, 2px)}.ds-ribbon__kfFKF0__drawer-link-item{display:flex;align-items:center;position:relative;text-transform:uppercase;border-bottom:1px solid var(--ds-color-border-subtle);height:var(--ds-spacing-2xLarge, 3rem)}.ds-ribbon__kfFKF0__drawer-link-item:last-child{border-bottom:none}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-link-item{justify-content:flex-start;padding:0;border-bottom:none}.ds-ribbon__kfFKF0__drawer-link-item:last-child{border-bottom:none}}.ds-ribbon__kfFKF0__drawer-link{font-size:var(--ds-fontSize-14, 0.875rem);white-space:nowrap}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-link{font-size:var(--ds-fontSize-12, 0.75rem)}}.ds-ribbon__kfFKF0__drawer-badge{font-size:var(--ds-font-size-small, 12px);letter-spacing:var(--ds-letterSpacing-wide, 0);margin-left:var(--ds-spacing-2xSmall, 8px);text-transform:none}@media (min-width: 60rem){.ds-ribbon__kfFKF0__drawer-badge{position:absolute;top:0;right:100%}}.ds-ribbon__kfFKF0__drawer-badge>*{display:flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;border-radius:1.25rem;padding:0 var(--ds-spacing-2xSmall, 0.5rem)}.ds-ribbon__kfFKF0__drawer-badge>* span{line-height:0;font-weight:600;color:var(--ds-textColor-info, #005b80)}:host(.ds-ribbon__kfFKF0--drawer-open) .ds-ribbon__kfFKF0__drawer-backdrop{display:block}@media (min-width: 60rem){:host(.ds-ribbon__kfFKF0--drawer-open) .ds-ribbon__kfFKF0__drawer-backdrop{display:block}}:host(.ds-ribbon__kfFKF0--drawer-open) .ds-ribbon__kfFKF0__drawer{transform:translateX(0)}@media (min-width: 60rem){:host(.ds-ribbon__kfFKF0--drawer-open) .ds-ribbon__kfFKF0__drawer{transform:none}}";
-const { ribbon: defaultRibbonData } = appData.v1;
+const fallbackRibbonData = appData.v1.ribbon;
 const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
     constructor(registerHost) {
         super();
@@ -65,6 +65,8 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
     inheritedAttributes = {};
     get el() { return this; }
     drawerRef;
+    mobileToggleRef;
+    closeButtonRef;
     dsIcon;
     dsSiteName;
     dsHideBranding = false;
@@ -72,11 +74,12 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
     dsIconAriaLabel;
     dsLinks;
     dsBrandingUrls;
-    dsSitesText;
-    dsCloseText;
+    dsMobileToggleText;
+    dsCloseButtonText;
     dsNavAriaLabel;
     dsLogoAriaLabel;
-    closeButtonId = idGenerator('ds-button-drawer-close').next().value;
+    dsCloseButtonId = idGenerator('ds-button-drawer-close').next().value;
+    dsMobileToggleId = idGenerator('ds-button-mobile-toggle').next().value;
     dsDataUrl = '';
     isMobileDrawerOpen = false;
     isMobileDrawerClicked = false;
@@ -84,6 +87,21 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
     lang = defaultLanguage;
     icon;
     brandingUrls;
+    get DsLinkLogo() {
+        return transformTagName('ds-link-logo', 'ds-ribbon', this.el);
+    }
+    get DsLink() {
+        return transformTagName('ds-link', 'ds-ribbon', this.el);
+    }
+    get DsButton() {
+        return transformTagName('ds-button', 'ds-ribbon', this.el);
+    }
+    get DsTag() {
+        return transformTagName('ds-tag', 'ds-ribbon', this.el);
+    }
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-ribbon', this.el);
+    }
     get localizedLinks() {
         if (this.dsLinks)
             return this.dsLinks;
@@ -96,10 +114,10 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         return this.dsSiteName || this.loadedExternalData?.siteNames?.[this.lang];
     }
     get localizedSitesText() {
-        return this.dsSitesText || this.loadedExternalData?.uiTexts?.sites?.[this.lang];
+        return this.dsMobileToggleText || this.loadedExternalData?.uiTexts?.sites?.[this.lang];
     }
     get localizedCloseText() {
-        return this.dsCloseText || this.loadedExternalData?.uiTexts?.close?.[this.lang];
+        return this.dsCloseButtonText || this.loadedExternalData?.uiTexts?.close?.[this.lang];
     }
     get localizedNavAriaLabel() {
         return this.dsNavAriaLabel || this.loadedExternalData?.uiTexts?.navigationLabel?.[this.lang];
@@ -122,7 +140,15 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         }
     }
     async loadExternalData() {
-        this.loadedExternalData = await DataService.loadRibbonData(this.dsDataUrl);
+        try {
+            const data = await DataService.loadRibbonData(this.dsDataUrl);
+            if (!data)
+                throw new Error('No external data');
+            this.loadedExternalData = data;
+        }
+        catch {
+            this.loadedExternalData = fallbackRibbonData;
+        }
         if (!this.dsIcon) {
             this.icon = this.loadedExternalData?.config?.dsIcon;
         }
@@ -174,7 +200,6 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
             this.updateScrollState();
         }, 150);
     }
-    lastFocusedElement = null;
     resizeTimeout;
     storeUnsubscribe;
     handleMobileToggle = () => {
@@ -214,11 +239,11 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         if (!this.drawerRef)
             return [];
         const focusableElements = [];
-        const closeButton = this.drawerRef.querySelector(`#${this.closeButtonId}`);
+        const closeButton = this.drawerRef.querySelector(`#${this.dsCloseButtonId}`);
         if (closeButton && this.isFocusableElement(closeButton)) {
             focusableElements.push(closeButton);
         }
-        const logoComponent = this.drawerRef.querySelector('ds-link-logo');
+        const logoComponent = this.drawerRef.querySelector(this.DsLinkLogo);
         if (logoComponent && logoComponent.shadowRoot) {
             const logoLink = logoComponent.shadowRoot.querySelector('a');
             if (logoLink && this.isFocusableElement(logoLink)) {
@@ -227,7 +252,7 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         }
         const navLinkContainers = this.drawerRef.querySelectorAll(`[class*="drawer-link-item"]`);
         navLinkContainers.forEach(container => {
-            const dsLinkElement = container.querySelector('ds-link');
+            const dsLinkElement = container.querySelector(this.DsLink);
             if (dsLinkElement && dsLinkElement.shadowRoot) {
                 const linkElement = dsLinkElement.shadowRoot.querySelector('a');
                 if (linkElement && this.isFocusableElement(linkElement)) {
@@ -269,9 +294,8 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         event.preventDefault();
     }
     openMobileDrawer() {
-        this.lastFocusedElement = document.activeElement;
         setTimeout(() => {
-            const buttonElement = this.el.shadowRoot?.querySelector(`#${this.closeButtonId}`);
+            const buttonElement = this.el.shadowRoot?.querySelector(`#${this.dsCloseButtonId}`);
             if (buttonElement) {
                 buttonElement.focus();
             }
@@ -319,68 +343,64 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         this.setupScrollListener(this.drawerRef, scrollableHeight);
     }
     closeMobileDrawer() {
+        if (this.closeButtonRef && document.activeElement !== this.closeButtonRef) {
+            this.closeButtonRef.setFocus?.();
+        }
         this.isMobileDrawerOpen = false;
         if (this.drawerRef) {
             this.drawerRef.removeEventListener('scroll', this.handleDrawerScroll);
         }
-        setTimeout(() => {
-            if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
+        setTimeout(async () => {
+            try {
+                await this.mobileToggleRef.setFocus();
+            }
+            catch {
+                this.mobileToggleRef.focus();
             }
         }, 50);
     }
     getBrandingUrl() {
         const language = getLanguage() || 'fi';
-        return this.dsBrandingUrls?.[language] || this.brandingUrls?.[language] || defaultRibbonData.brandingUrls?.[language];
+        return this.dsBrandingUrls?.[language] || this.brandingUrls?.[language] || fallbackRibbonData.brandingUrls?.[language];
     }
     renderBranding() {
         if (this.dsHideBranding)
             return null;
         const baseClass = cx('ds-ribbon');
         const brandingUrl = this.getBrandingUrl();
-        const DsLinkLogo = transformTagName('ds-link-logo', 'ds-ribbon', this.el);
-        const iconName = this.dsIcon || this.icon || defaultRibbonData.config?.dsIcon;
-        return (h("div", { class: `${baseClass}__branding` }, h(DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", "aria-label": this.localizedLogoAriaLabel })));
+        const iconName = this.dsIcon || this.icon || fallbackRibbonData.config?.dsIcon;
+        return (h("div", { class: `${baseClass}__branding` }, h(this.DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", "aria-label": this.localizedLogoAriaLabel })));
     }
     renderDesktopNavigation() {
         const links = this.localizedLinks;
         if (!links?.length)
             return null;
         const baseClass = cx('ds-ribbon');
-        const DsLink = transformTagName('ds-link', 'ds-ribbon', this.el);
-        const DsTag = transformTagName('ds-tag', 'ds-ribbon', this.el);
-        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-ribbon', this.el);
         return (h("div", { class: `${baseClass}__desktop-nav` }, h("ul", { class: `${baseClass}__desktop-links` }, links
             .filter(link => !link.mobileOnly)
-            .map(link => (h("li", { key: `desktop-${link.id}`, class: `${baseClass}__desktop-link-item` }, h(DsLink, { dsHref: link.href, dsText: link.text, dsTarget: link.target || '_self', dsVariant: "standalone", dsColour: "black", dsWeight: "semibold", class: `${baseClass}__desktop-link` }, link.badge && (h("span", { slot: "suffix" }, h(DsVisuallyHidden, null, " - ", link.badge)))), link.badge && h(DsTag, { dsText: link.badge, dsColour: "info", class: `${baseClass}__desktop-badge`, "aria-hidden": "true" }), link.target === '_blank' && h(DsVisuallyHidden, null, visuallyHiddenAssistiveText())))))));
+            .map(link => (h("li", { key: `desktop-${link.id}`, class: `${baseClass}__desktop-link-item` }, h(this.DsLink, { dsHref: link.href, dsText: link.text, dsTarget: link.target || '_self', dsVariant: "standalone", dsColour: "black", dsWeight: "semibold", class: `${baseClass}__desktop-link` }, link.badge && (h("span", { slot: "suffix" }, h(this.DsVisuallyHidden, null, " - ", link.badge)))), link.badge && h(this.DsTag, { dsText: link.badge, dsColour: "info", class: `${baseClass}__desktop-badge`, "aria-hidden": "true" }), link.target === '_blank' && h(this.DsVisuallyHidden, null, visuallyHiddenAssistiveText())))))));
     }
     renderMobileNavigation() {
         const links = this.localizedLinks;
         if (!links?.length)
             return null;
         const baseClass = cx('ds-ribbon');
-        const DsLink = transformTagName('ds-link', 'ds-ribbon', this.el);
-        const DsTag = transformTagName('ds-tag', 'ds-ribbon', this.el);
-        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-ribbon', this.el);
-        return (h("div", { class: `${baseClass}__drawer-backdrop`, onClick: this.handleDrawerBackdropClick, ...(this.isMobileDrawerOpen ? {} : { inert: true }) }, h("div", { id: `${baseClass}__drawer`, class: `${baseClass}__drawer`, role: "dialog", "aria-label": "Site navigation menu", "aria-modal": "true", "aria-hidden": this.isMobileDrawerOpen ? 'false' : 'true', ref: el => (this.drawerRef = el) }, this.renderDrawerHeader(), h("div", { class: `${baseClass}__drawer-nav` }, h("div", { class: `${baseClass}__top-scrim` }), h("ul", { class: `${baseClass}__drawer-links` }, links.map(link => (h("li", { key: `mobile-${link.id}`, class: `${baseClass}__drawer-link-item` }, h(DsLink, { dsHref: link.href, dsText: link.text, dsTarget: link.target || '_self', dsVariant: "standalone", dsColour: "black", dsWeight: "semibold", class: `${baseClass}__drawer-link` }, link.badge && (h("span", { slot: "suffix" }, h(DsVisuallyHidden, null, " - ", link.badge)))), link.badge && h(DsTag, { dsText: link.badge, dsColour: "info", class: `${baseClass}__drawer-badge`, "aria-hidden": "true" }), link.target === '_blank' && h(DsVisuallyHidden, null, visuallyHiddenAssistiveText()))))), h("div", { class: `${baseClass}__bottom-scrim` })))));
+        return (h("div", { class: `${baseClass}__drawer-backdrop`, onClick: this.handleDrawerBackdropClick, ...(this.isMobileDrawerOpen ? {} : { inert: true }) }, h("div", { id: `${baseClass}__drawer`, class: `${baseClass}__drawer`, role: "dialog", "aria-label": "Site navigation menu", "aria-modal": "true", "aria-hidden": this.isMobileDrawerOpen ? 'false' : 'true', ref: el => (this.drawerRef = el) }, this.renderDrawerHeader(), h("div", { class: `${baseClass}__drawer-nav` }, h("div", { class: `${baseClass}__top-scrim` }), h("ul", { class: `${baseClass}__drawer-links` }, links.map(link => (h("li", { key: `mobile-${link.id}`, class: `${baseClass}__drawer-link-item` }, h(this.DsLink, { dsHref: link.href, dsText: link.text, dsTarget: link.target || '_self', dsVariant: "standalone", dsColour: "black", dsWeight: "semibold", class: `${baseClass}__drawer-link` }, link.badge && (h("span", { slot: "suffix" }, h(this.DsVisuallyHidden, null, " - ", link.badge)))), link.badge && h(this.DsTag, { dsText: link.badge, dsColour: "info", class: `${baseClass}__drawer-badge`, "aria-hidden": "true" }), link.target === '_blank' && h(this.DsVisuallyHidden, null, visuallyHiddenAssistiveText()))))), h("div", { class: `${baseClass}__bottom-scrim` })))));
     }
     renderDrawerHeader() {
         const baseClass = cx('ds-ribbon');
-        const DsButton = transformTagName('ds-button', 'ds-ribbon', this.el);
-        const DsLinkLogo = transformTagName('ds-link-logo', 'ds-ribbon', this.el);
         const brandingUrl = this.getBrandingUrl();
-        const iconName = this.dsIcon || this.icon || defaultRibbonData.config?.dsIcon;
-        return (h("div", { class: `${baseClass}__drawer-header` }, h("div", { class: `${baseClass}__drawer-branding` }, h(DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", class: `${baseClass}__drawer-branding-link`, "aria-label": this.localizedLogoAriaLabel })), h(DsButton, { dsId: this.closeButtonId, dsType: "button", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsValue: this.localizedCloseText, dsIcon: "close", dsIconPosition: "end", class: `${baseClass}__drawer-close`, onClick: this.handleMobileToggle })));
+        const iconName = this.dsIcon || this.icon || fallbackRibbonData.config?.dsIcon;
+        return (h("div", { class: `${baseClass}__drawer-header` }, h("div", { class: `${baseClass}__drawer-branding` }, h(this.DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", class: `${baseClass}__drawer-branding-link`, "aria-label": this.localizedLogoAriaLabel })), h(this.DsButton, { dsId: this.dsCloseButtonId, dsType: "button", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsText: this.localizedCloseText, dsIcon: "close", dsIconPosition: "end", class: `${baseClass}__drawer-close`, ref: el => (this.closeButtonRef = el), onClick: this.handleMobileToggle })));
     }
     renderMobileToggle() {
         const links = this.localizedLinks;
         if (!links?.length || !this.localizedSitesText || !this.localizedCloseText)
             return null;
         const baseClass = cx('ds-ribbon');
-        const DsButton = transformTagName('ds-button', 'ds-ribbon', this.el);
         const buttonText = this.localizedSitesText;
         const iconName = 'keyboard_arrow_down';
-        return (h(DsButton, { class: `${baseClass}__mobile-toggle`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsValue: buttonText, dsIcon: iconName, dsIconPosition: "end", onClick: this.handleMobileToggle, "aria-expanded": this.isMobileDrawerOpen ? 'true' : 'false', "aria-controls": `${baseClass}__drawer`, "aria-haspopup": "dialog" }));
+        return (h(this.DsButton, { ref: el => (this.mobileToggleRef = el), id: this.dsMobileToggleId, class: `${baseClass}__mobile-toggle`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsText: buttonText, dsIcon: iconName, dsIconPosition: "end", onClick: this.handleMobileToggle, "aria-expanded": this.isMobileDrawerOpen ? 'true' : 'false', "aria-controls": `${baseClass}__drawer`, "aria-haspopup": "dialog" }));
     }
     disconnectedCallback() {
         clearTimeout(this.resizeTimeout);
@@ -394,7 +414,7 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (h("nav", { key: '2c4c7ba66cd728960ae998d6b3bb668b2041fb4b', class: ribbonClasses, "aria-label": this.localizedNavAriaLabel, ...this.inheritedAttributes }, h("div", { key: 'fb468ba37c1ffdd9863aa9cf2bde78ba2ee45bbf', class: `${baseClass}__container`, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle()), this.renderMobileNavigation()));
+        return (h("nav", { key: '3e52a851883dc48cb744c855801017182656750c', class: ribbonClasses, "aria-label": this.localizedNavAriaLabel, ...this.inheritedAttributes }, h("div", { key: '0cfd064fc7a7227db618cd1a787ce2e276f4e1df', class: `${baseClass}__container`, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle()), this.renderMobileNavigation()));
     }
     static get watchers() { return {
         "dsIcon": ["dsIconObserver"],
@@ -410,11 +430,12 @@ const DsRibbon$1 = proxyCustomElement(class DsRibbon extends H {
         "dsIconAriaLabel": [1, "ds-icon-aria-label"],
         "dsLinks": [16],
         "dsBrandingUrls": [16],
-        "dsSitesText": [1, "ds-sites-text"],
-        "dsCloseText": [1, "ds-close-text"],
+        "dsMobileToggleText": [1, "ds-mobile-toggle-text"],
+        "dsCloseButtonText": [1, "ds-close-button-text"],
         "dsNavAriaLabel": [1, "ds-nav-aria-label"],
         "dsLogoAriaLabel": [1, "ds-logo-aria-label"],
-        "closeButtonId": [1, "close-button-id"],
+        "dsCloseButtonId": [1, "ds-close-button-id"],
+        "dsMobileToggleId": [1, "ds-mobile-toggle-id"],
         "dsDataUrl": [1, "ds-data-url"],
         "isMobileDrawerOpen": [32],
         "isMobileDrawerClicked": [32],

package/dist/components/ds-select-native2.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-input-validity2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
-const dsSelectNativeCss = ".sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__BahgnS.sc-ds-select-native,.ds-select__BahgnS-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select-native__BahgnS.sc-ds-select-native:hover,.ds-select__BahgnS-custom.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__BahgnS__dropdown-icon.sc-ds-select-native,.ds-select__BahgnS-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__BahgnS-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__BahgnS-custom.sc-ds-select-native .ds-options__BahgnS.sc-ds-select-native{display:block}.ds-select__BahgnS-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__BahgnS-custom.sc-ds-select-native:not(.ds-select__BahgnS-custom--open,.ds-select__BahgnS-custom--invalid.sc-ds-select-native,.ds-select__BahgnS-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__BahgnS-custom.sc-ds-select-native:active:not(.ds-select__BahgnS-custom--open,.ds-select__BahgnS-custom--invalid.sc-ds-select-native,.ds-select__BahgnS-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__BahgnS-custom--open.sc-ds-select-native,.ds-select__BahgnS-custom.sc-ds-select-native: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__BahgnS-custom--open.sc-ds-select-native:not(.ds-select__BahgnS-custom--open--invalid,.ds-select__BahgnS-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__BahgnS-custom.sc-ds-select-native:focus-visible:not(.ds-select__BahgnS-custom--open--invalid,.ds-select__BahgnS-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__BahgnS-custom--disabled.sc-ds-select-native{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__BahgnS-custom--disabled.sc-ds-select-native .ds-select__BahgnS-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__BahgnS-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__BahgnS-custom--invalid.sc-ds-select-native:not(.ds-select__BahgnS-custom--invalid--open,.ds-select__BahgnS-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__BahgnS-custom--invalid.sc-ds-select-native:not(.ds-select__BahgnS-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__BahgnS-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px))}.ds-select__BahgnS-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__BahgnS-custom--has-icon.sc-ds-select-native .ds-select__BahgnS-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__BahgnS-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__BahgnS-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__BahgnS-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__BahgnS-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed}.ds-select__BahgnS-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__BahgnS-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__BahgnS-custom__clear-button.sc-ds-select-native{position:absolute;right:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));cursor:pointer}.ds-select__BahgnS-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__BahgnS-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__BahgnS-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__BahgnS-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{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__BahgnS-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__BahgnS.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__BahgnS.sc-ds-select-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-native__BahgnS--disabled.sc-ds-select-native{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-native__BahgnS--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select-native__BahgnS__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-spacing-xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select-native__BahgnS__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select-native__BahgnS__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select-native__BahgnS__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}";
+const dsSelectNativeCss = ".sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__kfFKF0.sc-ds-select-native,.ds-select__kfFKF0-custom.sc-ds-select-native{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select-native__kfFKF0.sc-ds-select-native:hover,.ds-select__kfFKF0-custom.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__kfFKF0__dropdown-icon.sc-ds-select-native,.ds-select__kfFKF0-custom__dropdown-icon.sc-ds-select-native{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__kfFKF0-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__kfFKF0-custom.sc-ds-select-native .ds-options__kfFKF0.sc-ds-select-native{display:block}.ds-select__kfFKF0-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__kfFKF0-custom.sc-ds-select-native:not(.ds-select__kfFKF0-custom--open,.ds-select__kfFKF0-custom--invalid.sc-ds-select-native,.ds-select__kfFKF0-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__kfFKF0-custom.sc-ds-select-native:active:not(.ds-select__kfFKF0-custom--open,.ds-select__kfFKF0-custom--invalid.sc-ds-select-native,.ds-select__kfFKF0-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__kfFKF0-custom--open.sc-ds-select-native,.ds-select__kfFKF0-custom.sc-ds-select-native: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__kfFKF0-custom--open.sc-ds-select-native:not(.ds-select__kfFKF0-custom--open--invalid,.ds-select__kfFKF0-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__kfFKF0-custom.sc-ds-select-native:focus-visible:not(.ds-select__kfFKF0-custom--open--invalid,.ds-select__kfFKF0-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__kfFKF0-custom--disabled.sc-ds-select-native{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__kfFKF0-custom--disabled.sc-ds-select-native .ds-select__kfFKF0-custom__dropdown-icon.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__kfFKF0-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__kfFKF0-custom--invalid.sc-ds-select-native:not(.ds-select__kfFKF0-custom--invalid--open,.ds-select__kfFKF0-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__kfFKF0-custom--invalid.sc-ds-select-native:not(.ds-select__kfFKF0-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__kfFKF0-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px))}.ds-select__kfFKF0-custom__selected-option.sc-ds-select-native{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__kfFKF0-custom--has-icon.sc-ds-select-native .ds-select__kfFKF0-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__kfFKF0-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__kfFKF0-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__kfFKF0-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__kfFKF0-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed}.ds-select__kfFKF0-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__kfFKF0-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__kfFKF0-custom__clear-button.sc-ds-select-native{position:absolute;right:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));cursor:pointer}.ds-select__kfFKF0-custom__options-container.sc-ds-select-native{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__kfFKF0-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__kfFKF0-custom__options-container__options.sc-ds-select-native{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__kfFKF0-custom__options-container__options__inner.sc-ds-select-native{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim.sc-ds-select-native{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--dark.sc-ds-select-native{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__kfFKF0-custom__options-container__options__inner__bottom-scrim.sc-ds-select-native{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-native-h{width:20rem}}.sc-ds-select-native-h>div.sc-ds-select-native{display:flex;flex-direction:column;position:relative}.ds-select-native__kfFKF0.sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select-native__kfFKF0.sc-ds-select-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-native__kfFKF0--disabled.sc-ds-select-native{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-native__kfFKF0--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select-native__kfFKF0__selected-text.sc-ds-select-native{flex:1;padding:0 var(--ds-spacing-xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-select-native__kfFKF0__select.sc-ds-select-native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);background-color:transparent;color:inherit;flex:1}.ds-select-native__kfFKF0__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select-native__kfFKF0__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}";
 const DsSelectNative = proxyCustomElement(class DsSelectNative extends H {
     constructor(registerHost) {
@@ -53,17 +53,17 @@ const DsSelectNative = proxyCustomElement(class DsSelectNative extends H {
     render() {
         const nativeSelectClass = cx('ds-select-native');
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
-        return (h("div", { key: '88bfa6da4dd3b4824c17fa4eab27f65e33f9f0a2' }, h(DsControlLabel, { key: '3c698d18a9ece0c261f214c54c24347aae6ec2c4', dsHtmlFor: this.dsId, dsLabel: this.dsLabel }, h("slot", { key: '6b16cfb0e05fdc61519bd6610f3c9f2cb8252904', name: "label" })), h("div", { key: '63b3dca8117fb6127648c962e6ae8bc52aac1c2a', class: classNames(`${nativeSelectClass}`, {
+        return (h("div", { key: '905725c0f6e8075a434aa969a2f62bc84d683fb5' }, h(DsControlLabel, { key: '1a157d11191636c02d1bbf35cfec35c091a2a225', dsHtmlFor: this.dsId, dsLabel: this.dsLabel }, h("slot", { key: '297bc928fccb1adb621fbe75c9ad4ee109fe573e', name: "label" })), h("div", { key: '0084f495f64de0384fa8e707bae678450b27218f', class: classNames(`${nativeSelectClass}`, {
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'aeb00994199885b07d9dbc775a0541264b2ee79b', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.dsValue ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '31eafc69c39b650526f2f93c96be7c73746f674a', ref: el => {
+            }) }, h("div", { key: '243162101ef62d6961f55f23d37db66df699fe06', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.dsValue ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '3e852ca7f6b5453f367b35d9bcc67e241c8298a9', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.dsValue || '';
             }, id: this.dsId, name: this.dsName, form: this.dsForm, class: `${nativeSelectClass}__select`, disabled: this.dsDisabled, required: !!this.dsErrorText, onChange: (event) => {
                 const target = event.target;
                 this.dsValue = target.value;
-            }, "aria-controls": `${this.dsId}-listbox`, "aria-haspopup": "listbox", ...this.inheritedAttributes }, h("option", { key: '8158c037b8fb3aa08097a98123af6d47e0f7fe2a', value: "", disabled: true, selected: !this.dsValue }, this.dsPlaceholder), h("slot", { key: '9eda772a21ff3467051378cdfb43841667dff011', name: "native" })), h(this.DsIconTag, { key: '0760114fa09448375d579bfd42897421ac7f51d5', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: '2c11db373e9ef00b01037328ce2617dae8fb83f9', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-controls": `${this.dsId}-listbox`, "aria-haspopup": "listbox", ...this.inheritedAttributes }, h("option", { key: '9363c3bdf8006ec79485f93644734f5aa754b6fe', value: "", disabled: true, selected: !this.dsValue }, this.dsPlaceholder), h("slot", { key: '100c51736563347f27600a6fc9d3aee58236cede', name: "native" })), h(this.DsIconTag, { key: 'cc8dc0f6b71994ec81c811afffc3930309f7847b', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: 'fa42d3c1eba1791ceca8280f6260c6c859a56474', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "aria-describedby": ["ariaAttributeObserver"]

package/dist/components/ds-select.js CHANGED Viewed

@@ -16,7 +16,7 @@ import { d as defineCustomElement$4 } from './ds-select-native2.js';
 import { d as defineCustomElement$3 } from './ds-spinner2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
-const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__BahgnS-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__BahgnS-custom.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__BahgnS-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__BahgnS-custom-wrapper.sc-ds-select{position:relative}.ds-select__BahgnS-custom.sc-ds-select .ds-options__BahgnS.sc-ds-select{display:block}.ds-select__BahgnS-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__BahgnS-custom.sc-ds-select:not(.ds-select__BahgnS-custom--open,.ds-select__BahgnS-custom--invalid.sc-ds-select,.ds-select__BahgnS-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__BahgnS-custom.sc-ds-select:active:not(.ds-select__BahgnS-custom--open,.ds-select__BahgnS-custom--invalid.sc-ds-select,.ds-select__BahgnS-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__BahgnS-custom--open.sc-ds-select,.ds-select__BahgnS-custom.sc-ds-select: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__BahgnS-custom--open.sc-ds-select:not(.ds-select__BahgnS-custom--open--invalid,.ds-select__BahgnS-custom.sc-ds-select:focus-visible--invalid),.ds-select__BahgnS-custom.sc-ds-select:focus-visible:not(.ds-select__BahgnS-custom--open--invalid,.ds-select__BahgnS-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__BahgnS-custom--disabled.sc-ds-select{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__BahgnS-custom--disabled.sc-ds-select .ds-select__BahgnS-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__BahgnS-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__BahgnS-custom--invalid.sc-ds-select:not(.ds-select__BahgnS-custom--invalid--open,.ds-select__BahgnS-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__BahgnS-custom--invalid.sc-ds-select:not(.ds-select__BahgnS-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__BahgnS-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px))}.ds-select__BahgnS-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__BahgnS-custom--has-icon.sc-ds-select .ds-select__BahgnS-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__BahgnS-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__BahgnS-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__BahgnS-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__BahgnS-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed}.ds-select__BahgnS-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__BahgnS-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__BahgnS-custom__clear-button.sc-ds-select{position:absolute;right:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));cursor:pointer}.ds-select__BahgnS-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__BahgnS-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__BahgnS-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__BahgnS-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__BahgnS-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__BahgnS-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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__BahgnS-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
+const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__kfFKF0-custom.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__kfFKF0-custom.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__kfFKF0-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__kfFKF0-custom-wrapper.sc-ds-select{position:relative}.ds-select__kfFKF0-custom.sc-ds-select .ds-options__kfFKF0.sc-ds-select{display:block}.ds-select__kfFKF0-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__kfFKF0-custom.sc-ds-select:not(.ds-select__kfFKF0-custom--open,.ds-select__kfFKF0-custom--invalid.sc-ds-select,.ds-select__kfFKF0-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__kfFKF0-custom.sc-ds-select:active:not(.ds-select__kfFKF0-custom--open,.ds-select__kfFKF0-custom--invalid.sc-ds-select,.ds-select__kfFKF0-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__kfFKF0-custom--open.sc-ds-select,.ds-select__kfFKF0-custom.sc-ds-select: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__kfFKF0-custom--open.sc-ds-select:not(.ds-select__kfFKF0-custom--open--invalid,.ds-select__kfFKF0-custom.sc-ds-select:focus-visible--invalid),.ds-select__kfFKF0-custom.sc-ds-select:focus-visible:not(.ds-select__kfFKF0-custom--open--invalid,.ds-select__kfFKF0-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__kfFKF0-custom--disabled.sc-ds-select{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__kfFKF0-custom--disabled.sc-ds-select .ds-select__kfFKF0-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__kfFKF0-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__kfFKF0-custom--invalid.sc-ds-select:not(.ds-select__kfFKF0-custom--invalid--open,.ds-select__kfFKF0-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__kfFKF0-custom--invalid.sc-ds-select:not(.ds-select__kfFKF0-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__kfFKF0-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px))}.ds-select__kfFKF0-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__kfFKF0-custom--has-icon.sc-ds-select .ds-select__kfFKF0-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__kfFKF0-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__kfFKF0-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__kfFKF0-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__kfFKF0-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed}.ds-select__kfFKF0-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__kfFKF0-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__kfFKF0-custom__clear-button.sc-ds-select{position:absolute;right:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));cursor:pointer}.ds-select__kfFKF0-custom__options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-select__kfFKF0-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__kfFKF0-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__kfFKF0-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__kfFKF0-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__kfFKF0-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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__kfFKF0-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
 const selectIdGenerator = idGenerator('ds-select');
 const defaultTextFns = {

package/dist/components/ds-spinner2.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { t as transformTagName, d as declareComponentDependencies } from './util
 import { c as cx } from './cx.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
-const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__BahgnS{display:flex;align-items:center;justify-content:center;}.ds-spinner__BahgnS--small{padding:1.5px}.ds-spinner__BahgnS--small:has(.ds-spinner__BahgnS__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__BahgnS--medium{padding:3px}.ds-spinner__BahgnS--medium:has(.ds-spinner__BahgnS__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__BahgnS--large{padding:3px}.ds-spinner__BahgnS--large:has(.ds-spinner__BahgnS__text){gap:var(--ds-spacing-xSmall)}.ds-spinner__BahgnS--xLarge{padding:5.5px}.ds-spinner__BahgnS--xLarge:has(.ds-spinner__BahgnS__text){gap:10px}.ds-spinner__BahgnS--2xLarge{padding:5.5px}.ds-spinner__BahgnS--2xLarge:has(.ds-spinner__BahgnS__text){gap:var(--ds-spacing-small)}.ds-spinner__BahgnS{}.ds-spinner__BahgnS--below{flex-direction:column;align-items:center}.ds-spinner__BahgnS--right{flex-direction:row;align-items:center}.ds-spinner__BahgnS__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__BahgnS__text{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-default)}.ds-spinner__BahgnS__text--white{color:var(--ds-textColor-white)}.ds-spinner__BahgnS__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__BahgnS__segment--1{animation-delay:-0.3s}.ds-spinner__BahgnS__segment--2{animation-delay:-0.2s}.ds-spinner__BahgnS__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__BahgnS__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__BahgnS__segment--1{animation-delay:-0.6s}.ds-spinner__BahgnS__segment--2{animation-delay:-0.4s}.ds-spinner__BahgnS__segment--3{animation-delay:-0.2s}}";
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font-heading{font-family:var(--ds-fontFamily-heading)}.ds-font-body{font-family:var(--ds-fontFamily-body)}.ds-font{}.ds-font-regular{font-weight:var(--ds-fontWeight-regular)}.ds-font-semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font-semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font-bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking-xs{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking-sm{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking-md{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking-lg{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking-xl{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading-sm{line-height:var(--ds-lineHeight-small)}.ds-leading-md{line-height:var(--ds-lineHeight-medium)}.ds-leading-lg{line-height:var(--ds-lineHeight-large)}.ds-leading-xl{line-height:var(--ds-lineHeight-xLarge)}.ds-width-md{font-stretch:var(--ds-fontWidth-normal)}.ds-width-sm{font-stretch:var(--ds-fontWidth-condense)}.ds-number-proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph-16{margin-bottom:var(--ds-marginBottom, 16px)}.ds-paragraph-20{margin-bottom:var(--ds-marginBottom, 20px)}.ds-list-spacing{gap:4px}.ds-text-color-default{color:var(--ds-textColor-default)}.ds-text{}.ds-text-regular-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text-regular-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text{}.ds-text-semibold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text-semibold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text{}.ds-text-bold-2xl{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xl{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-lg{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-md{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-sm{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text-bold-xs{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner__kfFKF0{display:flex;align-items:center;justify-content:center;}.ds-spinner__kfFKF0--small{padding:1.5px}.ds-spinner__kfFKF0--small:has(.ds-spinner__kfFKF0__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__kfFKF0--medium{padding:3px}.ds-spinner__kfFKF0--medium:has(.ds-spinner__kfFKF0__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner__kfFKF0--large{padding:3px}.ds-spinner__kfFKF0--large:has(.ds-spinner__kfFKF0__text){gap:var(--ds-spacing-xSmall)}.ds-spinner__kfFKF0--xLarge{padding:5.5px}.ds-spinner__kfFKF0--xLarge:has(.ds-spinner__kfFKF0__text){gap:10px}.ds-spinner__kfFKF0--2xLarge{padding:5.5px}.ds-spinner__kfFKF0--2xLarge:has(.ds-spinner__kfFKF0__text){gap:var(--ds-spacing-small)}.ds-spinner__kfFKF0{}.ds-spinner__kfFKF0--below{flex-direction:column;align-items:center}.ds-spinner__kfFKF0--right{flex-direction:row;align-items:center}.ds-spinner__kfFKF0__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__kfFKF0__text{font-family:var(--ds-fontFamily-body);color:var(--ds-textColor-default)}.ds-spinner__kfFKF0__text--white{color:var(--ds-textColor-white)}.ds-spinner__kfFKF0__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__kfFKF0__segment--1{animation-delay:-0.3s}.ds-spinner__kfFKF0__segment--2{animation-delay:-0.2s}.ds-spinner__kfFKF0__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__kfFKF0__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__kfFKF0__segment--1{animation-delay:-0.6s}.ds-spinner__kfFKF0__segment--2{animation-delay:-0.4s}.ds-spinner__kfFKF0__segment--3{animation-delay:-0.2s}}";
 const SPINNER_SIZES = {
     'small': 10,
@@ -60,11 +60,11 @@ const DsSpinner = proxyCustomElement(class DsSpinner extends H {
         const textClasses = classNames(`${baseClass}__text`, textSizeClass, `${baseClass}__text--${this.dsColour}`);
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: '5cce0c5fdf2b818c117aee5477071caa88b571db', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'b547ead78f41c2cfd71de186d0d9361b813b35a0', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '3568b87fd6819e8c796c5ba838be89a7afd8ffd9', class: `${baseClass}__spinner` }, h("div", { key: '65845537563383410f6567cdc86c8c68e1844bd6', class: segmentClasses(1) }), h("div", { key: 'f5f7284fc90ced9167161abd56a8c3d49586e1cb', class: segmentClasses(2) }), h("div", { key: 'a3456527ac1f7967216dd51c6f75a5be0cbd0199', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b4dba1caeffc570202fd0629ccf4fb1c5fcb8532' }, h("span", { key: '575af029324402ed4e9331147dbe15f4727300b0' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'cf5632b6daa656938c79d2b80116d9ad06791936', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '82fa72097576c045075cc6746e526f669315d965', class: `${baseClass}__spinner` }, h("div", { key: 'e4e6a7e3d62c8fb5241d16c985fa7e3c09f6e9e3', class: segmentClasses(1) }), h("div", { key: 'bfeaf74150d914144fcea32b65ca9bcaacc472be', class: segmentClasses(2) }), h("div", { key: 'd8487ec860698e908e33b4ed2692723de361e8ea', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'e29e4b9033f52749da8c869b902ce87efaf03b6d' }, h("span", { key: '67146c4237b1fa2f73921a032d7d752922178040' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'f2adb748b53738dcf65a06c94417d10fa1a5af4e', class: textClasses }, this.dsText)));
     }
     static get style() { return dsSpinnerCss; }
 }, [257, "ds-spinner", {

package/dist/components/ds-tag-group.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes
 import { d as defineCustomElement$3 } from './ds-assistive-text2.js';
 import { d as defineCustomElement$2 } from './ds-group-label2.js';
-const dsTagGroupCss = ".ds-tag-group__BahgnS__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
+const dsTagGroupCss = ".ds-tag-group__kfFKF0__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
 const tagGroupIdGenerator = idGenerator('ds-tag-group');
 const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
@@ -33,7 +33,7 @@ const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = attrAriaLabel || this.dsLabel;
-        return (h("div", { key: '7b4e33e73d8971f94e546bb40fc8ae59072e72a1', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '758a46f76a20e1dd2e87babfb9de36f639d96907', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'f9a47ba4765a18647e4fc9b4cd655b0c7397bff6', name: "label" }), h("slot", { key: '0d371f8bf2d864c4dbce0e4b6525499a2dc7ee87', name: "assistiveText" })), h("div", { key: '657273e1243f880656f164dc71ae66b7acfb3902', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '3ed1b7f84f47bf845253a47b2778b2d70d29763b' }))));
+        return (h("div", { key: 'efc792b4d18a1111810a682a0d45dd5a30c127bb', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: '3bb21b89731d4eb10996b5c4f5b0cc5587265ab8', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'e523a123e46788ab4666f7e1d4c4dd9795be74af', name: "label" }), h("slot", { key: '973eb9d7e836724b40bcf1d802699a6158f3cf18', name: "assistiveText" })), h("div", { key: 'f8b272665b58a2ae3658dc4ad0f66fa6d0cd8ca9', role: "list", class: `${baseClass}__tags` }, h("slot", { key: '9753af4408e89500b98fd52ad3b3d2b59f1abbea' }))));
     }
     static get style() { return dsTagGroupCss; }
 }, [262, "ds-tag-group", {

package/dist/components/ds-tag2.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './ds-icon2.js';
 import { d as defineCustomElement$2 } from './ds-link2.js';
 import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
-const dsTagCss = ".ds-tag__BahgnS: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-tag__BahgnS: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-tag__BahgnS{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__BahgnS.ds-tag__BahgnS--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__BahgnS.ds-tag__BahgnS--default:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--default:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__BahgnS.ds-tag__BahgnS--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__BahgnS.ds-tag__BahgnS--black:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--black:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__BahgnS.ds-tag__BahgnS--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__BahgnS.ds-tag__BahgnS--white:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--white:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__BahgnS.ds-tag__BahgnS--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__BahgnS.ds-tag__BahgnS--info:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--info:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__BahgnS.ds-tag__BahgnS--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__BahgnS.ds-tag__BahgnS--danger:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--danger:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__BahgnS.ds-tag__BahgnS--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__BahgnS.ds-tag__BahgnS--attention:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--attention:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__BahgnS.ds-tag__BahgnS--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__BahgnS.ds-tag__BahgnS--success:has(.ds-tag__BahgnS__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__BahgnS.ds-tag__BahgnS--success:has(.ds-tag__BahgnS__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__BahgnS__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__BahgnS__link{display:contents}.ds-tag__BahgnS__link::part(link):focus-visible{box-shadow:none;outline:none;outline-offset:none}";
+const dsTagCss = ".ds-tag__kfFKF0: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-tag__kfFKF0: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-tag__kfFKF0{box-sizing:border-box;display:inline-flex;align-items:center;min-height:1.5rem;background-color:var(--ds-bgColor-neutral);padding:calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);gap:var(--ds-spacing-3xSmall)}.ds-tag__kfFKF0.ds-tag__kfFKF0--default{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral)}.ds-tag__kfFKF0.ds-tag__kfFKF0--default:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-neutral-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--default:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-neutral-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--black{color:var(--ds-textColor-white);background-color:var(--ds-bgColor-black)}.ds-tag__kfFKF0.ds-tag__kfFKF0--black:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-black-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--black:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-black-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--white{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white)}.ds-tag__kfFKF0.ds-tag__kfFKF0--white:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-white-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--white:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-white-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--info{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info)}.ds-tag__kfFKF0.ds-tag__kfFKF0--info:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-info-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--info:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-info-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--danger{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger)}.ds-tag__kfFKF0.ds-tag__kfFKF0--danger:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-danger-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--danger:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-danger-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--attention{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention)}.ds-tag__kfFKF0.ds-tag__kfFKF0--attention:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-attention-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--attention:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-attention-active)}.ds-tag__kfFKF0.ds-tag__kfFKF0--success{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success)}.ds-tag__kfFKF0.ds-tag__kfFKF0--success:has(.ds-tag__kfFKF0__link:hover){background-color:var(--ds-bgColor-success-hover)}.ds-tag__kfFKF0.ds-tag__kfFKF0--success:has(.ds-tag__kfFKF0__link:active){background-color:var(--ds-bgColor-success-active)}.ds-tag__kfFKF0__text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-tag__kfFKF0__link{display:contents}.ds-tag__kfFKF0__link::part(link):focus-visible{box-shadow:none;outline:none;outline-offset:none}";
 const DsTag = proxyCustomElement(class DsTag extends H {
     constructor(registerHost) {
@@ -38,7 +38,7 @@ const DsTag = proxyCustomElement(class DsTag extends H {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        return (h("div", { key: 'a1c6d7eab81ace5fa1a4527ba22a60d4b4c2790c', class: classes, ...this.inheritedAttributes }, h("slot", { key: '1e6fb63f16b1128732d8db52f2db89398d6e72e9', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '87270eb831a387a2a2e615f48c35f0e743ed6459' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '1bc650c62972fb0acda7aef82e435a30c3553f40', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: '0f2446c4b517db3ec20dfa950febccf0c7bfeb52', class: classes, ...this.inheritedAttributes }, h("slot", { key: '43e0a142a8f365d80cf58eaa759a7f7440ef2c30', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'ac1a060893498bc4bd9d6b87cc3f50d9074f1fac' }, this.dsHref ? (h(DsLink, { class: `${baseClass}__link`, dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: `${baseClass}__text` }, this.dsText))), h("slot", { key: '8ac71e5fedcb5e8b0d1bf2e95174d014ca11e61a', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get style() { return dsTagCss; }
 }, [260, "ds-tag", {

package/dist/components/ds-text-area.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { d as defineCustomElement$4 } from './ds-icon2.js';
 import { d as defineCustomElement$3 } from './ds-input-validity2.js';
 import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
-const dsTextAreaCss = ".sc-ds-text-area-h *.sc-ds-text-area,.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{all:unset;box-sizing:border-box;display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__BahgnS__container--full-width){width:100%}.ds-text-area__BahgnS__container.sc-ds-text-area: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-text-area__BahgnS__container.sc-ds-text-area: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-text-area__BahgnS__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.ds-text-area__BahgnS__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__BahgnS__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__BahgnS__container--valid.sc-ds-text-area:hover:not(.ds-text-area__BahgnS__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__BahgnS__container--valid.ds-text-area__BahgnS__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__BahgnS__container--readonly.sc-ds-text-area,.ds-text-area__BahgnS__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__BahgnS__container.sc-ds-text-area:focus-within:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__BahgnS__container.sc-ds-text-area:hover:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--disabled,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--active.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid.sc-ds-text-area,.ds-text-area__BahgnS__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__BahgnS__container.active.sc-ds-text-area:not(.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--disabled,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--readonly.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--invalid.sc-ds-text-area,.ds-text-area__BahgnS__container.ds-text-area__BahgnS__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__BahgnS__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__BahgnS__external-button.sc-ds-text-area,.ds-text-area__BahgnS.sc-ds-text-area-s>[slot=suffix],.ds-text-area__BahgnS .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__BahgnS__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__BahgnS__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__BahgnS__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__BahgnS__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__BahgnS__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block}.ds-text-area__BahgnS__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__BahgnS__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__BahgnS__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__BahgnS__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__BahgnS__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__BahgnS__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__BahgnS__textarea--resize-auto.sc-ds-text-area,.ds-text-area__BahgnS__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__BahgnS__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__BahgnS__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__BahgnS__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__BahgnS__textarea--full-width.sc-ds-text-area{width:100%}";
+const dsTextAreaCss = ".sc-ds-text-area-h *.sc-ds-text-area,.ds-no-style-leak.sc-ds-text-area *.sc-ds-text-area{all:unset;box-sizing:border-box;display:block}.sc-ds-text-area-h{display:inline-block}.sc-ds-text-area-h:has(.ds-text-area__kfFKF0__container--full-width){width:100%}.ds-text-area__kfFKF0__container.sc-ds-text-area: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-text-area__kfFKF0__container.sc-ds-text-area: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-text-area__kfFKF0__container.sc-ds-text-area{box-sizing:border-box;display:inline-flex;position:relative;align-items:flex-start;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding:0}.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.sc-ds-text-area{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.sc-ds-text-area:hover:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.ds-text-area__kfFKF0__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-text-area__kfFKF0__container--valid.sc-ds-text-area{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-text-area__kfFKF0__container--valid.sc-ds-text-area:hover:not(.ds-text-area__kfFKF0__container--valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-text-area__kfFKF0__container--valid.ds-text-area__kfFKF0__container--active.sc-ds-text-area{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-text-area__kfFKF0__container--readonly.sc-ds-text-area,.ds-text-area__kfFKF0__container--disabled.sc-ds-text-area{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-text-area__kfFKF0__container.sc-ds-text-area:focus-within:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly).sc-ds-text-area{border-color:var(--ds-borderColor-primary)}.ds-text-area__kfFKF0__container.sc-ds-text-area:hover:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--disabled,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--active.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid.sc-ds-text-area,.ds-text-area__kfFKF0__container.sc-ds-text-area:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-text-area__kfFKF0__container.active.sc-ds-text-area:not(.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--disabled,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--readonly.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--invalid.sc-ds-text-area,.ds-text-area__kfFKF0__container.ds-text-area__kfFKF0__container--valid).sc-ds-text-area{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-text-area__kfFKF0__container--full-width.sc-ds-text-area{width:100%}.ds-text-area__kfFKF0__external-button.sc-ds-text-area,.ds-text-area__kfFKF0.sc-ds-text-area-s>[slot=suffix],.ds-text-area__kfFKF0 .sc-ds-text-area-s>[slot=suffix]{margin-inline-start:var(--ds-spacing-xSmall);align-self:flex-start}.ds-text-area__kfFKF0__validity-container.sc-ds-text-area{align-items:center;width:100%;font-size:var(--ds-fontSize-14)}.ds-text-area__kfFKF0__validity-container--has-character-limit.sc-ds-text-area{display:flex;gap:var(--ds-spacing-small);justify-content:space-between}.ds-text-area__kfFKF0__character-count.sc-ds-text-area{margin-top:var(--ds-spacing-2xSmall)}.ds-text-area__kfFKF0__character-count--over-limit.sc-ds-text-area{color:var(--ds-textColor-danger)}.ds-text-area__kfFKF0__character-count.sc-ds-text-area>small.sc-ds-text-area{display:inline-block}.ds-text-area__kfFKF0__textarea.sc-ds-text-area{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:288px;min-width:0;min-height:96px;box-sizing:border-box;background-color:unset;color:var(--ds-textColor-default);border:none;padding:var(--ds-spacing-2xSmall)}.ds-text-area__kfFKF0__textarea.sc-ds-text-area::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-text-area__kfFKF0__textarea.sc-ds-text-area:disabled{color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);cursor:not-allowed}.ds-text-area__kfFKF0__textarea.sc-ds-text-area:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-text-area__kfFKF0__textarea.sc-ds-text-area:focus{outline:none;border:none}.ds-text-area__kfFKF0__textarea--resize-both.sc-ds-text-area{resize:both}.ds-text-area__kfFKF0__textarea--resize-auto.sc-ds-text-area,.ds-text-area__kfFKF0__textarea--resize-none.sc-ds-text-area{resize:none}.ds-text-area__kfFKF0__textarea--resize-auto.sc-ds-text-area{overflow:hidden}.ds-text-area__kfFKF0__textarea--resize-vertical.sc-ds-text-area{resize:vertical}.ds-text-area__kfFKF0__textarea--resize-horizontal.sc-ds-text-area{resize:horizontal}.ds-text-area__kfFKF0__textarea--full-width.sc-ds-text-area{width:100%}";
 const textareaIdGenerator = idGenerator('ds-text-area');
 const DsTextArea$1 = proxyCustomElement(class DsTextArea extends H {