@cargosense/cargo-design-system 1.0.1 → 1.0.4

package/dist/atoms/index.cjs.js

@@ -1,8 +1,4 @@
-"use strict";var k=Object.defineProperty;var w=(o,t,i)=>t in o?k(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i;var r=(o,t,i)=>w(o,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/Counter.cjs.js");require("../fonts/index.cjs.js");class l extends e.i{constructor(){super(),this.status="none"}render(){return e.x`
-      <span class="badge ${this.status}">
-        <slot></slot>
-      </span>
-    `}}r(l,"styles",e.i$1`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/Counter.cjs.js");require("../fonts/index.cjs.js");class a extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -53,13 +49,11 @@
     .none::before {
       content: none;
     }
-  `),r(l,"properties",{status:{type:String,reflect:!0,attribute:"status",defaultValue:"none"}});function $(){typeof window<"u"&&!customElements.get("cd-badge")&&customElements.define("cd-badge",l)}class c extends e.i{constructor(){super(),this.fitContent=!1}render(){return e.x`
-      <div class="body${this.fitContent?" fit-content":""}">
-        <div class="content">
-          <slot><slot>
-        </div>
-      </div>
-    `}}r(c,"styles",e.i$1`
+  `;static properties={status:{type:String,reflect:!0,attribute:"status",defaultValue:"none"}};constructor(){super(),this.status="none"}render(){return e.x`
+      <span class="badge ${this.status}">
+        <slot></slot>
+      </span>
+    `}}function x(){typeof window<"u"&&!customElements.get("cd-badge")&&customElements.define("cd-badge",a)}class n extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -102,13 +96,13 @@
       max-width: 100%;
       max-height: 100%;
     }
-  `),r(c,"properties",{fitContent:{type:Boolean,reflect:!0,attribute:"fit-content"}});function E(){typeof window<"u"&&!customElements.get("cd-body")&&customElements.define("cd-body",c)}class d extends e.i{constructor(){super(),this.variant="",this.link=void 0}render(){return e.x`
-      <a href="${e.o(this.link)}" class="default ${this.variant}" tabindex="0">
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-      </a>
-    `}}r(d,"styles",e.i$1`
+  `;static properties={fitContent:{type:Boolean,reflect:!0,attribute:"fit-content"}};constructor(){super(),this.fitContent=!1}render(){return e.x`
+      <div class="body${this.fitContent?" fit-content":""}">
+        <div class="content">
+          <slot><slot>
+        </div>
+      </div>
+    `}}function k(){typeof window<"u"&&!customElements.get("cd-body")&&customElements.define("cd-body",n)}class s extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -147,12 +141,13 @@
       text-decoration: none;
       color: inherit;
     }
-  `),r(d,"properties",{link:{type:String,reflect:!0}});function C(){typeof window<"u"&&!customElements.get("cd-data-object")&&customElements.define("cd-data-object",d)}class u extends e.i{constructor(){super(),this.key="",this.value=""}render(){return e.x`
-      <div class="key-value">
-        <span class="key">${this.key}</span>
-        ${this.value===""?e.x`<slot class="value"></slot>`:e.x`<span class="value">${this.value}</span>`}
-      </div>
-    `}}r(u,"styles",e.i$1`
+  `;static properties={link:{type:String,reflect:!0}};constructor(){super(),this.variant="",this.link=void 0}render(){return e.x`
+      <a href="${e.o(this.link)}" class="default ${this.variant}" tabindex="0">
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+      </a>
+    `}}function w(){typeof window<"u"&&!customElements.get("cd-data-object")&&customElements.define("cd-data-object",s)}class l extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -180,9 +175,12 @@
       font-weight: var(--key-value-value-font-weight);
     }
 
-    `),r(u,"properties",{key:{type:String,reflect:!0},value:{type:String,reflect:!0}});function z(){typeof window<"u"&&!customElements.get("cd-key-value")&&customElements.define("cd-key-value",u)}class p extends e.i{constructor(){super(),this.key=""}render(){return e.x`
-      <span class="key"><slot></slot></span>
-    `}}r(p,"styles",e.i$1`
+    `;static properties={key:{type:String,reflect:!0},value:{type:String,reflect:!0}};constructor(){super(),this.key="",this.value=""}render(){return e.x`
+      <div class="key-value">
+        <span class="key">${this.key}</span>
+        ${this.value===""?e.x`<slot class="value"></slot>`:e.x`<span class="value">${this.value}</span>`}
+      </div>
+    `}}function $(){typeof window<"u"&&!customElements.get("cd-key-value")&&customElements.define("cd-key-value",l)}class c extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -195,22 +193,9 @@
       font-weight: var(--key-value-label-font-weight);
       font-size: var(--key-value-font-size, 14px);
     }
