@rarui/components 1.24.2-rc.3 → 1.24.2-rc.5

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.24.2-rc.3",
+  "version": "1.24.2-rc.5",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2633,11 +2633,26 @@
           "type": "boolean",
           "default": false
         },
+        {
+          "name": "label",
+          "description": "The label of the checkbox for form submission.",
+          "type": "string"
+        },
         {
           "name": "name",
           "description": "The name of the checkbox for form submission.",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "The name of the checkbox for form submission.",
+          "type": "boolean"
+        },
+        {
+          "name": "id",
+          "description": "The id of the checkbox for form submission.\n\n(Required)",
+          "type": "string"
+        },
         {
           "name": "value",
           "description": "The value of the checkbox when checked for form submission.",

package/dist/index.d.ts

@@ -18782,10 +18782,22 @@ type CheckboxManifestProperties = Pick<CheckboxProps, "error" | "size" | "indete
      * @default false
      */
     readonly?: boolean;
+    /**
+     * The label of the checkbox for form submission.
+     */
+    label?: string;
     /**
      * The name of the checkbox for form submission.
      */
     name?: string;
+    /**
+     * The name of the checkbox for form submission.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the checkbox for form submission.
+     */
+    id: string;
     /**
      * The value of the checkbox when checked for form submission.
      */
@@ -19233,10 +19245,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

@@ -388,11 +388,6 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
         name=${gr(this.name)}
         value=${gr(this.value)}
         form=${gr(this.form)}
-        aria-label=${gr(this.getAttribute("aria-label"))}
-        aria-labelledby=${gr(this.getAttribute("aria-labelledby"))}
-        aria-describedby=${gr(this.getAttribute("aria-describedby"))}
-        aria-pressed=${gr(this.getAttribute("aria-pressed"))}
-        aria-expanded=${gr(this.getAttribute("aria-expanded"))}
         @click=${this._handleClick}
       >
         <slot></slot>
@@ -408,7 +403,7 @@ const bo=Symbol.for(""),xo=r=>{if(r?.r===bo)return r?._$litStatic$},go=r=>({_$li
     :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`
+  `,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 console.log("lanel render",this.label),N`
       <label
         for="${this.readonly?"":this.id??""}"
         class="${Dr.classnames.label({error:this.error})}"
@@ -700,7 +695,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}
@@ -735,7 +730,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

package/package.json

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