@cupra/ui-kit 2.0.0-canary.22 → 2.0.0-canary.221

package/dist/cjs/components/ds-calendar-day/styles/common.styles.cjs

@@ -0,0 +1,101 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .day.disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        width: var(--ds-spacing-44);
+        height: var(--ds-spacing-44);
+        border-radius: var(--ds-border-radius-full);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        color: var(--ds-color-text-default-subtlest);
+        background: transparent;
+        border: 1px solid transparent;
+        transition:
+            background-color 0.15s ease,
+            color 0.15s ease,
+            border-color 0.15s ease;
+    }
+
+    .day.outside-month {
+        color: var(--ds-color-text-disabled);
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    .day:not(.outside-month):not(.disabled):not(.selected):not(.today) {
+        color: var(--ds-color-text-default);
+    }
+
+    .day:not(.disabled):not(.selected):hover {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-hover);
+    }
+
+    .day:not(.disabled):not(.selected):active {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-active);
+    }
+
+    .day.disabled {
+        color: var(--ds-color-text-disabled);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.selected {
+        color: var(--ds-color-text-selected-subtle);
+        background: var(--ds-color-surface-container-active);
+        border-color: var(--ds-color-border-selected-subtle);
+    }
+
+    .day.today:not(.selected) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-primary);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.today.disabled {
+        color: var(--ds-color-text-disabled);
+        font-weight: var(--ds-typography-weight-body-primary);
+    }
+
+    .day:focus-visible {
+        outline: 2px solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+
+    .day.medium {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-carousel-indicator/ds-carousel-indicator.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const n=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),b=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),I=require("./styles/common.styles.cjs");var f=Object.defineProperty,x=Object.getOwnPropertyDescriptor,c=(l,r,s,e)=>{for(var t=e>1?void 0:e?x(r,s):r,o=l.length-1,i;o>=0;o--)(i=l[o])&&(t=(e?i(r,s,t):i(t))||t);return e&&t&&f(r,s,t),t};exports.DsCarouselIndicator=class extends h.UiKitElement{constructor(){super(...arguments),this.maxSelectorsShown=6}get classes(){return{container:!0,infinite:this.selectorsNumber>this.maxSelectorsShown}}get selectorsTemplate(){const r=[],s=this.selectorsNumber>this.maxSelectorsShown;for(let e=0;e<this.selectorsNumber;e++){let t=!1;const o=this.selectedIndex>=3&&this.selectedIndex<this.selectorsNumber-3,i=this.selectedIndex<3,d=this.selectedIndex>=this.selectorsNumber-3;s&&(o&&(e<this.selectedIndex-3||e>this.selectedIndex+3)||i&&e>=5||d&&e<this.selectorsNumber-5)&&(t=s);const m={selector:!0,selected:e===this.selectedIndex,hidden:t};r.push(n.html` <div class=${a.classMap(m)}></div> `)}return r}render(){return this.selectorsNumber>0?n.html`
-                  <div data-testid="ds-carousel-indicator-container" class=${a.classMap(this.classes)}>
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const s=require("./styles/common.styles.cjs");var c=class extends i.UiKitElement{constructor(...e){super(...e),this.maxSelectorsShown=6}get classes(){return{container:!0,infinite:this.selectorsNumber>this.maxSelectorsShown}}get selectorsTemplate(){let t=[],n=this.selectorsNumber>this.maxSelectorsShown;for(let r=0;r<this.selectorsNumber;r++){let i=!1,a=this.selectedIndex>=3&&this.selectedIndex<this.selectorsNumber-3,s=this.selectedIndex<3,c=this.selectedIndex>=this.selectorsNumber-3;n&&(a&&(r<this.selectedIndex-3||r>this.selectedIndex+3)||s&&r>=5||c&&r<this.selectorsNumber-5)&&(i=n);let l={selector:!0,selected:r===this.selectedIndex,hidden:i};t.push(e.html` <div class=${o.classMap(l)}></div> `)}return t}render(){return this.selectorsNumber>0?e.html`
+                  <div data-testid="ds-carousel-indicator-container" class=${o.classMap(this.classes)}>
                       ${this.selectorsTemplate}
                   </div>
-              `:n.nothing}};exports.DsCarouselIndicator.styles=[I.commonStyles];c([u.property({type:Number,attribute:"selectors-number"})],exports.DsCarouselIndicator.prototype,"selectorsNumber",2);c([u.property({type:Number,attribute:"selected-index"})],exports.DsCarouselIndicator.prototype,"selectedIndex",2);c([b.state()],exports.DsCarouselIndicator.prototype,"maxSelectorsShown",2);exports.DsCarouselIndicator=c([p.customUiKitElement("ds-carousel-indicator")],exports.DsCarouselIndicator);
+              `:e.nothing}},l=(c.styles=[s.commonStyles],c);r.default([t.property({type:Number,attribute:`selectors-number`})],l.prototype,`selectorsNumber`,void 0),r.default([t.property({type:Number,attribute:`selected-index`})],l.prototype,`selectedIndex`,void 0),r.default([n.state()],l.prototype,`maxSelectorsShown`,void 0),l=r.default([a.customUiKitElement(`ds-carousel-indicator`)],l),Object.defineProperty(exports,"DsCarouselIndicator",{enumerable:!0,get:function(){return l}});

