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

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

@@ -2,4 +2,62 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .header {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .section-name {
+        flex: 1 1 auto;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-headline-xxs);
+        font-weight: var(--ds-typography-weight-headline-secondary);
+        line-height: var(--ds-typography-height-headline-xxs);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default);
+        text-transform: uppercase;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .section-number {
+        flex: 0 0 auto;
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-weight: var(--ds-typography-weight-body-secondary);
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-base);
+        color: var(--ds-color-text-default-subtle);
+    }
+
+    .steps-row {
+        display: flex;
+        width: 100%;
+        height: 24px;
+        padding: var(--ds-spacing-s-1);
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+    }
+
+    .step {
+        flex: 1 1 auto;
+        height: var(--ds-sizing-04);
+        border-radius: var(--ds-border-radius-full);
+        background: var(--ds-indicator-bg-color-default);
+    }
+
+    .step.active {
+        background: var(--ds-indicator-bg-color-active-primary);
+    }
 `;exports.commonStyles=t;

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

@@ -2,4 +2,39 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .table-wrapper {
+        display: grid;
+        grid-template-columns: var(
+            --ui-kit-table-row-grid-template-columns,
+            var(--ui-kit-private-table-grid-template-columns-default)
+        );
+        grid-auto-flow: row;
+        grid-auto-columns: 1fr;
+        width: 100%;
+        border-radius: var(--ds-border-radius-s);
+        overflow: hidden;
+        border: 1px solid var(--ds-color-border-default-subtle);
+        background-color: var(--ds-color-bg-default);
+    }
+
+    .header {
+        display: contents;
+    }
+
+    .body {
+        display: contents;
+    }
+
+    .empty-state {
+        grid-column: 1 / -1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--ds-sizing-24);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-s);
+        color: var(--ds-color-text-subtle);
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-table-cell/styles/common.styles.cjs

@@ -3,4 +3,43 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
         display: table-cell;
         box-sizing: border-box;
     }
+
+    :host {
+        display: contents;
+    }
+
+    .cell {
+        display: flex;
+        align-items: center;
+        gap: var(--ds-sizing-08);
+        padding: var(--ds-sizing-12);
+        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);
+        color: var(--ds-color-text-default);
+        border-top: 1px solid var(--ds-color-border-default-subtle);
+        border-left: 1px solid var(--ds-color-border-default-subtle);
+        box-sizing: border-box;
+    }
+
+    :host(:first-child) .cell {
+        border-left: none;
+    }
+
+    :host([variant='header']) .cell {
+        background-color: var(--ds-color-bg-default);
+        font-weight: var(--ds-typography-weight-body-primary);
+        border-top: none;
+    }
+
+    :host([variant='default']) .cell {
+        background-color: var(--ds-color-surface-default-subtlest);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
+
+    :host([variant='alternative']) .cell {
+        background-color: var(--ds-color-surface-default-subtle);
+        font-weight: var(--ds-typography-weight-body-tertiary);
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-table-row/styles/common.styles.cjs

@@ -2,4 +2,12 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: table-row;
     }
+
+    :host {
+        display: contents;
+    }
+
+    .row {
+        display: contents;
+    }
 `;exports.commonStyles=t;

package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs

