@rarui/components 1.24.2-rc.2 → 1.24.2-rc.4

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.24.2-rc.2",
+  "version": "1.24.2-rc.4",
   "tags": [
     {
       "name": "rarui-avatar",

package/dist/index.d.ts

@@ -19233,10 +19233,13 @@ declare class RaruiRadioButton extends LitElement {
     private _internals;
     static formAssociated: boolean;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _onChange;
-    private _uncheckOtherRadioButtons;
+    private _handleRadioGroupChange;
+    private _notifyRadioGroupSelection;
     focus(): void;
     blur(): void;
     formResetCallback(): void;

package/dist/index.js

@@ -399,7 +399,13 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
       </button>
     `}_handleClick(r){if(this.dispatchEvent(new CustomEvent("rarui-button-click",{detail:{originalEvent:r,type:this.type},bubbles:!0,composed:!0})),"submit"!==this.type||this.disabled){if("reset"===this.type&&!this.disabled){const r=this.closest("form");r&&r.reset()}}else{const r=this.closest("form");r&&r.requestSubmit()}}};Ea.styles=t`
     ${e('.rarui-button__15gxywr0 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-decoration: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  font-weight: var(--rarui-fontWeight-semiBold);\n  line-height: var(--rarui-lineHeight-button-l);\n  font-size: var(--rarui-fontSize-button-l);\n  font-family: var(--rarui-fontFamily-button);\n  border-radius: var(--rarui-shape-border-radius-button);\n  border-width: var(--rarui-shape-border-width-1);\n  border-style: solid;\n  border-color: var(--rarui-colors-surface-brand);\n}\n.rarui-button__15gxywr0:disabled {\n  background: var(--rarui-colors-surface-disabled);\n  border-color: var(--rarui-colors-surface-disabled);\n  color: var(--rarui-colors-content-disabled);\n  cursor: not-allowed;\n}\n.rarui-button__15gxywr0:focus-within {\n  outline: none;\n  box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-button__15gxywr0:after {\n  content: "";\n  transition: opacity 150ms ease;\n  position: absolute;\n  opacity: 0;\n  inset: -1px;\n  border-radius: var(--rarui-shape-border-radius-button);\n}\n.rarui-button__15gxywr0:hover:after {\n  opacity: 1;\n}\n.rarui-button__15gxywr0:active:after {\n  opacity: 1;\n}\n.rarui-button__15gxywr0:hover:disabled:after {\n  opacity: 0;\n}\n.rarui-button_full_true__15gxywr1 {\n  width: 100%;\n}\n.rarui-button_appearance_brand__15gxywr2 {\n  background-color: var(--rarui-colors-surface-brand);\n  border-color: var(--rarui-colors-surface-brand);\n  color: var(--rarui-colors-content-on-brand);\n}\n.rarui-button_appearance_danger__15gxywr3 {\n  background-color: var(--rarui-colors-surface-error);\n  border-color: var(--rarui-colors-surface-error);\n  color: var(--rarui-colors-content-on-error);\n}\n.rarui-button_appearance_success__15gxywr4 {\n  background-color: var(--rarui-colors-surface-success);\n  border-color: var(--rarui-colors-surface-success);\n  color: var(--rarui-colors-content-on-success);\n}\n.rarui-button_appearance_warning__15gxywr5 {\n  background-color: var(--rarui-colors-surface-warning);\n  border-color: var(--rarui-colors-surface-warning);\n  color: var(--rarui-colors-content-on-warning);\n}\n.rarui-button_appearance_neutral__15gxywr6 {\n  background-color: var(--rarui-colors-surface-invert);\n  border-color: var(--rarui-colors-surface-invert);\n  color: var(--rarui-colors-content-invert);\n}\n.rarui-button_appearance_inverted__15gxywr7 {\n  background-color: var(--rarui-colors-surface-primary);\n  border-color: var(--rarui-colors-surface-primary);\n  color: var(--rarui-colors-content-primary);\n}\n.rarui-button_size_large__15gxywr8 {\n  gap: var(--rarui-spacing-3xs);\n  padding: 0 var(--rarui-spacing-s);\n  height: 3rem;\n  font-size: var(--rarui-fontSize-button-l);\n}\n.rarui-button_size_medium__15gxywr9 {\n  gap: var(--rarui-spacing-3xs);\n  padding: 0 var(--rarui-spacing-xs);\n  height: 2.5rem;\n  font-size: var(--rarui-fontSize-button-m);\n}\n.rarui-button_size_small__15gxywra {\n  gap: var(--rarui-spacing-4xs);\n  padding: 0 var(--rarui-spacing-2xs);\n  height: 2rem;\n  font-size: var(--rarui-fontSize-button-s);\n}\n.rarui-button_variant_solid__15gxywrb:hover:after {\n  background-color: var(--rarui-colors-surface-invert-hover);\n}\n.rarui-button_variant_solid__15gxywrb:active:after {\n  border-color: var(--rarui-colors-surface-invert-press);\n  background-color: var(--rarui-colors-surface-invert-press);\n}\n.rarui-button_variant_outlined__15gxywrc {\n  background-color: transparent;\n}\n.rarui-button_variant_text__15gxywrd {\n  background-color: transparent;\n  text-decoration: underline;\n  border-color: transparent;\n}\n.rarui-button_variant_tonal__15gxywre {\n  border-color: transparent;\n}\n.rarui-button__compound_0__15gxywrf {\n  color: var(--rarui-colors-content-brand);\n  border-color: var(--rarui-colors-border-brand);\n}\n.rarui-button__compound_0__15gxywrf:hover {\n  background-color: var(--rarui-colors-surface-brand-hover);\n}\n.rarui-button__compound_0__15gxywrf:active {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-button__compound_1__15gxywrg {\n  color: var(--rarui-colors-content-error);\n  border-color: var(--rarui-colors-border-error);\n}\n.rarui-button__compound_1__15gxywrg:hover {\n  background-color: var(--rarui-colors-surface-error-hover);\n}\n.rarui-button__compound_1__15gxywrg:active {\n  background-color: var(--rarui-colors-surface-error-press);\n}\n.rarui-button__compound_2__15gxywrh {\n  color: var(--rarui-colors-content-success);\n  border-color: var(--rarui-colors-border-success);\n}\n.rarui-button__compound_2__15gxywrh:hover {\n  background-color: var(--rarui-colors-surface-success-hover);\n}\n.rarui-button__compound_2__15gxywrh:active {\n  background-color: var(--rarui-colors-surface-success-press);\n}\n.rarui-button__compound_3__15gxywri {\n  color: var(--rarui-colors-content-warning);\n  border-color: var(--rarui-colors-border-warning);\n}\n.rarui-button__compound_3__15gxywri:hover {\n  background-color: var(--rarui-colors-surface-warning-hover);\n}\n.rarui-button__compound_3__15gxywri:active {\n  background-color: var(--rarui-colors-surface-warning-press);\n}\n.rarui-button__compound_4__15gxywrj {\n  color: var(--rarui-colors-content-primary);\n  border-color: var(--rarui-colors-border-secondary);\n}\n.rarui-button__compound_4__15gxywrj:hover {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-button__compound_4__15gxywrj:active {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-button__compound_5__15gxywrk {\n  color: var(--rarui-colors-content-invert);\n  border-color: var(--rarui-colors-border-invert);\n}\n.rarui-button__compound_5__15gxywrk:hover {\n  background-color: var(--rarui-colors-surface-invert-hover);\n}\n.rarui-button__compound_5__15gxywrk:active {\n  background-color: var(--rarui-colors-surface-invert-press);\n}\n.rarui-button__compound_6__15gxywrl {\n  color: var(--rarui-colors-content-brand);\n}\n.rarui-button__compound_6__15gxywrl:hover {\n  background-color: var(--rarui-colors-surface-brand-hover);\n}\n.rarui-button__compound_6__15gxywrl:active {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-button__compound_7__15gxywrm {\n  color: var(--rarui-colors-content-error);\n}\n.rarui-button__compound_7__15gxywrm:hover {\n  background-color: var(--rarui-colors-surface-error-hover);\n}\n.rarui-button__compound_7__15gxywrm:active {\n  background-color: var(--rarui-colors-surface-error-press);\n}\n.rarui-button__compound_8__15gxywrn {\n  color: var(--rarui-colors-content-success);\n}\n.rarui-button__compound_8__15gxywrn:hover {\n  background-color: var(--rarui-colors-surface-success-hover);\n}\n.rarui-button__compound_8__15gxywrn:active {\n  background-color: var(--rarui-colors-surface-success-press);\n}\n.rarui-button__compound_9__15gxywro {\n  color: var(--rarui-colors-content-warning);\n}\n.rarui-button__compound_9__15gxywro:hover {\n  background-color: var(--rarui-colors-surface-warning-hover);\n}\n.rarui-button__compound_9__15gxywro:active {\n  background-color: var(--rarui-colors-surface-warning-press);\n}\n.rarui-button__compound_10__15gxywrp {\n  color: var(--rarui-colors-content-primary);\n}\n.rarui-button__compound_10__15gxywrp:hover {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-button__compound_10__15gxywrp:active {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-button__compound_11__15gxywrq {\n  color: var(--rarui-colors-content-invert);\n}\n.rarui-button__compound_11__15gxywrq:hover {\n  background-color: var(--rarui-colors-surface-invert-hover);\n}\n.rarui-button__compound_11__15gxywrq:active {\n  background-color: var(--rarui-colors-surface-invert-press);\n}\n.rarui-button__compound_12__15gxywrr {\n  color: var(--rarui-colors-content-brand);\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-button__compound_12__15gxywrr:hover {\n  background-color: var(--rarui-colors-surface-brand-hover);\n}\n.rarui-button__compound_12__15gxywrr:active {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-button__compound_12__15gxywrr:hover {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-button__compound_12__15gxywrr:active {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-button__compound_12__15gxywrr:hover:after {\n  background-color: var(--rarui-colors-surface-brand-hover);\n}\n.rarui-button__compound_12__15gxywrr:active:after {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-button__compound_13__15gxywrs {\n  color: var(--rarui-colors-content-error);\n  background-color: var(--rarui-colors-surface-error-subdued);\n}\n.rarui-button__compound_13__15gxywrs:hover {\n  background-color: var(--rarui-colors-surface-error-hover);\n}\n.rarui-button__compound_13__15gxywrs:active {\n  background-color: var(--rarui-colors-surface-error-press);\n}\n.rarui-button__compound_13__15gxywrs:hover {\n  background-color: var(--rarui-colors-surface-error-subdued);\n}\n.rarui-button__compound_13__15gxywrs:active {\n  background-color: var(--rarui-colors-surface-error-subdued);\n}\n.rarui-button__compound_13__15gxywrs:hover:after {\n  background-color: var(--rarui-colors-surface-error-hover);\n}\n.rarui-button__compound_13__15gxywrs:active:after {\n  background-color: var(--rarui-colors-surface-error-press);\n}\n.rarui-button__compound_14__15gxywrt {\n  color: var(--rarui-colors-content-success);\n  background-color: var(--rarui-colors-surface-success-subdued);\n}\n.rarui-button__compound_14__15gxywrt:hover {\n  background-color: var(--rarui-colors-surface-success-hover);\n}\n.rarui-button__compound_14__15gxywrt:active {\n  background-color: var(--rarui-colors-surface-success-press);\n}\n.rarui-button__compound_14__15gxywrt:hover {\n  background-color: var(--rarui-colors-surface-success-subdued);\n}\n.rarui-button__compound_14__15gxywrt:active {\n  background-color: var(--rarui-colors-surface-success-subdued);\n}\n.rarui-button__compound_14__15gxywrt:hover:after {\n  background-color: var(--rarui-colors-surface-success-hover);\n}\n.rarui-button__compound_14__15gxywrt:active:after {\n  background-color: var(--rarui-colors-surface-success-press);\n}\n.rarui-button__compound_15__15gxywru {\n  color: var(--rarui-colors-content-warning);\n  background-color: var(--rarui-colors-surface-warning-subdued);\n}\n.rarui-button__compound_15__15gxywru:hover {\n  background-color: var(--rarui-colors-surface-warning-hover);\n}\n.rarui-button__compound_15__15gxywru:active {\n  background-color: var(--rarui-colors-surface-warning-press);\n}\n.rarui-button__compound_15__15gxywru:hover {\n  background-color: var(--rarui-colors-surface-warning-subdued);\n}\n.rarui-button__compound_15__15gxywru:active {\n  background-color: var(--rarui-colors-surface-warning-subdued);\n}\n.rarui-button__compound_15__15gxywru:hover:after {\n  background-color: var(--rarui-colors-surface-warning-hover);\n}\n.rarui-button__compound_15__15gxywru:active:after {\n  background-color: var(--rarui-colors-surface-warning-press);\n}\n.rarui-button__compound_16__15gxywrv {\n  color: var(--rarui-colors-content-primary);\n  background-color: var(--rarui-colors-surface-secondary);\n}\n.rarui-button__compound_16__15gxywrv:hover {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-button__compound_16__15gxywrv:active {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-button__compound_16__15gxywrv:hover {\n  background-color: var(--rarui-colors-surface-secondary);\n}\n.rarui-button__compound_16__15gxywrv:active {\n  background-color: var(--rarui-colors-surface-secondary);\n}\n.rarui-button__compound_16__15gxywrv:hover:after {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-button__compound_16__15gxywrv:active:after {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-button__compound_17__15gxywrw {\n  color: var(--rarui-colors-content-invert);\n  background-color: var(--rarui-colors-surface-invert-secondary);\n}\n.rarui-button__compound_17__15gxywrw:hover {\n  background-color: var(--rarui-colors-surface-invert-hover);\n}\n.rarui-button__compound_17__15gxywrw:active {\n  background-color: var(--rarui-colors-surface-invert-press);\n}\n.rarui-button__compound_17__15gxywrw:hover {\n  background-color: var(--rarui-colors-surface-invert-secondary);\n}\n.rarui-button__compound_17__15gxywrw:active {\n  background-color: var(--rarui-colors-surface-invert-secondary);\n}\n.rarui-button__compound_17__15gxywrw:hover:after {\n  background-color: var(--rarui-colors-surface-invert-hover);\n}\n.rarui-button__compound_17__15gxywrw:active:after {\n  background-color: var(--rarui-colors-surface-invert-press);\n}')}
+
     :host {
+      display: flex;
+      width: fit-content;
+    }
+
+    :host([full]) {
       width: 100%;
     }
   `,r([fr({type:String})],Ea.prototype,"type",void 0),r([fr({type:String})],Ea.prototype,"size",void 0),r([fr({type:String})],Ea.prototype,"variant",void 0),r([fr({type:String})],Ea.prototype,"appearance",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ea.prototype,"disabled",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ea.prototype,"full",void 0),r([fr({type:String})],Ea.prototype,"name",void 0),r([fr({type:String})],Ea.prototype,"value",void 0),r([fr({type:String})],Ea.prototype,"form",void 0),Ea=r([_r("rarui-button")],Ea);let Pa=class extends er{constructor(){super(),this.size="medium",this.error=!1,this.indeterminate=!1,this.disabled=!1,this.checked=!1,this.readonly=!1,this.required=!1,this._hasCheckedAttribute=!1,this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),this._hasCheckedAttribute=this.hasAttribute("checked"),document.addEventListener("rarui-label-click",this._handleLabelClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("rarui-label-click",this._handleLabelClick.bind(this))}attributeChangedCallback(r,i,o){super.attributeChangedCallback(r,i,o),"checked"===r&&(this._hasCheckedAttribute=null!==o)}updated(r){super.updated(r),r.has("checked")&&this.input&&this._hasCheckedAttribute&&(this.input.checked=this.checked)}render(){return N`
@@ -694,7 +700,7 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
       </div>
     `}_focusInput(){this.disabled||this.shadowRoot?.querySelector("input")?.focus()}_onInput(r){const i=r.target;this.value=i.value,this.dispatchEvent(new CustomEvent("input-search-change",{detail:{value:i.value,originalEvent:r},bubbles:!0,composed:!0}))}_onSearch(r){const i=r.target;this.dispatchEvent(new CustomEvent("input-search-submit",{detail:{value:i.value,originalEvent:r},bubbles:!0,composed:!0}))}focus(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}formResetCallback(){this.value="",this._internals.setFormValue("")}};Za.formAssociated=!0,Za.styles=t`
     ${e(Xa)}
-  `,r([fr({type:String})],Za.prototype,"size",void 0),r([fr({type:String})],Za.prototype,"appearance",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"border",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"divider",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"disabled",void 0),r([fr({type:String})],Za.prototype,"value",null),r([fr({type:String})],Za.prototype,"placeholder",void 0),r([fr({type:String})],Za.prototype,"name",void 0),r([fr({type:String})],Za.prototype,"form",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"required",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"readonly",void 0),r([fr({type:String})],Za.prototype,"autocomplete",void 0),r([fr({type:Number})],Za.prototype,"minlength",void 0),r([fr({type:Number})],Za.prototype,"maxlength",void 0),r([fr({type:String})],Za.prototype,"pattern",void 0),Za=r([_r("rarui-input-search")],Za);let Ja=class extends er{constructor(){super(),this.id="",this.disabled=!1,this.size="large",this.error=!1,this.selected=!1,this.required=!1,this.readonly=!1,this._internals=this.attachInternals()}render(){const r=this.id||this.name;return N`
+  `,r([fr({type:String})],Za.prototype,"size",void 0),r([fr({type:String})],Za.prototype,"appearance",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"border",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"divider",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"disabled",void 0),r([fr({type:String})],Za.prototype,"value",null),r([fr({type:String})],Za.prototype,"placeholder",void 0),r([fr({type:String})],Za.prototype,"name",void 0),r([fr({type:String})],Za.prototype,"form",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"required",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Za.prototype,"readonly",void 0),r([fr({type:String})],Za.prototype,"autocomplete",void 0),r([fr({type:Number})],Za.prototype,"minlength",void 0),r([fr({type:Number})],Za.prototype,"maxlength",void 0),r([fr({type:String})],Za.prototype,"pattern",void 0),Za=r([_r("rarui-input-search")],Za);let Ja=class extends er{constructor(){super(),this.id="",this.disabled=!1,this.size="large",this.error=!1,this.selected=!1,this.required=!1,this.readonly=!1,this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),document.addEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this))}render(){const r=this.id||this.name;return N`
       <label
         for="${gr(r)}"
         class=${li.classnames.container}
@@ -729,7 +735,7 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
               </rarui-text>
             `:null}
       </label>
-    `}_onChange(r){const i=r.target;i.checked&&(this.selected=!0,this._internals.setFormValue(this.value||"on"),this._uncheckOtherRadioButtons()),this.dispatchEvent(new CustomEvent("radio-button-change",{detail:{value:i.value,checked:i.checked,name:i.name,originalEvent:r},bubbles:!0,composed:!0}))}_uncheckOtherRadioButtons(){if(!this.name)return;const r=document.querySelectorAll(`rarui-radio-button[name="${this.name}"]`);console.log(r),r.forEach((r=>{r!==this&&(r.selected=!1,r._internals.setFormValue(null))}))}focus(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}formResetCallback(){this.selected=!1,this._internals.setFormValue(null)}};Ja.formAssociated=!0,Ja.styles=t`
+    `}_onChange(r){const i=r.target;i.checked&&(this.selected=!0,this._internals.setFormValue(this.value||"on"),this._notifyRadioGroupSelection()),this.dispatchEvent(new CustomEvent("radio-button-change",{detail:{value:i.value,checked:i.checked,name:i.name,originalEvent:r},bubbles:!0,composed:!0}))}_handleRadioGroupChange(r){const i=r,{name:o,element:a}=i.detail;if(o===this.name&&a!==this&&this.selected){this.selected=!1,this._internals.setFormValue(null);const r=this.shadowRoot?.querySelector('input[type="radio"]');r&&(r.checked=!1),this.dispatchEvent(new CustomEvent("radio-button-change",{detail:{value:this.value,checked:!1,name:this.name,originalEvent:null},bubbles:!0,composed:!0}))}}_notifyRadioGroupSelection(){this.name&&document.dispatchEvent(new CustomEvent("radio-button-selected",{detail:{name:this.name,value:this.value,element:this}}))}focus(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}formResetCallback(){this.selected=!1,this._internals.setFormValue(null)}};Ja.formAssociated=!0,Ja.styles=t`
     ${e('.rarui-radioButton__1d9isw70 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  border-style: solid;\n  position: relative;\n  cursor: pointer;\n  border-width: var(--rarui-shape-border-width-2);\n  border-color: var(--rarui-colors-border-primary);\n}\n.rarui-radioButton__1d9isw70:before {\n  content: "";\n  position: absolute;\n  border-radius: 100%;\n  transition: all 150ms ease;\n  opacity: 0;\n}\n.rarui-radioButton__1d9isw70:after {\n  content: "";\n  position: absolute;\n  border-radius: 100%;\n  transition: all 150ms ease;\n  background-color: var(--rarui-colors-content-on-brand);\n  opacity: 0;\n}\n.rarui-radioButton__1d9isw70:has(input:checked) {\n  background-color: var(--rarui-colors-surface-brand);\n  border-color: var(--rarui-colors-surface-brand);\n}\n.rarui-radioButton__1d9isw70:has(input:checked):after {\n  opacity: 1;\n}\n.rarui-radioButton__1d9isw70:hover:before {\n  opacity: 1;\n  background-color: var(--rarui-colors-surface-brand-hover);\n}\n.rarui-radioButton__1d9isw70:active:before {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-radioButton__1d9isw70:has(input:disabled) {\n  background-color: var(--rarui-colors-surface-disabled);\n  border-color: var(--rarui-colors-border-secondary);\n}\n.rarui-radioButton__1d9isw70:has(input:disabled):before {\n  opacity: 0;\n}\n.rarui-radioButton__1d9isw70:has(input:disabled):after {\n  background-color: var(--rarui-colors-content-disabled);\n}\n.rarui-radioButton_size_small__1d9isw71 {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.rarui-radioButton_size_small__1d9isw71:before {\n  width: 2rem;\n  height: 2rem;\n}\n.rarui-radioButton_size_small__1d9isw71:after {\n  width: .5rem;\n  height: .5rem;\n}\n.rarui-radioButton_size_large__1d9isw72 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.rarui-radioButton_size_large__1d9isw72:before {\n  width: 2.75rem;\n  height: 2.75rem;\n}\n.rarui-radioButton_size_large__1d9isw72:after {\n  width: .75rem;\n  height: .75rem;\n}\n.rarui-radioButton_error_true__1d9isw73 {\n  border-color: var(--rarui-colors-border-error);\n  background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-radioButton_error_true__1d9isw73:has(input:disabled) {\n  opacity: 50%;\n  background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-radioButton_error_true__1d9isw73:has(input:checked) {\n  background-color: var(--rarui-colors-surface-primary);\n  border-color: var(--rarui-colors-surface-error);\n}\n.rarui-radioButton_error_true__1d9isw73:has(input:checked):after {\n  background-color: var(--rarui-colors-content-error);\n}\n.rarui-radioButton_error_true__1d9isw73:hover:before {\n  opacity: 1;\n  background-color: var(--rarui-colors-surface-error-hover);\n}\n.rarui-radioButton_error_true__1d9isw73:active:before {\n  background-color: var(--rarui-colors-surface-error-press);\n}\n.rarui-radioButton_container__1d9isw74 {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: var(--rarui-spacing-3xs);\n  color: var(--rarui-colors-content-primary);\n}\n.rarui-radioButton_container__1d9isw74[aria-disabled=\'true\'] {\n  color: var(--rarui-colors-content-disabled);\n}\n.rarui-radioButton_input__1d9isw75 {\n  position: absolute;\n  overflow: hidden;\n  opacity: 0;\n  height: 0;\n  width: 0;\n}')}
   `,r([fr({type:String})],Ja.prototype,"id",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ja.prototype,"disabled",void 0),r([fr({type:String})],Ja.prototype,"name",void 0),r([fr({type:String})],Ja.prototype,"label",void 0),r([fr({type:String})],Ja.prototype,"size",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ja.prototype,"error",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ja.prototype,"selected",void 0),r([fr({type:String})],Ja.prototype,"value",void 0),r([fr({type:String})],Ja.prototype,"form",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ja.prototype,"required",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Ja.prototype,"readonly",void 0),Ja=r([_r("rarui-radio-button")],Ja);let Qa=class extends er{constructor(){super(),this.size="medium",this.disabled=!1,this.multiple=!1,this.open=!1,this.enabledFlip=!0,this.position="bottom-start",this.strategy="fixed",this.required=!1,this._options=[],this.selectedOptions=[],this.menuOpen=!0,this._internals=this.attachInternals()}get options(){return this._options}set options(r){const i=this._options;this._options=r,this.requestUpdate("options",i)}get value(){return this._value}set value(r){const i=this._value;this._value=r,this._updateSelectedOptions(),this.requestUpdate("value",i)}get defaultValue(){return this._defaultValue}set defaultValue(r){const i=this._defaultValue;this._defaultValue=r,this._value||this._updateSelectedOptions(),this.requestUpdate("defaultValue",i)}connectedCallback(){super.connectedCallback(),this._updateSelectedOptions(),this.menuOpen=this.open||!1,document.addEventListener("rarui-label-click",this._handleLabelClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("rarui-label-click",this._handleLabelClick.bind(this))}updated(r){r.has("open")&&(this.menuOpen=this.open||!1)}_updateSelectedOptions(){const r=this._value||this._defaultValue;if(!r){const r=this.selectedOptions;return this.selectedOptions=[],this._updateFormValue(),void this.requestUpdate("selectedOptions",r)}let i;i=Array.isArray(r)?r:[r];if(!(JSON.stringify(this.selectedOptions)===JSON.stringify(i))){const r=this.selectedOptions;this.selectedOptions=i,this._updateFormValue(),this.requestUpdate("selectedOptions",r)}}handleSelect(r){if(this.disabled)return;let i;if(this.multiple){i=this.selectedOptions.some((i=>i.value===r.value))?this.selectedOptions.filter((i=>i.value!==r.value)):[...this.selectedOptions,r]}else i=[r],this.menuOpen=!1;const o=this.selectedOptions;this.selectedOptions=i,this.requestUpdate("selectedOptions",o),this._value=this.multiple?i:i[0],this.requestUpdate();const a=new CustomEvent("rarui-select-change",{detail:{value:this.multiple?i:i[0],selectedOptions:i}});this.dispatchEvent(a)}handleRemoveOption(r,i){if(i.preventDefault(),i.stopPropagation(),this.disabled)return;const o=this.selectedOptions.filter((i=>i.value!==r.value)),a=this.selectedOptions;this.selectedOptions=o,this.requestUpdate("selectedOptions",a),this._value=o;const n=new CustomEvent("rarui-select-change",{detail:{value:o,selectedOptions:o}});this.dispatchEvent(n)}renderHiddenFormInputs(){return this.name&&this.selectedOptions.length?this.multiple?this.selectedOptions.map((r=>N`
           <input
@@ -745,9 +751,9 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
         value="${this.selectedOptions[0]?.value||""}"
         form="${gr(this.form)}"
       />
-    `:F}handleResetOptions(r){if(r.preventDefault(),r.stopPropagation(),this.disabled)return;const i=this.selectedOptions;this.selectedOptions=[],this.requestUpdate("selectedOptions",i),this._value=[];const o=new CustomEvent("rarui-select-change",{detail:{value:[],selectedOptions:[]}});this.dispatchEvent(o)}handleDropdownOpenChange(r){!r.detail&&this.menuOpen&&(this.menuOpen=!1)}handleSelectClick(){this.disabled||(this.menuOpen=!this.menuOpen)}render(){const{className:r,style:i}=hi.sprinkle({maxHeight:this.maxHeight,...this.sprinkleAttrs});return N`
+    `:F}handleResetOptions(r){if(r.preventDefault(),r.stopPropagation(),this.disabled)return;const i=this.selectedOptions;this.selectedOptions=[],this.requestUpdate("selectedOptions",i),this._value=[];const o=new CustomEvent("rarui-select-change",{detail:{value:[],selectedOptions:[]}});this.dispatchEvent(o)}handleDropdownOpenChange(r){!r.detail&&this.menuOpen&&(this.menuOpen=!1)}handleSelectClick(){this.disabled||(this.menuOpen=!this.menuOpen)}render(){const{className:r,style:i}=hi.sprinkle({maxHeight:this.maxHeight,...this.sprinkleAttrs});return console.log("options",this.options),N`
       <rarui-dropdown
-        visible=${this.menuOpen}
+        ?visible=${this.menuOpen}
         ?enabled-click=${!1}
         ?enabled-dismiss=${!0}
         ?enabled-flip=${this.enabledFlip}
@@ -869,9 +875,9 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
                       size="medium"
                       id=${r.value}
                       label=${r.label}
-                      readonly=${!0}
+                      ?readonly=${!0}
                       name=${r.label}
-                      checked=${this.selectedOptions.some((i=>i.value===r.value))}
+                      ?checked=${this.selectedOptions.some((i=>i.value===r.value))}
                     ></rarui-checkbox>
                   </rarui-dropdown-item>
                 `:N`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rarui/components",
-  "version": "1.24.2-rc.2",
+  "version": "1.24.2-rc.4",
   "license": "MIT",
   "main": "dist/index.js",
   "type": "module",