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

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

@@ -15,4 +15,91 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         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-icon/iconNames.cjs

@@ -1 +1 @@
-var e=`9-circles.ad-color.ae-color.af-color.ag-color.ai-color.al-color.am-color.an-color.ao-color.ar-color.arrow-down.arrow-down-line.arrow-download.arrow-exit.arrow-expand.arrow-external-link.arrow-left.arrow-left-line.arrow-reload.arrow-right.arrow-right-line.arrow-rotate-360.arrow-rotate-360-horizontal.arrow-switch.arrow-up.arrow-up-line.arrow-upload.at-color.au-color.aw-color.ax-color.az-color.b-color.ba-color.battery-g-4-01.battery-inclined-fill.battery-vertical-100.battery-2-sub-arrows-up.battery-3-sub-arrows-up.bb-color.bd-color.be-color.bell.bf-color.bg-color.bh-color.bi-color.bill.bin.bj-color.bm-color.bn-color.bo-color.book-mark.box.br-color.bs-color.bt-color.bw-color.by-color.bz-color.c-color.ca-color.cable.caf-color.calendar.camera.car-arrow-down.car-compare.car-door.car-frontal.car-imodel.car-in-window.car-lateral.car-model.car-seat.cart.cart-down.cas-color.cd-color.cercle-ribbon-check.ceu-color.cf-color.cg-color.ch-color.charger-acc.charger-type-2.chat-bubble.check.check-mark-circle.ci-color.city.cl-color.clock.cloud-co-2.cm-color.cn-color.cna-color.co-color.coc-color.computer-display.cr-color.credit-card.debit-card.cross.cross-circle.csa-color.cu-color.cv-color.cy-color.cz-color.de-color.dj-color.dk-color.dm-color.do-color.document.document-check.document-copy.document-download.document-time.dot.dz-color.ec-color.eco-color.ee-color.eg-color.electric-station.engine.envelope.equals-sign.er-color.es-color.et-color.eu-color.euro.exclamation-mark-circle.exclamation-mark-triangle.eye.eye-crossed-out.facebook.fi-color.filter.fj-color.fk-color.fm-color.fr-color.fuel-station.ga-color.garage.gb-color.gd-color.ge-color.gear.gg-color.gh-color.gi-color.globe.gm-color.gn-color.gq-color.gr-color.gt-color.gw-color.gy-color.half-star-filled.headlight.heart.heart-filled.highway.hk-color.hn-color.hr-color.ht-color.hu-color.id-color.ie-color.il-color.im-color.in-color.info-circle.info-triangle.instagram.iq-color.ir-color.is-color.it-color.je-color.jm-color.jo-color.jp-color.ke-color.key.kg-color.kh-color.km-color.kn-color.kp-color.kr-color.kw-color.ky-color.kz-color.la-color.label-a-color.label-b-color.label-c-color.label-d-color.label-e-color.label-f-color.label-g-color.label-h-color.label-i-color.label-j-color.label-k-color.label-l-color.label-m-color.lb-color.lc-color.li-color.light.lightning.link.linkedin.list.list-line.lk-color.loader.location-poi.lock-locked.lock-unlocked.logo.logo-light.logo-lockup.logo-wordmark.lr-color.ls-color.lt-color.lu-color.lv-color.ly-color.map.ma-color.magnifying-glass.magnifying-glass-minus.magnifying-glass-plus.math-symbols-square.mc-color.md-color.me-color.menu.mg-color.micro.micro-crossed-out.minus.mk-color.ml-color.mm-color.mn-color.mo-color.mobile.moon.mountains.mr-color.ms-color.mt-color.mu-color.mv-color.mw-color.mx-color.my-color.mz-color.na-color.ne-color.ng-color.ni-color.nl-color.no-color.np-color.nz-color.om-color.pa-color.parking.pause.pause-loading.pcircle.pe-color.pen.pen-paper.person-open-arms.pf-color.pg-color.ph-color.phone-contact.pig-coin.pk-color.pl-color.play.play-circle.plug-charge.plug-regular.plus.position.pr-color.pt-color.pw-color.py-color.qa-color.question-mark.ro-color.road.road-mountain.rs-color.ru-color.rw-color.sa-color.sb-color.scan-qr.sc-color.sd-color.se-color.seat-front.sg-color.sh-color.share.shopping-bag.si-color.sk-color.sl-color.sm-color.sn-color.snowflake.so-color.speaker.speaker-crossed-out.spray.sr-color.st-color.star.star-filled.store.suitcase.sun.sunset.sv-color.sy-color.sz-color.tag.tc-color.td-color.telegram.tg-color.th-color.ticket.tj-color.tl-color.tm-color.tn-color.to-color.tr-color.transmission-automatic.transmission-manual.triple-dot-h.triple-dot-v.tt-color.tw-color.twitter.tz-color.ua-color.ug-color.us-color.user.uy-color.uz-color.vc-color.ve-color.vg-color.video-camera.video-camera-crossed-out.vimeo.vn-color.vu-color.wall-charger.whatsapp.wheel.wifi.wrench-hammer.ws-color.ww-color.ye-color.youtube.za-color.zero-color.zm-color.zw-color`.split(`.`);exports.iconNames=e;
+var e=`9-circles.ad-color.ae-color.af-color.ag-color.ai-color.al-color.am-color.an-color.ao-color.ar-color.arrow-down.arrow-down-line.arrow-download.arrow-exit.arrow-expand.arrow-external-link.arrow-left.arrow-left-line.arrow-reload.arrow-right.arrow-right-line.arrow-rotate-360.arrow-rotate-360-horizontal.arrow-switch.arrow-up.arrow-up-line.arrow-upload.at-color.au-color.aw-color.ax-color.az-color.b-color.ba-color.battery-g-4-01.battery-inclined-fill.battery-vertical-100.battery-2-sub-arrows-up.battery-3-sub-arrows-up.bb-color.bd-color.be-color.bell.bf-color.bg-color.bh-color.bi-color.bill.bin.bj-color.bm-color.bn-color.bo-color.book-mark.box.br-color.bs-color.bt-color.bw-color.by-color.bz-color.c-color.ca-color.cable.caf-color.calendar.camera.car-arrow-down.car-compare.car-door.car-frontal.car-imodel.car-in-window.car-lateral.car-model.car-seat.cart.cart-down.cas-color.cd-color.cercle-ribbon-check.ceu-color.cf-color.cg-color.ch-color.charger-acc.charger-type-2.chat-bubble.check.check-mark-circle.ci-color.city.cl-color.clock.cloud-co-2.cm-color.cn-color.cna-color.co-color.coc-color.computer-display.cr-color.credit-card.debit-card.cross.cross-circle.cross-image.csa-color.cu-color.cv-color.cy-color.cz-color.de-color.dj-color.dk-color.dm-color.do-color.document.document-check.document-copy.document-download.document-time.dot.dz-color.ec-color.eco-color.ee-color.eg-color.electric-station.engine.envelope.equals-sign.er-color.es-color.et-color.eu-color.euro.exclamation-mark-circle.exclamation-mark-triangle.eye.eye-crossed-out.facebook.fi-color.filter.fj-color.fk-color.fm-color.fr-color.fuel-station.ga-color.garage.gb-color.gd-color.ge-color.gear.gg-color.gh-color.gi-color.globe.gm-color.gn-color.gq-color.gr-color.gt-color.gw-color.gy-color.half-star-filled.headlight.heart.heart-filled.highway.hk-color.hn-color.hr-color.ht-color.hu-color.id-color.ie-color.il-color.im-color.in-color.info-circle.info-triangle.instagram.iq-color.ir-color.is-color.it-color.je-color.jm-color.jo-color.jp-color.ke-color.key.kg-color.kh-color.km-color.kn-color.kp-color.kr-color.kw-color.ky-color.kz-color.la-color.label-a-color.label-b-color.label-c-color.label-d-color.label-e-color.label-f-color.label-g-color.label-h-color.label-i-color.label-j-color.label-k-color.label-l-color.label-m-color.lb-color.lc-color.li-color.light.lightning.link.linkedin.list.list-line.lk-color.loader.location-poi.lock-locked.lock-unlocked.logo.logo-light.logo-lockup.logo-wordmark.lr-color.ls-color.lt-color.lu-color.lv-color.ly-color.map.ma-color.magnifying-glass.magnifying-glass-minus.magnifying-glass-plus.math-symbols-square.mc-color.md-color.me-color.menu.mg-color.micro.micro-crossed-out.minus.mk-color.ml-color.mm-color.mn-color.mo-color.mobile.moon.mountains.mr-color.ms-color.mt-color.mu-color.mv-color.mw-color.mx-color.my-color.mz-color.na-color.ne-color.ng-color.ni-color.nl-color.no-color.np-color.nz-color.om-color.pa-color.parking.pause.pause-loading.pcircle.pe-color.pen.pen-paper.person-open-arms.pf-color.pg-color.ph-color.phone-contact.pig-coin.pk-color.pl-color.play.play-circle.plug-charge.plug-regular.plus.position.pr-color.pt-color.pw-color.py-color.qa-color.question-mark.ro-color.road.road-mountain.rs-color.ru-color.rw-color.sa-color.sb-color.scan-qr.sc-color.sd-color.se-color.seat-front.sg-color.sh-color.share.shopping-bag.si-color.sk-color.sl-color.sm-color.sn-color.snowflake.so-color.speaker.speaker-crossed-out.spray.sr-color.st-color.star.star-filled.store.suitcase.sun.sunset.sv-color.sy-color.sz-color.tag.tc-color.td-color.telegram.tg-color.th-color.ticket.tj-color.tl-color.tm-color.tn-color.to-color.tr-color.transmission-automatic.transmission-manual.triple-dot-h.triple-dot-v.tt-color.tw-color.twitter.tz-color.ua-color.ug-color.us-color.user.uy-color.uz-color.vc-color.ve-color.vg-color.video-camera.video-camera-crossed-out.vimeo.vn-color.vu-color.wall-charger.whatsapp.wheel.wifi.wrench-hammer.ws-color.ww-color.ye-color.youtube.za-color.zero-color.zm-color.zw-color`.split(`.`);exports.iconNames=e;

