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

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

@@ -1,5 +1,180 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :host {
         display: contents;
     }
-`;exports.pickerItemStyles=t;
+
+    .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;

package/dist-react/cjs/components/ds-portal/ds-portal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),a=require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs"),d=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs");var p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(n,t,r,o)=>{for(var e=o>1?void 0:o?m(t,r):t,s=n.length-1,l;s>=0;s--)(l=n[s])&&(e=(o?l(t,r,e):l(e))||e);return o&&e&&p(t,r,e),e};exports.DsPortal=class extends a.LitElement{constructor(){super(...arguments),this.nodes=[],this.querySelectorText="body"}render(){return i.html`<slot></slot>`}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.nodes)==null||t.forEach(r=>r.remove())}updated(t){super.updated(t),requestAnimationFrame(()=>{const r=document.querySelector(this.querySelectorText)||document.body;if(!r)return;const o=this.renderRoot.querySelector("slot"),e=(o==null?void 0:o.assignedNodes())||[];this.nodes=e,e.forEach(s=>{r.appendChild(s)})})}};c([d.property({type:String,attribute:"query-selector-text"})],exports.DsPortal.prototype,"querySelectorText",2);exports.DsPortal=c([u.customUiKitElement("ds-portal",{skipTagAsComponentName:!0})],exports.DsPortal);
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs"),t=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 n=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 r=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),i=require("../../decorators/customUiKitElement.cjs");var a=class extends t.i{constructor(...e){super(...e),this.nodes=[],this.querySelectorText=`body`}render(){return e.x`<slot></slot>`}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.nodes)==null||e.forEach(e=>e.remove())}updated(e){super.updated(e),requestAnimationFrame(()=>{let e=document.querySelector(this.querySelectorText)||document.body;if(!e)return;let t=this.renderRoot.querySelector(`slot`),n=(t==null?void 0:t.assignedNodes())||[];this.nodes=n,n.forEach(t=>{e.appendChild(t)})})}};r.__decorate([n.n({type:String,attribute:`query-selector-text`})],a.prototype,`querySelectorText`,void 0),a=r.__decorate([i.customUiKitElement(`ds-portal`,{skipTagAsComponentName:!0})],a);

package/dist-react/cjs/components/ds-progress-bar/ds-progress-bar.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../base/ds-base-progress-bar/ds-base-progress-bar.cjs"),n=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const u=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),c=require("./styles/common.styles.cjs");var P=Object.defineProperty,m=Object.getOwnPropertyDescriptor,y=Object.getPrototypeOf,_=Reflect.get,p=(s,e,t,o)=>{for(var r=o>1?void 0:o?m(e,t):e,a=s.length-1,l;a>=0;a--)(l=s[a])&&(r=(o?l(e,t,r):l(r))||r);return o&&r&&P(e,t,r),r},B=(s,e,t)=>_(y(s),t,e);exports.DsProgressBar=class extends g.DsBaseProgressBar{render(){return this.show?i.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("../../decorators/customUiKitElement.cjs"),i=require("../base/ds-base-progress-bar/ds-base-progress-bar.cjs"),a=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/superPropGet.cjs"),o=require("./styles/common.styles.cjs");var s,c=(s=class extends i.DsBaseProgressBar{get progressAriaValue(){return this.progress}render(){return this.show?e.x`
                   <style>
                       .fill {
                           width: ${this.progress}%;
                       }
                   </style>
                   ${this.barTemplate}
-              `:i.nothing}};exports.DsProgressBar.styles=[...B(exports.DsProgressBar,exports.DsProgressBar,"styles"),c.commonStyles];p([u.property({type:Number})],exports.DsProgressBar.prototype,"progress",2);exports.DsProgressBar=p([n.customUiKitElement("ds-progress-bar",{skipTagAsComponentName:!0})],exports.DsProgressBar);
+              `:e.E}},s.styles=[...a._superPropGet(s,`styles`,s),o.commonStyles],s);n.__decorate([t.n({type:Number})],c.prototype,`progress`,void 0),c=n.__decorate([r.customUiKitElement(`ds-progress-bar`,{skipTagAsComponentName:!0})],c);

