@uh-design-system/component-library 1.4.0-rc.0 → 1.4.0-rc.2

package/dist/cjs/ds-select-native.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-DY9OS4qF.js');
+var index = require('./index-Cwc95KFn.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DOIzXqfM.js');
 var attributes = require('./attributes-5eBKMo1N.js');
-var cx = require('./cx-Cec9RCyK.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-DHj6bwlK.js');
-var controlUtils = require('./controlUtils-CrRD5YNx.js');
-require('./store-lf-vy_yb.js');
+var cx = require('./cx-BxEHiZno.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-BWenwbgw.js');
+var controlUtils = require('./controlUtils-BU68DU8D.js');
+require('./store-CZlFszsx.js');
 
-const dsSelectNativeCss = ".sc-ds-select-native-h{display:inline-block;width:100%}@media (min-width: 30rem){:not(:has(.ds-select__1Vp5mb--full-width)).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__1Vp5mb-native.sc-ds-select-native,.ds-select__1Vp5mb-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__1Vp5mb-native__dropdown-icon.sc-ds-select-native,.ds-select__1Vp5mb-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__1Vp5mb-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__1Vp5mb-custom.sc-ds-select-native .ds-options__1Vp5mb.sc-ds-select-native{display:block}.ds-select__1Vp5mb-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__1Vp5mb-custom-input-container.sc-ds-select-native:has(.ds-select__1Vp5mb-custom__clear-button:hover) .ds-select__1Vp5mb-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__1Vp5mb-custom.sc-ds-select-native:not(.ds-select__1Vp5mb-custom--open,.ds-select__1Vp5mb-custom--invalid.sc-ds-select-native,.ds-select__1Vp5mb-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__1Vp5mb-custom.sc-ds-select-native:active:not(.ds-select__1Vp5mb-custom--open,.ds-select__1Vp5mb-custom--invalid.sc-ds-select-native,.ds-select__1Vp5mb-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__1Vp5mb-custom--open.sc-ds-select-native,.ds-select__1Vp5mb-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__1Vp5mb-custom--open.sc-ds-select-native:not(.ds-select__1Vp5mb-custom--open--invalid,.ds-select__1Vp5mb-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__1Vp5mb-custom.sc-ds-select-native:focus-visible:not(.ds-select__1Vp5mb-custom--open--invalid,.ds-select__1Vp5mb-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__1Vp5mb-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__1Vp5mb-custom--disabled.sc-ds-select-native .ds-select__1Vp5mb-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__1Vp5mb-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__1Vp5mb-custom--invalid.sc-ds-select-native:not(.ds-select__1Vp5mb-custom--invalid--open,.ds-select__1Vp5mb-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__1Vp5mb-custom--invalid.sc-ds-select-native:not(.ds-select__1Vp5mb-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__1Vp5mb-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__1Vp5mb-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-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__1Vp5mb-custom--has-icon.sc-ds-select-native .ds-select__1Vp5mb-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__1Vp5mb-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__1Vp5mb-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__1Vp5mb-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__1Vp5mb-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__1Vp5mb-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);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__1Vp5mb-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__1Vp5mb-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__1Vp5mb-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__1Vp5mb-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__1Vp5mb-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__1Vp5mb-custom__badge-container.sc-ds-select-native{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__1Vp5mb-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__1Vp5mb-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__1Vp5mb-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__1Vp5mb-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__1Vp5mb-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__1Vp5mb-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__1Vp5mb-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__1Vp5mb-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__1Vp5mb-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__1Vp5mb-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__1Vp5mb-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%)}.ds-select__1Vp5mb-native.sc-ds-select-native:not(.ds-select__1Vp5mb-native--invalid,.ds-select__1Vp5mb-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__1Vp5mb-native.sc-ds-select-native:has(.ds-select__1Vp5mb-native__select:active):not(.ds-select__1Vp5mb-native--invalid,.ds-select__1Vp5mb-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__1Vp5mb-native.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__1Vp5mb-native--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__1Vp5mb-native--disabled.sc-ds-select-native .ds-select__1Vp5mb-native__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__1Vp5mb-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__1Vp5mb-native--invalid.sc-ds-select-native:not(.ds-select__1Vp5mb-native--invalid--disabled):has(.ds-select__1Vp5mb-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__1Vp5mb-native--invalid.sc-ds-select-native:not(.ds-select__1Vp5mb-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__1Vp5mb-native__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__1Vp5mb-native__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__1Vp5mb-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__1Vp5mb-native__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){:not(:has(.ds-select__oSBnIJ--full-width)).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__oSBnIJ-native.sc-ds-select-native,.ds-select__oSBnIJ-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__oSBnIJ-native__dropdown-icon.sc-ds-select-native,.ds-select__oSBnIJ-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__oSBnIJ-custom-wrapper.sc-ds-select-native{position:relative}.ds-select__oSBnIJ-custom.sc-ds-select-native .ds-options__oSBnIJ.sc-ds-select-native{display:block}.ds-select__oSBnIJ-custom-input-container.sc-ds-select-native{display:flex;position:relative}.ds-select__oSBnIJ-custom-input-container.sc-ds-select-native:has(.ds-select__oSBnIJ-custom__clear-button:hover) .ds-select__oSBnIJ-custom.sc-ds-select-native{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__oSBnIJ-custom.sc-ds-select-native:not(.ds-select__oSBnIJ-custom--open,.ds-select__oSBnIJ-custom--invalid.sc-ds-select-native,.ds-select__oSBnIJ-custom--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__oSBnIJ-custom.sc-ds-select-native:active:not(.ds-select__oSBnIJ-custom--open,.ds-select__oSBnIJ-custom--invalid.sc-ds-select-native,.ds-select__oSBnIJ-custom--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__oSBnIJ-custom--open.sc-ds-select-native,.ds-select__oSBnIJ-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__oSBnIJ-custom--open.sc-ds-select-native:not(.ds-select__oSBnIJ-custom--open--invalid,.ds-select__oSBnIJ-custom.sc-ds-select-native:focus-visible--invalid),.ds-select__oSBnIJ-custom.sc-ds-select-native:focus-visible:not(.ds-select__oSBnIJ-custom--open--invalid,.ds-select__oSBnIJ-custom.sc-ds-select-native:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__oSBnIJ-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__oSBnIJ-custom--disabled.sc-ds-select-native .ds-select__oSBnIJ-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__oSBnIJ-custom--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-custom--invalid.sc-ds-select-native:not(.ds-select__oSBnIJ-custom--invalid--open,.ds-select__oSBnIJ-custom--invalid--disabled).sc-ds-select-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-custom--invalid.sc-ds-select-native:not(.ds-select__oSBnIJ-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__oSBnIJ-custom__dropdown-icon--has-clear-button.sc-ds-select-native{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__oSBnIJ-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-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-xSmall)}.ds-select__oSBnIJ-custom--has-icon.sc-ds-select-native .ds-select__oSBnIJ-custom__selected-option.sc-ds-select-native{padding-left:var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));padding-right:var(--ds-spacing-2xSmall)}.ds-select__oSBnIJ-custom__selected-option__placeholder-icon.sc-ds-select-native{font-size:var(--ds-fontSize-16)}.ds-select__oSBnIJ-custom__selected-option__text.sc-ds-select-native{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;color:var(--ds-textColor-default)}.ds-select__oSBnIJ-custom__selected-option__text--none-selected.sc-ds-select-native{color:var(--ds-textColor-secondary)}.ds-select__oSBnIJ-custom__selected-option__text--disabled.sc-ds-select-native{color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select-native input.sc-ds-select-native{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);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__oSBnIJ-custom.sc-ds-select-native input.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__oSBnIJ-custom.sc-ds-select-native input.sc-ds-select-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select-native input.sc-ds-select-native:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__oSBnIJ-custom.sc-ds-select-native input.sc-ds-select-native:focus{outline:none}.ds-select__oSBnIJ-custom__clear-button.sc-ds-select-native{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__oSBnIJ-custom__badge-container.sc-ds-select-native{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__oSBnIJ-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__oSBnIJ-custom__options-container--open.sc-ds-select-native{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__oSBnIJ-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__oSBnIJ-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__oSBnIJ-custom__options-container__options__inner__top-scrim.sc-ds-select-native,.ds-select__oSBnIJ-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__oSBnIJ-custom__options-container__options__inner__top-scrim--visible.sc-ds-select-native,.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select-native{display:block}.ds-select__oSBnIJ-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__oSBnIJ-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__oSBnIJ-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%)}.ds-select__oSBnIJ-native.sc-ds-select-native:not(.ds-select__oSBnIJ-native--invalid,.ds-select__oSBnIJ-native--disabled).sc-ds-select-native:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__oSBnIJ-native.sc-ds-select-native:has(.ds-select__oSBnIJ-native__select:active):not(.ds-select__oSBnIJ-native--invalid,.ds-select__oSBnIJ-native--disabled).sc-ds-select-native{background-color:var(--ds-bgColor-white-active)}.ds-select__oSBnIJ-native.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__oSBnIJ-native--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__oSBnIJ-native--disabled.sc-ds-select-native .ds-select__oSBnIJ-native__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__oSBnIJ-native--invalid.sc-ds-select-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-native--invalid.sc-ds-select-native:not(.ds-select__oSBnIJ-native--invalid--disabled):has(.ds-select__oSBnIJ-native__select:active){background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__oSBnIJ-native--invalid.sc-ds-select-native:not(.ds-select__oSBnIJ-native--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__oSBnIJ-native__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__oSBnIJ-native__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__oSBnIJ-native__select.sc-ds-select-native::placeholder{color:var(--ds-textColor-secondary)}.ds-select__oSBnIJ-native__select.sc-ds-select-native:disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}";
 
 const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDeprecationFactory) {
     constructor(hostRef) {
@@ -106,11 +106,11 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
         const { ['aria-controls']: attrAriaControls, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const ariaControls = this.dsAriaControls ?? attrAriaControls ?? `${this.dsId}-listbox`;
-        return (index.h("div", { key: 'bea31de32c0bc4f6f36bdee67df13dc1114cbe08' }, index.h(DsControlLabel, { key: '509591a07bb3f0e3840b9e8f2134767a29f6fb88', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, index.h("slot", { key: 'ecca16624b57d72e5640cbaadd5e9ab4716d504c', name: "label" })), index.h("div", { key: '36ad8457a8730481846c613141336d566add1f35', class: index$1.classNames(`${nativeSelectClass}`, {
+        return (index.h("div", { key: '4637c1eb5ab582681c3affe8040bc6b733cbc63b' }, index.h(DsControlLabel, { key: 'fc095058829c5170d6817c6052ca89fc6def102b', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, index.h("slot", { key: '6a3c47fbd90a3223329eb3d40f52235f41bec56c', name: "label" })), index.h("div", { key: '8e2cac7bd238e2a5d32f78acc03e33340162d395', class: index$1.classNames(`${nativeSelectClass}`, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: 'be296cd4aa35e5b26429f8cd33d3d0311d274c97', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), index.h("select", { key: '8e61de2a2072a988d258b91bcffde3e03fca8509', ref: el => {
+            }) }, index.h("div", { key: '873bcb57f1de28b382a556b0ed604fce5cd77966', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), index.h("select", { key: '093f2fbd7b03b94dd6990a0f76438bf7f02b2c17', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -118,7 +118,7 @@ const DsSelectNative = class extends index.Mixin(ariaDeprecationFactory.ariaDepr
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, index.h("option", { key: '3fe79608e08f10f9c1164578ee01553bc2f5b808', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), index.h("slot", { key: '0454a5edc7ff125395b935b413e171b3685674ed', name: "native" })), index.h(this.DsIconTag, { key: '3ac21d46b4edfb53dd3bb51337dd5977945fae26', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && index.h(this.DsInputValidityTag, { key: '19f92019dd44cfcda54edf37c1828b1effbcf27b', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, index.h("option", { key: '6e26e0cf8129c40178eb53234fd77046ef896302', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), index.h("slot", { key: 'f56335457c6131faf6415cee729a7a5679763a02', name: "native" })), index.h(this.DsIconTag, { key: 'e744b4a109ff61203bda35fd58bf3d606a0566fb', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && index.h(this.DsInputValidityTag, { key: 'e297ed9573d0ba53ea599482edc1a3bc22515ce7', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "aria-describedby": ["ariaAttributeObserver"],

package/dist/cjs/ds-spinner.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-DY9OS4qF.js');
+var index = require('./index-Cwc95KFn.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-Cec9RCyK.js');
+var cx = require('./cx-BxEHiZno.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__1Vp5mb{display:inline-block}.ds-spinner__1Vp5mb:has(.ds-spinner__1Vp5mb__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__1Vp5mb{}.ds-spinner__1Vp5mb--small{padding:1.5px}.ds-spinner__1Vp5mb--medium{padding:3px}.ds-spinner__1Vp5mb--large{padding:3px}.ds-spinner__1Vp5mb--xLarge{padding:5.5px}.ds-spinner__1Vp5mb--2xLarge{padding:5.5px}.ds-spinner__1Vp5mb--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__1Vp5mb{}.ds-spinner__1Vp5mb--below{flex-direction:column;align-items:center}.ds-spinner__1Vp5mb--right{flex-direction:row;align-items:center}.ds-spinner__1Vp5mb__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__1Vp5mb__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__1Vp5mb__text--white{color:var(--ds-textColor-white)}.ds-spinner__1Vp5mb__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__1Vp5mb__segment--1{animation-delay:-0.3s}.ds-spinner__1Vp5mb__segment--2{animation-delay:-0.2s}.ds-spinner__1Vp5mb__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__1Vp5mb__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__1Vp5mb__segment--1{animation-delay:-0.6s}.ds-spinner__1Vp5mb__segment--2{animation-delay:-0.4s}.ds-spinner__1Vp5mb__segment--3{animation-delay:-0.2s}}";
+const dsSpinnerCss = ".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__oSBnIJ{display:inline-block}.ds-spinner__oSBnIJ:has(.ds-spinner__oSBnIJ__text){display:inline-flex;align-items:center;gap:calc(var(--spinner-size) / 2)}.ds-spinner__oSBnIJ{}.ds-spinner__oSBnIJ--small{padding:1.5px}.ds-spinner__oSBnIJ--medium{padding:3px}.ds-spinner__oSBnIJ--large{padding:3px}.ds-spinner__oSBnIJ--xLarge{padding:5.5px}.ds-spinner__oSBnIJ--2xLarge{padding:5.5px}.ds-spinner__oSBnIJ--custom{padding:calc(var(--spinner-size) / 8)}.ds-spinner__oSBnIJ{}.ds-spinner__oSBnIJ--below{flex-direction:column;align-items:center}.ds-spinner__oSBnIJ--right{flex-direction:row;align-items:center}.ds-spinner__oSBnIJ__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__oSBnIJ__text{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body)}.ds-spinner__oSBnIJ__text--white{color:var(--ds-textColor-white)}.ds-spinner__oSBnIJ__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__oSBnIJ__segment--1{animation-delay:-0.3s}.ds-spinner__oSBnIJ__segment--2{animation-delay:-0.2s}.ds-spinner__oSBnIJ__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__oSBnIJ__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__oSBnIJ__segment--1{animation-delay:-0.6s}.ds-spinner__oSBnIJ__segment--2{animation-delay:-0.4s}.ds-spinner__oSBnIJ__segment--3{animation-delay:-0.2s}}";
 
 const SPINNER_SIZES = {
     'small': 10,
@@ -63,11 +63,11 @@ const DsSpinner = class {
         const segmentClasses = (index) => index$1.classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = utils.transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (index.h("div", { key: 'd2425687fe8ae67ad7ff01132ac72184385e1a0d', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (index.h("div", { key: 'a60e95698a071c75dd34474808a349640ffc6a72', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, index.h("div", { key: '67cce14bb5c2bc346e2c519ab657fe3b5c84ccea', class: `${baseClass}__spinner` }, index.h("div", { key: '33ec73e1e87db9bf3c1f7985cbc4900664804c89', class: segmentClasses(1) }), index.h("div", { key: '8a578d81fe59d7856eb85e8197a50e7777b6bfe9', class: segmentClasses(2) }), index.h("div", { key: '678765cd3a18f8e4aead12455db4bb9d95fae00f', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: '55b13d79bc246d64f34558485e1c9cbc45e3f827' }, index.h("span", { key: '6c6d0f99695f0685ffa0041b3fc1c9f4cc0e5c96' }, this.dsHiddenAssistiveText))), this.dsText && (index.h("span", { key: '6b09a79c0766e6409ab6bbbb0adb18532520482a', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, index.h("div", { key: 'e3e6ad995481b0fb08518572edb50029e92d89a8', class: `${baseClass}__spinner` }, index.h("div", { key: 'c12e11a8d5601027e74a493fce294da673cdc9af', class: segmentClasses(1) }), index.h("div", { key: 'dfc8e7860a421cd41356bff73ac1a647709b3eda', class: segmentClasses(2) }), index.h("div", { key: '2c1207b2bb431baff9048d914ddd111dbf185f57', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (index.h(DsVisuallyHidden, { key: 'f47bd62847a965e05f56da222292467f3cbc3fd6' }, index.h("span", { key: '2fb3efd756d10f80a1aab99b52bab9b0f95f416a' }, this.dsHiddenAssistiveText))), this.dsText && (index.h("span", { key: '5c5aa10a7650d9a67d2ed45464162e7467f041a0', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-visually-hidden", null)]);

package/dist/cjs/ds-store.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DY9OS4qF.js');
-var store = require('./store-lf-vy_yb.js');
+var index = require('./index-Cwc95KFn.js');
+var store = require('./store-CZlFszsx.js');
 
 const DsStore = class {
     constructor(hostRef) {

package/dist/cjs/ds-tab.cjs.entry.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-Cwc95KFn.js');
+var cx = require('./cx-BxEHiZno.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var utils = require('./utils-DOIzXqfM.js');
+var tabsFactory = require('./tabsFactory-CEl-_Eyr.js');
+require('./tabsContext-Cg_aEFJd.js');
+
+const colourNames = ['default', 'neutral', 'white', 'primary', 'info', 'danger', 'success', 'attention'];
+const iconStates = ['hover', 'active'];
+const getIconColourVariable = (name, state) => `ds-iconColor-${name}${state ? `-${state}` : ''}`;
+const baseIconColours = colourNames.map(name => getIconColourVariable(name));
+baseIconColours.reduce((acc, curr) => {
+    acc.push(curr);
+    iconStates.forEach(state => {
+        acc.push(getIconColourVariable(curr, state));
+    });
+    return acc;
+}, []);
+
+const dsTabCss = ".ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__oSBnIJ.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__oSBnIJ.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__oSBnIJ--selected.sc-ds-tab,.ds-tab__oSBnIJ.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected),.ds-tab__oSBnIJ.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected){color:var(--ds-textColor-default)}.ds-tab__oSBnIJ--container.sc-ds-tab:focus-visible{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab::after{content:\"\";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab:not(:focus-visible)::before{content:\"\";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__oSBnIJ--container.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__oSBnIJ--container.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__oSBnIJ--line.sc-ds-tab:focus-visible .ds-tab__oSBnIJ__content.sc-ds-tab{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-tab__oSBnIJ--line.ds-tab__oSBnIJ--selected.sc-ds-tab::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__oSBnIJ--line.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__oSBnIJ--line.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__oSBnIJ.sc-ds-tab .ds-tab__oSBnIJ__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}";
+
+const DsTab = class extends index.Mixin(tabsFactory.tabsFactory) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.dsTabClick = index.createEvent(this, "dsTabClick");
+        this.dsTabFocus = index.createEvent(this, "dsTabFocus");
+    }
+    get el() { return index.getElement(this); }
+    tablist = null;
+    tabElement;
+    dsTabClick;
+    dsTabFocus;
+    dsId;
+    dsTabPanelId;
+    dsText;
+    dsIconStart;
+    dsIconEnd;
+    dsIconEndColour;
+    hasPrefixSlot = false;
+    hasContentSlot = false;
+    hasSuffixSlot = false;
+    isHovered = false;
+    isActive = false;
+    get DsTablist() {
+        return utils.transformTagName('ds-tablist', 'ds-tab', this.el);
+    }
+    get DsIcon() {
+        return utils.transformTagName('ds-icon', 'ds-tab', this.el);
+    }
+    get iconInteractionState() {
+        if (this.isActive)
+            return 'active';
+        if (this.isHovered)
+            return 'hover';
+        return undefined;
+    }
+    get iconColour() {
+        if (!this.dsIconEndColour)
+            return undefined;
+        return getIconColourVariable(this.dsIconEndColour, this.iconInteractionState);
+    }
+    async setFocus() {
+        this.tabElement?.focus({ preventScroll: true });
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    handleMouseDown() {
+        this.isActive = true;
+    }
+    handleMouseUp() {
+        this.isActive = false;
+    }
+    handleFocusIn() {
+        this.dsTabFocus.emit({ tabId: this.dsId });
+    }
+    handleClick() {
+        if (this.context?.currentTab === this.dsId)
+            return;
+        this.dsTabClick.emit({ tabId: this.dsId, tabPanelId: this.dsTabPanelId });
+    }
+    checkSlot = (stateName, selector) => {
+        this[stateName] = this.el.querySelector(selector) !== null;
+    };
+    checkPrefixSlot = () => this.checkSlot('hasPrefixSlot', '[slot="prefix"]');
+    checkContentSlot = () => this.checkSlot('hasContentSlot', '[slot="content"]');
+    checkSuffixSlot = () => this.checkSlot('hasSuffixSlot', '[slot="suffix"]');
+    connectedCallback() {
+        this.tablist = this.el.closest(this.DsTablist);
+        if (this.tablist) {
+            this.tablist.tabConnected();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.tablist) {
+            this.tablist.tabDisconnected();
+        }
+        this.tablist = null;
+    }
+    componentDidLoad() {
+        this.checkPrefixSlot();
+        this.checkContentSlot();
+        this.checkSuffixSlot();
+    }
+    render() {
+        const baseClass = cx.cx('ds-tab');
+        const isSelected = this.context?.currentTab === this.dsId;
+        const classes = index$1.classNames(baseClass, {
+            [`${baseClass}--container`]: this.context?.variant === 'container',
+            [`${baseClass}--line`]: this.context?.variant === 'line',
+            [`${baseClass}--selected`]: isSelected,
+        });
+        return (index.h("div", { key: '1fbc41f2d6654c367ec02206e550fd749d6794b8', ref: elem => (this.tabElement = elem), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, index.h("div", { key: '5bb747568c268122a7bc86ae4ae8a01191441b88', class: `${baseClass}__content` }, index.h("slot", { key: 'd9229905e2578d66c25ddd782288982d8945779c', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && index.h(this.DsIcon, { key: 'a84247bb0f42bf41b724baa0fda285d2afc80356', dsName: this.dsIconStart })), index.h("slot", { key: 'b27957b33646cc050f3d155cd0ef92d80ce41dab', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && index.h("span", { key: 'efbc2f4c46ace18ff104978097ac893045e40cd5' }, this.dsText)), index.h("slot", { key: '5daa646e7d12b185f9d55d04889f717a5556bcc5', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && index.h(this.DsIcon, { key: 'c7fe446b2fce539f08f1409c674f714992e5f36e', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+    }
+};
+utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);
+DsTab.style = dsTabCss;
+
+exports.ds_tab = DsTab;

package/dist/cjs/ds-tablist.cjs.entry.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var index = require('./index-Cwc95KFn.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var cx = require('./cx-BxEHiZno.js');
+var utils = require('./utils-DOIzXqfM.js');
+var tabsFactory = require('./tabsFactory-CEl-_Eyr.js');
+require('./tabsContext-Cg_aEFJd.js');
+
+const dsTablistCss = ".ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__oSBnIJ.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:focus,.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--backward.sc-ds-tablist{left:0}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--forward.sc-ds-tablist{right:0}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.ds-tablist__oSBnIJ__button--backward.sc-ds-tablist::after{content:\"\";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.ds-tablist__oSBnIJ__button--forward.sc-ds-tablist::after{content:\"\";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button[hidden].sc-ds-tablist{display:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button__ds-button.sc-ds-tablist{width:100%;height:100%}";
+
+const DsTablist = class extends index.Mixin(tabsFactory.tabsFactory) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.dsTabChange = index.createEvent(this, "dsTabChange");
+    }
+    get el() { return index.getElement(this); }
+    RESIZE_THROTTLE_TIMEOUT = 100;
+    scrollableElement;
+    backwardButtonElement;
+    forwardButtonElement;
+    dsTabChange;
+    dsAriaLabel;
+    dsAriaLabelledby;
+    showBackwardButton = false;
+    showForwardButton = false;
+    get DsTab() {
+        return utils.transformTagName('ds-tab', 'ds-tablist', this.el);
+    }
+    get DsButton() {
+        return utils.transformTagName('ds-button', 'ds-tablist', this.el);
+    }
+    setButtonsVisibility = (target) => {
+        if (!target)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = target;
+        this.showBackwardButton = scrollLeft > 0;
+        this.showForwardButton = Math.round(scrollLeft + clientWidth) < scrollWidth;
+    };
+    throttledSetButtonsVisibility = utils.throttle(this.setButtonsVisibility, this.RESIZE_THROTTLE_TIMEOUT);
+    async tabConnected() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    async tabDisconnected() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    handleResize() {
+        this.throttledSetButtonsVisibility(this.scrollableElement);
+    }
+    handleTabClick(event) {
+        event.stopPropagation();
+        if (event.detail.tabId === this.context?.currentTab)
+            return;
+        this.dsTabChange.emit(event.detail);
+    }
+    scrollTabIntoView = (tab) => {
+        if (!this.scrollableElement)
+            return;
+        const tabNode = tab.querySelector('[role="tab"]');
+        if (!tabNode)
+            return;
+        const leftCover = this.backwardButtonElement && !this.backwardButtonElement.hidden ? this.backwardButtonElement.offsetWidth : 0;
+        const rightCover = this.forwardButtonElement && !this.forwardButtonElement.hidden ? this.forwardButtonElement.offsetWidth : 0;
+        const { left, right } = this.scrollableElement.getBoundingClientRect();
+        const { left: tabLeft, right: tabRight } = tabNode.getBoundingClientRect();
+        const visibilityBuffer = 16;
+        let next = this.scrollableElement.scrollLeft;
+        if (tabLeft < left + leftCover + visibilityBuffer) {
+            next -= left + leftCover + visibilityBuffer - tabLeft;
+        }
+        else if (tabRight > right - rightCover - visibilityBuffer) {
+            next += tabRight - (right - rightCover - visibilityBuffer);
+        }
+        const max = this.scrollableElement.scrollWidth - this.scrollableElement.clientWidth;
+        this.scrollableElement.scrollTo({ left: Math.max(0, Math.min(next, max)), behavior: 'auto' });
+    };
+    handleTabFocus(event) {
+        event.stopPropagation();
+        this.scrollTabIntoView(event.target);
+    }
+    handleKeyDown = (event) => {
+        event.stopPropagation();
+        const activeTab = event.target.closest(this.DsTab);
+        const tabs = Array.from(this.el.querySelectorAll(this.DsTab));
+        const activeTabIndex = tabs.indexOf(activeTab);
+        if (activeTabIndex === -1)
+            return;
+        let nextIndex = 0;
+        switch (event.key) {
+            case 'Enter':
+            case ' ': {
+                if (this.context?.currentTab === tabs[activeTabIndex].dsId)
+                    return;
+                this.dsTabChange.emit({ tabId: tabs[activeTabIndex].dsId, tabPanelId: tabs[activeTabIndex].dsTabPanelId });
+                return;
+            }
+            case 'ArrowRight': {
+                nextIndex = (activeTabIndex + 1) % tabs.length;
+                break;
+            }
+            case 'ArrowLeft': {
+                nextIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
+                break;
+            }
+            case 'Home': {
+                nextIndex = 0;
+                break;
+            }
+            case 'End': {
+                nextIndex = tabs.length - 1;
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        tabs[nextIndex].setFocus();
+    };
+    handleScroll = (event) => {
+        const target = event.target;
+        this.setButtonsVisibility(target);
+    };
+    handleButtonClick = (direction) => {
+        if (!this.scrollableElement)
+            return;
+        const scrollAmount = this.scrollableElement.clientWidth * 0.8;
+        const left = direction === 'backward' ? this.scrollableElement.scrollLeft - scrollAmount : this.scrollableElement.scrollLeft + scrollAmount;
+        this.scrollableElement.scrollTo({ left, behavior: 'smooth' });
+    };
+    connectedCallback() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+    }
+    componentDidLoad() {
+        this.setButtonsVisibility(this.scrollableElement);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+    }
+    renderButton = (direction) => {
+        const baseClass = cx.cx('ds-tablist');
+        const iconName = direction === 'backward' ? 'chevron_backward' : 'chevron_forward';
+        return (index.h(this.DsButton, { class: `${baseClass}__button__ds-button`, onClick: () => this.handleButtonClick(direction), dsAriaHidden: true, dsTabIndex: -1, dsVariant: "supplementary", dsColour: "black", dsIcon: iconName }));
+    };
+    render() {
+        const baseClass = cx.cx('ds-tablist');
+        const scrollableClass = `${baseClass}__scrollable`;
+        const buttonClass = `${baseClass}__button`;
+        return (index.h("div", { key: '4b8dd6949171369541110b01c52acd043981d4a9', class: baseClass }, index.h("div", { key: '3327ec21ece39c85a83990dc25b717ed7c528f3e', ref: el => (this.scrollableElement = el), class: index$1.classNames(scrollableClass, {
+                [`${scrollableClass}--container`]: this.context?.variant === 'container',
+                [`${scrollableClass}--line`]: this.context?.variant === 'line',
+            }), role: "tablist", ...utils.ifDefined('aria-label', this.dsAriaLabel), ...utils.ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, index.h("slot", { key: 'a762574f9666d851041e085f16a0b7e0cd1371eb' })), index.h("div", { key: 'bfbd4760e1276d7db4fc5dd7707321dc4ea53870', ref: el => (this.backwardButtonElement = el), class: index$1.classNames(buttonClass, `${buttonClass}--backward`, {
+                [`${buttonClass}--container`]: this.context?.variant === 'container',
+                [`${buttonClass}--line`]: this.context?.variant === 'line',
+            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), index.h("div", { key: '3f435da4ecb5bf45ebebac651b0419a62f3fb5be', ref: el => (this.forwardButtonElement = el), class: index$1.classNames(buttonClass, `${buttonClass}--forward`, {
+                [`${buttonClass}--container`]: this.context?.variant === 'container',
+                [`${buttonClass}--line`]: this.context?.variant === 'line',
+            }), "aria-hidden": "true", hidden: !this.showForwardButton }, this.renderButton('forward'))));
+    }
+};
+utils.declareComponentDependencies([index.h("ds-tab", { dsId: "", dsTabPanelId: "" }), index.h("ds-button", null)]);
+DsTablist.style = dsTablistCss;
+
+exports.ds_tablist = DsTablist;

package/dist/cjs/ds-tabpanel.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-Cwc95KFn.js');
+var cx = require('./cx-BxEHiZno.js');
+var tabsFactory = require('./tabsFactory-CEl-_Eyr.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+require('./tabsContext-Cg_aEFJd.js');
+require('./utils-DOIzXqfM.js');
+
+const dsTabpanelCss = ".ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__oSBnIJ.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__oSBnIJ--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__oSBnIJ--container.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__oSBnIJ--container.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__oSBnIJ[hidden].sc-ds-tabpanel{display:none}";
+
+const DsTabpanel = class extends index.Mixin(tabsFactory.tabsFactory) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsId;
+    dsTabId;
+    dsPadded = true;
+    render() {
+        const baseClass = cx.cx('ds-tabpanel');
+        return (index.h("div", { key: 'a652b9384924c3b603dddcab5e7c2e37d7b5e9d7', id: this.dsId, class: index$1.classNames(baseClass, {
+                [`${baseClass}--container`]: this.context?.variant === 'container',
+                [`${baseClass}--padded`]: this.dsPadded,
+            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, index.h("slot", { key: '72972372dcdec5183419aa01726a39c680e4aba8' })));
+    }
+};
+DsTabpanel.style = dsTabpanelCss;
+
+exports.ds_tabpanel = DsTabpanel;

package/dist/cjs/ds-tabs.cjs.entry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-Cwc95KFn.js');
+var cx = require('./cx-BxEHiZno.js');
+var tabsContext = require('./tabsContext-Cg_aEFJd.js');
+require('./utils-DOIzXqfM.js');
+
+const dsTabsCss = ".ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__oSBnIJ.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}";
+
+const DsTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    dsCurrentTab;
+    dsCurrentTabPanel;
+    dsVariant = 'container';
+    handleTabChange(event) {
+        event.stopPropagation();
+    }
+    createContext = () => {
+        return {
+            currentTab: this.dsCurrentTab,
+            currentTabPanel: this.dsCurrentTabPanel,
+            variant: this.dsVariant,
+        };
+    };
+    storeContext = () => {
+        const context = this.createContext();
+        tabsContext.storeTabsContext(this.el, context);
+    };
+    updateContext = () => {
+        const context = this.createContext();
+        tabsContext.provideTabsContext(this.el, context);
+    };
+    componentWillLoad() {
+        this.storeContext();
+    }
+    componentDidUpdate() {
+        this.updateContext();
+    }
+    render() {
+        const baseClass = cx.cx('ds-tabs');
+        return (index.h("div", { key: '38636c60ba2cd1122bbe70b1b25e99af2122b2d9', class: baseClass }, index.h("slot", { key: '252cc12020e9777cd61f72db136c25d932f176e8' })));
+    }
+};
+DsTabs.style = dsTabsCss;
+
+exports.ds_tabs = DsTabs;

package/dist/cjs/ds-tag-group.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DY9OS4qF.js');
+var index = require('./index-Cwc95KFn.js');
 var utils = require('./utils-DOIzXqfM.js');
-var cx = require('./cx-Cec9RCyK.js');
+var cx = require('./cx-BxEHiZno.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 
-const dsTagGroupCss = ".ds-tag-group__1Vp5mb__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__oSBnIJ__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 = utils.idGenerator('ds-tag-group');
 const DsTagGroup = class {
@@ -31,7 +31,7 @@ const DsTagGroup = class {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (index.h("div", { key: 'ee16fff7ff64a4875ab3498b62b6931e9da237d2', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, index.h(DsGroupLabel, { key: 'd1b371536759a7dbfc875c50044b9ea73057ae6f', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, index.h("slot", { key: 'a44a327d8b6b0b82a6ae9e82d0f0d9b31b263ede', name: "label" }), index.h("slot", { key: '644f840a3910ca10ac6a105d6c821c9b825fe8c2', name: "assistiveText" })), index.h("div", { key: '78624b38d7b19433ef54b120a3c3590db538ccec', role: "list", class: `${baseClass}__tags` }, index.h("slot", { key: '725fc438b3050a584cbb0c6c6fa2a353568c3647' }))));
+        return (index.h("div", { key: '84a23f69a82a6e636ecdb9344383708f367f1290', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, index.h(DsGroupLabel, { key: 'a34005c9c50bc0dd9419857297ffe0bf0964f34d', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, index.h("slot", { key: '64e6e95287c2b56e339c658bd280dac82b57b587', name: "label" }), index.h("slot", { key: 'd87ebcb6cbe9c1bc5a0807f3c041fcacbb79d693', name: "assistiveText" })), index.h("div", { key: '72350ed04210fdc3e47b190bd6700a029980fbab', role: "list", class: `${baseClass}__tags` }, index.h("slot", { key: 'c70dea6040754dfa32465cecbd8d2e8e828b35ac' }))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-group-label", null)]);