@cupra/ui-kit 2.0.0-canary.180 → 2.0.0-canary.182

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

@@ -2,4 +2,121 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-icon-button-bg-color-rounded-default);
+        user-select: none;
+        cursor: pointer;
+        overflow: hidden;
+        transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
+        flex: 0 0 auto;
+    }
+
+    .container:not(.disabled):hover {
+        background: var(--ds-icon-button-bg-color-rounded-hover);
+    }
+
+    .container:not(.disabled):active {
+        background: var(--ds-icon-button-bg-color-rounded-pressed);
+    }
+
+    .container:focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+        background: var(--ds-icon-button-bg-color-rounded-focus);
+    }
+
+    .container.disabled {
+        background: var(--ds-icon-button-bg-color-rounded-disabled);
+    }
+
+    .container.large {
+        width: var(--ds-sizing-48);
+        height: var(--ds-sizing-48);
+    }
+
+    .container.medium {
+        width: var(--ds-sizing-40);
+        height: var(--ds-sizing-40);
+    }
+
+    .container.small {
+        width: var(--ds-sizing-36);
+        height: var(--ds-sizing-36);
+    }
+
+    .container .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-default);
+    }
+
+    .container.large .icon {
+        --ui-kit-icon-width: var(--ds-sizing-24);
+        --ui-kit-icon-height: var(--ds-sizing-24);
+    }
+    .container.medium .icon {
+        --ui-kit-icon-width: var(--ds-sizing-20);
+        --ui-kit-icon-height: var(--ds-sizing-20);
+    }
+    .container.small .icon {
+        --ui-kit-icon-width: var(--ds-sizing-16);
+        --ui-kit-icon-height: var(--ds-sizing-16);
+    }
+
+    .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-icon-button-icon-color-quaternary-disabled);
+    }
+
+    .container .initials {
+        overflow: hidden;
+        color: var(--ds-color-text-default-static);
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: var(--ds-typography-weight-body-secondary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+    }
+
+    .container.large .initials {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+    .container.medium .initials {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+    .container.small .initials {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.disabled .initials {
+        color: var(--ds-color-text-disabled);
+    }
+
+    ::slotted(img[slot='media']) {
+        width: 100%;
+        object-fit: cover;
+        display: block;
+    }
+
+    .mode-media.container {
+        filter: brightness(1);
+    }
+
+    .mode-media.container:not(.disabled):hover {
+        filter: brightness(1.1);
+    }
+
+    .mode-media.container:not(.disabled):active {
+        filter: brightness(1.25);
+    }
+
+    .mode-media.container.disabled {
+        filter: grayscale(1) brightness(0.5);
+    }
 `;exports.commonStyles=t;

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

@@ -2,4 +2,46 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: inline-flex;
     }
+
+    .container {
+        border-radius: var(--ds-border-radius-full);
+    }
+
+    .number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 400;
+    }
+
+    .number.size-large {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .number.size-medium {
+        width: var(--ds-sizing-16);
+        height: var(--ds-sizing-16);
+        font-size: var(--ds-typography-size-body-xs);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    .variant-base {
+        color: var(--ds-color-text-default);
+        background-color: var(--ds-color-bg-default);
+    }
+
+    .variant-inverted {
+        background-color: var(--ds-color-bg-default-inverted);
+        color: var(--ds-color-text-default-inverted);
+    }
+
+    .dot {
+        width: var(--ds-sizing-08);
+        height: var(--ds-sizing-08);
+        background-color: var(--ds-color-surface-feedback-error);
+    }
 `;exports.commonStyles=t;

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

@@ -1,4 +1,4 @@
-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/state.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/uiKitHtml.cjs"),o=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-tooltip/ds-tooltip.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.cjs"),require("../ds-breadcrumbs-item/ds-breadcrumbs-item.cjs");var c=[{below:768,maxItems:3},{below:1024,maxItems:4}],l=5,u=class extends r.UiKitElement{constructor(...e){super(...e),this.items=[],this.maxItems=l,this.itemTag=`ds-breadcrumbs-item`,this.onResize=()=>{let e=c.find(({below:e})=>window.innerWidth<e);this.maxItems=(e==null?void 0:e.maxItems)??l}}async firstUpdated(e){super.firstUpdated(e),this.onResize()}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this.onResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this.onResize)}handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase().startsWith(`ds-breadcrumbs-item`));t.length>0&&(this.itemTag=t[0].tagName.toLowerCase()),this.items=t.map(e=>{var t,n;return{label:e.getAttribute(`label`)||((t=e.textContent)==null?void 0:t.trim())||``,href:e.getAttribute(`href`)||((n=e.querySelector(`[slot="item"]`))==null?void 0:n.getAttribute(`href`))||void 0,disabled:e.hasAttribute(`disabled`),loading:e.hasAttribute(`loading`),selected:e.hasAttribute(`selected`)}})}get separatorIcon(){return a.uiKitHtml`<ds-icon class="separator-icon" icon-name="arrow-right" size="24"></ds-icon>`}itemTemplate(t,n){let r=t.selected,i=s.s(this.itemTag),a=r||t.disabled||!t.href?s.u`<span slot="item">${t.label}</span>`:s.u`<a href=${t.href} slot="item">${t.label}</a>`;return s.u`<li class="breadcrumb-list-item">
+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/state.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/uiKitHtml.cjs"),o=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-tooltip/ds-tooltip.cjs");const s=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.cjs"),require("../ds-breadcrumbs-item/ds-breadcrumbs-item.cjs");const c=require("./styles/common.styles.cjs");var l,u=[{below:768,maxItems:3},{below:1024,maxItems:4}],d=5,f=(l=class extends r.UiKitElement{constructor(...e){super(...e),this.items=[],this.maxItems=d,this.itemTag=`ds-breadcrumbs-item`,this.onResize=()=>{let e=u.find(({below:e})=>window.innerWidth<e);this.maxItems=(e==null?void 0:e.maxItems)??d}}async firstUpdated(e){super.firstUpdated(e),this.onResize()}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this.onResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this.onResize)}handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase().startsWith(`ds-breadcrumbs-item`));t.length>0&&(this.itemTag=t[0].tagName.toLowerCase()),this.items=t.map(e=>{var t,n;return{label:e.getAttribute(`label`)||((t=e.textContent)==null?void 0:t.trim())||``,href:e.getAttribute(`href`)||((n=e.querySelector(`[slot="item"]`))==null?void 0:n.getAttribute(`href`))||void 0,disabled:e.hasAttribute(`disabled`),loading:e.hasAttribute(`loading`),selected:e.hasAttribute(`selected`)}})}get separatorIcon(){return a.uiKitHtml`<ds-icon class="separator-icon" icon-name="arrow-right" size="24"></ds-icon>`}itemTemplate(t,n){let r=t.selected,i=s.s(this.itemTag),a=r||t.disabled||!t.href?s.u`<span slot="item">${t.label}</span>`:s.u`<a href=${t.href} slot="item">${t.label}</a>`;return s.u`<li class="breadcrumb-list-item">
             <${i}
                 ?selected=${r}
                 ?disabled=${t.disabled}
@@ -34,4 +34,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/l
                     ${this.listTemplate}
                 </ol>
             </nav>
-        `}};n.__decorate([t.r()],u.prototype,`items`,void 0),n.__decorate([t.r()],u.prototype,`maxItems`,void 0),n.__decorate([t.r()],u.prototype,`itemTag`,void 0),u=n.__decorate([i.customUiKitElement(`ds-breadcrumbs`)],u);
+        `}},l.styles=[c.commonStyles],l);n.__decorate([t.r()],f.prototype,`items`,void 0),n.__decorate([t.r()],f.prototype,`maxItems`,void 0),n.__decorate([t.r()],f.prototype,`itemTag`,void 0),f=n.__decorate([i.customUiKitElement(`ds-breadcrumbs`)],f);

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