package/dist/cjs/components/ds-carousel-indicator/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     :host {
         display: flex;
         width: 100%;
@@ -9,4 +9,54 @@
     .container {
         display: flex;
     }
-`;exports.commonStyles=t;
+
+    .container {
+        padding: 8px;
+    }
+    .selector {
+        height: var(--ds-sizing-04);
+        transition:
+            width 0.3s cubic-bezier(0, 0, 0.2, 1),
+            margin 0.3s cubic-bezier(0, 0, 0.2, 1);
+        width: 40px;
+        margin: 0 2px;
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-indicator-bg-color-default);
+    }
+    .selector.selected {
+        width: 64px;
+        background: var(--ds-indicator-bg-color-active-primary);
+    }
+    .selector.hidden {
+        width: 0px;
+        margin: 0px;
+    }
+    .infinite .selector.selected {
+        width: 40px;
+    }
+    .infinite .selector:not(.hidden):has(+ .hidden) {
+        width: 16px;
+    }
+    .infinite .selector.hidden:has(+ :not(.hidden)) + .selector {
+        width: 16px;
+    }
+    .infinite
+        .selector:first-child:not(.selected):not(.hidden):has(
+            + :not(.hidden):not(.selected) + :not(.hidden):not(.selected) + .selected:not(.hidden)
+        ) {
+        width: 16px;
+    }
+    .infinite
+        .selector.selected:not(.hidden)
+        + :not(.selected):not(.hidden)
+        + :not(.selected):not(.hidden)
+        + :not(.selected):not(.hidden):last-child {
+        width: 16px;
+    }
+    .infinite .selector:not(.hidden):has(+ :not(.hidden) + .hidden) {
+        width: 24px;
+    }
+    .infinite .selector.hidden:has(+ :not(.hidden) + :not(.hidden)) + .selector + .selector {
+        width: 24px;
+    }
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-checkbox/ds-checkbox.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),u=require("../../mixins/FormAssociatedMixin.cjs"),c=require("../../utils/booleanConverter.cjs"),m=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const r=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,e=(h,o,s,n)=>{for(var i=n>1?void 0:n?x(o,s):o,l=h.length-1,p;l>=0;l--)(p=h[l])&&(i=(n?p(o,s,i):p(i))||i);return n&&i&&v(o,s,i),i};exports.DsCheckbox=class extends u.FormAssociatedMixin(a.UiKitElement){constructor(){super(...arguments),this.inputPlacement="left",this.checked=!1,this.required=!1,this.disabled=!1,this.mode="light",this.size="medium",this.helperText="",this.infoText="",this.forcedError="",this.invalidError="",this.indeterminate=!1}handleChange(o){const s=o.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}get classes(){return{container:!0,[this.inputPlacement]:!!this.inputPlacement,[this.mode]:!!this.mode,[this.size]:!!this.size,disabled:this.disabled,checked:this.checked,error:!!this.forcedError}}get iconTemplate(){if(!this.checked)return r.nothing;const o=this.indeterminate?"minus":"check";return this.componentFactory.createIcon({class:"icon","icon-name":o})}get styleTokens(){return m.htmlWithTokens`
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.cjs"),t=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const s=require("../../utils/booleanConverter.cjs"),c=require("../../utils/uiKitHtml.cjs"),l=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const u=require("../ds-checkbox-group/ds-checkbox-group.cjs"),d=require("../../mixins/FormAssociatedMixin.cjs"),f=require("./styles/common.styles.cjs");var p=class extends d.FormAssociatedMixin(a.UiKitElement){constructor(...e){super(...e),this.inputPlacement=`left`,this._checked=void 0,this._checkedState=!1,this.required=!1,this._disabled=!1,this.mode=`light`,this._size=`medium`,this.helperText=``,this.infoText=``,this._forcedError=``,this.invalidError=``,this.indeterminate=!1,this.dataAriaLabel=``}get checked(){return this._checked??this._checkedState}set checked(e){this._checked=e}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.createContextConsumers([{context:u.checkboxGroupDisabledContext,callback:e=>{this.disabledGroup=e}},{context:u.checkboxGroupErrorContext,callback:e=>{this.errorGroup=e}},{context:u.checkboxGroupSizeContext,callback:e=>{this.sizeGroup=e}}])})}createContextConsumers(t){t.forEach(({context:t,callback:n})=>{new e.ContextConsumer(this,{context:t,callback:n,subscribe:!0})})}get disabled(){return this.disabledGroup??this._disabled}set disabled(e){this._disabled=e}get size(){return this.sizeGroup||this._size}set size(e){this._size=e}get forcedError(){return this._forcedError}set forcedError(e){this._forcedError=e}get error(){return this.errorGroup??!!this._forcedError}handleChange(e){let t=e.target.checked;this._checkedState=t,this._checked=void 0,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{checked:t,value:this.value}}))}get classes(){return{container:!0,[this.inputPlacement]:!!this.inputPlacement,[this.mode]:!!this.mode,[this.size]:!!this.size,disabled:this.disabled,checked:this.checked,error:this.error}}get iconTemplate(){if(!this.checked)return t.nothing;let e=this.indeterminate?`minus`:`check`;return c.uiKitHtml`<ds-icon class="icon" icon-name=${e}></ds-icon>`}get styleTokens(){return t.html`
             <style>
                 :host{
                     color-scheme: ${this.mode};
-                    pointer-events: ${this.disabled?"none":"visible"};
+                    pointer-events: ${this.disabled?`none`:`visible`};
                 }
             </style>
-        `}render(){return r.html`
+        `}render(){return t.html`
             ${this.styleTokens}
-            <div class=${y.classMap(this.classes)}>
+            <div class=${l.classMap(this.classes)}>
                 <label>
                     <span class="checkmark-container">
                         <span class="checkmark">
@@ -17,6 +17,7 @@
                                 type="checkbox"
                                 name=${this.name}
                                 value=${this.value}
+                                aria-label=${this.dataAriaLabel||t.nothing}
                                 ?required=${this.required}
                                 ?checked=${this.checked}
                                 ?disabled=${this.disabled}
@@ -27,12 +28,12 @@
                     <div class="text-container">
                         <div class="text">
                             <slot></slot>
-                            ${this.infoText?r.html` <div class="info-text">${this.infoText}</div> `:r.nothing}
+                            ${this.infoText?t.html` <div class="info-text">${this.infoText}</div> `:t.nothing}
                         </div>
-                        ${this.helperText?r.html` <div class="helper-text">${this.helperText}</div> `:r.nothing}
-                        ${this.forcedError?r.html` <div class="error-text">${this.forcedError}</div> `:r.nothing}
-                        ${this.invalidError&&!this.forcedError?r.html`<div class="error-text invalid-error">${this.invalidError}</div>`:r.nothing}
+                        ${this.helperText?t.html` <div class="helper-text">${this.helperText}</div> `:t.nothing}
+                        ${this.forcedError?t.html` <div class="error-text">${this.forcedError}</div> `:t.nothing}
+                        ${this.invalidError&&!this.forcedError?t.html`<div class="error-text invalid-error">${this.invalidError}</div>`:t.nothing}
                     </div>
                 </label>
             </div>
-        `}};exports.DsCheckbox.styles=[b.commonStyles];e([t.property({type:String})],exports.DsCheckbox.prototype,"name",2);e([t.property({type:String})],exports.DsCheckbox.prototype,"value",2);e([t.property({type:String,attribute:"input-placement"})],exports.DsCheckbox.prototype,"inputPlacement",2);e([t.property({type:Boolean,converter:c.booleanConverter,reflect:!0})],exports.DsCheckbox.prototype,"checked",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"required",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"disabled",2);e([t.property({type:String,reflect:!0})],exports.DsCheckbox.prototype,"mode",2);e([t.property({type:String})],exports.DsCheckbox.prototype,"size",2);e([t.property({type:String,attribute:"helper-text"})],exports.DsCheckbox.prototype,"helperText",2);e([t.property({type:String,attribute:"info-text"})],exports.DsCheckbox.prototype,"infoText",2);e([t.property({type:String,attribute:"forced-error"})],exports.DsCheckbox.prototype,"forcedError",2);e([t.property({type:String,attribute:"invalid-error"})],exports.DsCheckbox.prototype,"invalidError",2);e([t.property({type:Boolean,converter:c.booleanConverter})],exports.DsCheckbox.prototype,"indeterminate",2);exports.DsCheckbox=e([d.customUiKitElement("ds-checkbox")],exports.DsCheckbox);
+        `}},m=(p.styles=[f.commonStyles],p);i.default([n.property({type:String})],m.prototype,`name`,void 0),i.default([n.property({type:String})],m.prototype,`value`,void 0),i.default([n.property({type:String,attribute:`input-placement`})],m.prototype,`inputPlacement`,void 0),i.default([n.property({type:Boolean,attribute:`checked`,converter:s.booleanConverter,reflect:!0})],m.prototype,`_checked`,void 0),i.default([r.state()],m.prototype,`_checkedState`,void 0),i.default([n.property({type:Boolean,converter:s.booleanConverter})],m.prototype,`required`,void 0),i.default([n.property({type:Boolean,converter:s.booleanConverter,attribute:`disabled`})],m.prototype,`_disabled`,void 0),i.default([n.property({type:String,reflect:!0})],m.prototype,`mode`,void 0),i.default([n.property({type:String,attribute:`size`})],m.prototype,`_size`,void 0),i.default([n.property({type:String,attribute:`helper-text`})],m.prototype,`helperText`,void 0),i.default([n.property({type:String,attribute:`info-text`})],m.prototype,`infoText`,void 0),i.default([n.property({type:String,attribute:`forced-error`})],m.prototype,`_forcedError`,void 0),i.default([n.property({type:String,attribute:`invalid-error`})],m.prototype,`invalidError`,void 0),i.default([n.property({type:Boolean,converter:s.booleanConverter})],m.prototype,`indeterminate`,void 0),i.default([n.property({type:String,attribute:`data-aria-label`})],m.prototype,`dataAriaLabel`,void 0),i.default([r.state()],m.prototype,`disabledGroup`,void 0),i.default([r.state()],m.prototype,`errorGroup`,void 0),i.default([r.state()],m.prototype,`sizeGroup`,void 0),m=i.default([o.customUiKitElement(`ds-checkbox`)],m),Object.defineProperty(exports,"DsCheckbox",{enumerable:!0,get:function(){return m}});