-  `),r(p,"properties",{key:{type:String,reflect:!0}});function F(){typeof window<"u"&&!customElements.get("cd-key")&&customElements.define("cd-key",p)}class f extends e.i{constructor(){super(),this.size="md",this.color="default"}render(){return e.x`
-      <div class="${this.size} ${this.color}" aria-label=${this.ariaLabel}>
-        <svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
-          <circle
-            class="path"
-            cx="25"
-            cy="25"
-            r="20"
-            fill="none"
-            stroke="var(--spinner-stroke)"
-            stroke-width="4"
-            stroke-linecap="round"
-          />
-        </svg>
-      </div>
-    `}}r(f,"styles",e.i$1`
+  `;static properties={key:{type:String,reflect:!0}};constructor(){super(),this.key=""}render(){return e.x`
+      <span class="key"><slot></slot></span>
+    `}}function E(){typeof window<"u"&&!customElements.get("cd-key")&&customElements.define("cd-key",c)}class d extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r("fonts/Geist-Regular.woff")}) format('woff');
@@ -260,11 +245,22 @@
         transform: rotate(360deg);
       }
     }
-    `),r(f,"properties",{size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md",defaultValue:"md"},color:{type:String,reflect:!0,attribute:"color",converter:t=>["default","classic","secondary"].includes(t)?t:"default",defaultValue:"default"},ariaLabel:{type:String,reflect:!0,attribute:"aria-label",defaultValue:"Loading"}});function S(){typeof window<"u"&&!customElements.get("cd-spinner")&&customElements.define("cd-spinner",f)}class h extends e.i{constructor(){super()}render(){return e.x`
-      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
-        <slot></slot>
+    `;static properties={size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md",defaultValue:"md"},color:{type:String,reflect:!0,attribute:"color",converter:t=>["default","classic","secondary"].includes(t)?t:"default",defaultValue:"default"},ariaLabel:{type:String,reflect:!0,attribute:"aria-label",defaultValue:"Loading"}};constructor(){super(),this.size="md",this.color="default"}render(){return e.x`
+      <div class="${this.size} ${this.color}" aria-label=${this.ariaLabel}>
+        <svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
+          <circle
+            class="path"
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke="var(--spinner-stroke)"
+            stroke-width="4"
+            stroke-linecap="round"
+          />
+        </svg>
       </div>
-    `}}r(h,"styles",e.i$1`
+    `}}function C(){typeof window<"u"&&!customElements.get("cd-spinner")&&customElements.define("cd-spinner",d)}class u extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -278,24 +274,11 @@
       width: 100%;
       height: 100%;
     }
-  `),r(h,"properties",{direction:{type:String,reflect:!0,attribute:"direction",converter:{fromAttribute(t){return t||"column"},toAttribute(t){return t}}},align:{type:String,reflect:!0,attribute:"align",converter:{fromAttribute(t){return t||"stretch"},toAttribute(t){return t}}},gap:{type:String,reflect:!0,attribute:"gap",converter:{fromAttribute(t){return t||"0px"},toAttribute(t){return t}}},justify:{type:String,reflect:!0,attribute:"justify",converter:{fromAttribute(t){return t||"flex-start"},toAttribute(t){return t}}}});function B(){typeof window<"u"&&!customElements.get("cd-flex-container")&&customElements.define("cd-flex-container",h)}class a extends e.i{constructor(){super(),this.checked=!1,this.disabled=!1,this.description=void 0,this.name=void 0,this.required=!1,this.value=void 0,this._internals=this.attachInternals()}render(){return e.x`
-    <label ?disabled="${this.disabled}" for='${this.name|"checkbox"}' class='container ${this.disabled?"disabled":""} ${this.error?"error":""}' >
-
-      <div class='label-text'>
+  `;static properties={direction:{type:String,reflect:!0,attribute:"direction",converter:{fromAttribute(t){return t||"column"},toAttribute(t){return t}}},align:{type:String,reflect:!0,attribute:"align",converter:{fromAttribute(t){return t||"stretch"},toAttribute(t){return t}}},gap:{type:String,reflect:!0,attribute:"gap",converter:{fromAttribute(t){return t||"0px"},toAttribute(t){return t}}},justify:{type:String,reflect:!0,attribute:"justify",converter:{fromAttribute(t){return t||"flex-start"},toAttribute(t){return t}}}};constructor(){super()}render(){return e.x`
+      <div class="container" style="flex-direction: ${this.direction}; align-items: ${this.align}; gap: ${this.gap}; justify-content: ${this.justify};">
         <slot></slot>
-        ${this.description?e.x`<span class='description'>${this.description}</span>`:""}
       </div>
-
-
-      <input type="checkbox" id='${this.name|"checkbox"}' name='${this.name|"checkbox"}' aria-describedby='${this.description|this.name|"checkbox"}' value='${e.o(this.value)}' ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this._onChange}" tabindex="-1">
-
-      <div class='checkmark ${this.checked?"active":""} ${this.error?"error":""}' id='check'  aria-describedby='${this.description|this.name|"checkbox"}' tabindex="${this.disabled?"-1":"0"}">
-        <cd-icon name='check' size='xs' color='white'></cd-icon>
-      </div>
-    </label>
-
-
-    `}_onChange(t){if(!this.disabled)return this.checked=t.target.checked,this._internals.setValidity({valid:!0}),this._internals.setFormValue(this.checked),this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value},bubbles:!0,composed:!0})),this.checked}setChecked(t){if(typeof t!="boolean")throw new TypeError("The checked parameter must be a boolean");this.checked=t,this._internals.setValidity({valid:t}),this._internals.setFormValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{checked:t,value:this.value},bubbles:!0,composed:!0}))}firstUpdated(){this.disabled?this.shadowRoot.querySelector("cd-icon").color="#A9B2BC":this.shadowRoot.querySelector("#check").addEventListener("keydown",t=>{console.log("keydown event",t),(t.key==="Enter"||t.key===" ")&&(this.checked=!this.checked,this._internals.setValidity({valid:!this.checked}),this._internals.setFormValue(!this.checked),this.dispatchEvent(new CustomEvent("change",{detail:{checked:!this.checked,value:this.value},bubbles:!0,composed:!0})),this.requestUpdate())})}}r(a,"formAssociated",!0),r(a,"styles",e.i$1`
+    `}}function z(){typeof window<"u"&&!customElements.get("cd-flex-container")&&customElements.define("cd-flex-container",u)}class p extends e.i{static formAssociated=!0;static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -447,12 +430,24 @@
       outline-offset: 2px;
       border-radius: var(--input-checkbox-border-radius-md, 4px);
     }