@@ -1,4 +1,4 @@
 const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),t=require("./themeContext.cjs");require("../../core/theme.constants.cjs");const n=require("../../utils/PubSub.cjs"),r=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),i=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),o=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 s=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),c=require("../../decorators/customUiKitElement.cjs"),l=require("../../utils/booleanConverter.cjs"),u=require("../../styles/source/shared/fonts-config.cjs");var d=class extends i.i{constructor(...e){super(...e),this.loadFonts=!0,this.loadStyles=!0,this.loadUnusedStyles=!0,this.cssLoaded=!1,this.loadedFonts=new Set}updated(e){if(super.updated(e),e.has(`theme`)){var t,r;n.pubSub.publish(`theme`,this.theme),(t=sessionStorage)==null||t.setItem(`@cupra/ui-kit/theme`,this.theme),typeof FontFace<`u`&&(r=document)!=null&&r.fonts&&this.loadThemeFonts(),this.loadThemeStyles().then(()=>{this.cssLoaded=!0,this.dispatchEvent(new CustomEvent(`ui-kit:ready`,{bubbles:!0,composed:!0}))})}}loadThemeFonts(){var e;(e=u.fontsConfig[this.theme])==null||e.fonts.forEach(e=>{this.loadThemeFont(e)})}async loadThemeFont({weight:e,name:t,file:n}){if(!this.loadFonts)return Promise.resolve();let r=`${t}-${e}`;if(this.loadedFonts.has(r))return;let i=new FontFace(t,`url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff2') format('woff2'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.woff') format('woff'),
             url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.ttf') format('truetype'),
-            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`optional`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.180`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.x`<slot></slot>`:r.E}};s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.__decorate([e.e({context:t.themeContext}),a.n({type:String})],d.prototype,`theme`,void 0),s.__decorate([o.r()],d.prototype,`cssLoaded`,void 0),s.__decorate([o.r()],d.prototype,`loadedFonts`,void 0),d=s.__decorate([c.customUiKitElement(`ds-theme-provider`)],d);
+            url('https://ds-assets.cupra.com/fonts/${this.theme}/${n}.otf') format('opentype')`,{style:`normal`,weight:e,display:`optional`});try{await i.load(),document.fonts.add(i),this.loadedFonts.add(r)}catch(n){console.error(`Error loading "${t}" font with "${e}" weight:`,n)}}loadThemeStyles(){let e=`/2.0.0-canary.181`;return this.loadUnusedStyles&&this.applyUnusedStyles(e),this.loadStyles?new Promise((t,n)=>{let r=`https://ds-assets.cupra.com${e}/styles/${this.theme}/theme.css`;if(document.head.querySelector(`link[href="${r}"]`))t();else{let i=`ui-kit-theme-${e}`,a=document.getElementById(i),o=document.createElement(`link`);o.id=i,o.rel=`stylesheet`,o.href=r,o.onload=()=>t(),o.onerror=()=>n(Error(`Failed to load theme CSS: ${r}`)),document.head.appendChild(o),a==null||a.remove()}}):Promise.resolve()}applyUnusedStyles(e){let t=`https://ds-assets.cupra.com${e}/styles/${this.theme}/unused-styles.css`;if(document.head.querySelector(`link[href="${t}"]`))return;let n=`ui-kit-unused-styles-${e}`,r=document.getElementById(n),i=document.createElement(`link`);i.id=n,i.rel=`preload`,i.as=`style`,i.href=t,i.onload=()=>{i.rel=`stylesheet`},document.head.appendChild(i),r==null||r.remove()}render(){return this.cssLoaded?r.x`<slot></slot>`:r.E}};s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-fonts`})],d.prototype,`loadFonts`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-styles`})],d.prototype,`loadStyles`,void 0),s.__decorate([a.n({type:Boolean,converter:l.booleanConverter,attribute:`load-unused-styles`})],d.prototype,`loadUnusedStyles`,void 0),s.__decorate([e.e({context:t.themeContext}),a.n({type:String})],d.prototype,`theme`,void 0),s.__decorate([o.r()],d.prototype,`cssLoaded`,void 0),s.__decorate([o.r()],d.prototype,`loadedFonts`,void 0),d=s.__decorate([c.customUiKitElement(`ds-theme-provider`)],d);

package/dist/cjs/components/ds-toast-message/styles/common.styles.cjs

@@ -2,4 +2,140 @@ const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_mo
     :host {
         display: contents;
     }
+
+    .container {
+        display: inline-flex;
+        box-sizing: border-box;
+        flex-direction: row;
+        width: auto;
+        min-width: 288px;
+        max-width: 317px;
+        padding: var(--ds-spacing-m-1);
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-5);
+        border-radius: var(--ds-border-radius-m);
+        border-width: var(--ds-border-width-l);
+        border-style: solid;
+        border-color: var(--ds-color-border-selected);
+        background: var(--ds-card-bg-color-default);
+        box-shadow: 0px 4px 4px 0px var(--ds-opacity-black-20);
+        backdrop-filter: blur(60px);
+    }
+
+    .container.warning {
+        border-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info {
+        border-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error {
+        border-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success {
+        border-color: var(--ds-color-border-feedback-success);
+    }
+
+    .icon {
+        --ui-kit-icon-color: var(--ds-color-border-selected);
+    }
+
+    .container.warning .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-warning);
+    }
+
+    .container.info .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-info);
+    }
+
+    .container.error .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-error);
+    }
+
+    .container.success .icon {
+        --ui-kit-icon-color: var(--ds-color-border-feedback-success);
+    }
+
+    .content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        align-self: stretch;
+    }
+
+    .header {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+        align-self: stretch;
+    }
+
+    .title {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-headline-xs);
+        font-style: normal;
+        font-weight: 400;
+        line-height: var(--ds-typography-height-headline-xs);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+
+    .message {
+        color: var(--ds-color-text-default);
+        font-family: var(--ds-typography-family-primary);
+        font-size: var(--ds-typography-size-body-m);
+        font-style: normal;
+        font-weight: 350;
+        line-height: var(--ds-typography-height-body-m);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        overflow: hidden;
+        text-align: left;
+    }
+
+    @media (min-width: 480px) {
+        .container {
+            min-width: 318px;
+            max-width: 456px;
+        }
+    }
+
+    @media (min-width: 768px) {
+        .container {
+            min-width: 457px;
+            max-width: 463px;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .container {
+            min-width: 464px;
+            max-width: 547px;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .container {
+            min-width: 548px;
+            max-width: 575px;
+        }
+    }
+
+    @media (min-width: 1920px) {
+        .container {
+            min-width: 576px;
+            max-width: 732px;
+        }
+    }
 `;exports.toastMessageStyles=t;

package/dist/cjs/decorators/customUiKitElement.cjs

@@ -1 +1 @@
-require("../utils/version.cjs");function e(e,t){return function(n){var r,i,a,o;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let s=e;if(!((r=globalThis)==null||(r=r.customElements)==null)&&r.get(s))return;let c=t!=null&&t.skipTagAsComponentName?[]:[e];Array.isArray(t==null?void 0:t.extendComponentNames)&&(c=[...t.extendComponentNames,...c]),(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,s,(o=class extends n{connectedCallback(){var e;(e=n.prototype.connectedCallback)==null||e.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.180`)}},o.componentName=c,o))}}exports.customUiKitElement=e;
+require("../utils/version.cjs");function e(e,t){return function(n){var r,i,a,o;if(!(n!=null&&n.prototype))throw TypeError(`@customUiKitElement requires a class that extends HTMLElement.`);let s=e;if(!((r=globalThis)==null||(r=r.customElements)==null)&&r.get(s))return;let c=t!=null&&t.skipTagAsComponentName?[]:[e];Array.isArray(t==null?void 0:t.extendComponentNames)&&(c=[...t.extendComponentNames,...c]),(i=globalThis)==null||(i=i.customElements)==null||(a=i.define)==null||a.call(i,s,(o=class extends n{connectedCallback(){var e;(e=n.prototype.connectedCallback)==null||e.call(this),this.setAttribute(`data-ui-kit-version`,`2.0.0-canary.181`)}},o.componentName=c,o))}}exports.customUiKitElement=e;