package/dist/cjs/components/ds-checkbox/styles/common.styles.cjs

@@ -1,7 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     :host {
         display: block;
-        width: 100%;
     }
 
     label {
@@ -50,4 +49,4 @@
     .container.error .helper-text {
         display: none;
     }
-`;exports.commonStyles=i;
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-checkbox-group/ds-checkbox-group.cjs

@@ -0,0 +1,15 @@
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.cjs"),t=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),n=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const l=require("./styles/common.styles.cjs");var u,d=e.createContext(Symbol(`ds-checkbox-group:disabled`)),f=e.createContext(Symbol(`ds-checkbox-group:error`)),p=e.createContext(Symbol(`ds-checkbox-group:error-text`)),m=e.createContext(Symbol(`ds-checkbox-group:helper-text`)),h=e.createContext(Symbol(`ds-checkbox-group:size`)),g=(u=class extends a.UiKitElement{constructor(...e){super(...e),this.error=!1,this.errorText=``,this.helperText=``,this.disabled=!1,this.size=`medium`,this.orientation=`vertical`}get classes(){return{container:!0,error:this.error,disabled:!!this.disabled,[this.size]:!0,[this.orientation]:!0}}render(){return n.html`
+            <div
+                data-testid="ds-checkbox-group-container"
+                class=${c.classMap(this.classes)}
+                .aria-invalid=${this.error}
+            >
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <div class="checkboxes-container">
+                    <slot></slot>
+                </div>
+                ${!this.error&&this.helperText?n.html`<div class="helper-text">${this.helperText}</div>`:n.nothing}
+                ${this.error&&this.errorText?n.html`<div class="error-text">${this.errorText}</div>`:n.nothing}
+            </div>
+        `}},u.styles=[l.commonStyles],u);i.default([t.provide({context:f}),r.property({type:Boolean,converter:s.booleanConverter})],g.prototype,`error`,void 0),i.default([t.provide({context:p}),r.property({type:String,attribute:`error-text`})],g.prototype,`errorText`,void 0),i.default([t.provide({context:m}),r.property({type:String,attribute:`helper-text`})],g.prototype,`helperText`,void 0),i.default([t.provide({context:d}),r.property({type:Boolean,converter:s.booleanConverter})],g.prototype,`disabled`,void 0),i.default([t.provide({context:h}),r.property({type:String})],g.prototype,`size`,void 0),i.default([r.property({type:String,reflect:!0})],g.prototype,`orientation`,void 0),g=i.default([o.customUiKitElement(`ds-checkbox-group`)],g),Object.defineProperty(exports,"DsCheckboxGroup",{enumerable:!0,get:function(){return g}}),exports.checkboxGroupDisabledContext=d,exports.checkboxGroupErrorContext=f,exports.checkboxGroupErrorTextContext=p,exports.checkboxGroupHelperTextContext=m,exports.checkboxGroupSizeContext=h;

package/dist/cjs/components/ds-checkbox-group/styles/common.styles.cjs

@@ -0,0 +1,105 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: block;
+    }
+
+    .container.vertical ::slotted(ds-checkbox) {
+        display: block;
+    }
+
+    .container.horizontal ::slotted(ds-checkbox) {
+        display: inline-flex;
+        vertical-align: top;
+    }
+
+    :host {
+        display: contents;
+    }
+
+    .container {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+    }
+
+    .container ::slotted([slot='title']) {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        text-transform: uppercase;
+    }
+
+    .container.large ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+    .container.medium ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    .container ::slotted([slot='description']) {
+        color: var(--ds-color-text-default-subtle);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .container.large ::slotted([slot='description']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+    .container.medium ::slotted([slot='description']) {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .checkboxes-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .horizontal .checkboxes-container {
+        display: flex;
+        gap: var(--ds-spacing-m-4);
+    }
+    .vertical .checkboxes-container {
+        flex-direction: column;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .error-text {
+        color: var(--ds-color-text-feedback-error);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .container .helper-text {
+        color: var(--ds-color-text-default-subtle);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .disabled .error-text,
+    .disabled .helper-text {
+        color: var(--ds-color-text-disabled);
+    }
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-chip/ds-chip.cjs

@@ -1,22 +1,33 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var C=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(l,e,r,o)=>{for(var t=o>1?void 0:o?f(e,r):e,n=l.length-1,c;n>=0;n--)(c=l[n])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&C(e,r,t),t};exports.DsChip=class extends d.UiKitElement{constructor(){super(...arguments),this.mode="light",this.size="large",this.selected=!1,this.deselectable=!1,this.slottedText=""}firstUpdated(e){super.firstUpdated(e);const o=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0});this.slottedText=o.filter(t=>t.nodeType===Node.TEXT_NODE).map(t=>t.textContent.trim()).join(" ")}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return u.htmlWithTokens`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs");const l=require("./styles/common.styles.cjs");var u=class extends r.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.size=`large`,this.selected=!1,this.deselectable=!1,this.slottedText=``,this.handleSlotChange=e=>{let t=e.target.assignedNodes({flatten:!0});this.slottedText=t.filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent.trim()).join(` `),this.requestUpdate()}}get classes(){return{container:!0,"ds-blur":!0,[this.size]:!0,[this.mode]:!!this.mode,selected:this.selected,deselectable:this.deselectable}}get styleTokens(){return e.html`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
-                        pointer-events: ${this.selected?"none":"visible"};
+                        pointer-events: ${this.selected?`none`:`visible`};
                     }
                 </style>
