@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-form.min.css

@@ -0,0 +1,123 @@
+@charset "UTF-8";.fanui-form{display:block}
+.fanui-form-item{margin-bottom:var(--fanui-space-5)}
+.fanui-form-item:last-child{margin-bottom:0}
+.fanui-form--horizontal .fanui-form-item{display:flex;align-items:flex-start;gap:var(--fanui-space-4)}
+.fanui-form--horizontal .fanui-form-item>.fanui-form-label{flex:0 0 auto;width:var(--fanui-form-label-width,120px);padding-top:8px;margin-bottom:0;text-align:end}
+.fanui-form--horizontal .fanui-form-item>.fanui-form-content{flex:1 1 auto;min-width:0}@media (max-width:575.95px){.fanui-form--horizontal .fanui-form-item{display:block}
+.fanui-form--horizontal .fanui-form-item>.fanui-form-label{width:auto;text-align:start;padding-top:0;margin-bottom:var(--fanui-space-2)}}
+.fanui-form--inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--fanui-space-4)}
+.fanui-form--inline .fanui-form-item{margin-bottom:0;flex:0 1 auto}
+.fanui-form-label,.fanui-label{display:inline-block;margin-bottom:var(--fanui-space-2);font-size:var(--fanui-font-size-base);font-weight:500;line-height:1.5;color:var(--fanui-color-text)}
+.fanui-form-label--required::after,.fanui-form-label.is-required::after,.fanui-label--required::after,.fanui-label.is-required::after{content:"*";margin-inline-start:4px;color:var(--fanui-danger)}
+.fanui-form-label--optional::after,.fanui-label--optional::after{content:"(选填)";margin-inline-start:6px;font-weight:400;color:var(--fanui-color-text-subtle);font-size:var(--fanui-font-size-xs)}
+.fanui-form-help{display:block;margin-top:var(--fanui-space-1);font-size:var(--fanui-font-size-sm);line-height:1.5;color:var(--fanui-color-text-muted)}
+.fanui-form-control{display:block;width:100%;min-height:36px;padding:6.5px 14px;font-family:inherit;font-size:14px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:6px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control:focus,.fanui-form-control:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control:focus,.fanui-form-control:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control:disabled,.fanui-form-control.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control[readonly]{background-color:var(--fanui-color-surface-sunken)}
+textarea.fanui-form-control,.fanui-textarea{min-height:88px;padding-top:8px;padding-bottom:8px;line-height:var(--fanui-line-height-base);resize:vertical}
+.fanui-form-control--xs,.fanui-textarea--xs,.fanui-select--xs{display:block;width:100%;min-height:24px;padding:2px 8px;font-family:inherit;font-size:12px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:2px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control--xs::placeholder,.fanui-textarea--xs::placeholder,.fanui-select--xs::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xs::-webkit-input-placeholder,.fanui-textarea--xs::-webkit-input-placeholder,.fanui-select--xs::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xs::-moz-placeholder,.fanui-textarea--xs::-moz-placeholder,.fanui-select--xs::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xs:-ms-input-placeholder,.fanui-textarea--xs:-ms-input-placeholder,.fanui-select--xs:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xs:hover:not(:disabled):not(.is-disabled),.fanui-textarea--xs:hover:not(:disabled):not(.is-disabled),.fanui-select--xs:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control--xs:focus,.fanui-form-control--xs:focus-visible,.fanui-textarea--xs:focus,.fanui-textarea--xs:focus-visible,.fanui-select--xs:focus,.fanui-select--xs:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control--xs:focus,.fanui-form-control--xs:focus-visible,.fanui-textarea--xs:focus,.fanui-textarea--xs:focus-visible,.fanui-select--xs:focus,.fanui-select--xs:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control--xs:disabled,.fanui-form-control--xs.is-disabled,.fanui-textarea--xs:disabled,.fanui-textarea--xs.is-disabled,.fanui-select--xs:disabled,.fanui-select--xs.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control--xs[readonly],.fanui-textarea--xs[readonly],.fanui-select--xs[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-form-control--sm,.fanui-textarea--sm,.fanui-select--sm{display:block;width:100%;min-height:28px;padding:3.25px 10px;font-family:inherit;font-size:13px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:2px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control--sm::placeholder,.fanui-textarea--sm::placeholder,.fanui-select--sm::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--sm::-webkit-input-placeholder,.fanui-textarea--sm::-webkit-input-placeholder,.fanui-select--sm::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--sm::-moz-placeholder,.fanui-textarea--sm::-moz-placeholder,.fanui-select--sm::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--sm:-ms-input-placeholder,.fanui-textarea--sm:-ms-input-placeholder,.fanui-select--sm:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--sm:hover:not(:disabled):not(.is-disabled),.fanui-textarea--sm:hover:not(:disabled):not(.is-disabled),.fanui-select--sm:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control--sm:focus,.fanui-form-control--sm:focus-visible,.fanui-textarea--sm:focus,.fanui-textarea--sm:focus-visible,.fanui-select--sm:focus,.fanui-select--sm:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control--sm:focus,.fanui-form-control--sm:focus-visible,.fanui-textarea--sm:focus,.fanui-textarea--sm:focus-visible,.fanui-select--sm:focus,.fanui-select--sm:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control--sm:disabled,.fanui-form-control--sm.is-disabled,.fanui-textarea--sm:disabled,.fanui-textarea--sm.is-disabled,.fanui-select--sm:disabled,.fanui-select--sm.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control--sm[readonly],.fanui-textarea--sm[readonly],.fanui-select--sm[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-form-control--md,.fanui-textarea--md,.fanui-select--md{display:block;width:100%;min-height:32px;padding:4.5px 12px;font-family:inherit;font-size:14px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:6px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control--md::placeholder,.fanui-textarea--md::placeholder,.fanui-select--md::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--md::-webkit-input-placeholder,.fanui-textarea--md::-webkit-input-placeholder,.fanui-select--md::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--md::-moz-placeholder,.fanui-textarea--md::-moz-placeholder,.fanui-select--md::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--md:-ms-input-placeholder,.fanui-textarea--md:-ms-input-placeholder,.fanui-select--md:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--md:hover:not(:disabled):not(.is-disabled),.fanui-textarea--md:hover:not(:disabled):not(.is-disabled),.fanui-select--md:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control--md:focus,.fanui-form-control--md:focus-visible,.fanui-textarea--md:focus,.fanui-textarea--md:focus-visible,.fanui-select--md:focus,.fanui-select--md:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control--md:focus,.fanui-form-control--md:focus-visible,.fanui-textarea--md:focus,.fanui-textarea--md:focus-visible,.fanui-select--md:focus,.fanui-select--md:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control--md:disabled,.fanui-form-control--md.is-disabled,.fanui-textarea--md:disabled,.fanui-textarea--md.is-disabled,.fanui-select--md:disabled,.fanui-select--md.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control--md[readonly],.fanui-textarea--md[readonly],.fanui-select--md[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-form-control--lg,.fanui-textarea--lg,.fanui-select--lg{display:block;width:100%;min-height:40px;padding:7px 16px;font-family:inherit;font-size:16px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:8px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control--lg::placeholder,.fanui-textarea--lg::placeholder,.fanui-select--lg::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--lg::-webkit-input-placeholder,.fanui-textarea--lg::-webkit-input-placeholder,.fanui-select--lg::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--lg::-moz-placeholder,.fanui-textarea--lg::-moz-placeholder,.fanui-select--lg::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--lg:-ms-input-placeholder,.fanui-textarea--lg:-ms-input-placeholder,.fanui-select--lg:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--lg:hover:not(:disabled):not(.is-disabled),.fanui-textarea--lg:hover:not(:disabled):not(.is-disabled),.fanui-select--lg:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control--lg:focus,.fanui-form-control--lg:focus-visible,.fanui-textarea--lg:focus,.fanui-textarea--lg:focus-visible,.fanui-select--lg:focus,.fanui-select--lg:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control--lg:focus,.fanui-form-control--lg:focus-visible,.fanui-textarea--lg:focus,.fanui-textarea--lg:focus-visible,.fanui-select--lg:focus,.fanui-select--lg:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control--lg:disabled,.fanui-form-control--lg.is-disabled,.fanui-textarea--lg:disabled,.fanui-textarea--lg.is-disabled,.fanui-select--lg:disabled,.fanui-select--lg.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control--lg[readonly],.fanui-textarea--lg[readonly],.fanui-select--lg[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-form-control--xl,.fanui-textarea--xl,.fanui-select--xl{display:block;width:100%;min-height:48px;padding:9.5px 20px;font-family:inherit;font-size:18px;line-height:1.5;color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:8px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-form-control--xl::placeholder,.fanui-textarea--xl::placeholder,.fanui-select--xl::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xl::-webkit-input-placeholder,.fanui-textarea--xl::-webkit-input-placeholder,.fanui-select--xl::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xl::-moz-placeholder,.fanui-textarea--xl::-moz-placeholder,.fanui-select--xl::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xl:-ms-input-placeholder,.fanui-textarea--xl:-ms-input-placeholder,.fanui-select--xl:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-form-control--xl:hover:not(:disabled):not(.is-disabled),.fanui-textarea--xl:hover:not(:disabled):not(.is-disabled),.fanui-select--xl:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-form-control--xl:focus,.fanui-form-control--xl:focus-visible,.fanui-textarea--xl:focus,.fanui-textarea--xl:focus-visible,.fanui-select--xl:focus,.fanui-select--xl:focus-visible{border-color:var(--fanui-primary);outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-form-control--xl:focus,.fanui-form-control--xl:focus-visible,.fanui-textarea--xl:focus,.fanui-textarea--xl:focus-visible,.fanui-select--xl:focus,.fanui-select--xl:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-form-control--xl:disabled,.fanui-form-control--xl.is-disabled,.fanui-textarea--xl:disabled,.fanui-textarea--xl.is-disabled,.fanui-select--xl:disabled,.fanui-select--xl.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-form-control--xl[readonly],.fanui-textarea--xl[readonly],.fanui-select--xl[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-form-control--flush{border-color:transparent;background-color:transparent;border-radius:0}
+.fanui-form-control--flush:hover:not(:disabled){border-color:transparent;background-color:var(--fanui-color-hover)}
+.fanui-form-control--flush:focus{border-color:transparent;box-shadow:none;background-color:var(--fanui-color-surface)}
+.fanui-form-control--underline{border-width:0 0 1px 0;border-radius:0;background-color:transparent;padding-inline-start:0;padding-inline-end:0}
+.fanui-form-control--underline:focus{box-shadow:none;border-bottom-color:var(--fanui-primary)}
+.fanui-form-control-plaintext{display:block;width:100%;padding-top:8px;padding-bottom:8px;font-size:var(--fanui-font-size-base);line-height:1.5;color:var(--fanui-color-text);background-color:transparent;border:1px solid transparent}
+.fanui-input-group{display:flex;align-items:stretch;width:100%}
+.fanui-input-group>.fanui-form-control,.fanui-input-group>.fanui-select{flex:1 1 auto;width:1%;min-width:0}
+.fanui-input-group>.fanui-input-group__text,.fanui-input-group>.fanui-input-group__icon{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 var(--fanui-control-px,14px);font-size:var(--fanui-font-size-base);color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface-sunken);border:1px solid var(--fanui-color-border);white-space:nowrap;flex:0 0 auto}
+.fanui-input-group>.fanui-input-group__icon{padding:0 10px}
+.fanui-input-group>:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}
+.fanui-input-group>:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}
+.fanui-input-group>* + *{margin-inline-start:-1px}
+.fanui-input-group>.fanui-btn{flex:0 0 auto}
+.fanui-input-group:focus-within>.fanui-form-control{border-color:var(--fanui-primary);z-index:2}
+.fanui-search{position:relative;display:block}
+.fanui-search>.fanui-form-control{padding-inline-start:36px;padding-inline-end:36px}
+.fanui-search__icon{position:absolute;top:50%;left:12px;transform:translateY(-50%);display:flex;color:var(--fanui-color-text-subtle);pointer-events:none}
+.fanui-search__clear{position:absolute;top:50%;right:10px;transform:translateY(-50%);display:flex;padding:2px;color:var(--fanui-color-text-subtle);background:none;border:0;border-radius:50%;cursor:pointer}
+.fanui-search__clear:hover{color:var(--fanui-color-text);background-color:var(--fanui-color-hover)}
+.fanui-form-counter{display:block;margin-top:var(--fanui-space-1);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);text-align:end}
+.fanui-form-counter.is-limit{color:var(--fanui-danger)}
+.fanui-form-feedback{display:block;margin-top:var(--fanui-space-1);font-size:var(--fanui-font-size-sm);line-height:1.5;color:var(--fanui-color-text-muted)}
+.fanui-form-feedback::before{content:""}
+.fanui-form-feedback:empty{display:none}
+.fanui-form-item--error .fanui-form-control,.fanui-form-item--error .fanui-select,.fanui-form-item--error .fanui-textarea{border-color:#b91c1c}
+.fanui-form-item--error .fanui-form-control:focus,.fanui-form-item--error .fanui-form-control:focus-visible,.fanui-form-item--error .fanui-select:focus,.fanui-form-item--error .fanui-select:focus-visible,.fanui-form-item--error .fanui-textarea:focus,.fanui-form-item--error .fanui-textarea:focus-visible{border-color:#b91c1c;box-shadow:0 0 0 1px var(--fanui-color-surface,#fff),0 0 0 4px rgba(185,28,28,0.3)}
+.fanui-form-item--error .fanui-form-feedback{color:#b91c1c}
+.fanui-form-item--error .fanui-form-feedback{color:var(--fanui-danger)}
+.fanui-form-item--success .fanui-form-control,.fanui-form-item--success .fanui-select,.fanui-form-item--success .fanui-textarea{border-color:#047857}
+.fanui-form-item--success .fanui-form-control:focus,.fanui-form-item--success .fanui-form-control:focus-visible,.fanui-form-item--success .fanui-select:focus,.fanui-form-item--success .fanui-select:focus-visible,.fanui-form-item--success .fanui-textarea:focus,.fanui-form-item--success .fanui-textarea:focus-visible{border-color:#047857;box-shadow:0 0 0 1px var(--fanui-color-surface,#fff),0 0 0 4px rgba(4,120,87,0.3)}
+.fanui-form-item--success .fanui-form-feedback{color:#047857}
+.fanui-form-item--success .fanui-form-feedback{color:var(--fanui-success)}
+.fanui-form-item--warning .fanui-form-control,.fanui-form-item--warning .fanui-select,.fanui-form-item--warning .fanui-textarea{border-color:#b45309}
+.fanui-form-item--warning .fanui-form-control:focus,.fanui-form-item--warning .fanui-form-control:focus-visible,.fanui-form-item--warning .fanui-select:focus,.fanui-form-item--warning .fanui-select:focus-visible,.fanui-form-item--warning .fanui-textarea:focus,.fanui-form-item--warning .fanui-textarea:focus-visible{border-color:#b45309;box-shadow:0 0 0 1px var(--fanui-color-surface,#fff),0 0 0 4px rgba(180,83,9,0.3)}
+.fanui-form-item--warning .fanui-form-feedback{color:#b45309}
+.fanui-form-item--warning .fanui-form-feedback{color:var(--fanui-warning)}
+.fanui-is-invalid,.fanui-is-error{border-color:var(--fanui-danger) !important}
+.fanui-is-invalid:focus,.fanui-is-invalid:focus-visible,.fanui-is-error:focus,.fanui-is-error:focus-visible{box-shadow:0 0 0 3px var(--fanui-danger-ring) !important}
+.fanui-is-valid,.fanui-is-success{border-color:var(--fanui-success) !important}
+.fanui-is-valid:focus,.fanui-is-valid:focus-visible,.fanui-is-success:focus,.fanui-is-success:focus-visible{box-shadow:0 0 0 3px var(--fanui-success-ring) !important}
+.fanui-shake{animation:fanui-shake 420ms cubic-bezier(0.4,0,0.2,1) both}
+.fanui-file{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-3) var(--fanui-space-4);border:1px dashed var(--fanui-color-border-strong);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-surface-sunken);cursor:pointer;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-file:hover{border-color:var(--fanui-primary);background-color:var(--fanui-primary-soft)}
+.fanui-file input[type=file]{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
+.fanui-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fanui-space-2);padding:var(--fanui-space-8) var(--fanui-space-4);text-align:center;border:2px dashed var(--fanui-color-border-strong);border-radius:var(--fanui-radius-lg);color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface-sunken);cursor:pointer;transition:border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-dropzone input[type=file]{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
+.fanui-dropzone input[type=file]:active,.fanui-dropzone input[type=file]:focus{position:static !important;width:auto !important;height:auto !important;margin:0 !important;overflow:visible !important;clip:auto !important;white-space:normal !important}
+.fanui-dropzone.is-dragover,.fanui-dropzone:hover{border-color:var(--fanui-primary);background-color:var(--fanui-primary-soft);color:var(--fanui-primary)}
+.fanui-form-section{padding:var(--fanui-space-5);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);background-color:var(--fanui-color-surface)}
+.fanui-form-section__title{margin-bottom:var(--fanui-space-1);font-size:var(--fanui-font-size-md);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-form-section__desc{margin-bottom:var(--fanui-space-5);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--fanui-space-3);padding-top:var(--fanui-space-5);margin-top:var(--fanui-space-5);border-top:1px solid var(--fanui-color-border)}
+.fanui-form-actions--start{justify-content:flex-start}
+.fanui-form-actions--between{justify-content:space-between}

package/dist/modules/fanui-glass.css

@@ -0,0 +1,497 @@
+/* fanUI v2.1.0 · module: glass（独立产物，自带令牌） */
+.fanui-glass {
+  position: relative;
+  isolation: isolate;
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx, 30%) var(--fanui-glass-my, 0%), rgba(var(--fanui-glass-specular-rgb), calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border: 1px solid rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  border-radius: var(--fanui-glass-radius, 12px);
+  color: var(--fanui-color-text);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-glass::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  pointer-events: none;
+  padding: var(--fanui-glass-edge-width, calc(1px + 0.5px * var(--fanui-glass-intensity)));
+  background: linear-gradient(var(--fanui-glass-edge-angle, 150deg), rgba(255, 255, 255, calc(var(--fanui-glass-edge-hi-a) * min(1, var(--fanui-glass-intensity)))) 0%, rgba(255, 255, 255, calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 38%, rgba(255, 255, 255, calc(var(--fanui-glass-edge-lo-a) * var(--fanui-glass-intensity))) 62%, rgba(255, 255, 255, calc(var(--fanui-glass-edge-hi-a) * min(1, var(--fanui-glass-intensity)))) 100%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: var(--fanui-glass-edge-alpha, 1);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-glass {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+.fanui-glass {
+  color: var(--fanui-color-text);
+  text-shadow: var(--fanui-glass-text-shadow, 0 1px 1px rgba(0, 0, 0, 0.04));
+}
+
+[data-fanui-theme=dark] .fanui-glass,
+[data-fanui-theme=dark] .fanui-card--glass,
+[data-fanui-theme=dark] .fanui-panel--glass,
+[data-fanui-theme=dark] .fanui-navbar--glass,
+[data-fanui-theme=dark] .fanui-sidebar--glass,
+[data-fanui-theme=dark] .fanui-menu--glass,
+[data-fanui-theme=dark] .fanui-dropdown--glass .fanui-dropdown__menu,
+[data-fanui-theme=dark] .fanui-popover--glass .fanui-popover__panel,
+[data-fanui-theme=dark] .fanui-modal--glass .fanui-modal__dialog,
+[data-fanui-theme=dark] .fanui-drawer--glass .fanui-drawer__panel,
+[data-fanui-theme=dark] .fanui-toast--glass,
+[data-fanui-theme=dark] .fanui-toast-region .fanui-toast,
+[data-fanui-theme=dark] .fanui-alert--glass,
+[data-fanui-theme=dark] .fanui-btn--glass,
+[data-fanui-theme=dark] .fanui-table--glass {
+  --fanui-color-text: #f1f5f9;
+  --fanui-color-text-strong: #ffffff;
+  --fanui-color-text-muted: #cbd5e1;
+  --fanui-color-text-subtle: #94a3b8;
+  --fanui-color-border-subtle: rgba(255, 255, 255, 0.08);
+  --fanui-color-hover: rgba(255, 255, 255, 0.08);
+  --fanui-color-active: rgba(255, 255, 255, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme=auto] .fanui-glass,
+  [data-fanui-theme=auto] .fanui-card--glass,
+  [data-fanui-theme=auto] .fanui-panel--glass,
+  [data-fanui-theme=auto] .fanui-navbar--glass,
+  [data-fanui-theme=auto] .fanui-sidebar--glass,
+  [data-fanui-theme=auto] .fanui-menu--glass,
+  [data-fanui-theme=auto] .fanui-dropdown--glass .fanui-dropdown__menu,
+  [data-fanui-theme=auto] .fanui-popover--glass .fanui-popover__panel,
+  [data-fanui-theme=auto] .fanui-modal--glass .fanui-modal__dialog,
+  [data-fanui-theme=auto] .fanui-drawer--glass .fanui-drawer__panel,
+  [data-fanui-theme=auto] .fanui-toast--glass,
+  [data-fanui-theme=auto] .fanui-toast-region .fanui-toast,
+  [data-fanui-theme=auto] .fanui-alert--glass,
+  [data-fanui-theme=auto] .fanui-btn--glass,
+  [data-fanui-theme=auto] .fanui-table--glass {
+    --fanui-color-text: #f1f5f9;
+    --fanui-color-text-strong: #ffffff;
+    --fanui-color-text-muted: #cbd5e1;
+    --fanui-color-text-subtle: #94a3b8;
+    --fanui-color-border-subtle: rgba(255, 255, 255, 0.08);
+    --fanui-color-hover: rgba(255, 255, 255, 0.08);
+    --fanui-color-active: rgba(255, 255, 255, 0.12);
+  }
+}
+.fanui-glass--thin {
+  --fanui-glass-intensity: 0.5;
+  --fanui-glass-blur-base: 10px;
+  --fanui-glass-edge-width: 1px;
+  --fanui-glass-specular-alpha: 0.3;
+}
+
+.fanui-glass--regular {
+  --fanui-glass-intensity: 1;
+  --fanui-glass-blur-base: 22px;
+  --fanui-glass-edge-width: 1px;
+  --fanui-glass-specular-alpha: 0.55;
+}
+
+.fanui-glass--thick {
+  --fanui-glass-intensity: 1.45;
+  --fanui-glass-blur-base: 30px;
+  --fanui-glass-edge-width: 1.5px;
+  --fanui-glass-specular-alpha: 0.7;
+}
+
+.fanui-glass--ultra {
+  --fanui-glass-intensity: 1.9;
+  --fanui-glass-blur-base: 44px;
+  --fanui-glass-edge-width: 2px;
+  --fanui-glass-specular-alpha: 0.85;
+}
+
+.fanui-glass--lens {
+  --fanui-glass-intensity: 2;
+  --fanui-glass-blur-base: 36px;
+  --fanui-glass-edge-width: 2px;
+  --fanui-glass-specular-alpha: 1;
+}
+
+.fanui-glass--card {
+  padding: var(--fanui-glass-padding, var(--fanui-space-6));
+  border-radius: var(--fanui-glass-radius, var(--fanui-radius-xl));
+}
+
+.fanui-glass--bar {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-2) var(--fanui-space-3);
+  border-radius: var(--fanui-glass-radius, var(--fanui-radius-full));
+}
+
+.fanui-glass--panel {
+  padding: var(--fanui-space-5);
+  border-radius: var(--fanui-glass-radius, var(--fanui-radius-2xl));
+}
+
+.fanui-glass--square {
+  border-radius: 0;
+}
+
+.fanui-glass--sharp {
+  --fanui-glass-radius: 0;
+}
+
+.fanui-glass--reactive {
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-glass--reactive:hover {
+  --fanui-glass-intensity: var(--fanui-glass-hover-intensity, 1.25);
+  transform: translateY(-1px);
+}
+.fanui-glass--reactive:active {
+  transform: translateY(0) scale(0.995);
+}
+
+.fanui-glass--flow {
+  background-image: radial-gradient(38% 44% at 24% 30%, var(--fanui-brand-aura-a), transparent 62%), radial-gradient(32% 40% at 76% 70%, var(--fanui-brand-aura-b), transparent 60%), radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx, 30%) var(--fanui-glass-my, 0%), rgba(var(--fanui-glass-specular-rgb), calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  background-size: 170% 170%, 170% 170%, 100% 100%, 100% 100%;
+  background-repeat: no-repeat;
+  animation: fanui-glass-flow 22s ease-in-out infinite alternate;
+}
+
+@keyframes fanui-glass-flow {
+  0% {
+    background-position: 0% 0%, 100% 100%, center, center;
+  }
+  100% {
+    background-position: 100% 55%, 0% 15%, center, center;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fanui-glass--flow {
+    animation: none;
+  }
+}
+.fanui-glass--static {
+  --fanui-glass-specular-alpha: 0;
+  --fanui-glass-edge-angle: 150deg;
+}
+
+[data-fanui-glass-track] {
+  --fanui-glass-mx: 30%;
+  --fanui-glass-my: 0%;
+}
+
+[data-fanui-glass-track]:hover {
+  --fanui-glass-specular-alpha: 1;
+}
+
+.fanui-glass-lens {
+  --fanui-glass-tint-base: 0.14;
+  --fanui-glass-tint-k: 0.34;
+  --fanui-glass-blur-base: 30px;
+  border-radius: inherit;
+  box-shadow: 0 10px 26px -10px rgba(2, 6, 23, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -12px 20px -14px rgba(255, 255, 255, 0.35);
+}
+
+[data-fanui-theme=dark] .fanui-glass-lens {
+  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -12px 20px -14px rgba(255, 255, 255, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme=auto] .fanui-glass-lens {
+    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -12px 20px -14px rgba(255, 255, 255, 0.1);
+  }
+}
+.fanui-card--glass,
+.fanui-panel--glass {
+  position: relative;
+  isolation: isolate;
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: radial-gradient(calc(var(--fanui-glass-specular-size-base) + var(--fanui-glass-specular-size-k) * var(--fanui-glass-intensity)) circle at var(--fanui-glass-mx, 30%) var(--fanui-glass-my, 0%), rgba(var(--fanui-glass-specular-rgb), calc(var(--fanui-glass-specular-a) * var(--fanui-glass-intensity) * var(--fanui-glass-specular-alpha))), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border: 1px solid rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  border-radius: var(--fanui-glass-radius, 12px);
+  color: var(--fanui-color-text);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-card--glass,
+  .fanui-panel--glass {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-table--glass {
+  --fanui-table-striped-bg: rgba(
+    var(--fanui-glass-divider-rgb),
+    calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
+  );
+  --fanui-table-border-color: rgba(
+    var(--fanui-glass-divider-rgb),
+    calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
+  );
+}
+.fanui-table--glass > thead > tr > th {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-table--glass > thead > tr > th {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-navbar--glass {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-bottom-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: none;
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-navbar--glass.is-scrolled {
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+
+.fanui-sidebar--glass,
+.fanui-menu--glass {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-sidebar--glass,
+  .fanui-menu--glass {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-modal--glass .fanui-modal__dialog,
+.fanui-drawer--glass .fanui-drawer__panel {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-modal--glass .fanui-modal__dialog,
+  .fanui-drawer--glass .fanui-drawer__panel {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+.fanui-modal--glass .fanui-modal__dialog,
+.fanui-drawer--glass .fanui-drawer__panel {
+  background-image: linear-gradient(color-mix(in srgb, var(--fanui-color-overlay) 60%, transparent), color-mix(in srgb, var(--fanui-color-overlay) 75%, transparent));
+}
+
+.fanui-dropdown--glass .fanui-dropdown__menu,
+.fanui-popover--glass .fanui-popover__panel {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-dropdown--glass .fanui-dropdown__menu,
+  .fanui-popover--glass .fanui-popover__panel {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+.fanui-dropdown--glass .fanui-dropdown__menu,
+.fanui-popover--glass .fanui-popover__panel {
+  background-image: linear-gradient(color-mix(in srgb, var(--fanui-color-overlay) 55%, transparent), color-mix(in srgb, var(--fanui-color-overlay) 70%, transparent));
+}
+
+.fanui-tooltip--glass .fanui-tooltip__bubble {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-tooltip--glass .fanui-tooltip__bubble {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-toast--glass,
+.fanui-toast-region .fanui-toast {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  box-shadow: 0 calc(var(--fanui-glass-shadow-y-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-blur-k) * var(--fanui-glass-intensity)) calc(var(--fanui-glass-shadow-spread-k) * var(--fanui-glass-intensity)) rgba(var(--fanui-glass-shadow-rgb), calc(var(--fanui-glass-shadow-a) + var(--fanui-glass-shadow-k) * var(--fanui-glass-intensity))), inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-toast--glass,
+  .fanui-toast-region .fanui-toast {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-alert--glass {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-alert--glass {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+
+.fanui-btn--glass {
+  background-color: rgba(var(--fanui-glass-tint-rgb), calc(var(--fanui-glass-tint-base) + var(--fanui-glass-tint-k) * var(--fanui-glass-intensity)));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--fanui-glass-sheen-a) * var(--fanui-glass-intensity))) 0%, rgba(255, 255, 255, 0) 46%);
+  backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  -webkit-backdrop-filter: blur(calc(var(--fanui-glass-blur-base) * var(--fanui-glass-intensity) * var(--fanui-glass-blur-mode-k, 1))) saturate(calc(100% + var(--fanui-glass-sat-k) * var(--fanui-glass-intensity))) brightness(calc(100% + var(--fanui-glass-bri-k) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .fanui-btn--glass {
+    background-color: var(--fanui-glass-fallback-bg);
+    background-image: none;
+  }
+}
+.fanui-btn--glass {
+  --fanui-btn-fg: var(--fanui-color-text);
+  --fanui-btn-hover-fg: var(--fanui-color-text-strong);
+  --fanui-btn-active-fg: var(--fanui-color-text-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
+}
+.fanui-btn--glass:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc((var(--fanui-glass-inner-hi) + 0.2) * min(1, var(--fanui-glass-intensity)))), 0 6px 18px -8px rgba(var(--fanui-glass-shadow-rgb), calc(0.28 * var(--fanui-glass-intensity)));
+}
+
+.fanui-glass .fanui-form-control,
+.fanui-glass .fanui-select,
+.fanui-glass .fanui-textarea {
+  background-color: rgba(var(--fanui-glass-divider-rgb), calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)));
+  border-color: rgba(var(--fanui-glass-border-rgb), calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity)));
+  backdrop-filter: none;
+}
+
+.fanui-glass .fanui-table > thead > tr > th {
+  background-color: transparent;
+}
+
+.fanui-glass .fanui-table > tbody > tr > td {
+  border-color: rgba(var(--fanui-glass-divider-rgb), calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity)));
+}
+
+:root[data-fanui-glass=off] [class*=fanui-glass],
+:root[data-fanui-glass=off] [class*="--glass"],
+[data-fanui-glass=off] [class*=fanui-glass],
+[data-fanui-glass=off] [class*="--glass"],
+[data-fanui-glass=off][class*=fanui-glass],
+[data-fanui-glass=off][class*="--glass"] {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+:root[data-fanui-glass=off] [class*=fanui-glass]::after,
+:root[data-fanui-glass=off] [class*="--glass"]::after,
+[data-fanui-glass=off] [class*=fanui-glass]::after,
+[data-fanui-glass=off] [class*="--glass"]::after,
+[data-fanui-glass=off][class*=fanui-glass]::after,
+[data-fanui-glass=off][class*="--glass"]::after {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fanui-glass--reactive:hover {
+    transform: none;
+  }
+}
+:root[data-fanui-glass=off],
+[data-fanui-glass=off] {
+  --fanui-glass-intensity: 0;
+  --fanui-glass-blur-base: 0px;
+  --fanui-glass-blur-mode-k: 1;
+  --fanui-glass-sat-k: 0%;
+  --fanui-glass-bri-k: 0%;
+  --fanui-glass-tint-rgb: var(--fanui-glass-surface-rgb);
+  --fanui-glass-tint-base: 1;
+  --fanui-glass-tint-k: 0;
+  --fanui-glass-sheen-a: 0;
+  --fanui-glass-specular-a: 0;
+  --fanui-glass-specular-alpha: 0;
+  --fanui-glass-edge-alpha: 0;
+  --fanui-glass-edge-hi-a: 0;
+  --fanui-glass-edge-lo-a: 0;
+  --fanui-glass-border-rgb: var(--fanui-glass-border-solid-rgb);
+  --fanui-glass-border-a: 1;
+  --fanui-glass-border-k: 0;
+  --fanui-glass-divider-rgb: var(--fanui-glass-border-solid-rgb);
+  --fanui-glass-divider-a: 1;
+  --fanui-glass-shadow-a: 0.06;
+  --fanui-glass-shadow-k: 0;
+  --fanui-glass-inner-hi: 0;
+  --fanui-glass-text-shadow: none;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root:not([data-fanui-glass=on]),
+  [data-fanui-glass=auto] {
+    --fanui-glass-intensity: 0;
+    --fanui-glass-blur-base: 0px;
+    --fanui-glass-blur-mode-k: 1;
+    --fanui-glass-sat-k: 0%;
+    --fanui-glass-bri-k: 0%;
+    --fanui-glass-tint-rgb: var(--fanui-glass-surface-rgb);
+    --fanui-glass-tint-base: 1;
+    --fanui-glass-tint-k: 0;
+    --fanui-glass-sheen-a: 0;
+    --fanui-glass-specular-a: 0;
+    --fanui-glass-specular-alpha: 0;
+    --fanui-glass-edge-alpha: 0;
+    --fanui-glass-edge-hi-a: 0;
+    --fanui-glass-edge-lo-a: 0;
+    --fanui-glass-border-rgb: var(--fanui-glass-border-solid-rgb);
+    --fanui-glass-border-a: 1;
+    --fanui-glass-border-k: 0;
+    --fanui-glass-divider-rgb: var(--fanui-glass-border-solid-rgb);
+    --fanui-glass-divider-a: 1;
+    --fanui-glass-shadow-a: 0.06;
+    --fanui-glass-shadow-k: 0;
+    --fanui-glass-inner-hi: 0;
+    --fanui-glass-text-shadow: none;
+  }
+}