package/dist/cjs/utils/IconsManager.cjs

@@ -1 +1 @@
-const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.180`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;
+const e=require("../core/theme.constants.cjs"),t=require("./PubSub.cjs");var n=class{constructor(){this.icons={},this.handleChangeTheme=e=>{if(this.theme===e)return;this.theme=e;let t=Object.keys(this.icons);this.icons={},t.forEach(e=>this.fetchIcon(e))},this.fetchIcon=async(t,n={})=>{var r;let i=typeof sessionStorage<`u`?(r=sessionStorage)==null?void 0:r.getItem(e.THEME_STORAGE_KEY):null;!this.theme&&i&&(this.theme=i);let a=this.icons[t];if(a)return await a;let o=this.loadIcon(t,n).catch(e=>{throw delete this.icons[t],e});return this.icons[t]=o,o},this.loadIcon=(e,{cache:t=`force-cache`,...n})=>!this.theme||typeof fetch>`u`?Promise.resolve(`<svg class="ds-icon"></svg>`):fetch(`https://ds-assets.cupra.com/icons/${this.theme}/${e}.svg`,{cache:t,...n}).then(e=>e.text()).catch(t=>{if((t==null?void 0:t.name)===`AbortError`)throw t;return console.error(`Failed to fetch icon "${e}":`,t),``}),t.pubSub.subscribe(`theme`,this.handleChangeTheme)}},r=Symbol.for(`@cupra/ui-kit/icons-manager/2.0.0-canary.181`),i=globalThis,a=i[r];a||(a=new n,Object.defineProperty(i,r,{value:a,writable:!1,configurable:!1,enumerable:!1}));var o=a;exports.iconsManager=o;

package/dist/cjs/utils/PubSub.cjs