-        `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),!(!this.deselectable||!this.selected)&&this.dispatchEvent(new CustomEvent("deselect",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClickIcon(e))}get iconTemplate(){if(!this.selected||!this.deselectable)return a.nothing;const e=this.mode==="light"?"dark":"light";return this.componentFactory.createIcon({class:"icon","icon-name":"cross","data-testid":"ds-chip-icon","@click":this.handleClickIcon,"@keydown":this.handleKeyDownIcon,role:"button","aria-label":`deselect ${this.slottedText}`,tabindex:"0",mode:e})}render(){return a.html`
+        `}handleClick(){this.selected||this.dispatchEvent(new CustomEvent(`select`,{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDown(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleClick())}handleClickIcon(e){e.stopImmediatePropagation(),this.deselectable&&this.selected&&this.dispatchEvent(new CustomEvent(`deselect`,{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleKeyDownIcon(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleClickIcon(e))}get leadingIconTemplate(){return this.iconName?o.uiKitHtml`<ds-icon class="icon" icon-name=${c.ifDefined(this.iconName)}></ds-icon>`:e.nothing}get iconTemplate(){if(!this.selected||!this.deselectable)return e.nothing;let t=this.mode===`light`?`dark`:`light`;return o.uiKitHtml`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${t}
+            data-testid="ds-chip-icon"
+            @click=${this.handleClickIcon}
+            @keydown=${this.handleKeyDownIcon}
+            role="button"
+            aria-label=${`deselect ${this.slottedText}`}
+            tabindex="0"
+        ></ds-icon>`}render(){return e.html`
             ${this.styleTokens}
             <div
                 role="button"
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${m.classMap(this.classes)}
+                class=${s.classMap(this.classes)}
                 @click=${this.handleClick}
                 @keydown=${this.handleKeyDown}
             >