@@ -0,0 +1,107 @@
+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`
+    .breadcrumb-list {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-wrap: nowrap;
+        gap: var(--ds-spacing-s-3);
+        width: 100%;
+    }
+
+    .breadcrumb-list-item {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .separator-icon {
+        --ui-kit-icon-color: var(--ds-color-text-default-subtlest);
+    }
+
+    .breadcrumbs-tooltip::part(container) {
+        max-height: none;
+        max-width: none;
+        overflow: visible;
+        padding: 0;
+    }
+
+    .overflow-item-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    .overflow-trigger {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+
+        &: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);
+        }
+
+        &:disabled {
+            cursor: default;
+
+            .overflow-label {
+                color: var(--ds-color-text-disabled);
+            }
+        }
+    }
+
+    .overflow-label {
+        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);
+    }
+
+    .overflow-menu {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+    }
+
+    .overflow-menu-item {
+        display: flex;
+        min-height: 40px;
+        padding: var(--ds-spacing-s-5) var(--ds-spacing-m-1);
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+        border-radius: var(--ds-border-radius-none);
+        border-bottom: 1px solid var(--ds-color-border-default-subtle);
+        text-decoration: none;
+
+        &:hover {
+            cursor: pointer;
+            background: var(--ds-color-control-bg-hover);
+        }
+
+        &:focus,
+        &:focus-visible {
+            background: var(--ds-color-control-bg-hover);
+            outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        }
+    }
+
+    .overflow-menu-link {
+        overflow: hidden;
+        color: var(--ds-color-text-default);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font: var(--ds-typography-weight-body-secondary) var(--ds-typography-size-body-m) /
+            var(--ds-typography-height-body-m) var(--ds-typography-family-primary);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        margin: 0;
+        text-decoration: none;
+    }
+`;exports.commonStyles=t;

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