-  `),r(a,"properties",{checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},description:{type:String,reflect:!0},name:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},value:{type:String,reflect:!0},error:{type:Boolean,reflect:!0}});function q(){typeof window<"u"&&!customElements.get("cd-checkbox")&&customElements.define("cd-checkbox",a)}class b extends e.i{constructor(){super(),this.text="",this.type="info"}render(){return e.x`
-      <div class="informational ${this.type}">
-        ${this.text}
+  `;static properties={checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},description:{type:String,reflect:!0},name:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},value:{type:String,reflect:!0},error:{type:Boolean,reflect:!0}};constructor(){super(),this.checked=!1,this.disabled=!1,this.description=void 0,this.name=void 0,this.required=!1,this.value=void 0,this._internals=this.attachInternals()}render(){return e.x`
+    <label ?disabled="${this.disabled}" for='${this.name|"checkbox"}' class='container ${this.disabled?"disabled":""} ${this.error?"error":""}' >
+
+      <div class='label-text'>
         <slot></slot>
+        ${this.description?e.x`<span class='description'>${this.description}</span>`:""}
+      </div>
+
+
+      <input type="checkbox" id='${this.name|"checkbox"}' name='${this.name|"checkbox"}' aria-describedby='${this.description|this.name|"checkbox"}' value='${e.o(this.value)}' ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this._onChange}" tabindex="-1">
+
+      <div class='checkmark ${this.checked?"active":""} ${this.error?"error":""}' id='check'  aria-describedby='${this.description|this.name|"checkbox"}' tabindex="${this.disabled?"-1":"0"}">
+        <cd-icon name='check' size='xs' color='white'></cd-icon>
       </div>