package/dist/cjs/components/ds-icon-button-group/styles/common.styles.cjs

@@ -11,4 +11,13 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         border-radius: var(--ds-border-radius-xs, 6px);
         overflow: hidden;
     }
+
+    .container {
+        background-image: linear-gradient(
+            179.78deg,
+            var(--ds-color-interaction-subtle-alternative-bg-default-start) 0.73%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-mid) 84.63%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-end) 99.44%
+        );
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-interactive-card/styles/common.styles.cjs

@@ -2,4 +2,218 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        position: relative;
+        backdrop-filter: blur(60px);
+        border: 1px solid var(--ds-color-border-default);
+        border-radius: var(--ds-border-radius-m);
+        padding: var(--ds-spacing-m-2);
+        width: 320px;
+        background: var(--ds-card-bg-color-default);
+        display: flex;
+        flex-direction: column;
+        cursor: pointer;
+        box-sizing: border-box;
+    }
+
+    .container:not(.error):hover {
+        background: var(--ds-card-bg-color-hover);
+    }
+    .container:not(.error):active {
+        background: var(--ds-card-bg-color-pressed);
+    }
+    .container:not(.error):focus-visible {
+        outline: var(--ds-border-width-l) solid var(--ds-color-border-focus-ring);
+        outline-offset: 2px;
+    }
+    .container:not(.error).selected {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-card-bg-color-default);
+    }
+
+    .container.error {
+        pointer-events: none;
+    }
+
+    .header {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        align-self: stretch;
+    }
+
+    .header-main {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 8px;
+        width: 100%;
+    }
+
+    .title {
+        flex: 1 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        font-weight: 500;
+    }
+
+    .subtitle {
+        white-space: nowrap;
+        color: var(--ds-color-text-default-subtlest);
+        font-family: var(--ds-typography-family-primary), sans-serif;
+        font-weight: 350;
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .meta {
+        width: 100%;
+        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);
+    }
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        color: var(--ds-color-text-default-subtlest);
+        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);
+    }
+
+    .cta {
+        width: 100%;
+    }
+
+    .error {
+        display: flex;
+        width: 320px;
+        padding: var(--ds-spacing-m-2);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-card-bg-color-default);
+        backdrop-filter: blur(60px);
+    }
+
+    .error-content {
+        display: flex;
+        padding: var(--ds-spacing-s-1);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        flex: 1 0 0;
+        align-self: stretch;
+    }
+
+    .error-title {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 500;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .error-text {
+        color: var(--ds-color-text-default);
+
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+
+    .large .error-title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .large .error-text {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .medium .error-text {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-icon-feedback-error);
+        --ui-kit-icon-width: 18px;
+        --ui-kit-icon-height: 18px;
+    }
+
+    .container.medium {
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .container.medium .title {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.medium .subtitle {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.medium .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    .container.large {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    .container.large .title {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    .container.large .subtitle {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .container.large .meta,
+    .container.medium .content {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    .close-button {
+        position: absolute;
+        top: var(--ds-spacing-s-5);
+        right: var(--ds-spacing-s-5);
+    }
+
+    .has-close .header-main {
+        box-sizing: border-box;
+        padding-right: var(--ds-spacing-l-2);
+    }
 `;exports.commonStyles=t;

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

@@ -4,4 +4,41 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         width: fit-content;
         padding: 16px 0;
     }
+
+    .ds-list {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--ds-sizing-16);
+        font-family: var(--ds-typography-family-primary);
+    }
+
+    ::slotted([slot='title']) {
+        color: var(--ds-color-neutral-10);
+        font-weight: 400;
+    }
+
+    ::slotted([slot='subtitle']) {
+        color: var(--ds-color-neutral-60);
+        font-weight: 400;
+    }
+
+    :host([size='medium']) ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    :host([size='large']) ::slotted([slot='title']) {
+        font-size: var(--ds-typography-size-headline-xxs);
+        line-height: var(--ds-typography-height-headline-xxs);
+    }
+
+    :host([size='medium']) ::slotted([slot='subtitle']) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-xs);
+    }
+
+    :host([size='large']) ::slotted([slot='subtitle']) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-main-title/styles/common.styles.cjs

@@ -17,4 +17,62 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     ::slotted(*) {
         margin: 0;
     }
+
+    .container {
+        width: 100%;
+        gap: var(--ds-spacing-s-3);
+        box-sizing: border-box;
+    }
+
+    .container.alignment-center {
+        align-items: center;
+    }
+
+    .container.alignment-left {
+        align-items: flex-start;
+    }
+
+    ::slotted([slot='title']) {
+        margin: 0;
+        font-family: var(--ds-typography-family-primary);
+        font-weight: 300;
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        font-size: var(--ds-typography-size-headline-m);
+        line-height: var(--ds-typography-height-headline-m);
+    }
+
+    ::slotted([slot='subtitle']) {
+        margin: 0;
+        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-base);
+        font-weight: 350;
+        color: var(--ds-color-text-default-subtlest);
+    }
+
+    .container.alignment-center ::slotted([slot='title']),
+    .container.alignment-center ::slotted([slot='subtitle']) {
+        text-align: center;
+    }
+
+    .container.alignment-left ::slotted([slot='title']),
+    .container.alignment-left ::slotted([slot='subtitle']) {
+        text-align: left;
+    }
+
+    @media (min-width: 1440px) {
+        ::slotted([slot='title']) {
+            font-size: var(--ds-typography-size-headline-m);
+            line-height: var(--ds-typography-height-headline-m);
+        }
+    }
+
+    @media (min-width: 1920px) {
+        ::slotted([slot='title']) {
+            font-size: var(--ds-typography-size-headline-l);
+            line-height: var(--ds-typography-height-headline-l);
+        }
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-media-control/styles/common.styles.cjs

@@ -44,4 +44,8 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     [part='container']:focus-visible {
         box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
     }
+
+    :host {
+        --ui-kit-icon-color: var(--ds-color-icon-default);
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-navigation-controls/styles/common.styles.cjs

@@ -13,4 +13,27 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         gap: var(--ui-kit-private-navigation-controls-section-gap, 12px);
         align-items: center;
     }
+
+    .container {
+        padding: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-s);
+        border: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        background: var(--ds-color-border-default);
+        backdrop-filter: blur(var(--ds-blur-level-03));
+        -webkit-backdrop-filter: blur(var(--ds-blur-level-03));
+    }
+
+    ::slotted(*:not(:first-child)) {
+        padding-inline-start: calc(var(--ds-spacing-m-3) + var(--ds-border-width-m));
+        background-image: linear-gradient(var(--ds-color-border-default), var(--ds-color-border-default));
+        background-size: var(--ds-border-width-m) 24px;
+        background-repeat: no-repeat;
+        background-position: calc(var(--ds-spacing-m-3) / 2) center;
+    }
+
+    @media (max-width: 1439px) {
+        :host {
+            --ui-kit-private-navigation-controls-section-gap: var(--ds-spacing-s-4);
+        }
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-password-input/ds-password-input.cjs

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),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("../../decorators/customUiKitElement.cjs"),i=require("../../utils/uiKitHtml.cjs"),a=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 o=require("../ds-text-input/ds-text-input.cjs");var s=class extends o.DsTextInput{constructor(...e){super(...e),this.dataAriaLabelHideButton=``,this.dataAriaLabelShowButton=``,this.visible=!1,this.handleClickIcon=()=>{this.visible?(this.nativeInput.setAttribute(`type`,`password`),this.visible=!1):(this.nativeInput.setAttribute(`type`,`text`),this.visible=!0)}}get iconTemplate(){var e;return i.uiKitHtml`<ds-icon-button
+const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),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("../../decorators/customUiKitElement.cjs"),i=require("../../utils/uiKitHtml.cjs"),a=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 o=require("../ds-text-input/ds-text-input.cjs"),s=require("./styles/common.styles.cjs");var c,l=(c=class extends o.DsTextInput{constructor(...e){super(...e),this.dataAriaLabelHideButton=``,this.dataAriaLabelShowButton=``,this.visible=!1,this.handleClickIcon=()=>{this.visible?(this.nativeInput.setAttribute(`type`,`password`),this.visible=!1):(this.nativeInput.setAttribute(`type`,`text`),this.visible=!0)}}get iconTemplate(){var e;return i.uiKitHtml`<ds-icon-button
             class="icon-button"
             icon-name=${this.visible?`eye`:`eye-crossed-out`}
             ?disabled=${!!((e=this.nativeInput)!=null&&e.disabled)}
@@ -7,4 +7,4 @@ const e=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modul
             @click=${this.handleClickIcon}
             data-aria-label=${this.visible?this.dataAriaLabelHideButton||`hide`:this.dataAriaLabelShowButton||`show`}
             data-aria-pressed=${String(this.visible)}
-        ></ds-icon-button>`}};n.__decorate([e.n({type:String,attribute:`data-aria-label-hide-button`})],s.prototype,`dataAriaLabelHideButton`,void 0),n.__decorate([e.n({type:String,attribute:`data-aria-label-show-button`})],s.prototype,`dataAriaLabelShowButton`,void 0),n.__decorate([t.r()],s.prototype,`visible`,void 0),s=n.__decorate([r.customUiKitElement(`ds-password-input`,{extendComponentNames:[`ds-text-input`]})],s);
+        ></ds-icon-button>`}},c.styles=[...o.DsTextInput.styles,s.commonStyles],c);n.__decorate([e.n({type:String,attribute:`data-aria-label-hide-button`})],l.prototype,`dataAriaLabelHideButton`,void 0),n.__decorate([e.n({type:String,attribute:`data-aria-label-show-button`})],l.prototype,`dataAriaLabelShowButton`,void 0),n.__decorate([t.r()],l.prototype,`visible`,void 0),l=n.__decorate([r.customUiKitElement(`ds-password-input`,{extendComponentNames:[`ds-text-input`]})],l);

package/dist/cjs/components/ds-password-input/styles/common.styles.cjs

@@ -0,0 +1,8 @@
+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`
+    ::slotted(input[type='password']) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        display: flex;
+    }
+`;exports.commonStyles=t;

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

@@ -2,4 +2,179 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        position: relative;
+        background: transparent;
+        border: none;
+        padding: 0;
+    }
+
+    .container.x-small {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--ds-border-radius-xs);
+    }
+
+    .container.small {
+        width: 48px;
+        height: 48px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.medium {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container.large {
+        width: 104px;
+        height: 104px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        pointer-events: none;
+        transition: var(--ui-kit-picker-item-transition);
+    }
+
+    .container.x-small::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.small::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-m);
+    }
+
+    .container.medium::before {
+        inset: -4px;
+        border-radius: var(--ds-border-radius-xl);
+    }
+
+    .container.large::before {
+        inset: -7px;
+        border-radius: var(--ds-border-radius-xl);
+    }
+
+    .container:hover::before {
+        background: var(--ds-color-control-bg-hover);
+    }
+
+    .container.selected::before {
+        border: var(--ds-border-width-m) solid var(--ds-color-border-selected-subtle);
+        background: var(--ds-color-control-bg-pressed);
+    }
+
+    .container.selected {
+        cursor: auto;
+    }
+
+    .container.loading {
+        cursor: auto;
+    }
+
+    .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+
+    .container.x-small .image-container {
+        width: 40px;
+        height: 40px;
+        border-radius: var(--ds-border-radius-xs);
+    }
+
+    .container.small .image-container {
+        width: 48px;
+        height: 48px;
+        border-radius: var(--ds-border-radius-s);
+    }
+
+    .container.medium .image-container {
+        width: 80px;
+        height: 80px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .container.large .image-container {
+        width: 104px;
+        height: 104px;
+        border-radius: var(--ds-border-radius-l);
+    }
+
+    .image-container.with-border {
+        outline: var(--ds-border-width-m) solid var(--ds-color-border-default);
+        outline-offset: -1px;
+    }
+
+    .image-container.without-border {
+        outline: none;
+    }
+
+    ::slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        overflow-clip-margin: unset;
+        overflow: visible;
+    }
+
+    .overlay {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(0deg, var(--ds-color-bg-overlay) 0%, var(--ds-color-bg-overlay) 100%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: inherit;
+        pointer-events: none;
+    }
+
+    .spinner {
+        animation: spin 1s linear infinite;
+    }
+
+    .container.x-small .spinner {
+        width: 24px;
+        height: 24px;
+    }
+
+    .container.small .spinner {
+        width: 24px;
+        height: 24px;
+    }
+
+    .container.medium .spinner {
+        width: 40px;
+        height: 40px;
+    }
+
+    .container.large .spinner {
+        width: 40px;
+        height: 40px;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
 `;exports.pickerItemStyles=t;