@@ -1,5 +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");var s=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`
+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>
-        `}};n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],s.prototype,`selected`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],s.prototype,`disabled`,void 0),n.__decorate([t.n({type:Boolean,converter:a.booleanConverter,reflect:!0})],s.prototype,`loading`,void 0),s=n.__decorate([i.customUiKitElement(`ds-breadcrumbs-item`)],s);
+        `}},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-calendar/styles/common.styles.cjs

@@ -39,4 +39,92 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     .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/styles/common.styles.cjs

@@ -20,4 +20,82 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         cursor: default;
         pointer-events: none;
     }
+
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        width: var(--ds-spacing-44);
+        height: var(--ds-spacing-44);
+        border-radius: var(--ds-border-radius-full);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        color: var(--ds-color-text-default-subtlest);
+        background: transparent;
+        border: 1px solid transparent;
+        transition:
+            background-color 0.15s ease,
+            color 0.15s ease,
+            border-color 0.15s ease;
+    }
+
+    .day.outside-month {
+        color: var(--ds-color-text-disabled);
+        opacity: 0.5;
+        cursor: default;
+    }
+
+    .day:not(.outside-month):not(.disabled):not(.selected):not(.today) {
+        color: var(--ds-color-text-default);
+    }
+
+    .day:not(.disabled):not(.selected):hover {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-hover);
+    }
+
+    .day:not(.disabled):not(.selected):active {
+        color: var(--ds-color-text-default);
+        background: var(--ds-color-surface-container-active);
+    }
+
+    .day.disabled {
+        color: var(--ds-color-text-disabled);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.selected {
+        color: var(--ds-color-text-selected-subtle);
+        background: var(--ds-color-surface-container-active);
+        border-color: var(--ds-color-border-selected-subtle);
+    }
+
+    .day.today:not(.selected) {
+        color: var(--ds-color-text-selected-subtle);
+        font-weight: var(--ds-typography-weight-body-primary);
+        background: transparent;
+        border-color: transparent;
+    }
+
+    .day.today.disabled {
+        color: var(--ds-color-text-disabled);
+        font-weight: var(--ds-typography-weight-body-primary);
+    }
+
+    .day:focus-visible {
+        outline: 2px solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+
+    .day.medium {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
 `;exports.commonStyles=t;

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

@@ -9,4 +9,54 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     .container {
         display: flex;
     }
+
+    .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;