-                <slot></slot>
+                ${this.leadingIconTemplate}
+                <slot @slotchange=${this.handleSlotChange}></slot>
                 ${this.iconTemplate}
             </div>
-        `}};exports.DsChip.styles=[b.commonStyles];s([i.property({type:String})],exports.DsChip.prototype,"value",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"mode",2);s([i.property({type:String,reflect:!0})],exports.DsChip.prototype,"size",2);s([i.property({type:Boolean,converter:h.booleanConverter,reflect:!0})],exports.DsChip.prototype,"selected",2);s([i.property({type:Boolean,converter:h.booleanConverter})],exports.DsChip.prototype,"deselectable",2);s([y.state()],exports.DsChip.prototype,"slottedText",2);exports.DsChip=s([p.customUiKitElement("ds-chip")],exports.DsChip);
+        `}},d=(u.styles=[l.commonStyles],u);n.default([t.property({type:String})],d.prototype,`value`,void 0),n.default([t.property({type:String,reflect:!0})],d.prototype,`mode`,void 0),n.default([t.property({type:String,reflect:!0})],d.prototype,`size`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter,reflect:!0})],d.prototype,`selected`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter})],d.prototype,`deselectable`,void 0),n.default([t.property({type:String,attribute:`icon-name`})],d.prototype,`iconName`,void 0),d=n.default([i.customUiKitElement(`ds-chip`)],d),Object.defineProperty(exports,"DsChip",{enumerable:!0,get:function(){return d}});

