@cupra/ui-kit 2.0.0-canary.18 → 2.0.0-canary.181

package/dist/cjs/components/ds-breadcrumbs-item/ds-breadcrumbs-item.cjs

@@ -0,0 +1,5 @@
+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("../../utils/booleanConverter.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 r.UiKitElement{constructor(...e){super(...e),this.selected=!1,this.disabled=!1,this.loading=!1}get classes(){return{"item-wrapper":!0,selected:this.selected,disabled:this.disabled,loading:this.loading}}render(){let t=this.loading?e.x`<div class="skeleton-placeholder"></div>`:e.x`<slot name="item"></slot>`;return e.x`
+            <div class=${o.e(this.classes)} part="item-wrapper">
+                ${t}
+            </div>
+        `}},c.styles=[s.commonStyles],c);n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`selected`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`disabled`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`loading`,void 0),l=n.__decorate([i.customUiKitElement(`ds-breadcrumbs-item`)],l);

package/dist/cjs/components/ds-breadcrumbs-item/styles/common.styles.cjs

@@ -0,0 +1,72 @@
+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`
+    .item-wrapper {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        cursor: default;
+
+        &:focus,
+        &:focus-visible {
+            outline-offset: var(--ds-border-radius-xxs);
+            border-radius: var(--ds-border-radius-xxs);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    :host(:not([selected]):not([disabled]):not([loading]):hover) {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-default-subtle);
+            cursor: pointer;
+        }
+    }
+
+    ::slotted([slot='item']) {
+        max-width: 208px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        text-decoration: none;
+        cursor: default;
+    }
+
+    .selected ::slotted([slot='item']) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    .disabled {
+        ::slotted([slot='item']) {
+            color: var(--ds-color-text-disabled);
+        }
+
+        &:hover {
+            color: var(--ds-color-text-disabled);
+        }
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+
+    .loading .skeleton-placeholder {
+        display: block;
+        width: 48px;
+        height: 16px;
+        background: var(--ds-skeleton-bg-color-default);
+        background-size: 200% 100%;
+        animation: shimmer 3s infinite linear;
+    }
+`;exports.commonStyles=t;

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),m=require("../../decorators/customUiKitElement.cjs"),p=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=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 c=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"),b=require("./styles/common.styles.cjs");var d=Object.defineProperty,v=Object.getOwnPropertyDescriptor,r=(u,e,t,l)=>{for(var s=l>1?void 0:l?v(e,t):e,i=u.length-1,n;i>=0;i--)(n=u[i])&&(s=(l?n(e,t,s):n(s))||s);return l&&s&&d(e,t,s),s};exports.DsBullets=class extends h.UiKitElement{constructor(){super(...arguments),this.mode="light",this.activeBulletIndex=0,this.handleClickChunk=e=>()=>{this.activeBulletIndex!==e&&(this.activeBulletIndex=e,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{index:e}})))}}get bulletsTemplate(){const e=[];for(let t=0;t<this.bulletsNumber;t++){const l={bullet:!0,active:t===this.activeBulletIndex};e.push(o.html`
-                <div @click=${this.handleClickChunk(t)} class=${a.classMap(l)}></div>
-            `)}return e}get classes(){return{container:!0,[this.mode]:!0}}get styleTokens(){return p.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"),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("./styles/common.styles.cjs");var s,c=(s=class extends r.UiKitElement{constructor(...e){super(...e),this.mode=`light`,this.activeBulletIndex=0,this.handleClickChunk=e=>()=>{this.activeBulletIndex!==e&&(this.activeBulletIndex=e,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{index:e}})))}}get bulletsTemplate(){let t=[];for(let n=0;n<this.bulletsNumber;n++){let r={bullet:!0,active:n===this.activeBulletIndex};t.push(e.x`
+                <div @click=${this.handleClickChunk(n)} class=${a.e(r)}></div>
+            `)}return t}get classes(){return{container:!0,[this.mode]:!0}}get styleTokens(){return e.x`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
                     }
                 </style>
-        `}render(){return this.bulletsNumber>0?o.html`
+        `}render(){return this.bulletsNumber>0?e.x`
                   ${this.styleTokens}
-                  <div class=${a.classMap(this.classes)}>${this.bulletsTemplate}</div>
-              `:o.nothing}};exports.DsBullets.styles=[b.commonStyles];r([c.property({type:String,reflect:!0})],exports.DsBullets.prototype,"mode",2);r([c.property({type:Number,attribute:"bullets-number"})],exports.DsBullets.prototype,"bulletsNumber",2);r([c.property({type:Number,attribute:"active-bullet-index",reflect:!0})],exports.DsBullets.prototype,"activeBulletIndex",2);exports.DsBullets=r([m.customUiKitElement("ds-bullets")],exports.DsBullets);
+                  <div class=${a.e(this.classes)}>${this.bulletsTemplate}</div>
+              `:e.E}},s.styles=[o.commonStyles],s);n.__decorate([t.n({type:String,reflect:!0})],c.prototype,`mode`,void 0),n.__decorate([t.n({type:Number,attribute:`bullets-number`})],c.prototype,`bulletsNumber`,void 0),n.__decorate([t.n({type:Number,attribute:`active-bullet-index`,reflect:!0})],c.prototype,`activeBulletIndex`,void 0),c=n.__decorate([i.customUiKitElement(`ds-bullets`)],c);