-    `}}r(b,"styles",e.i$1`
+    </label>
+
+
+    `}_onChange(t){if(!this.disabled)return this.checked=t.target.checked,this._internals.setValidity({valid:!0}),this._internals.setFormValue(this.checked),this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value},bubbles:!0,composed:!0})),this.checked}setChecked(t){if(typeof t!="boolean")throw new TypeError("The checked parameter must be a boolean");this.checked=t,this._internals.setValidity({valid:t}),this._internals.setFormValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{checked:t,value:this.value},bubbles:!0,composed:!0}))}firstUpdated(){this.disabled?this.shadowRoot.querySelector("cd-icon").color="#A9B2BC":this.shadowRoot.querySelector("#check").addEventListener("keydown",t=>{console.log("keydown event",t),(t.key==="Enter"||t.key===" ")&&(this.checked=!this.checked,this._internals.setValidity({valid:!this.checked}),this._internals.setFormValue(!this.checked),this.dispatchEvent(new CustomEvent("change",{detail:{checked:!this.checked,value:this.value},bubbles:!0,composed:!0})),this.requestUpdate())})}}function F(){typeof window<"u"&&!customElements.get("cd-checkbox")&&customElements.define("cd-checkbox",p)}class f extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -466,16 +461,12 @@
       display:block;
 
     }
-  `),r(b,"properties",{text:{type:String,reflect:!0},type:{type:String,reflect:!0}});function x(){typeof window<"u"&&!customElements.get("cd-information")&&customElements.define("cd-information",b)}class g extends e.i{constructor(){super(),this.text=void 0,this.for=void 0,this.required=!1,this.disabled=!1}render(){return e.x`
-      <label
-        class="${this.disabled?"disabled":""}"
-        for="${e.o(this.for)}"
-      >
+  `;static properties={text:{type:String,reflect:!0},type:{type:String,reflect:!0}};constructor(){super(),this.text="",this.type="info"}render(){return e.x`
+      <div class="informational ${this.type}">
         ${this.text}
         <slot></slot>
-        ${this.required?e.x`<span class="required">*</span>`:""}
-      </label>
-    `}}r(g,"styles",e.i$1`
+      </div>
+    `}}function h(){typeof window<"u"&&!customElements.get("cd-information")&&customElements.define("cd-information",f)}class b extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -497,12 +488,16 @@
     .required {
       color: var(--input-required-color, #FF5630);
     }
-  `),r(g,"properties",{text:{type:String,reflect:!0},for:{type:String,reflect:!0,attribute:"for"},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}});function A(){typeof window<"u"&&!customElements.get("cd-label")&&customElements.define("cd-label",g)}class v extends e.i{constructor(){super(),this.text=void 0,this.type="error"}render(){return e.x`
-      <div class="error-message ${this.type}">
-        <slot name='icon'></slot>
-        ${this.text?e.x`<span class="error-text">${this.text}</span>`:e.x`<slot></slot>`}
-      </div>
-    `}}r(v,"styles",e.i$1`
+  `;static properties={text:{type:String,reflect:!0},for:{type:String,reflect:!0,attribute:"for"},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.text=void 0,this.for=void 0,this.required=!1,this.disabled=!1}render(){return e.x`
+      <label
+        class="${this.disabled?"disabled":""}"
+        for="${e.o(this.for)}"
+      >
+        ${this.text}
+        <slot></slot>
+        ${this.required?e.x`<span class="required">*</span>`:""}
+      </label>
+    `}}function S(){typeof window<"u"&&!customElements.get("cd-label")&&customElements.define("cd-label",b)}class g extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -535,14 +530,12 @@
       color: var(--input-success-color, green);
     }
 
-  `),r(v,"properties",{text:{type:String,reflect:!0},type:{type:String,reflect:!0}});function _(){typeof window<"u"&&!customElements.get("cd-error")&&customElements.define("cd-error",v)}class m extends e.i{constructor(){super(),this.label="",this.variant="primary",this.removable=!1,this.disabled=!1,this.size="md"}render(){return e.x`
-      <span class="tag ${this.variant} ${this.size} ${this.disabled?"disabled":""}" @click='${this._handleClick}'>
-        <slot name="icon">
-        </slot>
-        <span class="label">${this.label} <slot></slot></span>
-        ${this.removable?e.x`<span class="remove-icon" @click="${this._handleRemove}"><cd-icon name='exit' size='xs' color='${this.variant==="secondary"||this.variant==="info"?"black":"white"}'></cd-icon></span>`:""}
-      </span>
-    `}_handleRemove(){this.disabled||(this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0})),this.remove())}setRemovable(t){this.removable=t}setDisabled(t){this.disabled=t}removeTag(){this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0})),this.remove()}_handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("click",{detail:{label:this.label},bubbles:!0,composed:!0}))}}r(m,"styles",e.i$1`
+  `;static properties={text:{type:String,reflect:!0},type:{type:String,reflect:!0}};constructor(){super(),this.text=void 0,this.type="error"}render(){return e.x`
+      <div class="error-message ${this.type}">
+        <slot name='icon'></slot>
+        ${this.text?e.x`<span class="error-text">${this.text}</span>`:e.x`<slot></slot>`}
+      </div>
+    `}}function B(){typeof window<"u"&&!customElements.get("cd-error")&&customElements.define("cd-error",g)}class v extends e.i{static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -619,28 +612,14 @@
       min-height: var(--tag-large, 32px);
       gap: var(--tag-gap-lg, 8px);
     }