package/dist/cjs/components/ds-chip/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),n=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     :host {
         display: inline-block;
     }
@@ -15,4 +15,4 @@
         cursor: pointer;
         pointer-events: visible;
     }
-`;exports.commonStyles=n;
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-chips/ds-chips.cjs

@@ -1,14 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),d=require("../../decorators/customUiKitElement.cjs"),u=require("../../utils/arrayConverter.cjs"),C=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),v=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),S=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),y=require("./styles/common.styles.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(o,e,t,s)=>{for(var i=s>1?void 0:s?f(e,t):e,r=o.length-1,c;r>=0;r--)(c=o[r])&&(i=(s?c(e,t,i):c(i))||i);return s&&i&&b(e,t,i),i};exports.DsChips=class extends p.UiKitElement{constructor(){super(...arguments),this.multiChoice=null,this.size="medium",this.mode="light",this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var t,s,i,r;const e=((t=this.chipsContainer)==null?void 0:t.scrollLeft)+((s=this.chipsContainer)==null?void 0:s.clientWidth);this.hasScrollLeft=((i=this.chipsContainer)==null?void 0:i.scrollLeft)>0,this.hasScrollRight=e<((r=this.chipsContainer)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.chipsContainer.scrollBy({left:-150,behavior:"smooth"})},this.handleScrollRight=()=>{this.chipsContainer.scrollBy({left:150,behavior:"smooth"})}}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.chipsContainer),this.chips.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener("resize",this.handleScrollNav),this.chipsContainer.addEventListener("scroll",this.handleScrollNav)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener("resize",this.handleScrollNav),this.chipsContainer.removeEventListener("scroll",this.handleScrollNav)}getScrollButtonTemplate(e,t){if(e==="left"&&!this.hasScrollLeft||e==="right"&&!this.hasScrollRight)return a.nothing;const s=`arrow-${e}`;return this.componentFactory.createIconButton({class:`scroll-button ${e}`,"data-testid":`scroll-button-${e}`,"data-aria-label":`scroll-button-${e}`,"@click":t,size:this.size||"large","icon-name":s,variant:"naked",mode:this.mode})}updated(e){super.updated(e),(e.has("selectedChips")||e.has("multiChoice")||e.has("size")||e.has("mode"))&&this.updateChildChips()}updateChildChips(){var e;(e=this.chips)==null||e.forEach(t=>{var s,i;t.size=this.size,t.selected=(i=(s=this.selectedChips)==null?void 0:s.includes)==null?void 0:i.call(s,t.value),t.deselectable=!!this.multiChoice,t.mode=this.mode})}get chipsContainerClasses(){return{"chips-container":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}handleSelect(e){var s,i;let t;this.multiChoice&&!((i=(s=this.selectedChips)==null?void 0:s.includes)!=null&&i.call(s,e.detail.value))?t=[...this.selectedChips||[],e.detail.value]:t=[e.detail.value],this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}handleDeselect(e){const t=[...(this.selectedChips||[]).filter(s=>s!==e.detail.value)];this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent("ds-chips:change",{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}render(){return a.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),o=require("../base/UiKitElement.cjs"),s=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/booleanConverter.cjs"),l=require("../../utils/uiKitHtml.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const d=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const f=require("../../utils/arrayConverter.cjs"),p=require("./styles/common.styles.cjs");var m=class extends o.UiKitElement{constructor(...e){super(...e),this.multiChoice=null,this.size=`medium`,this.mode=`light`,this.hasScrollLeft=!1,this.hasScrollRight=!1,this.resizeObserver=new ResizeObserver(()=>{this.handleScrollNav()}),this.handleScrollNav=()=>{var e,t,n,r;let i=((e=this.chipsContainer)==null?void 0:e.scrollLeft)+((t=this.chipsContainer)==null?void 0:t.clientWidth);this.hasScrollLeft=((n=this.chipsContainer)==null?void 0:n.scrollLeft)>0,this.hasScrollRight=i<((r=this.chipsContainer)==null?void 0:r.scrollWidth)},this.handleScrollLeft=()=>{this.chipsContainer.scrollBy({left:-150,behavior:`smooth`})},this.handleScrollRight=()=>{this.chipsContainer.scrollBy({left:150,behavior:`smooth`})}}firstUpdated(){this.handleScrollNav(),this.resizeObserver.observe(this.chipsContainer),this.chips.forEach(e=>this.resizeObserver.observe(e)),window.addEventListener(`resize`,this.handleScrollNav),this.chipsContainer.addEventListener(`scroll`,this.handleScrollNav)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),window.removeEventListener(`resize`,this.handleScrollNav),this.chipsContainer.removeEventListener(`scroll`,this.handleScrollNav)}getScrollButtonTemplate(t,n){if(t===`left`&&!this.hasScrollLeft||t===`right`&&!this.hasScrollRight)return e.nothing;let r=`arrow-${t}`;return l.uiKitHtml`<ds-icon-button
+            class=${`scroll-button ${t}`}
+            data-testid=${`scroll-button-${t}`}
+            data-aria-label=${`scroll-button-${t}`}
+            @click=${n}
+            size=${this.size||`large`}
+            icon-name=${r}
+            variant="rounded"
+            mode=${d.ifDefined(this.mode)}
+        ></ds-icon-button>`}updated(e){super.updated(e),(e.has(`selectedChips`)||e.has(`multiChoice`)||e.has(`size`)||e.has(`mode`))&&this.updateChildChips()}updateChildChips(){var e;(e=this.chips)==null||e.forEach(e=>{var t,n;e.size=this.size,e.selected=(t=this.selectedChips)==null||(n=t.includes)==null?void 0:n.call(t,e.value),e.deselectable=!!this.multiChoice,e.mode=this.mode})}get chipsContainerClasses(){return{"chips-container":!0,"scroll-left":this.hasScrollLeft,"scroll-right":this.hasScrollRight}}handleSelect(e){var t,n;let r;r=this.multiChoice&&!((t=this.selectedChips)!=null&&(n=t.includes)!=null&&n.call(t,e.detail.value))?[...this.selectedChips||[],e.detail.value]:[e.detail.value],this.selectedChips=r,this.updateChildChips(),this.dispatchEvent(new CustomEvent(`ds-chips:change`,{bubbles:!0,composed:!0,detail:{selectedChips:r}}))}handleDeselect(e){let t=[...(this.selectedChips||[]).filter(t=>t!==e.detail.value)];this.selectedChips=t,this.updateChildChips(),this.dispatchEvent(new CustomEvent(`ds-chips:change`,{bubbles:!0,composed:!0,detail:{selectedChips:t}}))}render(){return e.html`
             <div
                 class="container"
                 data-testid="ds-chips-container"
                 @select=${this.handleSelect}
                 @deselect=${this.handleDeselect}
             >
