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

package/custom-elements.json

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

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`
@@ -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.3",
   "license": "MIT",
   "main": "dist/index.js",
   "type": "module",