@@ -1 +1 @@
-var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.180`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;
+var e=class{constructor(){this.subscribers={},this.lastPublishedData={}}subscribe(e,t){return this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(t),this.lastPublishedData[e]}unsubscribe(e,t){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter(e=>e!==t))}publish(e,t){this.lastPublishedData[e]=t,this.subscribers[e]&&this.subscribers[e].forEach(n=>{try{n(t)}catch(t){console.error(`Error in subscriber for event "${e}":`,t)}})}},t=Symbol.for(`@cupra/ui-kit/pubsub/2.0.0-canary.181`),n=globalThis,r=n[t];r||(r=new e,Object.defineProperty(n,t,{value:r,writable:!1,configurable:!1,enumerable:!1}));var i=r;exports.pubSub=i;

package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs

@@ -1 +1 @@
-var e=require("../concurrencyLimit.cjs").concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.180/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||(t.instance=new t),t.instance}}.getInstance();exports.stylesRegistry=t;
+var e=require("../concurrencyLimit.cjs").concurrencyLimit(20),t=class t{constructor(){this.stylePromises=new Map,this.getStyles=async({componentName:t,theme:n})=>{if(!n||!t)return;let r=`https://ds-assets.cupra.com/2.0.0-canary.181/styles/${n}/components/${t}.css`,i=this.getCachedStyleSheetPromise({url:r});if(i)return i;let a=e(()=>this.fetchStyle({url:r})).then(e=>(e||this.stylePromises.delete(r),e));return this.stylePromises.set(r,a),this.stylePromises.get(r)}}async fetchStyle({url:e}){try{if(typeof fetch>`u`)return;let t=await fetch(e,{cache:`force-cache`});if(t.ok)return t.text()}catch(t){console.error(`Failed to fetch Style Sheet "${e}":`,t)}}getCachedStyleSheetPromise({url:e}){return this.stylePromises.get(e)}static getInstance(){return t.instance||(t.instance=new t),t.instance}}.getInstance();exports.stylesRegistry=t;

package/dist/cjs/utils/version.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.180`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=`2.0.0-canary.181`,t=`--v${e.replaceAll(`.`,`-`)}`;exports.VERSION=e,exports.VERSION_TAG_SUFFIX=t;

package/dist/esm/components/ds-avatar/styles/common.styles.js

@@ -5,6 +5,123 @@ var t = e`
     :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);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-badge/styles/common.styles.js

@@ -5,6 +5,48 @@ var t = e`
     :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);
+    }
 `;
 //#endregion
 export { t as commonStyles };

package/dist/esm/components/ds-breadcrumbs/ds-breadcrumbs.js

@@ -13,18 +13,19 @@ import "../ds-tooltip/ds-tooltip.js";
 import { s, u as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/static.js";
 import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/static-html.js";
 import "../ds-breadcrumbs-item/ds-breadcrumbs-item.js";
+import { commonStyles as l } from "./styles/common.styles.js";
 //#region src/components/ds-breadcrumbs/ds-breadcrumbs.ts
-var l = [{
+var u, d = [{
 	below: 768,
 	maxItems: 3
 }, {
 	below: 1024,
 	maxItems: 4
-}], u = 5, d = class extends r {
+}], f = 5, p = (u = class extends r {
 	constructor(...e) {
-		super(...e), this.items = [], this.maxItems = u, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
-			let e = l.find(({ below: e }) => window.innerWidth < e);
-			this.maxItems = (e == null ? void 0 : e.maxItems) ?? u;
+		super(...e), this.items = [], this.maxItems = f, this.itemTag = "ds-breadcrumbs-item", this.onResize = () => {
+			let e = d.find(({ below: e }) => window.innerWidth < e);
+			this.maxItems = (e == null ? void 0 : e.maxItems) ?? f;
 		};
 	}
 	async firstUpdated(e) {
@@ -113,6 +114,6 @@ var l = [{
             </nav>
         `;
 	}
-};
-n([t()], d.prototype, "items", void 0), n([t()], d.prototype, "maxItems", void 0), n([t()], d.prototype, "itemTag", void 0), d = n([i("ds-breadcrumbs")], d);
+}, u.styles = [l], u);
+n([t()], p.prototype, "items", void 0), n([t()], p.prototype, "maxItems", void 0), n([t()], p.prototype, "itemTag", void 0), p = n([i("ds-breadcrumbs")], p);
 //#endregion

package/dist/esm/components/ds-breadcrumbs/styles/common.styles.js

@@ -0,0 +1,112 @@
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-breadcrumbs/styles/common.styles.ts
+var t = e`
+    .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;
+    }
+`;
+//#endregion
+export { t as commonStyles };