-                ${this.getScrollButtonTemplate("left",this.handleScrollLeft)}
-                <nav tabindex="0" class=${S.classMap(this.chipsContainerClasses)}>
+                ${this.getScrollButtonTemplate(`left`,this.handleScrollLeft)}
+                <nav tabindex="0" class=${u.classMap(this.chipsContainerClasses)}>
                     <slot @slotchange=${this.updateChildChips}></slot>
                 </nav>
-                ${this.getScrollButtonTemplate("right",this.handleScrollRight)}
+                ${this.getScrollButtonTemplate(`right`,this.handleScrollRight)}
             </div>
-        `}};exports.DsChips.styles=[y.commonStyles];l([h.property({type:Array,attribute:"selected-chips",converter:u.arrayConverter,reflect:!0})],exports.DsChips.prototype,"selectedChips",2);l([h.property({type:Boolean,attribute:"multi-choice",converter:C.booleanConverter})],exports.DsChips.prototype,"multiChoice",2);l([h.property({type:String})],exports.DsChips.prototype,"size",2);l([h.property({type:String,reflect:!0})],exports.DsChips.prototype,"mode",2);l([n.state()],exports.DsChips.prototype,"hasScrollLeft",2);l([n.state()],exports.DsChips.prototype,"hasScrollRight",2);l([m.queryAssignedElements({slot:""})],exports.DsChips.prototype,"chips",2);l([v.query(".chips-container")],exports.DsChips.prototype,"chipsContainer",2);exports.DsChips=l([d.customUiKitElement("ds-chips")],exports.DsChips);
+        `}},h=(m.styles=[p.commonStyles],m);a.default([t.property({type:Array,attribute:`selected-chips`,converter:f.stringArrayConverter,reflect:!0})],h.prototype,`selectedChips`,void 0),a.default([t.property({type:Boolean,attribute:`multi-choice`,converter:c.booleanConverter})],h.prototype,`multiChoice`,void 0),a.default([t.property({type:String})],h.prototype,`size`,void 0),a.default([t.property({type:String,reflect:!0})],h.prototype,`mode`,void 0),a.default([n.state()],h.prototype,`hasScrollLeft`,void 0),a.default([n.state()],h.prototype,`hasScrollRight`,void 0),a.default([i.queryAssignedElements({slot:``})],h.prototype,`chips`,void 0),a.default([r.query(`.chips-container`)],h.prototype,`chipsContainer`,void 0),h=a.default([s.customUiKitElement(`ds-chips`)],h),Object.defineProperty(exports,"DsChips",{enumerable:!0,get:function(){return h}});

package/dist/cjs/components/ds-chips/styles/common.styles.cjs

@@ -1,10 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
     .container {
         display: inline-flex;
         position: relative;
         max-width: 100%;
         position: relative;
-        --ds-chips-fade-width: 54px;
     }
 
     .chips-container {
@@ -16,40 +15,6 @@
         scroll-behavior: smooth;
     }
 
-    .chips-container.scroll-left:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to right,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
-    .chips-container.scroll-right:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: var(--ds-chips-fade-width);
-        height: 100%;
-        pointer-events: none;
-        background: linear-gradient(
-            to left,
-            var(--ds-chips-fade-color) 0%,
-            var(--ds-chips-fade-color) 40%,
-            rgba(255, 255, 255, 0) 100%
-        );
-        z-index: var(--ds-z-index-default, 1);
-    }
-
     //.chips-container.scroll-left.scroll-right {
     //    mask-image: linear-gradient(
     //        to right,
@@ -72,8 +37,10 @@
     }
 
     .scroll-button {
+        display: block;
         position: absolute;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 2;
     }
 
@@ -84,4 +51,4 @@
     .scroll-button.right {
         right: 0;
     }
-`;exports.commonStyles=t;
+`;exports.commonStyles=t;