package/dist-react/cjs/components/ds-progress-bar/styles/common.styles.cjs

@@ -1,5 +1,5 @@
-"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"),r=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`
     .fill {
         transition: all 200ms ease-in-out;
     }
-`;exports.commonStyles=r;
+`;exports.commonStyles=t;

package/dist-react/cjs/components/ds-radio/ds-radio.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs"),d=require("../../utils/booleanConverter.cjs"),u=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const h=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 o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),b=require("./styles/common.styles.cjs");var v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,t=(l,e,r,s)=>{for(var i=s>1?void 0:s?f(e,r):e,n=l.length-1,a;n>=0;n--)(a=l[n])&&(i=(s?a(e,r,i):a(i))||i);return s&&i&&v(e,r,i),i};exports.DsRadio=class extends c.UiKitElement{constructor(){super(...arguments),this.readonly=!1,this.checked=!1,this.disabled=!1,this.mode="light",this.size="large",this.handleClickInput=e=>{this.readonly&&e.preventDefault()},this.handleClickLabel=e=>{e.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0,detail:{value:this.value}})),this.readonly||(this.input.checked=!0,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}})))}}connectedCallback(){super.connectedCallback(),this.input=document.createElement("input"),this.input.type="radio",this.input.slot="radio",this.input.ariaLabel=this.value,this.input.addEventListener("click",this.handleClickInput),this.appendChild(this.input)}disconnectedCallback(){super.disconnectedCallback(),this.input.removeEventListener("click",this.handleClickInput)}updated(e){super.updated(e),["name","value"].forEach(s=>{e.has(s)&&(this.input[s]=this[s])}),e.has("checked")&&requestAnimationFrame(()=>{this.input.checked=this.checked}),e.has("disabled")&&(this.input.disabled=this.disabled)}get labelClasses(){return{disabled:this.disabled,[this.mode]:!!this.mode,[this.size]:!!this.size}}get styleTokens(){return u.htmlWithTokens`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.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/booleanConverter.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("./styles/common.styles.cjs");var l,u=(l=class extends i.UiKitElement{constructor(...e){super(...e),this.readonly=!1,this.checked=!1,this.disabled=!1,this.mode=`light`,this.size=`large`,this.handleClickInput=e=>{this.readonly&&e.preventDefault()},this.handleClickLabel=e=>{e.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,composed:!0,detail:{value:this.value}})),this.readonly||(this.input.checked=!0,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,detail:{value:this.value}})))}}connectedCallback(){super.connectedCallback(),this.input=document.createElement(`input`),this.input.type=`radio`,this.input.slot=`radio`,this.input.ariaLabel=this.value,this.input.addEventListener(`click`,this.handleClickInput),this.appendChild(this.input)}disconnectedCallback(){super.disconnectedCallback(),this.input.removeEventListener(`click`,this.handleClickInput)}updated(e){super.updated(e),[`name`,`value`].forEach(t=>{e.has(t)&&(this.input[t]=this[t])}),e.has(`checked`)&&requestAnimationFrame(()=>{this.input.checked=this.checked}),e.has(`disabled`)&&(this.input.disabled=this.disabled)}get labelClasses(){return{disabled:this.disabled,[this.mode]:!!this.mode,[this.size]:!!this.size}}get styleTokens(){return e.x`
             <style>
                 :host{
                     color-scheme: ${this.mode};
-                    pointer-events: ${this.disabled?"none":"visible"};
+                    pointer-events: ${this.disabled?`none`:`visible`};
                 }
             </style>
-        `}render(){return h.html`
+        `}render(){return e.x`
             ${this.styleTokens}
-            <label @click=${this.handleClickLabel} class=${m.classMap(this.labelClasses)}>
+            <label @click=${this.handleClickLabel} class=${s.e(this.labelClasses)}>
                 <slot name="radio"></slot>
                 <slot></slot>
             </label>
-        `}};exports.DsRadio.styles=[b.commonStyles];t([o.property({type:Boolean,converter:d.booleanConverter,reflect:!0})],exports.DsRadio.prototype,"readonly",2);t([o.property({type:String,reflect:!0})],exports.DsRadio.prototype,"name",2);t([o.property({type:String})],exports.DsRadio.prototype,"value",2);t([o.property({type:Boolean,converter:d.booleanConverter,reflect:!0})],exports.DsRadio.prototype,"checked",2);t([o.property({type:Boolean,converter:d.booleanConverter,reflect:!0})],exports.DsRadio.prototype,"disabled",2);t([o.property({type:String,reflect:!0})],exports.DsRadio.prototype,"mode",2);t([o.property({type:String})],exports.DsRadio.prototype,"size",2);t([y.queryAssignedNodes({slot:"",flatten:!0})],exports.DsRadio.prototype,"_defaultSlotNodes",2);exports.DsRadio=t([p.customUiKitElement("ds-radio")],exports.DsRadio);
+        `}},l.styles=[c.commonStyles],l);r.__decorate([t.n({type:Boolean,converter:o.booleanConverter,reflect:!0})],u.prototype,`readonly`,void 0),r.__decorate([t.n({type:String,reflect:!0})],u.prototype,`name`,void 0),r.__decorate([t.n({type:String})],u.prototype,`value`,void 0),r.__decorate([t.n({type:Boolean,converter:o.booleanConverter,reflect:!0})],u.prototype,`checked`,void 0),r.__decorate([t.n({type:Boolean,converter:o.booleanConverter,reflect:!0})],u.prototype,`disabled`,void 0),r.__decorate([t.n({type:String,reflect:!0})],u.prototype,`mode`,void 0),r.__decorate([t.n({type:String})],u.prototype,`size`,void 0),r.__decorate([n.n({slot:``,flatten:!0})],u.prototype,`_defaultSlotNodes`,void 0),u=r.__decorate([a.customUiKitElement(`ds-radio`)],u);

package/dist-react/cjs/components/ds-radio/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :host {
         display: inline-block;
     }
@@ -34,4 +34,4 @@
     label ::slotted(input:checked)::before {
         transform: scale(1);
     }
-`;exports.commonStyles=t;
+`;exports.commonStyles=t;

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),n=require("../ds-radio-button-group/ds-radio-button-group.cjs"),h=require("../../decorators/customUiKitElement.cjs"),b=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.cjs"),x=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const a=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const u=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"),y=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var C=Object.defineProperty,G=Object.getOwnPropertyDescriptor,r=(p,t,e,s)=>{for(var i=s>1?void 0:s?G(t,e):t,l=p.length-1,c;l>=0;l--)(c=p[l])&&(i=(s?c(t,e,i):c(i))||i);return s&&i&&C(t,e,i),i};exports.DsRadioButton=class extends d.UiKitElement{constructor(){super(...arguments),this.inputPlacement="left",this._size="medium",this.errorText="",this.helperText="",this._disabled=!1,this.handleChange=t=>{this.checkInputState(t.target)},this.handleClick=()=>{var t;(t=this.input[0])==null||t.click()}}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.createContextConsumers([{context:n.radioGroupErrorContext,callback:t=>{this.errorGroup=t}},{context:n.radioGroupErrorTextContext,callback:t=>{this.errorTextGroup=t}},{context:n.radioGroupDisabledContext,callback:t=>{this.disabledGroup=t}},{context:n.radioGroupHelperTextContext,callback:t=>{this.helperTextGroup=t}},{context:n.radioGroupSizeContext,callback:t=>{this.sizeGroup=t}}])})}firstUpdated(t){var s;super.firstUpdated(t);const e=(s=this.input)==null?void 0:s[0];e&&(e.addEventListener("change",this.handleChange),this.observeInputAttributes(),this.checkInputState(e),this.applyAriaAttributes())}createContextConsumers(t){t.forEach(({context:e,callback:s})=>{new b.ContextConsumer(this,{context:e,callback:s,subscribe:!0})})}disconnectedCallback(){var e;super.disconnectedCallback();const t=(e=this.input)==null?void 0:e[0];t&&(t.removeEventListener("change",this.handleChange),this.inputMutationObserver.disconnect())}checkInputState(t){this._disabled=this.disabledGroup??(t==null?void 0:t.disabled)}observeInputAttributes(){const t=new MutationObserver(()=>{this.checkInputState(this.input[0])});t.observe(this.input[0],{attributes:!0,attributeFilter:["required","disabled"]}),this.inputMutationObserver=t}updated(t){super.updated(t),(t.has("error")||t.has("errorText")||t.has("helperText"))&&this.applyAriaAttributes()}applyAriaAttributes(){var i;const t=(i=this.input)==null?void 0:i[0];if(!t)return;const e=!!this.error,s=e?this.errorText||this.errorTextGroup:this.helperText||this.helperTextGroup||null;t.setAttribute("aria-disabled",this.disabled?"true":"false"),t.setAttribute("aria-invalid",e?"true":"false"),s?t.setAttribute("aria-description",s):t.removeAttribute("aria-description")}get containerClasses(){return{container:!0,error:this.error,disabled:this.disabled,[this.size]:!0,[this.inputPlacement]:!0}}get error(){return this._error??this.errorGroup}get disabled(){return this.disabledGroup??this._disabled}get size(){return this.sizeGroup||this._size}render(){return a.html`
-            <div @click=${this.handleClick} class=${m.classMap(this.containerClasses)}>
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/controllers/context-consumer.cjs"),t=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),i=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/query-assigned-elements.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const a=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),o=require("../base/UiKitElement.cjs"),s=require("../../decorators/customUiKitElement.cjs"),c=require("../../utils/booleanConverter.cjs"),l=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const u=require("../ds-radio-button-group/ds-radio-button-group.cjs"),d=require("./styles/common.styles.cjs");var f,p=(f=class extends o.UiKitElement{constructor(...e){super(...e),this.inputPlacement=`left`,this._size=`medium`,this.errorText=``,this.helperText=``,this._disabled=!1,this.handleChange=e=>{this.checkInputState(e.target)},this.handleClick=()=>{var e;(e=this.input[0])==null||e.click()}}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.createContextConsumers([{context:u.radioGroupErrorContext,callback:e=>{this.errorGroup=e}},{context:u.radioGroupErrorTextContext,callback:e=>{this.errorTextGroup=e}},{context:u.radioGroupDisabledContext,callback:e=>{this.disabledGroup=e}},{context:u.radioGroupHelperTextContext,callback:e=>{this.helperTextGroup=e}},{context:u.radioGroupSizeContext,callback:e=>{this.sizeGroup=e}}])})}firstUpdated(e){var t;super.firstUpdated(e);let n=(t=this.input)==null?void 0:t[0];n&&(n.addEventListener(`change`,this.handleChange),this.observeInputAttributes(),queueMicrotask(()=>this.checkInputState(n)),this.applyAriaAttributes())}createContextConsumers(t){t.forEach(({context:t,callback:n})=>{new e.s(this,{context:t,callback:n,subscribe:!0})})}disconnectedCallback(){var e;super.disconnectedCallback();let t=(e=this.input)==null?void 0:e[0];t&&(t.removeEventListener(`change`,this.handleChange),this.inputMutationObserver.disconnect())}checkInputState(e){this._disabled=this.disabledGroup??(e==null?void 0:e.disabled)}observeInputAttributes(){let e=new MutationObserver(()=>{this.checkInputState(this.input[0])});e.observe(this.input[0],{attributes:!0,attributeFilter:[`required`,`disabled`]}),this.inputMutationObserver=e}updated(e){super.updated(e),(e.has(`error`)||e.has(`errorText`)||e.has(`helperText`))&&this.applyAriaAttributes()}applyAriaAttributes(){var e;let t=(e=this.input)==null?void 0:e[0];if(!t)return;let n=!!this.error,r=n?this.errorText||this.errorTextGroup:this.helperText||this.helperTextGroup||null;t.setAttribute(`aria-disabled`,this.disabled?`true`:`false`),t.setAttribute(`aria-invalid`,n?`true`:`false`),r?t.setAttribute(`aria-description`,r):t.removeAttribute(`aria-description`)}get containerClasses(){return{container:!0,error:this.error,disabled:this.disabled,[this.size]:!0,[this.inputPlacement]:!0}}get error(){return this._error??this.errorGroup}get disabled(){return this.disabledGroup??this._disabled}get size(){return this.sizeGroup||this._size}render(){return t.x`
+            <div @click=${this.handleClick} class=${l.e(this.containerClasses)}>
                 <span class="input-container">
                     <slot name="input"></slot>
                 </span>
                 <div class="text-container">
                     <slot name="label"></slot>