-  `),r(m,"properties",{label:{type:String,reflect:!0},variant:{type:String,reflect:!0,converter:t=>["primary","secondary","default","link","info","success","warning","danger"].includes(t)?t:"default"},removable:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"}});function R(){typeof window<"u"&&!customElements.get("cd-tag")&&customElements.define("cd-tag",m)}x();class n extends e.i{constructor(){super(),this.name=void 0,this.value=void 0,this.checked=!1,this.disabled=!1,this.description=void 0,this.error=!1,this.size="md",this.required=!1,this._internals=this.attachInternals()}render(){return e.x`
-      <label class="container ${this.size} ${this.disabled?"disabled":""} ${this.error?"input-error":""}" for="${this.name}">
-      <input
-          type="radio"
-          class="${this.error?"input-error":""}"
-          name=${this.name}
-          .value="${this.value}"
-          .checked="${this.checked}"
-          ?disabled="${this.disabled}"
-          @change="${this._handleChange}"
-          @click="${this._select}"
-          required="${this.required}"
-          tabindex="0"
-        >
-        <div class='radio-text' @click="${this._handleLabelClick}">
-
-          <slot></slot>
-          <cd-information>${this.description}</cd-information>
-        </div>
-      </label>
-
-    `}deselectAll(){document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach(i=>{i.checked=!1,i.dispatchEvent(new CustomEvent("change",{detail:{checked:!1},bubbles:!0,composed:!0}))})}_select(){document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach(i=>{i!==this&&(i.checked=!1)}),this.checked=!0,this.dispatchEvent(new CustomEvent("change",{detail:{checked:!0},bubbles:!0,composed:!0}))}_handleLabelClick(){this.disabled||this._select()}_handleChange(t){this.checked=t.target.checked,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{name:this.name,value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}}r(n,"formAssociated",!0),r(n,"styles",e.i$1`
+  `;static properties={label:{type:String,reflect:!0},variant:{type:String,reflect:!0,converter:t=>["primary","secondary","default","link","info","success","warning","danger"].includes(t)?t:"default"},removable:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},size:{type:String,reflect:!0,converter:t=>["sm","md","lg"].includes(t)?t:"md"}};constructor(){super(),this.label="",this.variant="primary",this.removable=!1,this.disabled=!1,this.size="md"}render(){return e.x`
+      <span class="tag ${this.variant} ${this.size} ${this.disabled?"disabled":""}" @click='${this._handleClick}'>
+        <slot name="icon">
+        </slot>
+        <span class="label">${this.label} <slot></slot></span>
+        ${this.removable?e.x`<span class="remove-icon" @click="${this._handleRemove}"><cd-icon name='exit' size='xs' color='${this.variant==="secondary"||this.variant==="info"?"black":"white"}'></cd-icon></span>`:""}
+      </span>
+    `}_handleRemove(){this.disabled||(this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0})),this.remove())}setRemovable(t){this.removable=t}setDisabled(t){this.disabled=t}removeTag(){this.dispatchEvent(new CustomEvent("remove",{detail:{label:this.label},bubbles:!0,composed:!0})),this.remove()}_handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("click",{detail:{label:this.label},bubbles:!0,composed:!0}))}}function q(){typeof window<"u"&&!customElements.get("cd-tag")&&customElements.define("cd-tag",v)}h();class m extends e.i{static formAssociated=!0;static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -665,9 +644,9 @@
     input[type="radio"] {
       appearance: none;
       -webkit-appearance: none;
-      width: var(--input-width, 20px);
-      height: var(--input-height, 20px);
-      border-radius: var(--input-border-radius, 50%);
+      width: var(--input-radio-size, 20px);
+      height: var(--input-radio-size, 20px);
+      border-radius: var(--input-radio-border-radius, 50%);
       margin: 0;
       padding: 0;
       border: 1px solid var(--input-border-color, #8E98A4);
@@ -750,21 +729,28 @@
       cursor: pointer;
 
     }
-  `),r(n,"properties",{name:{type:String},value:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},description:{type:String},error:{type:Boolean,reflect:!0},size:{type:String,reflect:!0},required:{type:Boolean,reflect:!0}});const G=()=>{customElements.get("cd-radio")||customElements.define("cd-radio",n)};class s extends e.i{constructor(){super(),this.name=void 0,this.value=void 0,this.disabled=!1,this.required=!1,this.error=!1,this.placeholder=void 0,this.fullWidth=!1,this._internals=this.attachInternals()}render(){return e.x`
-    <div class='container ${this.fullWidth?"full-width":""}'>
-      <select
-        name="${e.o(this.name)}"
-        ?disabled="${this.disabled}"
-        ?required="${this.required}"
-        class="${this.error?"input-error":""} ${this.size} ${this.fullWidth?"full-width":""}"
-        @change="${this.handleChange}"
-      >
-        ${this.placeholder?e.x`<option value="" disabled selected>${this.placeholder}</option>`:""}
-        <slot></slot>
-      </select>
-      <cd-icon name="caret-down" class="select-icon" size='xxs'></cd-icon>
-    </div>
-    `}firstUpdated(){const t=this.querySelectorAll("option"),i=this.shadowRoot.querySelector("select");t.forEach(y=>i.appendChild(y.cloneNode(!0))),t.forEach(y=>y.remove()),this.disabled&&(this.shadowRoot.querySelector("cd-icon").color="var(--input-text-color-disabled)"),this.error&&(this.shadowRoot.querySelector("cd-icon").color="var(--input-error-border-color)")}selectOption(t){const i=this.shadowRoot.querySelector("select");i.value=t,this.value=t,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}reset(){const t=this.shadowRoot.querySelector("select");t.value="",this.value="",this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}}r(s,"formAssociated",!0),r(s,"styles",e.i$1`
+  `;static properties={name:{type:String},value:{type:String},checked:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},description:{type:String},error:{type:Boolean,reflect:!0},size:{type:String,reflect:!0},required:{type:Boolean,reflect:!0}};constructor(){super(),this.name=void 0,this.value=void 0,this.checked=!1,this.disabled=!1,this.description=void 0,this.error=!1,this.size="md",this.required=!1,this._internals=this.attachInternals()}render(){return e.x`
+      <label class="container ${this.size} ${this.disabled?"disabled":""} ${this.error?"input-error":""}" for="${this.name}">
+      <input
+          type="radio"
+          class="${this.error?"input-error":""}"
+          name=${this.name}
+          .value="${this.value}"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          @change="${this._handleChange}"
+          @click="${this._select}"
+          required="${this.required}"
+          tabindex="0"
+        >
+        <div class='radio-text' @click="${this._handleLabelClick}">
+
+          <slot></slot>
+          <cd-information>${this.description}</cd-information>
+        </div>
+      </label>
+
+    `}deselectAll(){document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach(o=>{o.checked=!1,o.dispatchEvent(new CustomEvent("change",{detail:{checked:!1},bubbles:!0,composed:!0}))})}_select(){document.querySelectorAll(`cd-radio[name="${this.name}"]`).forEach(o=>{o!==this&&(o.checked=!1)}),this.checked=!0,this.dispatchEvent(new CustomEvent("change",{detail:{checked:!0},bubbles:!0,composed:!0}))}_handleLabelClick(){this.disabled||this._select()}_handleChange(t){this.checked=t.target.checked,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{name:this.name,value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}}const A=()=>{customElements.get("cd-radio")||customElements.define("cd-radio",m)};class y extends e.i{static formAssociated=!0;static styles=e.i$1`
     @font-face {
       font-family: 'Geist';
       src: url(${e.r(e.fontURL)}) format('woff');
@@ -858,5 +844,19 @@
       height: 36px;
       padding: 0 var(--input-horizontal-inline-padding-sm, 12px);
     }
-  `),r(s,"properties",{name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},error:{type:Boolean,reflect:!0},placeholder:{type:String},fullWidth:{type:Boolean,attribute:"full-width",reflect:!0},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},_internals:{type:Object,attribute:!1}});function j(){typeof window<"u"&&!customElements.get("cd-select")&&customElements.define("cd-select",s)}exports.Counter=e.Counter;exports.Icon=e.Icon;exports.NavImage=e.NavImage;exports.registerCounter=e.registerCounter;exports.registerIcon=e.registerIcon;exports.registerNavImage=e.registerNavImage;exports.Badge=l;exports.Body=c;exports.Checkbox=a;exports.DataObject=d;exports.ErrorMessage=v;exports.FlexContainer=h;exports.Informational=b;exports.Key=p;exports.KeyValue=u;exports.Label=g;exports.Radio=n;exports.Select=s;exports.Spinner=f;exports.Tag=m;exports.registerBadge=$;exports.registerBody=E;exports.registerCheckbox=q;exports.registerDataObject=C;exports.registerErrorMessage=_;exports.registerFlexContainer=B;exports.registerInformational=x;exports.registerKey=F;exports.registerKeyValue=z;exports.registerLabel=A;exports.registerRadio=G;exports.registerSelect=j;exports.registerSpinner=S;exports.registerTag=R;
+  `;static properties={name:{type:String},value:{type:String},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},error:{type:Boolean,reflect:!0},placeholder:{type:String},fullWidth:{type:Boolean,attribute:"full-width",reflect:!0},size:{type:String,reflect:!0,attribute:"size",converter:t=>["sm","md","lg"].includes(t)?t:"md"},_internals:{type:Object,attribute:!1}};constructor(){super(),this.name=void 0,this.value=void 0,this.disabled=!1,this.required=!1,this.error=!1,this.placeholder=void 0,this.fullWidth=!1,this._internals=this.attachInternals()}render(){return e.x`
+    <div class='container ${this.fullWidth?"full-width":""}'>
+      <select
+        name="${e.o(this.name)}"
+        ?disabled="${this.disabled}"
+        ?required="${this.required}"
+        class="${this.error?"input-error":""} ${this.size} ${this.fullWidth?"full-width":""}"
+        @change="${this.handleChange}"
+      >
+        ${this.placeholder?e.x`<option value="" disabled selected>${this.placeholder}</option>`:""}
+        <slot></slot>
+      </select>
+      <cd-icon name="caret-down" class="select-icon" size='xxs'></cd-icon>
+    </div>
+    `}firstUpdated(){const t=this.querySelectorAll("option"),o=this.shadowRoot.querySelector("select");t.forEach(i=>o.appendChild(i.cloneNode(!0))),t.forEach(i=>i.remove()),this.disabled&&(this.shadowRoot.querySelector("cd-icon").color="var(--input-text-color-disabled)"),this.error&&(this.shadowRoot.querySelector("cd-icon").color="var(--input-error-border-color)")}selectOption(t){const o=this.shadowRoot.querySelector("select");o.value=t,this.value=t,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}reset(){const t=this.shadowRoot.querySelector("select");t.value="",this.value="",this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))}}function R(){typeof window<"u"&&!customElements.get("cd-select")&&customElements.define("cd-select",y)}exports.Counter=e.Counter;exports.Icon=e.Icon;exports.NavImage=e.NavImage;exports.registerCounter=e.registerCounter;exports.registerIcon=e.registerIcon;exports.registerNavImage=e.registerNavImage;exports.Badge=a;exports.Body=n;exports.Checkbox=p;exports.DataObject=s;exports.ErrorMessage=g;exports.FlexContainer=u;exports.Informational=f;exports.Key=c;exports.KeyValue=l;exports.Label=b;exports.Radio=m;exports.Select=y;exports.Spinner=d;exports.Tag=v;exports.registerBadge=x;exports.registerBody=k;exports.registerCheckbox=F;exports.registerDataObject=w;exports.registerErrorMessage=B;exports.registerFlexContainer=z;exports.registerInformational=h;exports.registerKey=E;exports.registerKeyValue=$;exports.registerLabel=S;exports.registerRadio=A;exports.registerSelect=R;exports.registerSpinner=C;exports.registerTag=q;
 //# sourceMappingURL=index.cjs.js.map