@cupra/ui-kit 2.0.0-canary.19 → 2.0.0-canary.190

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.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=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");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const s=require("./styles/common.styles.cjs");var c,l=(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.x` <div class=${o.e(l)}></div> `)}return t}render(){return this.selectorsNumber>0?e.x`
+                  <div data-testid="ds-carousel-indicator-container" class=${o.e(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.E}},c.styles=[s.commonStyles],c);r.__decorate([t.n({type:Number,attribute:`selectors-number`})],l.prototype,`selectorsNumber`,void 0),r.__decorate([t.n({type:Number,attribute:`selected-index`})],l.prototype,`selectedIndex`,void 0),r.__decorate([n.r()],l.prototype,`maxSelectorsShown`,void 0),l=r.__decorate([a.customUiKitElement(`ds-carousel-indicator`)],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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :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.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.133.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.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/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,m=(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.s(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(){return this.checked?c.uiKitHtml`<ds-icon class="icon" icon-name=${this.indeterminate?`minus`:`check`}></ds-icon>`:t.E}get styleTokens(){return t.x`
             <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.x`
             ${this.styleTokens}
-            <div class=${y.classMap(this.classes)}>
+            <div class=${l.e(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.E}
                                 ?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.x` <div class="info-text">${this.infoText}</div> `:t.E}
                         </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.x` <div class="helper-text">${this.helperText}</div> `:t.E}
+                        ${this.forcedError?t.x` <div class="error-text">${this.forcedError}</div> `:t.E}
+                        ${this.invalidError&&!this.forcedError?t.x`<div class="error-text invalid-error">${this.invalidError}</div>`:t.E}
                     </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);
+        `}},p.styles=[f.commonStyles],p);i.__decorate([n.n({type:String})],m.prototype,`name`,void 0),i.__decorate([n.n({type:String})],m.prototype,`value`,void 0),i.__decorate([n.n({type:String,attribute:`input-placement`})],m.prototype,`inputPlacement`,void 0),i.__decorate([n.n({type:Boolean,attribute:`checked`,converter:s.booleanConverter,reflect:!0})],m.prototype,`_checked`,void 0),i.__decorate([r.r()],m.prototype,`_checkedState`,void 0),i.__decorate([n.n({type:Boolean,converter:s.booleanConverter})],m.prototype,`required`,void 0),i.__decorate([n.n({type:Boolean,converter:s.booleanConverter,attribute:`disabled`})],m.prototype,`_disabled`,void 0),i.__decorate([n.n({type:String,reflect:!0})],m.prototype,`mode`,void 0),i.__decorate([n.n({type:String,attribute:`size`})],m.prototype,`_size`,void 0),i.__decorate([n.n({type:String,attribute:`helper-text`})],m.prototype,`helperText`,void 0),i.__decorate([n.n({type:String,attribute:`info-text`})],m.prototype,`infoText`,void 0),i.__decorate([n.n({type:String,attribute:`forced-error`})],m.prototype,`_forcedError`,void 0),i.__decorate([n.n({type:String,attribute:`invalid-error`})],m.prototype,`invalidError`,void 0),i.__decorate([n.n({type:Boolean,converter:s.booleanConverter})],m.prototype,`indeterminate`,void 0),i.__decorate([n.n({type:String,attribute:`data-aria-label`})],m.prototype,`dataAriaLabel`,void 0),i.__decorate([r.r()],m.prototype,`disabledGroup`,void 0),i.__decorate([r.r()],m.prototype,`errorGroup`,void 0),i.__decorate([r.r()],m.prototype,`sizeGroup`,void 0),m=i.__decorate([o.customUiKitElement(`ds-checkbox`)],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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :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.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.133.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.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const l=require("./styles/common.styles.cjs");var u,d=e.n(Symbol(`ds-checkbox-group:disabled`)),f=e.n(Symbol(`ds-checkbox-group:error`)),p=e.n(Symbol(`ds-checkbox-group:error-text`)),m=e.n(Symbol(`ds-checkbox-group:helper-text`)),h=e.n(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.x`
+            <div
+                data-testid="ds-checkbox-group-container"
+                class=${c.e(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.x`<div class="helper-text">${this.helperText}</div>`:n.E}
+                ${this.error&&this.errorText?n.x`<div class="error-text">${this.errorText}</div>`:n.E}
+            </div>
+        `}},u.styles=[l.commonStyles],u);i.__decorate([t.e({context:f}),r.n({type:Boolean,converter:s.booleanConverter})],g.prototype,`error`,void 0),i.__decorate([t.e({context:p}),r.n({type:String,attribute:`error-text`})],g.prototype,`errorText`,void 0),i.__decorate([t.e({context:m}),r.n({type:String,attribute:`helper-text`})],g.prototype,`helperText`,void 0),i.__decorate([t.e({context:d}),r.n({type:Boolean,converter:s.booleanConverter})],g.prototype,`disabled`,void 0),i.__decorate([t.e({context:h}),r.n({type:String})],g.prototype,`size`,void 0),i.__decorate([r.n({type:String,reflect:!0})],g.prototype,`orientation`,void 0),g=i.__decorate([o.customUiKitElement(`ds-checkbox-group`)],g),exports.checkboxGroupDisabledContext=d,exports.checkboxGroupErrorContext=f,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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
+    :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.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.133.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.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs");const l=require("./styles/common.styles.cjs");var u,d=(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.x`
                 <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.o(this.iconName)}></ds-icon>`:e.E}get iconTemplate(){return!this.selected||!this.deselectable?e.E:o.uiKitHtml`<ds-icon
+            class="icon"
+            icon-name="cross"
+            mode=${this.mode===`light`?`dark`:`light`}
+            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.x`
             ${this.styleTokens}
             <div
                 role="button"
                 aria-label=${`chip ${this.slottedText}`}
                 tabindex="0"
                 data-testid="ds-chip-container"
-                class=${m.classMap(this.classes)}
+                class=${s.e(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);
+        `}},u.styles=[l.commonStyles],u);n.__decorate([t.n({type:String})],d.prototype,`value`,void 0),n.__decorate([t.n({type:String,reflect:!0})],d.prototype,`mode`,void 0),n.__decorate([t.n({type:String,reflect:!0})],d.prototype,`size`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],d.prototype,`selected`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],d.prototype,`deselectable`,void 0),n.__decorate([t.n({type:String,attribute:`icon-name`})],d.prototype,`iconName`,void 0),d=n.__decorate([i.customUiKitElement(`ds-chip`)],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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :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.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=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"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.133.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.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.1/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,h=(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.E;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.o(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.x`
             <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.e(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);
+        `}},m.styles=[p.commonStyles],m);a.__decorate([t.n({type:Array,attribute:`selected-chips`,converter:f.stringArrayConverter,reflect:!0})],h.prototype,`selectedChips`,void 0),a.__decorate([t.n({type:Boolean,attribute:`multi-choice`,converter:c.booleanConverter})],h.prototype,`multiChoice`,void 0),a.__decorate([t.n({type:String})],h.prototype,`size`,void 0),a.__decorate([t.n({type:String,reflect:!0})],h.prototype,`mode`,void 0),a.__decorate([n.r()],h.prototype,`hasScrollLeft`,void 0),a.__decorate([n.r()],h.prototype,`hasScrollRight`,void 0),a.__decorate([i.o({slot:``})],h.prototype,`chips`,void 0),a.__decorate([r.e(`.chips-container`)],h.prototype,`chipsContainer`,void 0),h=a.__decorate([s.customUiKitElement(`ds-chips`)],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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     .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;

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

@@ -1,13 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/formatNumber/formatNumber.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=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/decorators/property.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),l=require("./styles/common.styles.cjs");var g=Object.defineProperty,d=Object.getOwnPropertyDescriptor,t=(c,r,s,o)=>{for(var n=o>1?void 0:o?d(r,s):r,p=c.length-1,u;p>=0;p--)(u=c[p])&&(n=(o?u(r,s,n):u(n))||n);return o&&n&&g(r,s,n),n};exports.DsCurrency=class extends m.UiKitElement{constructor(){super(...arguments),this.minimumFractionDigits=0,this.maximumFractionDigits=20,this.amountSize="medium",this.amountWeight="medium",this.currencySize="medium",this.currencyWeight="medium",this.periodSize="medium",this.periodWeight="medium",this.noteSize="medium",this.noteWeight="medium"}get valueTemplate(){const{formattedValue:r,unitSymbol:s,unitSymbolPosition:o}=h.formatNumber({value:this.amountNumber??0,locale:this.locale,style:"currency",currency:this.currencyCode,localeMatcher:"lookup",minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits}),n=this.amountText||r,p={amount:!0,text:!0,[`size-${this.amountSize}`]:!0,[`weight-${this.amountWeight}`]:!0},u={currency:!0,left:o==="left",right:o==="right",text:!0,[`size-${this.currencySize}`]:!0,[`weight-${this.currencyWeight}`]:!0};return i.html`
-            ${o==="left"?i.html`<span class=${a.classMap(u)}>${s}</span>`:i.nothing}
-            <span class=${a.classMap(p)}>${n}</span>
-            ${o==="right"?i.html`<span class=${a.classMap(u)}>${s}</span>`:i.nothing}
-        `}get periodTemplate(){if(!this.period)return i.nothing;const r=new Intl.DisplayNames(this.locale,{type:"dateTimeField"}),s={period:!0,text:!0,[`size-${this.periodSize}`]:!0,[`weight-${this.periodWeight}`]:!0};return i.html`
-            <span class=${a.classMap(s)}"period">/${r.of(this.period)}</span>
-        `}get noteTemplate(){if(!this.note)return i.nothing;const r={note:!0,text:!0,[`size-${this.noteSize}`]:!0,[`weight-${this.noteWeight}`]:!0};return i.html` <span class=${a.classMap(r)}>${this.note}</span> `}render(){return i.html`
-            <div class="container">
-                ${this.valueTemplate}
-                ${this.noteTemplate}
-                ${this.periodTemplate}
-            </div>
-        `}};exports.DsCurrency.styles=[l.commonStyles];t([e.property({type:String})],exports.DsCurrency.prototype,"locale",2);t([e.property({type:String,attribute:"currency-code"})],exports.DsCurrency.prototype,"currencyCode",2);t([e.property({type:String,attribute:"amount-text"})],exports.DsCurrency.prototype,"amountText",2);t([e.property({type:Number,attribute:"amount-number"})],exports.DsCurrency.prototype,"amountNumber",2);t([e.property({type:Number,attribute:"minimum-fraction-digits"})],exports.DsCurrency.prototype,"minimumFractionDigits",2);t([e.property({type:Number,attribute:"maximum-fraction-digits"})],exports.DsCurrency.prototype,"maximumFractionDigits",2);t([e.property({type:String})],exports.DsCurrency.prototype,"period",2);t([e.property({type:String})],exports.DsCurrency.prototype,"note",2);t([e.property({type:String,attribute:"thousand-separator"})],exports.DsCurrency.prototype,"thousandSeparator",2);t([e.property({type:String,attribute:"fraction-separator"})],exports.DsCurrency.prototype,"fractionSeparator",2);t([e.property({type:String,attribute:"amount-size"})],exports.DsCurrency.prototype,"amountSize",2);t([e.property({type:String,attribute:"amount-weight"})],exports.DsCurrency.prototype,"amountWeight",2);t([e.property({type:String,attribute:"currency-size"})],exports.DsCurrency.prototype,"currencySize",2);t([e.property({type:String,attribute:"currency-weight"})],exports.DsCurrency.prototype,"currencyWeight",2);t([e.property({type:String,attribute:"period-size"})],exports.DsCurrency.prototype,"periodSize",2);t([e.property({type:String,attribute:"period-weight"})],exports.DsCurrency.prototype,"periodWeight",2);t([e.property({type:String,attribute:"note-size"})],exports.DsCurrency.prototype,"noteSize",2);t([e.property({type:String,attribute:"note-weight"})],exports.DsCurrency.prototype,"noteWeight",2);exports.DsCurrency=t([y.customUiKitElement("ds-currency")],exports.DsCurrency);
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const o=require("../../utils/formatNumber/formatNumber.cjs"),s=require("./styles/common.styles.cjs");var c,l=(c=class extends r.UiKitElement{constructor(...e){super(...e),this.currencyDisplay=`symbol`,this.minimumFractionDigits=0,this.maximumFractionDigits=20,this.amountSize=`medium`,this.amountWeight=`medium`,this.periodSize=`medium`,this.periodWeight=`medium`,this.noteSize=`medium`,this.noteWeight=`medium`,this.variant=`default`}get valueTemplate(){let{formattedValue:t}=o.formatNumber({value:this.amountNumber??0,locale:this.locale,style:`currency`,currency:this.currencyCode,localeMatcher:`lookup`,useGrouping:`always`,minimumFractionDigits:this.minimumFractionDigits,maximumFractionDigits:this.maximumFractionDigits,currencyDisplay:this.currencyDisplay}),n=this.valueText||t;return e.x`<span class=${a.e({amount:!0,text:!0,[`size-${this.amountSize}`]:!0,[`weight-${this.amountWeight}`]:!0})}>${n}</span>`}get periodTemplate(){if(!this.period)return e.E;let t=new Intl.DisplayNames(this.locale,{type:`dateTimeField`});return e.x`<span class=${a.e({period:!0,text:!0,[`size-${this.periodSize}`]:!0,[`weight-${this.periodWeight}`]:!0})}"period">/${t.of(this.period)}</span>`}get noteTemplate(){return this.note?e.x`<span class=${a.e({note:!0,text:!0,[`size-${this.noteSize}`]:!0,[`weight-${this.noteWeight}`]:!0})}>${this.note}</span>`:e.E}render(){let t={container:!0,strikethrough:this.variant===`strikethrough`},n=this.variant===`strikethrough`?e.x`<div class="strikethrough-line"></div>`:e.E;return e.x`<div class=${a.e(t)}>
+            ${this.valueTemplate}${this.periodTemplate}${this.noteTemplate}${n}
+        </div>`}},c.styles=[s.commonStyles],c);n.__decorate([t.n({type:String})],l.prototype,`locale`,void 0),n.__decorate([t.n({type:String,attribute:`currency-code`})],l.prototype,`currencyCode`,void 0),n.__decorate([t.n({type:String,attribute:`currency-display`})],l.prototype,`currencyDisplay`,void 0),n.__decorate([t.n({type:String,attribute:`value-text`})],l.prototype,`valueText`,void 0),n.__decorate([t.n({type:Number,attribute:`amount-number`})],l.prototype,`amountNumber`,void 0),n.__decorate([t.n({type:Number,attribute:`minimum-fraction-digits`})],l.prototype,`minimumFractionDigits`,void 0),n.__decorate([t.n({type:Number,attribute:`maximum-fraction-digits`})],l.prototype,`maximumFractionDigits`,void 0),n.__decorate([t.n({type:String})],l.prototype,`period`,void 0),n.__decorate([t.n({type:String})],l.prototype,`note`,void 0),n.__decorate([t.n({type:String,attribute:`thousand-separator`})],l.prototype,`thousandSeparator`,void 0),n.__decorate([t.n({type:String,attribute:`fraction-separator`})],l.prototype,`fractionSeparator`,void 0),n.__decorate([t.n({type:String,attribute:`amount-size`})],l.prototype,`amountSize`,void 0),n.__decorate([t.n({type:String,attribute:`amount-weight`})],l.prototype,`amountWeight`,void 0),n.__decorate([t.n({type:String,attribute:`period-size`})],l.prototype,`periodSize`,void 0),n.__decorate([t.n({type:String,attribute:`period-weight`})],l.prototype,`periodWeight`,void 0),n.__decorate([t.n({type:String,attribute:`note-size`})],l.prototype,`noteSize`,void 0),n.__decorate([t.n({type:String,attribute:`note-weight`})],l.prototype,`noteWeight`,void 0),n.__decorate([t.n({type:String})],l.prototype,`variant`,void 0),l=n.__decorate([i.customUiKitElement(`ds-currency`)],l);

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

@@ -1,10 +1,19 @@
-"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.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :host {
-        display: inline;
+        display: contents;
     }
 
     .container {
         display: inline-flex;
-        align-items: flex-end;
+        align-items: baseline;
+        position: relative;
     }
-`;exports.commonStyles=i;
+
+    .strikethrough-line {
+        position: absolute;
+        height: 1px;
+        left: 0;
+        right: 0;
+        top: 50%;
+    }
+`;exports.commonStyles=t;

package/dist/cjs/components/ds-date-picker/ds-date-picker.cjs

@@ -0,0 +1,28 @@
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=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");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const l=require("../../mixins/inputStatesMixin.cjs"),u=require("./styles/common.styles.cjs");var d,f,p=(d=class extends l.inputStatesMixin(i.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.helperText=``,this.forcedError=``,this.invalidError=``,this.readonlyText=``,this.dataAriaLabelCalendarButton=``,this.isExpanded=!1,this.handleCalendarButtonClick=()=>{this.inputStates.disabled||this.inputStates.readonly||(this.isExpanded=!this.isExpanded)},this.handleCalendarChange=e=>{e.stopPropagation();let t=e.detail.value;this.nativeInput&&(this.nativeInput.value=t,this.nativeInput.dispatchEvent(new Event(`input`,{bubbles:!0}))),this.isExpanded=!1},this.handleDocumentClick=e=>{this.isExpanded&&!this.contains(e.target)&&(this.isExpanded=!1)}}connectedCallback(){super.connectedCallback(),this.classList.add(`ds-date-picker`),document.addEventListener(`click`,this.handleDocumentClick),this.addEventListener(`ds-calendar-change`,this.handleCalendarChange),f.injectNativeInputStyles()}static injectNativeInputStyles(){if(f.nativeStylesInjected)return;f.nativeStylesInjected=!0;let e=document.createElement(`style`);e.textContent=[`.ds-date-picker input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }`,`.ds-date-picker input[type="date"]::-webkit-inner-spin-button { display: none !important; }`].join(`
+`),document.head.appendChild(e)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.handleDocumentClick),this.removeEventListener(`ds-calendar-change`,this.handleCalendarChange)}get classes(){return{container:!0,error:!!this.forcedError,[this.size]:!!this.size,disabled:this.inputStates.disabled,readonly:this.inputStates.readonly,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible,expanded:this.isExpanded}}render(){return e.x`
+            <div class=${s.e(this.classes)}>
+                <div class="input-container">
+                    <div><slot></slot></div>
+                    ${this.calendarButtonTemplate}
+                </div>
+                ${this.calendarDropdownTemplate}
+                <div class="footer">
+                    ${this.readonlyTextTemplate}
+                    ${this.helperTextTemplate}
+                    ${this.forcedErrorTemplate}
+                    ${this.invalidErrorTemplate}
+                </div>
+            </div>
+        `}get calendarDropdownTemplate(){return e.x`
+            <div class="calendar-dropdown" ?hidden=${!this.isExpanded}>
+                <slot name="calendar"></slot>
+            </div>
+        `}get calendarButtonTemplate(){var e;return o.uiKitHtml`<ds-icon-button
+            class="calendar-button"
+            icon-name="calendar"
+            size=${c.o(this.size)}
+            ?disabled=${!!((e=this.nativeInput)!=null&&e.disabled)}
+            variant="naked"
+            @click=${this.handleCalendarButtonClick}
+            data-aria-label=${this.dataAriaLabelCalendarButton||`open calendar`}
+        ></ds-icon-button>`}get helperTextTemplate(){return this.inputStates.readonly||this.forcedError||this.inputStates.invalid&&this.invalidError?e.E:e.x`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.inputStates.readonly||!this.forcedError?e.E:e.x`<span class="support-text error-text forced-error">${this.forcedError}</span>`}get readonlyTextTemplate(){return!this.inputStates.readonly||!this.readonlyText?e.E:e.x`<span class="support-text readonly-text">${this.readonlyText}</span>`}get invalidErrorTemplate(){return this.inputStates.readonly||this.forcedError||!this.inputStates.invalid||!this.invalidError?e.E:e.x`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}},f=d,d.styles=[u.commonStyles],d.nativeStylesInjected=!1,d);r.__decorate([t.n({type:String})],p.prototype,`size`,void 0),r.__decorate([t.n({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),r.__decorate([t.n({type:String,attribute:`forced-error`})],p.prototype,`forcedError`,void 0),r.__decorate([t.n({type:String,attribute:`invalid-error`})],p.prototype,`invalidError`,void 0),r.__decorate([t.n({type:String,attribute:`readonly-text`})],p.prototype,`readonlyText`,void 0),r.__decorate([t.n({type:String,attribute:`data-aria-label-calendar-button`})],p.prototype,`dataAriaLabelCalendarButton`,void 0),r.__decorate([n.r()],p.prototype,`isExpanded`,void 0),p=f=r.__decorate([a.customUiKitElement(`ds-date-picker`)],p);

package/dist/cjs/components/ds-date-picker/styles/common.styles.cjs

@@ -0,0 +1,5 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
+    :host {
+        display: contents;
+    }
+`;exports.commonStyles=t;