ranui 0.2.0-alpha.4 → 0.2.0-alpha.6

package/dist/{select-BSeCT9tF.js → select-aAaWoveE.js}

@@ -3,9 +3,9 @@ import { t as x } from "./events-C59wGdni.js";
 import { _ as v, i as l, m as C, p as g, s as O } from "./factory-BdsO0dEW.js";
 import { a as f, n as _ } from "./ssr-DSGwPtEd.js";
 import { n as E } from "./icon-pfolda2m.js";
-import "./input-BM6e_LQr.js";
+import "./input-BMMM60e6.js";
 import "./dropdown-BYS1Trdu.js";
-var T = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-select-host-position, relative);display:var(--ran-select-host-display, inline-block);cursor:var(--ran-select-host-cursor, pointer);height:var(--ran-select-host-height, 32px);outline:var(--ran-select-host-outline, 0);-webkit-tap-highlight-color:var(--ran-select-host-tap-highlight-color, transparent)}:host,:host(:focus),:host(:active){outline:var(--ran-select-host-focus-outline, 0);-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:var(--ran-select-option-display, none)}:host([disabled]){cursor:var(--ran-select-host-disabled-cursor, not-allowed);pointer-events:var(--ran-select-host-disabled-pointer-events, all);opacity:var(--ran-select-host-disabled-opacity, .6)}:host(:not([disabled]):hover) .ran-select{cursor:var(--ran-select-host-hover-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection{border:var(--ran-select-selection-hover-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):hover) .selection-search{cursor:var(--ran-select-selection-hover-search-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection-item{cursor:var(--ran-select-selection-hover-item-cursor, pointer);color:var(--ran-select-selection-hover-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host([type="text"]) .selection{border:var(--ran-select-selection-text-border, none);background:var(--ran-select-selection-text-background, transparent)}:host([type="text"]) .icon{display:var(--ran-select-icon-text-display, none)}:host(:not([disabled],[type="text"]):focus) .selection{border:var(--ran-select-selection-focus-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):focus) .selection-search{cursor:var(--ran-select-selection-focus-search-cursor, pointer)}:host(:not([disabled],[type="text"]):focus) .selection-item{cursor:var(--ran-select-selection-focus-item-cursor, pointer);color:var(--ran-select-selection-focus-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host .selection-search{display:var(--ran-select-selection-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-selection-search-visible-cursor, text);display:var(--ran-select-selection-search-visible-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-selection-search-visible-item-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-selection-search-visible-display, block);cursor:var(--ran-select-selection-search-visible-cursor, text);opacity:var(--ran-select-selection-search-visible-opacity, 1)}.ran-select{width:var(--ran-select-root-width, 100%);height:var(--ran-select-root-height, 100%);font-size:var(--ran-select-root-font-size, 14px);box-sizing:var(--ran-select-root-box-sizing, border-box);margin:var(--ran-select-root-margin, 0);padding:var(--ran-select-root-padding, 0);color:var(--ran-select-root-color, var(--ran-color-text, rgba(0, 0, 0, .88)));line-height:var(--ran-select-root-line-height, 1.57142857);list-style:var(--ran-select-root-list-style, none);font-family:var(--ran-select-root-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));position:var(--ran-select-root-position, relative);display:var(--ran-select-root-display, inline-block)}.ran-select .selection{position:var(--ran-select-selection-position, relative);background-color:var(--ran-select-selection-background-color, var(--ran-color-bg-elevated, #ffffff));background-image:var(--ran-select-selection-background-image, none);border:var(--ran-select-selection-border, 1px solid var(--ran-color-border, #eaeaea));transition:var(--ran-select-selection-transition, border-color .2s cubic-bezier(.645, .045, .355, 1), box-shadow .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1));width:var(--ran-select-selection-width, 100%);height:var(--ran-select-selection-height, 100%);padding:var(--ran-select-selection-padding, 0 11px);box-sizing:var(--ran-select-selection-box-sizing, border-box);margin:var(--ran-select-selection-margin, 0);color:var(--ran-select-selection-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-select-selection-font-size, 14px);line-height:var(--ran-select-selection-line-height, 1.57142857);list-style:var(--ran-select-selection-list-style, none);font-family:var(--ran-select-selection-font-family, inherit);display:var(--ran-select-selection-display, flex);border-radius:var(--ran-select-selection-border-radius, var(--ran-radius-sm, 6px))}.ran-select .selection-search{position:var(--ran-select-selection-search-position, absolute);opacity:var(--ran-select-selection-search-opacity, 0);top:var(--ran-select-selection-search-top, 0);left:var(--ran-select-selection-search-left, 0);height:var(--ran-select-selection-search-height, 100%);inset-inline-start:var(--ran-select-selection-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-selection-search-inset-inline-end, 11px);margin:var(--ran-select-selection-search-margin, 0);padding:var(--ran-select-selection-search-padding, 0);background:var(--ran-select-selection-search-background, transparent);border:var(--ran-select-selection-search-border, none);outline:var(--ran-select-selection-search-outline, none);appearance:var(--ran-select-selection-search-appearance, none);font-family:var(--ran-select-selection-search-font-family, inherit);cursor:var(--ran-select-selection-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:var(--ran-select-selection-search-cancel-display, none);-webkit-appearance:var(--ran-select-selection-search-cancel-appearance, none)}.ran-select .selection-search::part(input){border:var(--ran-select-selection-search-input-border, none);padding:var(--ran-select-selection-search-input-padding, 0);height:100%;min-height:100%;box-sizing:border-box;outline:var(--ran-select-selection-search-input-outline, none)}.ran-select .selection-search::part(input):active{border:var(--ran-select-selection-search-input-active-border, none);padding:var(--ran-select-selection-search-input-active-padding, 0);height:var(--ran-select-selection-search-input-active-height, 100%);outline:var(--ran-select-selection-search-input-active-outline, none);border-color:var(--ran-select-selection-search-input-active-border-color, transparent);box-shadow:var(--ran-select-selection-search-input-active-box-shadow, none);border-right-width:var(--ran-select-selection-search-input-active-border-right-width, 0px)}.ran-select .selection-search::part(content){min-height:var(--ran-select-selection-search-input-content-min-height, 0)}.ran-select .selection-item{position:var(--ran-select-selection-item-position, absolute);top:var(--ran-select-selection-item-top, 0);left:var(--ran-select-selection-item-left, 12px);right:var(--ran-select-selection-item-right, 28px);margin:var(--ran-select-selection-item-margin, 0);padding:var(--ran-select-selection-item-padding, 0);background:var(--ran-select-selection-item-background, transparent);border:var(--ran-select-selection-item-border, none);outline:var(--ran-select-selection-item-outline, none);appearance:var(--ran-select-selection-item-appearance, none);font-family:var(--ran-select-selection-item-font-family, inherit);height:var(--ran-select-selection-item-height, 100%);display:var(--ran-select-selection-item-display, flex);align-items:var(--ran-select-selection-item-align-items, center);-webkit-user-select:var(--ran-select-selection-item-user-select, none);user-select:var(--ran-select-selection-item-user-select, none);overflow:var(--ran-select-selection-item-overflow, hidden);white-space:var(--ran-select-selection-item-white-space, nowrap);text-overflow:var(--ran-select-selection-item-text-overflow, ellipsis);cursor:var(--ran-select-selection-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-selection-select-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)))}.ran-select .selection .icon{display:var(--ran-select-selection-icon-display, flex);align-items:var(--ran-select-selection-icon-align-items, center);color:var(--ran-select-selection-icon-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)));font-style:var(--ran-select-selection-icon-font-style, normal);text-align:var(--ran-select-selection-icon-text-align, center);text-transform:var(--ran-select-selection-icon-text-transform, none);text-rendering:var(--ran-select-selection-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-selection-icon-position, absolute);top:var(--ran-select-selection-icon-top, 50%);inset-inline-start:var(--ran-select-selection-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-selection-icon-inset-inline-end, 8px);height:var(--ran-select-selection-icon-height, 16px);transform:var(--ran-select-selection-icon-transform, translateY(-50%));margin-top:var(--ran-select-selection-icon-margin-top, 0);font-size:var(--ran-select-selection-icon-font-size, 12px);pointer-events:var(--ran-select-selection-icon-pointer-events, none)}', L = {
+var T = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-select-host-position, relative);display:var(--ran-select-host-display, inline-block);cursor:var(--ran-select-host-cursor, pointer);height:var(--ran-select-host-height, 32px);outline:var(--ran-select-host-outline, 0);-webkit-tap-highlight-color:var(--ran-select-host-tap-highlight-color, transparent)}:host,:host(:focus),:host(:active){outline:var(--ran-select-host-focus-outline, 0);-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:var(--ran-select-option-display, none)}:host([disabled]){cursor:var(--ran-select-host-disabled-cursor, not-allowed);pointer-events:var(--ran-select-host-disabled-pointer-events, all);opacity:var(--ran-select-host-disabled-opacity, .6)}:host(:not([disabled]):hover) .ran-select{cursor:var(--ran-select-host-hover-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection{border:var(--ran-select-selection-hover-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):hover) .selection-search{cursor:var(--ran-select-selection-hover-search-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection-item{cursor:var(--ran-select-selection-hover-item-cursor, pointer);color:var(--ran-select-selection-hover-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host([type="text"]) .selection{border:var(--ran-select-selection-text-border, none);background:var(--ran-select-selection-text-background, transparent)}:host([type="text"]) .icon{display:var(--ran-select-icon-text-display, none)}:host(:not([disabled],[type="text"]):focus) .selection{border:var(--ran-select-selection-focus-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):focus) .selection-search{cursor:var(--ran-select-selection-focus-search-cursor, pointer)}:host(:not([disabled],[type="text"]):focus) .selection-item{cursor:var(--ran-select-selection-focus-item-cursor, pointer);color:var(--ran-select-selection-focus-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host .selection-search{display:var(--ran-select-selection-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-selection-search-visible-cursor, text);display:var(--ran-select-selection-search-visible-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-selection-search-visible-item-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-selection-search-visible-display, block);cursor:var(--ran-select-selection-search-visible-cursor, text);opacity:var(--ran-select-selection-search-visible-opacity, 1)}.ran-select{width:var(--ran-select-root-width, 100%);height:var(--ran-select-root-height, 100%);font-size:var(--ran-select-root-font-size, 14px);box-sizing:var(--ran-select-root-box-sizing, border-box);margin:var(--ran-select-root-margin, 0);padding:var(--ran-select-root-padding, 0);color:var(--ran-select-root-color, var(--ran-color-text, rgba(0, 0, 0, .88)));line-height:var(--ran-select-root-line-height, 1.57142857);list-style:var(--ran-select-root-list-style, none);font-family:var(--ran-select-root-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));position:var(--ran-select-root-position, relative);display:var(--ran-select-root-display, inline-block)}.ran-select .selection{position:var(--ran-select-selection-position, relative);background-color:var(--ran-select-selection-background-color, var(--ran-color-bg-elevated, #ffffff));background-image:var(--ran-select-selection-background-image, none);border:var(--ran-select-selection-border, 1px solid var(--ran-color-border, #eaeaea));transition:var(--ran-select-selection-transition, none);width:var(--ran-select-selection-width, 100%);height:var(--ran-select-selection-height, 100%);padding:var(--ran-select-selection-padding, 0 11px);box-sizing:var(--ran-select-selection-box-sizing, border-box);margin:var(--ran-select-selection-margin, 0);color:var(--ran-select-selection-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-select-selection-font-size, 14px);line-height:var(--ran-select-selection-line-height, 1.57142857);list-style:var(--ran-select-selection-list-style, none);font-family:var(--ran-select-selection-font-family, inherit);display:var(--ran-select-selection-display, flex);border-radius:var(--ran-select-selection-border-radius, var(--ran-radius-sm, 6px))}.ran-select .selection-search{position:var(--ran-select-selection-search-position, absolute);opacity:var(--ran-select-selection-search-opacity, 0);top:var(--ran-select-selection-search-top, 0);left:var(--ran-select-selection-search-left, 0);height:var(--ran-select-selection-search-height, 100%);inset-inline-start:var(--ran-select-selection-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-selection-search-inset-inline-end, 11px);margin:var(--ran-select-selection-search-margin, 0);padding:var(--ran-select-selection-search-padding, 0);background:var(--ran-select-selection-search-background, transparent);border:var(--ran-select-selection-search-border, none);outline:var(--ran-select-selection-search-outline, none);appearance:var(--ran-select-selection-search-appearance, none);font-family:var(--ran-select-selection-search-font-family, inherit);cursor:var(--ran-select-selection-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:var(--ran-select-selection-search-cancel-display, none);-webkit-appearance:var(--ran-select-selection-search-cancel-appearance, none)}.ran-select .selection-search::part(input){border:var(--ran-select-selection-search-input-border, none);padding:var(--ran-select-selection-search-input-padding, 0);height:100%;min-height:100%;box-sizing:border-box;outline:var(--ran-select-selection-search-input-outline, none)}.ran-select .selection-search::part(input):active{border:var(--ran-select-selection-search-input-active-border, none);padding:var(--ran-select-selection-search-input-active-padding, 0);height:var(--ran-select-selection-search-input-active-height, 100%);outline:var(--ran-select-selection-search-input-active-outline, none);border-color:var(--ran-select-selection-search-input-active-border-color, transparent);box-shadow:var(--ran-select-selection-search-input-active-box-shadow, none);border-right-width:var(--ran-select-selection-search-input-active-border-right-width, 0px)}.ran-select .selection-search::part(content){min-height:var(--ran-select-selection-search-input-content-min-height, 0)}.ran-select .selection-item{position:var(--ran-select-selection-item-position, absolute);top:var(--ran-select-selection-item-top, 0);left:var(--ran-select-selection-item-left, 12px);right:var(--ran-select-selection-item-right, 28px);margin:var(--ran-select-selection-item-margin, 0);padding:var(--ran-select-selection-item-padding, 0);background:var(--ran-select-selection-item-background, transparent);border:var(--ran-select-selection-item-border, none);outline:var(--ran-select-selection-item-outline, none);appearance:var(--ran-select-selection-item-appearance, none);font-family:var(--ran-select-selection-item-font-family, inherit);height:var(--ran-select-selection-item-height, 100%);display:var(--ran-select-selection-item-display, flex);align-items:var(--ran-select-selection-item-align-items, center);-webkit-user-select:var(--ran-select-selection-item-user-select, none);user-select:var(--ran-select-selection-item-user-select, none);overflow:var(--ran-select-selection-item-overflow, hidden);white-space:var(--ran-select-selection-item-white-space, nowrap);text-overflow:var(--ran-select-selection-item-text-overflow, ellipsis);cursor:var(--ran-select-selection-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-selection-select-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)))}.ran-select .selection .icon{display:var(--ran-select-selection-icon-display, flex);align-items:var(--ran-select-selection-icon-align-items, center);color:var(--ran-select-selection-icon-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)));font-style:var(--ran-select-selection-icon-font-style, normal);text-align:var(--ran-select-selection-icon-text-align, center);text-transform:var(--ran-select-selection-icon-text-transform, none);text-rendering:var(--ran-select-selection-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-selection-icon-position, absolute);top:var(--ran-select-selection-icon-top, 50%);inset-inline-start:var(--ran-select-selection-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-selection-icon-inset-inline-end, 8px);height:var(--ran-select-selection-icon-height, 16px);transform:var(--ran-select-selection-icon-transform, translateY(-50%));margin-top:var(--ran-select-selection-icon-margin-top, 0);font-size:var(--ran-select-selection-icon-font-size, 12px);pointer-events:var(--ran-select-selection-icon-pointer-events, none)}', L = {
   success: !0,
   _identification: !0,
   data: `<svg viewBox="0 0 1024 1024" width="200" height="200" version="1.1"
@@ -62,7 +62,7 @@ var T = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transpar
   }
 };
 f("r-option", P);
-var M = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ranui-dropdown-option-item{position:var(--ran-dropdown-option-item-position, relative);display:var(--ran-dropdown-option-item-display, block);padding:var(--ran-dropdown-option-item-padding, 5px 12px);color:var(--ran-dropdown-option-item-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-weight:var(--ran-dropdown-option-item-font-weight, normal);font-size:var(--ran-dropdown-option-item-font-size, 14px);transition:var(--ran-dropdown-option-item-transition, background var(--ran-motion-duration-base, .2s) ease);border-radius:var(--ran-dropdown-option-item-border-radius, var(--ran-radius-sm, 6px));cursor:var(--ran-dropdown-option-item-cursor, pointer)}.ranui-dropdown-option-item:hover{background-color:var(--ran-dropdown-option-item-hover-background-color, var(--ran-gray-alpha-100, rgba(0, 0, 0, .04)))}.ranui-dropdown-option-item-content{text-align:var(--ran-dropdown-option-item-content-text-align, left);overflow:var(--ran-dropdown-option-item-content-overflow, hidden);white-space:var(--ran-dropdown-option-item-content-white-space, nowrap);text-overflow:var(--ran-dropdown-option-item-content-text-overflow, ellipsis);color:var(--ran-dropdown-option-item-content-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-option-item-content-font-size, 14px);line-height:var(--ran-dropdown-option-item-content-line-height, 1.57142857);box-sizing:var(--ran-dropdown-option-item-content-box-sizing, border-box);list-style:var(--ran-dropdown-option-item-content-list-style, none);font-family:var(--ran-dropdown-option-item-content-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-variant:var(--ran-dropdown-option-item-content-font-variant, initial)}.ranui-dropdown-option-active{background-color:var(--ran-dropdown-option-active-background-color, var(--ran-blue-100, #e6f7ff));font-weight:var(--ran-dropdown-option-active-font-weight, bold)}.ranui-dropdown-option-active:hover{background-color:var(--ran-dropdown-option-active-hover-background-color, var(--ran-blue-100, #e6f7ff))}', B = class extends _ {
+var M = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ranui-dropdown-option-item{position:var(--ran-dropdown-option-item-position, relative);display:var(--ran-dropdown-option-item-display, block);padding:var(--ran-dropdown-option-item-padding, 5px 12px);color:var(--ran-dropdown-option-item-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-weight:var(--ran-dropdown-option-item-font-weight, normal);font-size:var(--ran-dropdown-option-item-font-size, 14px);transition:var(--ran-dropdown-option-item-transition, none);border-radius:var(--ran-dropdown-option-item-border-radius, var(--ran-radius-sm, 6px));cursor:var(--ran-dropdown-option-item-cursor, pointer)}.ranui-dropdown-option-item:hover{background-color:var(--ran-dropdown-option-item-hover-background-color, var(--ran-gray-alpha-100, rgba(0, 0, 0, .04)))}.ranui-dropdown-option-item-content{text-align:var(--ran-dropdown-option-item-content-text-align, left);overflow:var(--ran-dropdown-option-item-content-overflow, hidden);white-space:var(--ran-dropdown-option-item-content-white-space, nowrap);text-overflow:var(--ran-dropdown-option-item-content-text-overflow, ellipsis);color:var(--ran-dropdown-option-item-content-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-option-item-content-font-size, 14px);line-height:var(--ran-dropdown-option-item-content-line-height, 1.57142857);box-sizing:var(--ran-dropdown-option-item-content-box-sizing, border-box);list-style:var(--ran-dropdown-option-item-content-list-style, none);font-family:var(--ran-dropdown-option-item-content-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-variant:var(--ran-dropdown-option-item-content-font-variant, initial)}.ranui-dropdown-option-active{background-color:var(--ran-dropdown-option-active-background-color, var(--ran-blue-100, #e6f7ff));font-weight:var(--ran-dropdown-option-active-font-weight, bold)}.ranui-dropdown-option-active:hover{background-color:var(--ran-dropdown-option-active-hover-background-color, var(--ran-blue-100, #e6f7ff))}', B = class extends _ {
   ionDropdownItem;
   _slot;
   _shadowDom;
@@ -133,7 +133,7 @@ var A = {
   }
 };
 E("arrow-down", L);
-var z = k(), I = 300, V = class extends _ {
+var V = k(), I = 300, z = class extends _ {
   static formAssociated = !0;
   _internals;
   _events = new x();
@@ -434,7 +434,7 @@ var z = k(), I = 300, V = class extends _ {
     this.handlerExternalCss(), this.createOption(), this.initAria(), this.syncFormValue(), this._events.on(this._slot, "slotchange", this.addOptionToSlot).on(this, "keydown", this.keydownSelect).on(document, "click", this.clickRemoveSelect), this.trigger.includes("hover") && !u() && this._events.on(this, "mouseenter", this.selectMouseDown).on(this, "mouseleave", this.selectBlur), this.trigger.includes("click") && this._events.on(this, "click", this.selectMouseDown).on(this, "blur", this.selectBlur), this._applyShowSearch();
   }
   _applyShowSearch = () => {
-    this._searchEvents.abort(), this.showSearch && (this.onSearch = z(this.changeSearch), this.onSearch && this._searchEvents.on(this._search, "change", this.onSearch).on(this._search, "click", this.onSearch));
+    this._searchEvents.abort(), this.showSearch && (this.onSearch = V(this.changeSearch), this.onSearch && this._searchEvents.on(this._search, "change", this.onSearch).on(this._search, "click", this.onSearch));
   };
   disconnectedCallback() {
     this._events.abort(), this._searchEvents.abort(), this._detachReposition(), this.removeSelectDropdown();
@@ -448,7 +448,7 @@ var z = k(), I = 300, V = class extends _ {
     t && this.selectOptionElement(t, !1);
   };
 };
-f("r-select", V);
+f("r-select", z);
 export {
-  V as t
+  z as t
 };

package/dist/select.js

@@ -1,4 +1,4 @@
-import { t as e } from "./select-BSeCT9tF.js";
+import { t as e } from "./select-aAaWoveE.js";
 export {
   e as Select,
   e as default

package/dist/{tab-CqFrgo2v.js → tab-CiF2YPck.js}

@@ -2,7 +2,7 @@ import { a as b, i as f, n as v, r as d, s as c, t as p } from "./utils-DBfrRFoE
 import { t as u } from "./events-C59wGdni.js";
 import { _ as g, i as h, p as y } from "./factory-BdsO0dEW.js";
 import { a as A, n as _ } from "./ssr-DSGwPtEd.js";
-var w = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--ran-tab-active-color, var(--ran-color-primary, #006bff))}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));transition:var(--ran-tab-line-transition, .2s)}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:var(--ran-tab-content-transition, .2s)}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));border:solid 1px transparent;border-color:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) transparent;border-radius:var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2)))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}', x = 0, m = class extends _ {
+var w = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--ran-tab-active-color, var(--ran-color-primary, #006bff))}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));transition:var(--ran-tab-line-transition, left .2s, width .2s, transform .2s)}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:var(--ran-tab-content-transition, transform .2s)}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-tab-header-nav .active{color:var(--ran-tab-line-color, var(--ran-color-primary, #006bff));border:solid 1px transparent;border-color:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2))) transparent;border-radius:var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) var(--ran-tab-border-radius, var(--ran-radius-sm, .25em)) 0 0}:host([type="line"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-tab-header-line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--ran-tab-border-color, var(--ran-color-border, rgba(0, 0, 0, .2)))}:host([type="line"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}', x = 0, m = class extends _ {
   static get observedAttributes() {
     return [
       "active",

package/dist/tab.js

@@ -1,4 +1,4 @@
-import { t } from "./tab-CqFrgo2v.js";
+import { t } from "./tab-CiF2YPck.js";
 export {
   t as Tabs,
   t as default

package/dist/{theme-switch-B8K9y2RL.js → theme-switch-B_FZvqBN.js}

@@ -1,7 +1,7 @@
 import { a as u, i as m, n as b, r as v, t as f } from "./utils-DBfrRFoE.js";
 import { t as g } from "./events-C59wGdni.js";
 import { a as p, n as w } from "./ssr-DSGwPtEd.js";
-var i = "ran-theme", a = null, s = null, o = (e) => {
+var i = "ran-theme", s = null, a = null, o = (e) => {
   if (e && "style" in e) return e;
   if (e && "documentElement" in e) return e.documentElement;
   if (!(typeof document > "u"))
@@ -10,13 +10,13 @@ var i = "ran-theme", a = null, s = null, o = (e) => {
   const t = typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches;
   e.setAttribute("data-ran-theme", t ? "dark" : "light"), e.setAttribute("theme", t ? "dark" : "light");
 }, y = () => {
-  a && s && (a.removeEventListener("change", s), a = null, s = null);
+  s && a && (s.removeEventListener("change", a), s = null, a = null);
 }, d = (e, t) => {
   const r = o(t);
   if (r) {
     if (y(), e === "system") {
       if (typeof window > "u") return;
-      l(r), a = window.matchMedia("(prefers-color-scheme: dark)"), s = () => l(r), a.addEventListener("change", s);
+      l(r), s = window.matchMedia("(prefers-color-scheme: dark)"), a = () => l(r), s.addEventListener("change", a);
       try {
         localStorage.setItem(i, "system");
       } catch {
@@ -62,7 +62,7 @@ var i = "ran-theme", a = null, s = null, o = (e) => {
       (t === "light" || t === "dark" || t === "system") && d(t, e);
     } catch {
     }
-}, E = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-theme-switch-display, inline-flex);box-sizing:border-box}.ran-theme-switch{display:inline-flex;align-items:center;gap:var(--ran-theme-switch-gap, 2px);padding:var(--ran-theme-switch-padding, 2px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-theme-switch-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:var(--ran-theme-switch-background, transparent);box-sizing:border-box}.ran-theme-switch button{width:var(--ran-theme-switch-button-size, 28px);height:var(--ran-theme-switch-button-size, 28px);display:grid;place-items:center;border:none;border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:transparent;color:var(--ran-theme-switch-color, var(--ran-color-text-secondary, #4d4d4d));cursor:pointer;padding:0;transition:color var(--ran-motion-duration-fast, .15s) ease}.ran-theme-switch button:hover{color:var(--ran-theme-switch-hover-color, var(--ran-color-text, #171717))}.ran-theme-switch button[aria-pressed=true]{background:var(--ran-theme-switch-active-background, var(--ran-color-bg-hover, #ebebeb));color:var(--ran-theme-switch-active-color, var(--ran-color-text, #171717))}.ran-theme-switch button:focus-visible{outline:var(--ran-theme-switch-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:2px}.ran-theme-switch svg{width:var(--ran-theme-switch-icon-size, 16px);height:var(--ran-theme-switch-icon-size, 16px)}", h = [
+}, E = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-theme-switch-display, inline-flex);box-sizing:border-box}.ran-theme-switch{display:inline-flex;align-items:center;gap:var(--ran-theme-switch-gap, 2px);padding:var(--ran-theme-switch-padding, 2px);border-width:var(--ran-skin-border-width, 1px);border-style:var(--ran-skin-border-style, solid);border-color:var(--ran-theme-switch-border-color, var(--ran-color-border, #eaeaea));border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:var(--ran-theme-switch-background, transparent);box-sizing:border-box}.ran-theme-switch button{width:var(--ran-theme-switch-button-size, 28px);height:var(--ran-theme-switch-button-size, 28px);display:grid;place-items:center;border:none;border-radius:var(--ran-theme-switch-radius, var(--ran-radius-full, 9999px));background:transparent;color:var(--ran-theme-switch-color, var(--ran-color-text-secondary, #4d4d4d));cursor:pointer;padding:0}.ran-theme-switch button:hover{color:var(--ran-theme-switch-hover-color, var(--ran-color-text, #171717))}.ran-theme-switch button[aria-pressed=true]{background:var(--ran-theme-switch-active-background, var(--ran-color-bg-hover, #ebebeb));color:var(--ran-theme-switch-active-color, var(--ran-color-text, #171717))}.ran-theme-switch button:focus-visible{outline:var(--ran-theme-switch-focus-outline, 2px solid var(--ran-color-primary, #006bff));outline-offset:2px}.ran-theme-switch svg{width:var(--ran-theme-switch-icon-size, 16px);height:var(--ran-theme-switch-icon-size, 16px)}", h = [
   "system",
   "light",
   "dark"

package/dist/theme-switch.js

@@ -1,4 +1,4 @@
-import { t as e } from "./theme-switch-B8K9y2RL.js";
+import { t as e } from "./theme-switch-B_FZvqBN.js";
 export {
   e as ThemeSwitch,
   e as default

package/docs/DESIGN.md

@@ -142,20 +142,30 @@ Durations: `--ran-motion-duration-fast` `0.15s`, `--ran-motion-duration-base` `0
 
 **Principle:** the bigger the change, the more time it earns. Otherwise: don't animate. Keep motion quick, light, and restrained. Respect `prefers-reduced-motion`.
 
-**Never animate a theme switch.** Transitions are for _interaction_ (hover / focus / press), not for flipping light↔dark. A structural surface that declares `transition: all` will, on a theme toggle, fade its `background-color` from the light value to the dark value over the transition duration — a visible white→dark flash while the rest of the page has already flipped. Rules:
+**Never animate a theme switch.** Transitions are for _interaction_ (hover / focus / press), not for flipping light↔dark. CSS cannot tell _why_ a property changed: any palette prop listed in a `transition` will also fade when the theme flips its token — each component at its own duration, while the host page has already switched. A general-purpose library must not impose that on its consumers. Rules:
 
-- Do **not** put `background` / `background-color` in a `transition` on any surface that carries a theme-driven color. List the interaction props explicitly (`border-color`, `box-shadow`, `color`, `opacity`, `transform`) — never `all`.
-- `transition: all` is banned in component styles for this reason; it also silently animates properties you never intended.
+- **Palette props never get a default transition.** `background` / `background-color`, `color`, `border-color`, `box-shadow`, `fill`, `stroke` — none of them, on any element that carries a theme-driven color. Hover/focus feedback on these props snaps.
+- **Motion props may transition.** `transform`, `opacity`, and box-geometry props (`left` / `top` / `width` / `height` / `font-size`) don't follow the theme — checkbox pops, floating labels, tab ink-bars, ripples all stay animated.
+- `transition: all` and bare-duration shorthands (`transition: 0.2s` — which means `all`) are banned; they silently include palette props.
+- Every removed default keeps its `--ran-*-transition` hook var, so a consumer who wants palette fades can opt in per component.
 
 ```less
-/* ✗ flashes on theme switch */
+/* ✗ fades on theme switch (palette props; `all`; bare duration = all) */
 transition: all var(--ran-motion-duration-base, 0.2s);
-
-/* ✓ interaction only — theme flip is instant */
+transition: 0.2s;
 transition:
-  border-color var(--ran-motion-duration-base, 0.2s),
-  box-shadow var(--ran-motion-duration-base, 0.2s),
-  color var(--ran-motion-duration-base, 0.2s);
+  border-color 0.2s,
+  color 0.2s;
+
+/* ✓ motion props only — theme flip is instant, interaction still animates */
+transition: var(
+  --ran-checkbox-inner-after-transition,
+  transform 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
+  opacity 0.1s
+);
+
+/* ✓ no motion at all, with an opt-in hook for consumers */
+transition: var(--ran-input-transition, none);
 ```
 
 ---

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ranui",
-  "version": "0.2.0-alpha.4",
-  "description": "UI Component library based on `Web Component`",
+  "version": "0.2.0-alpha.6",
+  "description": "A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "type": "module",
@@ -47,16 +47,23 @@
     "docs/style-tokens-public.md"
   ],
   "keywords": [
+    "ranui",
     "ran",
+    "web-components",
+    "web components",
+    "custom-elements",
+    "custom-element",
+    "shadow-dom",
+    "framework-agnostic",
     "component",
     "components",
     "ui",
+    "ui-library",
+    "component-library",
     "design",
-    "web-components",
-    "web components",
-    "webComponents",
-    "ranui",
-    "lib"
+    "typescript",
+    "ssr",
+    "pwa"
   ],
   "exports": {
     ".": {
@@ -237,7 +244,7 @@
     "vitest": "^4.1.10"
   },
   "dependencies": {
-    "ranuts": "^0.2.0-alpha.0"
+    "ranuts": "^0.2.0-alpha.1"
   },
   "scripts": {
     "dev": "vite --host",

package/dist/button-CJFSrjq_.js

@@ -1,117 +0,0 @@
-import { _ as i, a as b, n as d, o as l, s as a, t as h } from "./utils-DBfrRFoE.js";
-import { t as v } from "./events-C59wGdni.js";
-import { _ as u, i as s, p as f } from "./factory-BdsO0dEW.js";
-import { a as g, n as p } from "./ssr-DSGwPtEd.js";
-var m = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-contain-box-sizing, border-box);position:var(--ran-btn-contain-position, relative);display:var(--ran-btn-contain-display, block);background-image:var(--ran-btn-contain-background-image, none);cursor:var(--ran-btn-contain-cursor, pointer);transition:var(--ran-btn-contain-transition, color var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), border-color var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), box-shadow var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1), opacity var(--ran-motion-duration-base, .2s) cubic-bezier(.645, .045, .355, 1));-webkit-user-select:var(--ran-btn-contain-user-select, none);user-select:var(--ran-btn-contain-user-select, none);touch-action:var(--ran-btn-contain-touch-action, manipulation);border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));background:var(--ran-btn-contain-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-contain-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-primary, #006bff));color:var(--ran-btn-content-color, #fff)}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-primary-active, #005ff2));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-primary-active, #005ff2))}:host([type="contrast"]) .ran-btn-content{background-color:var(--ran-btn-content-background-color, var(--ran-color-contrast-bg, #171717));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-content-border-color, var(--ran-color-contrast-bg, #171717));color:var(--ran-btn-content-color, var(--ran-color-contrast-text, #fff))}:host([type="contrast"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, var(--ran-color-contrast-text, #fff) 10%, transparent 10.01%))}:host([type="contrast"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-content-active-background-color, var(--ran-color-contrast-bg-active, #4d4d4d));border-color:var(--ran-btn-content-active-border-color, var(--ran-color-contrast-bg-active, #4d4d4d))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-border-hover, #c9c9c9));color:var(--ran-btn-content-hover-color, var(--ran-color-text, #171717))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-primary-hover, #0059ec));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-primary-hover, #0059ec));color:var(--ran-btn-content-hover-color, #fff)}:host([type="contrast"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-content-hover-background-color, var(--ran-color-contrast-bg-hover, #383838));border-color:var(--ran-btn-content-hover-border-color, var(--ran-color-contrast-bg-hover, #383838));color:var(--ran-btn-content-hover-color, var(--ran-color-contrast-text, #fff))}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-content-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-content-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-content-warning-background-color, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-content-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-content-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-disabled-container-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-container-pointer-events, all);opacity:var(--ran-btn-disabled-container-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,var(--ran-gray-alpha-400, #00000014) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}}:host .slot{display:var(--ran-btn-slot-display, block)}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-display, space-between);align-items:var(--ran-btn-content-align-items, center);padding:var(--ran-btn-content-padding, 4px 15px);border:var(--ran-btn-content-border, 1px solid transparent);border-image-source:var(--ran-btn-content-border-image-source, none);border-image-slice:var(--ran-btn-content-border-image-slice, 8);border-image-width:var(--ran-btn-content-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-content-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-content-border-color, var(--ran-color-border, #eaeaea));color:var(--ran-btn-content-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-content-line-height, 22px);font-size:var(--ran-btn-content-font-size, 14px);font-weight:var(--ran-btn-content-font-weight, 400);font-family:var(--ran-btn-content-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-content-white-space, nowrap);text-align:var(--ran-btn-content-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box)}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, 2px)}', y = class extends p {
-  _btn;
-  _btnContent;
-  _iconElement;
-  _slot;
-  _shadowDom;
-  _events = new v();
-  debounceTimeId;
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "icon",
-      "effect",
-      "iconSize",
-      "type",
-      "sheet"
-    ];
-  }
-  constructor() {
-    super(), this._shadowDom = d(this, m);
-    const t = h(this._shadowDom, ".ran-btn", () => s().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(s().class("ran-btn-content").attr("part", "content").children(f().class("slot"))).build());
-    this._btn = t, this._btnContent = t.querySelector(".ran-btn-content"), this._slot = t.querySelector("slot");
-  }
-  get sheet() {
-    return this.getAttribute("sheet") || "";
-  }
-  set sheet(t) {
-    this.setAttribute("sheet", t || ""), this.handlerExternalCss();
-  }
-  get disabled() {
-    return a(this);
-  }
-  set disabled(t) {
-    !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
-  }
-  get iconSize() {
-    return this.getAttribute("iconSize") || "";
-  }
-  set iconSize(t) {
-    !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
-  }
-  get icon() {
-    return this.getAttribute("icon") || "";
-  }
-  set icon(t) {
-    !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
-  }
-  get effect() {
-    return this.getAttribute("effect") || "";
-  }
-  set effect(t) {
-    l.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
-  }
-  get type() {
-    return this.getAttribute("type") || "";
-  }
-  set type(t) {
-    t ? this.setAttribute("type", t) : this.removeAttribute("type");
-  }
-  setIcon = () => {
-    if (typeof document > "u" || !this._slot) return;
-    const t = this.icon;
-    if (!t) {
-      this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
-      return;
-    }
-    if (this._iconElement) this._iconElement.setAttribute("name", t);
-    else {
-      let e = this._shadowDom.querySelector("r-icon");
-      e || (e = u("r-icon").attr("color", "currentColor").class("icon").build(), this._slot.insertAdjacentElement("beforebegin", e)), this._iconElement = e, this._iconElement.setAttribute("name", t);
-    }
-    const { width: n, height: r } = this._slot.getBoundingClientRect(), o = Math.min(n, r) || 16, c = this.iconSize || `${o > 5 ? o - 5 : o}`;
-    this._iconElement.setAttribute("size", String(c));
-  };
-  mousedown = (t) => {
-    if (i() === "pc" && !this.disabled) {
-      this.debounceMouseEvent();
-      const { left: n, top: r } = this.getBoundingClientRect();
-      this._btn.style.setProperty("--ran-x", `${t.clientX - n}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - r}px`);
-    }
-  };
-  mouseup = () => {
-    i() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
-      this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
-    }, 600)));
-  };
-  keydown = (t) => {
-    a(this) || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
-  };
-  debounceMouseEvent = () => {
-    this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
-  };
-  handlerExternalCss = () => {
-    b(this, this._shadowDom, "sheet", null, this.sheet);
-  };
-  syncA11yState = () => {
-    const t = a(this);
-    this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
-  };
-  connectedCallback() {
-    this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
-  }
-  disconnectedCallback() {
-    this.debounceMouseEvent(), this._events.abort();
-  }
-  attributeChangedCallback(t, n, r) {
-    n !== r && (t === "disabled" && this._btnContent && this.syncA11yState(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
-  }
-};
-g("r-button", y);
-export {
-  y as t
-};