package/dist/cjs/components/ds-bullets/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"),o=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%;
@@ -16,4 +16,4 @@
     .bullet.active {
         cursor: auto;
     }
-`;exports.commonStyles=o;
+`;exports.commonStyles=t;

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

@@ -1,56 +1,57 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),y=require("../../decorators/customUiKitElement.cjs"),b=require("../../mixins/ViewportMixin.cjs"),n=require("../../utils/booleanConverter.cjs"),g=require("../../utils/htmlWithTokens.cjs"),v=require("../../utils/objectConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const o=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 s=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),f=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),$=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs");var B=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(p,e,r,l)=>{for(var i=l>1?void 0:l?D(e,r):e,h=p.length-1,c;h>=0;h--)(c=p[h])&&(i=(l?c(e,r,i):c(i))||i);return l&&i&&B(e,r,i),i};exports.DsButton=class extends b.ViewportMixin(m.UiKitElement){constructor(){super(...arguments),this.variant="primary",this.mode="light",this.size="large",this.disabled=!1,this.destructive=!1,this.htmlTagName="button",this.type="button",this.iconPosition="left",this.rounded=!1,this.fullWidth=!1,this.loading=!1}firstUpdated(){this.closestForm=this.closest("form")}get classes(){const e=typeof this.size=="string"?this.size:this.size[this.viewport];return{button:!0,custom:this.htmlTagName==="custom",[e]:!!e,[this.mode]:!!this.mode,[this.variant]:!!this.variant,rounded:this.rounded,disabled:this.disabled||this.loading,destructive:this.destructive,"full-width":this.fullWidth}}handleClick(e){if(this.href||e.preventDefault(),this.closestForm&&this.type==="submit"){const r=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0});this.closestForm.dispatchEvent(r)}}get iconTemplate(){return this.iconName?this.componentFactory.createIcon({class:"icon","icon-name":this.iconName}):o.nothing}get loadingTemplate(){return this.loading?o.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");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("../../mixins/ViewportMixin.cjs"),l=require("../../utils/objectConverter.cjs"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.cjs"),d=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),f=require("./styles/common.styles.cjs");var p,m=(p=class extends c.ViewportMixin(r.UiKitElement){constructor(...e){super(...e),this.variant=`primary`,this.mode=`light`,this.size=`large`,this.disabled=!1,this.destructive=!1,this.htmlTagName=`button`,this.type=`button`,this.iconPosition=`left`,this.rounded=!1,this.fullWidth=!1,this.loading=!1}connectedCallback(){super.connectedCallback(),this.closestForm=this.closest(`form`)}get classes(){let e=typeof this.size==`string`?this.size:this.size[this.viewport];return{button:!0,[`tag-${this.htmlTagName}`]:!0,[`variant-${this.variant}`]:!0,[e]:!!e,[this.mode]:!!this.mode,rounded:this.rounded,disabled:this.disabled||this.loading,destructive:this.destructive,"full-width":this.fullWidth}}handleClick(e){if(this.href||e.preventDefault(),this.closestForm&&this.type===`submit`){let e=new Event(`submit`,{bubbles:!0,composed:!0,cancelable:!0});this.closestForm.dispatchEvent(e)}}handleCustomClick(e){var t;let n=(t=this.shadowRoot)==null?void 0:t.querySelector(`slot`),r=n==null?void 0:n.assignedElements()[0];r&&!r.contains(e.composedPath()[0])&&(e.stopPropagation(),r.click())}get iconTemplate(){return this.iconName?o.uiKitHtml`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>`:e.E}get loadingTemplate(){return this.loading?e.x`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
                 <span>.</span>
             </span>
-        `:o.nothing}get cssTokens(){return g.htmlWithTokens`
+        `:e.E}get contentTemplate(){return this.loading&&this.textLoading?e.x`${this.textLoading}`:e.x`<slot></slot>`}get cssTokens(){return e.x`
             <style>
                 :host{
                     color-scheme: ${this.mode};
-                    pointer-events: ${this.loading||this.disabled?"none":"visible"};
+                    pointer-events: ${this.loading||this.disabled?`none`:`visible`};
                 }
 
                 :host:has(::slotted(*:disabled)){
                     pointer-events: none;
                 }
-            </style>`}render(){return o.html`
+            </style>`}render(){return e.x`
             ${this.cssTokens}
-            ${$.choose(this.htmlTagName||"button",[["button",()=>{var e;return o.html`
+            ${u.r(this.htmlTagName||`button`,[[`button`,()=>{var t;return e.x`
                         <button
-                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
-                            class=${u.classMap(this.classes)}
+                            class=${s.e(this.classes)}
+                            aria-label=${(t=this.textContent)==null?void 0:t.replace(/^\s+|\s+$/g,``)}
                             type=${this.type}
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${a.when(this.iconPosition==="left",()=>o.html` ${this.iconTemplate} `)}
+                            ${d.n(this.iconPosition===`left`,()=>e.x` ${this.iconTemplate} `)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${a.when(this.iconPosition==="right",()=>o.html` ${this.iconTemplate} `)}
+                            ${d.n(this.iconPosition===`right`,()=>e.x` ${this.iconTemplate} `)}
                         </button>
-                    `}],["a",()=>{var e;return o.html`
+                    `}],[`a`,()=>{var t;return e.x`
                         <a
-                            aria-label=${(e=this.textContent)==null?void 0:e.replace(/^\s+|\s+$/g,"")}
-                            class=${u.classMap(this.classes)}
+                            class=${s.e(this.classes)}
+                            aria-label=${(t=this.textContent)==null?void 0:t.replace(/^\s+|\s+$/g,``)}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
                             @click=${this.handleClick}
-                            ?disabled=${this.disabled}
                         >
-                            ${a.when(this.iconPosition==="left",()=>o.html`${this.iconTemplate}`)}
+                            ${d.n(this.iconPosition===`left`,()=>e.x`${this.iconTemplate}`)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${a.when(this.iconPosition==="right",()=>o.html`${this.iconTemplate}`)}
+                            ${d.n(this.iconPosition===`right`,()=>e.x`${this.iconTemplate}`)}
                         </a>
-                    `}],["custom",()=>o.html`
-                        <div class=${u.classMap(this.classes)}>
-                            <slot></slot>
+                    `}],[`custom`,()=>e.x`
+                        <div class=${s.e(this.classes)} @click=${this.handleCustomClick}>
+                            ${d.n(this.iconPosition===`left`,()=>e.x`${this.iconTemplate}`)}
+                            ${this.loading&&this.textLoading?e.x`<span class="container">${this.textLoading}${this.loadingTemplate}</span>`:e.x`<slot></slot>${this.loadingTemplate}`}
+                            ${d.n(this.iconPosition===`right`,()=>e.x`${this.iconTemplate}`)}
                         </div>
                     `]])}
-        `}};exports.DsButton.styles=[d.buttonStyles,d.textStyles,d.loadingDotsStyles];t([s.property({type:String})],exports.DsButton.prototype,"variant",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"mode",2);t([s.property({type:String,converter:v.objectConverter})],exports.DsButton.prototype,"size",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"disabled",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"destructive",2);t([s.property({type:String,attribute:"icon-name"})],exports.DsButton.prototype,"iconName",2);t([s.property({type:String,attribute:"html-tag-name"})],exports.DsButton.prototype,"htmlTagName",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"href",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"rel",2);t([s.property({type:String,reflect:!0})],exports.DsButton.prototype,"target",2);t([s.property({type:String})],exports.DsButton.prototype,"type",2);t([s.property({type:String,attribute:"icon-position"})],exports.DsButton.prototype,"iconPosition",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"rounded",2);t([s.property({type:Boolean,converter:n.booleanConverter,attribute:"full-width"})],exports.DsButton.prototype,"fullWidth",2);t([s.property({type:Boolean,converter:n.booleanConverter})],exports.DsButton.prototype,"loading",2);t([f.state()],exports.DsButton.prototype,"closestForm",2);exports.DsButton=t([y.customUiKitElement("ds-button")],exports.DsButton);
+        `}},p.styles=[f.buttonStyles,f.textStyles,f.loadingDotsStyles],p);n.__decorate([t.n({type:String,reflect:!0})],m.prototype,`variant`,void 0),n.__decorate([t.n({type:String,reflect:!0})],m.prototype,`mode`,void 0),n.__decorate([t.n({type:String,converter:l.objectConverter})],m.prototype,`size`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],m.prototype,`disabled`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],m.prototype,`destructive`,void 0),n.__decorate([t.n({type:String,attribute:`icon-name`})],m.prototype,`iconName`,void 0),n.__decorate([t.n({type:String,attribute:`html-tag-name`})],m.prototype,`htmlTagName`,void 0),n.__decorate([t.n({type:String,reflect:!0})],m.prototype,`href`,void 0),n.__decorate([t.n({type:String,reflect:!0})],m.prototype,`rel`,void 0),n.__decorate([t.n({type:String,reflect:!0})],m.prototype,`target`,void 0),n.__decorate([t.n({type:String})],m.prototype,`type`,void 0),n.__decorate([t.n({type:String,attribute:`icon-position`})],m.prototype,`iconPosition`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],m.prototype,`rounded`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,attribute:`full-width`})],m.prototype,`fullWidth`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter})],m.prototype,`loading`,void 0),n.__decorate([t.n({type:String,attribute:`text-loading`})],m.prototype,`textLoading`,void 0),m=n.__decorate([i.customUiKitElement(`ds-button`)],m),Object.defineProperty(exports,"DsButton",{enumerable:!0,get:function(){return m}});