-                    ${!(this.error&&this.errorText)&&this.helperText?a.html`<div class="helper-text" > ${this.helperText}</div>`:a.nothing}
-                    ${this.error&&this.errorText?a.html`<div class="error-text">${this.errorText}</div>`:a.nothing}
+                    ${!(this.error&&this.errorText)&&this.helperText?t.x`<div class="helper-text" > ${this.helperText}</div>`:t.E}
+                    ${this.error&&this.errorText?t.x`<div class="error-text">${this.errorText}</div>`:t.E}
                 </div>
             </div>
-        `}};exports.DsRadioButton.styles=[v.commonStyles];r([u.property({type:String,attribute:"input-placement"})],exports.DsRadioButton.prototype,"inputPlacement",2);r([u.property({type:String,attribute:"size"})],exports.DsRadioButton.prototype,"_size",2);r([u.property({type:Boolean,attribute:"error",converter:x.booleanConverter})],exports.DsRadioButton.prototype,"_error",2);r([u.property({type:String,attribute:"error-text"})],exports.DsRadioButton.prototype,"errorText",2);r([u.property({type:String,attribute:"helper-text"})],exports.DsRadioButton.prototype,"helperText",2);r([o.state()],exports.DsRadioButton.prototype,"errorGroup",2);r([o.state()],exports.DsRadioButton.prototype,"errorTextGroup",2);r([o.state()],exports.DsRadioButton.prototype,"disabledGroup",2);r([o.state()],exports.DsRadioButton.prototype,"helperTextGroup",2);r([o.state()],exports.DsRadioButton.prototype,"sizeGroup",2);r([o.state()],exports.DsRadioButton.prototype,"_disabled",2);r([o.state()],exports.DsRadioButton.prototype,"inputMutationObserver",2);r([y.queryAssignedElements({slot:"input",selector:"input"})],exports.DsRadioButton.prototype,"input",2);exports.DsRadioButton=r([h.customUiKitElement("ds-radio-button")],exports.DsRadioButton);
+        `}},f.styles=[d.commonStyles],f);a.__decorate([n.n({type:String,attribute:`input-placement`})],p.prototype,`inputPlacement`,void 0),a.__decorate([n.n({type:String,attribute:`size`})],p.prototype,`_size`,void 0),a.__decorate([n.n({type:Boolean,attribute:`error`,converter:c.booleanConverter})],p.prototype,`_error`,void 0),a.__decorate([n.n({type:String,attribute:`error-text`})],p.prototype,`errorText`,void 0),a.__decorate([n.n({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),a.__decorate([r.r()],p.prototype,`errorGroup`,void 0),a.__decorate([r.r()],p.prototype,`errorTextGroup`,void 0),a.__decorate([r.r()],p.prototype,`disabledGroup`,void 0),a.__decorate([r.r()],p.prototype,`helperTextGroup`,void 0),a.__decorate([r.r()],p.prototype,`sizeGroup`,void 0),a.__decorate([r.r()],p.prototype,`_disabled`,void 0),a.__decorate([i.o({slot:`input`,selector:`input`})],p.prototype,`input`,void 0),p=a.__decorate([s.customUiKitElement(`ds-radio-button`)],p);

package/dist-react/cjs/components/ds-radio-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 e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");var t=e.i`
     :host {
         display: block;
     }
@@ -41,4 +41,182 @@
     ::slotted([slot='label']) {
         cursor: pointer;
     }
-`;exports.commonStyles=t;
+
+    .container {
+        display: flex;
+        gap: var(--ds-spacing-s-5);
+        padding: var(--ds-spacing-s-2) var(--ds-spacing-s-5);
+    }
+    .container.right {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+    }
+    .container:not(.disabled):active {
+        background-color: var(--ds-radio-button-bg-color-pressed);
+        border-radius: var(--ds-border-radius-xs);
+    }
+    .text-container {
+        display: flex;
+        pointer-events: none;
+        flex-direction: column;
+        flex: 1 1 auto;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+    .large .text-container {
+        margin: var(--ds-spacing-s-3) 0 0 0;
+    }
+    .medium .text-container {
+        margin: var(--ds-spacing-s-2) 0 0 0;
+    }
+    .input-container {
+        pointer-events: none;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        padding: var(--ds-spacing-s-1);
+        gap: var(--ds-spacing-s-1);
+        flex-shrink: 0;
+    }
+    .large .input-container {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+    .medium .input-container {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    ::slotted([slot='input']) {
+        position: relative;
+        display: flex;
+        outline: none;
+        padding: var(--ds-spacing-s-1);
+        justify-content: center;
+        align-items: center;
+        gap: var(--ds-spacing-s-1);
+        flex-shrink: 0;
+        border-radius: var(--ds-border-radius-full);
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-default);
+    }
+    .large ::slotted([slot='input']) {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    .medium ::slotted([slot='input']) {
+        width: var(--ds-sizing-16);
+        height: var(--ds-sizing-16);
+    }
+    ::slotted([slot='input']:checked) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-selected);
+    }
+
+    .error ::slotted([slot='input']) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-error);
+    }
+    .disabled ::slotted([slot='input']) {
+        border: var(--ds-border-width-m) solid var(--ds-radio-button-border-color-disabled);
+    }
+    :not(.disabled):not(.error):active ::slotted([slot='input']) {
+        border-color: var(--ds-radio-button-border-color-pressed);
+    }
+    ::slotted([slot='input'])::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        border-radius: var(--ds-border-radius-full);
+        background-color: transparent;
+        outline-style: solid;
+        outline-offset: 0;
+        outline-color: transparent;
+    }
+    .large ::slotted([slot='input'])::before {
+        width: var(--ds-sizing-32);
+        height: var(--ds-sizing-32);
+    }
+    .medium ::slotted([slot='input'])::before {
+        width: var(--ds-sizing-24);
+        height: var(--ds-sizing-24);
+    }
+    :hover ::slotted([slot='input'])::before {
+        background-color: var(--ds-radio-button-bg-color-hover);
+    }
+    ::slotted([slot='input']:focus-visible)::before {
+        background-color: var(--ds-radio-button-bg-color-focus);
+        outline-color: var(--ds-color-border-focus-ring);
+        outline-width: 2px;
+    }
+    :active ::slotted([slot='input'])::before {
+        background-color: transparent;
+    }
+    .large ::slotted([slot='input'])::after {
+        width: var(--ds-sizing-12);
+        height: var(--ds-sizing-12);
+    }
+    .medium ::slotted([slot='input'])::after {
+        width: var(--ds-sizing-08);
+        height: var(--ds-sizing-08);
+    }
+    ::slotted([slot='input']:checked)::after {
+        background-color: var(--ds-radio-button-bg-color-selected);
+    }
+    .error ::slotted([slot='input'])::after {
+        background-color: var(--ds-radio-button-bg-color-error);
+    }
+    ::slotted([slot='input']:disabled)::after {
+        background-color: var(--ds-radio-button-bg-color-disabled);
+    }
+    ::slotted([slot='label']) {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        color: var(--ds-radio-button-text-color-label-default);
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .large ::slotted([slot='label']) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font: 400 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    .disabled ::slotted([slot='label']) {
+        color: var(--ds-radio-button-text-color-label-disabled);
+    }
+    .medium ::slotted([slot='label']) {
+        font: 400 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
+    .helper-text {
+        overflow: hidden;
+        color: var(--ds-radio-button-text-color-caption-default);
+        text-overflow: ellipsis;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .medium .helper-text {
+        font: 400 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
+            var(--ds-typography-family-primary);
+    }
+    .large .helper-text {
+        font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
+    .error-text {
+        overflow: hidden;
+        color: var(--ds-radio-button-text-color-caption-error);
+        text-overflow: ellipsis;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+    }
+    .disabled .error-text,
+    .disabled .helper-text {
+        color: var(--ds-radio-button-text-color-caption-disabled);
+    }
+    .medium .error-text {
+        font: 400 var(--ds-typography-size-body-s) / var(--ds-typography-height-body-s)
+            var(--ds-typography-family-primary);
+    }
+    .large .error-text {
+        font: 350 var(--ds-typography-size-body-m) / var(--ds-typography-height-body-m)
+            var(--ds-typography-family-primary);
+    }
+`;exports.commonStyles=t;

package/dist-react/cjs/components/ds-radio-button-group/ds-radio-button-group.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../base/UiKitElement.cjs"),G=require("../../decorators/customUiKitElement.cjs"),i=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.cjs"),s=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),c=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const 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 r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),C=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),g=require("./styles/common.styles.cjs");var D=Object.defineProperty,S=Object.getOwnPropertyDescriptor,e=(a,n,u,p)=>{for(var t=p>1?void 0:p?S(n,u):n,d=a.length-1,l;d>=0;d--)(l=a[d])&&(t=(p?l(n,u,t):l(t))||t);return p&&t&&D(n,u,t),t};const x=i.createContext(Symbol("ds-radio-button-group:disabled")),h=i.createContext(Symbol("ds-radio-button-group:error")),b=i.createContext(Symbol("ds-radio-button-group:error-text")),y=i.createContext(Symbol("ds-radio-button-group:helper-text")),v=i.createContext(Symbol("ds-radio-button-group:size"));exports.DsRadioButtonGroup=class extends m.UiKitElement{constructor(){super(...arguments),this.error=!1,this.errorText="",this.helperText="",this.disabled=!1,this.size="medium",this.orientation="vertical"}get classes(){return{container:!0,error:this.error,disabled:!!this.disabled,[this.size]:!0,[this.orientation]:!0}}render(){return o.html`
+const e=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/create-context.cjs"),t=require("../../node_modules/.pnpm/@lit_context@1.1.6/node_modules/@lit/context/lib/decorators/provide.cjs"),n=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.cjs");const r=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.cjs");const i=require("../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.cjs"),a=require("../base/UiKitElement.cjs"),o=require("../../decorators/customUiKitElement.cjs"),s=require("../../utils/booleanConverter.cjs"),c=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.cjs");const l=require("./styles/common.styles.cjs");var u,d=e.n(Symbol(`ds-radio-button-group:disabled`)),f=e.n(Symbol(`ds-radio-button-group:error`)),p=e.n(Symbol(`ds-radio-button-group:error-text`)),m=e.n(Symbol(`ds-radio-button-group:helper-text`)),h=e.n(Symbol(`ds-radio-button-group:size`)),g=(u=class extends a.UiKitElement{constructor(...e){super(...e),this.error=!1,this.errorText=``,this.helperText=``,this.disabled=!1,this.size=`large`,this.orientation=`vertical`}get classes(){return{container:!0,error:this.error,disabled:!!this.disabled,[this.size]:!0,[this.orientation]:!0}}render(){return n.x`
             <div
                 data-testid="ds-radio-button-group-container"
-                class=${C.classMap(this.classes)}
+                class=${c.e(this.classes)}
                 .aria-invalid=${this.error}
             >   
                 <slot name="title"></slot>
@@ -9,7 +9,7 @@
                 <div class="radio-buttons-container">
                     <slot></slot>
                 </div>
-                ${!this.error&&this.helperText?o.html`<div class = 'helper-text' > ${this.helperText}</div>`:o.nothing}
-                ${this.error&&this.errorText?o.html`<div class="error-text">${this.errorText}</div>`:o.nothing}
+                ${!this.error&&this.helperText?n.x`<div class = 'helper-text' > ${this.helperText}</div>`:n.E}
+                ${this.error&&this.errorText?n.x`<div class="error-text">${this.errorText}</div>`:n.E}
             </div>
-        `}};exports.DsRadioButtonGroup.styles=[g.commonStyles];e([s.provide({context:h}),r.property({type:Boolean,converter:c.booleanConverter})],exports.DsRadioButtonGroup.prototype,"error",2);e([s.provide({context:b}),r.property({type:String,attribute:"error-text"})],exports.DsRadioButtonGroup.prototype,"errorText",2);e([s.provide({context:y}),r.property({type:String,attribute:"helper-text"})],exports.DsRadioButtonGroup.prototype,"helperText",2);e([s.provide({context:x}),r.property({type:Boolean,converter:c.booleanConverter})],exports.DsRadioButtonGroup.prototype,"disabled",2);e([s.provide({context:v}),r.property({type:String})],exports.DsRadioButtonGroup.prototype,"size",2);e([r.property({type:String,reflect:!0})],exports.DsRadioButtonGroup.prototype,"orientation",2);exports.DsRadioButtonGroup=e([G.customUiKitElement("ds-radio-button-group")],exports.DsRadioButtonGroup);exports.radioGroupDisabledContext=x;exports.radioGroupErrorContext=h;exports.radioGroupErrorTextContext=b;exports.radioGroupHelperTextContext=y;exports.radioGroupSizeContext=v;
+        `}},u.styles=[l.commonStyles],u);i.__decorate([t.e({context:f}),r.n({type:Boolean,converter:s.booleanConverter})],g.prototype,`error`,void 0),i.__decorate([t.e({context:p}),r.n({type:String,attribute:`error-text`})],g.prototype,`errorText`,void 0),i.__decorate([t.e({context:m}),r.n({type:String,attribute:`helper-text`})],g.prototype,`helperText`,void 0),i.__decorate([t.e({context:d}),r.n({type:Boolean,converter:s.booleanConverter})],g.prototype,`disabled`,void 0),i.__decorate([t.e({context:h}),r.n({type:String})],g.prototype,`size`,void 0),i.__decorate([r.n({type:String,reflect:!0})],g.prototype,`orientation`,void 0),g=i.__decorate([o.customUiKitElement(`ds-radio-button-group`)],g),exports.radioGroupDisabledContext=d,exports.radioGroupErrorContext=f,exports.radioGroupErrorTextContext=p,exports.radioGroupHelperTextContext=m,exports.radioGroupSizeContext=h;