package/dist/cjs/components/ds-button/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 t=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),i=t.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: contents;
     }
@@ -10,6 +10,15 @@
         box-sizing: border-box;
         justify-content: center;
         align-items: center;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
         cursor: pointer;
         outline-style: solid;
         max-width: 100%;
@@ -18,7 +27,39 @@
     .button.full-width {
         width: 100%;
     }
-`,o=t.css`
+
+    .tag-custom ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        flex: 1;
+        min-width: 0;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
+        text-decoration: none;
+        cursor: inherit;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    .tag-custom ::slotted(*:disabled),
+    .tag-custom.disabled ::slotted(*) {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .tag-custom ::slotted(*:focus-visible) {
+        outline: none;
+    }
+`,n=e.i`
     .naked.container {
         display: inline-flex;
     }
@@ -28,7 +69,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`,n=t.css`
+`,r=e.i`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -104,4 +145,4 @@
             opacity: 1;
         }
     }
-`;exports.buttonStyles=i;exports.loadingDotsStyles=n;exports.textStyles=o;
+`;exports.buttonStyles=t,exports.loadingDotsStyles=r,exports.textStyles=n;

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

@@ -0,0 +1,43 @@
+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"),require("../ds-calendar-day/ds-calendar-day.cjs");const l=require("../../utils/arrayConverter.cjs"),u=require("./styles/common.styles.cjs");var d,f=(d=class extends i.UiKitElement{constructor(...e){super(...e),this.variant=`plane`,this.size=`large`,this.locale=`en-US`,this.firstDayOfWeek=1,this.disabledDates=[],this.disabledWeekdays=[],this._viewDate=new Date,this._value=null,this._initialValueApplied=!1,this._viewDateInitialized=!1}get selectedDate(){if(this.value){let e=this.parseDate(this.value);if(e)return e}return this._value}get viewDate(){return this._viewDate}connectedCallback(){super.connectedCallback(),this.applyInitialValue()}willUpdate(e){super.willUpdate(e),(!this._viewDateInitialized||e.has(`value`)||e.has(`viewDateAttr`))&&(this._viewDateInitialized=!0,this.initializeViewDate())}applyInitialValue(){if(!this._initialValueApplied&&(this._initialValueApplied=!0,this.initialValue)){let e=this.parseDate(this.initialValue);e&&(this._value=e)}}initializeViewDate(){if(this.viewDateAttr){let e=this.parseDate(this.viewDateAttr);e&&(this._viewDate=e)}else if(this.value){let e=this.parseDate(this.value);e&&(this._viewDate=new Date(e))}else this._value?this._viewDate=new Date(this._value):this._viewDate=new Date}parseDate(e){let t=e.split(`-`);if(t.length>=2){let e=Number.parseInt(t[0],10),n=Number.parseInt(t[1],10)-1,r=t.length>=3?Number.parseInt(t[2],10):1,i=new Date(e,n,r);if(!Number.isNaN(i.getTime()))return i}return null}get calendarClasses(){return{calendar:!0,[this.variant]:!0,[this.size]:!0}}get weekdayNames(){let e=new Intl.DateTimeFormat(this.locale,{weekday:`short`}),t=[],n=new Date(2024,0,1);for(;n.getDay()!==this.firstDayOfWeek;)n.setDate(n.getDate()+1);for(let r=0;r<7;r++){let i=new Date(n);i.setDate(n.getDate()+r);let a=e.format(i);t.push(a.slice(0,2))}return t}get monthYearLabel(){return new Intl.DateTimeFormat(this.locale,{month:`long`,year:`numeric`}).format(this._viewDate)}getDaysInMonth(e,t){return new Date(e,t+1,0).getDate()}getFirstDayOfMonth(e,t){return new Date(e,t,1).getDay()}get calendarDays(){let e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),n=new Date;n.setHours(0,0,0,0);let r=this.getDaysInMonth(e,t),i=this.getFirstDayOfMonth(e,t)-this.firstDayOfWeek;i<0&&(i+=7);let a=[],o=t===0?11:t-1,s=t===0?e-1:e,c=this.getDaysInMonth(s,o);for(let e=i-1;e>=0;e--){let t=c-e,r=new Date(s,o,t);a.push(this.createCalendarDay(r,!1,n))}for(let i=1;i<=r;i++){let r=new Date(e,t,i);a.push(this.createCalendarDay(r,!0,n))}let l=42-a.length,u=t===11?0:t+1,d=t===11?e+1:e;for(let e=1;e<=l;e++){let t=new Date(d,u,e);a.push(this.createCalendarDay(t,!1,n))}return a}createCalendarDay(e,t,n){e.setHours(0,0,0,0);let r=e.getDate(),i=e.getMonth(),a=e.getFullYear(),o=r===n.getDate()&&i===n.getMonth()&&a===n.getFullYear(),s=this.selectedDate;return{day:r,month:i,year:a,date:e,isCurrentMonth:t,isToday:o,isSelected:s?r===s.getDate()&&i===s.getMonth()&&a===s.getFullYear():!1,isDisabled:!t||this.isDateDisabled(e)}}isDateDisabled(e){if(this.minDate){let t=new Date(this.minDate);if(t.setHours(0,0,0,0),e<t)return!0}if(this.maxDate){let t=new Date(this.maxDate);if(t.setHours(0,0,0,0),e>t)return!0}if(this.disabledWeekdays&&this.disabledWeekdays.length>0){let t=e.getDay();if(this.disabledWeekdays.some(e=>Number(e)===t))return!0}if(this.disabledDates&&this.disabledDates.length>0){let t=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`;if(this.disabledDates.includes(t))return!0}return!1}handlePrevMonth(){let e=new Date(this._viewDate);e.setMonth(e.getMonth()-1),this._viewDate=e}handleNextMonth(){let e=new Date(this._viewDate);e.setMonth(e.getMonth()+1),this._viewDate=e}handleDayChange(e){var t;e.stopPropagation();let n=e.target;if(!n||!n.tagName.toLowerCase().startsWith(`ds-calendar-day`))return;let r=n.tagName.toLowerCase(),i=Array.from(((t=this.shadowRoot)==null?void 0:t.querySelectorAll(r))||[]).indexOf(n);if(i===-1)return;let a=this.calendarDays[i];if(!a||a.isDisabled)return;this._value=a.date,this._viewDate=new Date(a.date);let o=`${a.date.getFullYear()}-${String(a.date.getMonth()+1).padStart(2,`0`)}-${String(a.date.getDate()).padStart(2,`0`)}`;this.dispatchEvent(new CustomEvent(`ds-calendar-change`,{bubbles:!0,composed:!0,detail:{value:o,date:a.date}}))}get navButtonSize(){return this.size===`medium`?`small`:`medium`}get prevButtonTemplate(){return o.uiKitHtml`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-left"
+            data-aria-label="Previous month"
+            @click=${this.handlePrevMonth}
+            variant="naked"
+            size=${c.o(this.navButtonSize)}
+        ></ds-icon-button>`}get nextButtonTemplate(){return o.uiKitHtml`<ds-icon-button
+            class="nav-button"
+            icon-name="arrow-right"
+            data-aria-label="Next month"
+            @click=${this.handleNextMonth}
+            variant="naked"
+            size=${c.o(this.navButtonSize)}
+        ></ds-icon-button>`}get weekdaysTemplate(){return e.x`
+            <div class="weekdays">
+                ${this.weekdayNames.map(t=>e.x`<div class="weekday">${t}</div>`)}
+            </div>
+        `}get daysTemplate(){let t=this.calendarDays,n=[];for(let e=0;e<t.length;e+=7)n.push(t.slice(e,e+7));return e.x`
+            <div class="days-grid" role="grid" @ds-calendar-day-change=${this.handleDayChange}>
+                ${n.map(t=>e.x`
+                        <div class="days-row" role="row">
+                            ${t.map(e=>o.uiKitHtml`<ds-calendar-day
+                                    day=${e.day}
+                                    size=${c.o(this.size)}
+                                    ?disabled=${e.isDisabled}
+                                    ?selected=${e.isSelected}
+                                    ?today=${e.isToday}
+                                    ?outside-month=${!e.isCurrentMonth}
+                                ></ds-calendar-day>`)}
+                        </div>
+                    `)}
+            </div>
+        `}render(){return e.x`
+            <div class=${s.e(this.calendarClasses)} role="application" aria-label="Calendar">
+                <div class="header">
+                    ${this.prevButtonTemplate}
+                    <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
+                    ${this.nextButtonTemplate}
+                </div>
+                ${this.weekdaysTemplate} ${this.daysTemplate}
+            </div>
+        `}},d.styles=[u.commonStyles],d);r.__decorate([t.n({type:String,reflect:!0})],f.prototype,`value`,void 0),r.__decorate([t.n({type:String,reflect:!0})],f.prototype,`variant`,void 0),r.__decorate([t.n({type:String,reflect:!0})],f.prototype,`size`,void 0),r.__decorate([t.n({type:String,reflect:!0})],f.prototype,`locale`,void 0),r.__decorate([t.n({type:Number,reflect:!0,attribute:`first-day-of-week`})],f.prototype,`firstDayOfWeek`,void 0),r.__decorate([t.n({type:String,reflect:!0,attribute:`min-date`})],f.prototype,`minDate`,void 0),r.__decorate([t.n({type:String,reflect:!0,attribute:`max-date`})],f.prototype,`maxDate`,void 0),r.__decorate([t.n({attribute:`disabled-dates`,converter:l.arrayConverter})],f.prototype,`disabledDates`,void 0),r.__decorate([t.n({attribute:`disabled-weekdays`,converter:l.arrayConverter})],f.prototype,`disabledWeekdays`,void 0),r.__decorate([t.n({type:String,reflect:!0,attribute:`view-date`})],f.prototype,`viewDateAttr`,void 0),r.__decorate([t.n({type:String,attribute:`initial-value`})],f.prototype,`initialValue`,void 0),r.__decorate([n.r()],f.prototype,`_viewDate`,void 0),r.__decorate([n.r()],f.prototype,`_value`,void 0),f=r.__decorate([a.customUiKitElement(`ds-calendar`)],f);

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

@@ -0,0 +1,130 @@
+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;
+    }
+
+    .calendar {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .month-year {
+        flex: 1;
+        text-align: center;
+    }
+
+    .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .days-row {
+        display: contents;
+    }
+
+    :host {
+        display: inline-block;
+    }
+
+    .calendar {
+        padding: var(--ds-spacing-m-2);
+        box-sizing: border-box;
+    }
+
+    .calendar.plane {
+        background: var(--ds-color-surface-default);
+        border-radius: var(--ds-border-radius-m);
+    }
+
+    .calendar.elevated {
+        background: var(--ds-color-surface-default-subtlest);
+        border-radius: var(--ds-border-radius-xs);
+        box-shadow: 0 8px 32px 0 var(--ds-opacity-black-60);
+        backdrop-filter: blur(80px);
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--ds-spacing-m-1);
+    }
+
+    .month-year {
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default);
+        text-align: center;
+        flex: 1;
+    }
+
+    .nav-button {
+        flex-shrink: 0;
+    }
+
+    .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--ds-spacing-s-3);
+        margin-bottom: var(--ds-spacing-s-3);
+    }
+
+    .weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 44px;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .calendar.medium {
+        padding: var(--ds-spacing-m-1);
+    }
+
+    .calendar.medium .header {
+        margin-bottom: var(--ds-spacing-s-3);
+    }
+
+    .calendar.medium .month-year {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .calendar.medium .weekday {
+        height: 32px;
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+`;exports.commonStyles=t;

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

@@ -0,0 +1,15 @@
+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("../../utils/booleanConverter.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 r.UiKitElement{constructor(...e){super(...e),this.size=`large`,this.disabled=!1,this.selected=!1,this.today=!1,this.outsideMonth=!1}get classes(){return{day:!0,[this.size]:!0,disabled:this.disabled,selected:this.selected,today:this.today,"outside-month":this.outsideMonth}}handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.dispatchEvent(new CustomEvent(`ds-calendar-day-change`,{bubbles:!0,composed:!0,detail:{day:this.day}}))}handleKeyDown(e){this.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.handleClick(e))}render(){return e.x`
+            <button
+                class=${o.e(this.classes)}
+                ?disabled=${this.disabled}
+                aria-label=${this.day?`Day ${this.day}`:``}
+                role="gridcell"
+                aria-selected=${this.selected}
+                aria-current=${this.today?`date`:`false`}
+                tabindex=${this.disabled?-1:0}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.day}
+            </button>
+        `}},c.styles=[s.commonStyles],c);n.__decorate([t.n({type:Number,reflect:!0})],l.prototype,`day`,void 0),n.__decorate([t.n({type:String,reflect:!0})],l.prototype,`size`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`disabled`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`selected`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],l.prototype,`today`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0,attribute:`outside-month`})],l.prototype,`outsideMonth`,void 0),l=n.__decorate([i.customUiKitElement(`ds-calendar-day`)],l);

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.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-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;