@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-input-plus.min.css

@@ -0,0 +1,124 @@
+@charset "UTF-8";.fanui-slider{--fanui-slider-fill:50%;--fanui-slider-track:var(--fanui-color-border);--fanui-slider-thumb:#ffffff;--fanui-slider-size:6px;--fanui-slider-thumb-size:18px;display:block;width:100%;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-slider:focus-visible{outline:none}
+.fanui-slider:focus-visible::-webkit-slider-thumb{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-slider:focus-visible::-webkit-slider-thumb{outline:2px solid transparent;outline-offset:2px}}
+.fanui-slider:focus-visible::-moz-range-thumb{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-slider:focus-visible::-moz-range-thumb{outline:2px solid transparent;outline-offset:2px}}
+.fanui-slider::-webkit-slider-runnable-track{height:var(--fanui-slider-size);border-radius:var(--fanui-radius-full);background-image:linear-gradient(to right,var(--fanui-primary) 0%,var(--fanui-primary-vivid) var(--fanui-slider-fill),var(--fanui-slider-track) var(--fanui-slider-fill),var(--fanui-slider-track) 100%)}
+.fanui-slider::-moz-range-track{height:var(--fanui-slider-size);border-radius:var(--fanui-radius-full);background-color:var(--fanui-slider-track)}
+.fanui-slider::-moz-range-progress{height:var(--fanui-slider-size);border-radius:var(--fanui-radius-full);background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid))}
+.fanui-slider::-webkit-slider-thumb{width:var(--fanui-slider-thumb-size);height:var(--fanui-slider-thumb-size);margin-top:calc((var(--fanui-slider-size) - var(--fanui-slider-thumb-size)) / 2);border:2px solid var(--fanui-primary);border-radius:var(--fanui-radius-full);background-color:var(--fanui-slider-thumb);box-shadow:0 1px 4px rgba(2,6,23,0.22);appearance:none;-webkit-appearance:none;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-slider::-moz-range-thumb{width:var(--fanui-slider-thumb-size);height:var(--fanui-slider-thumb-size);border:2px solid var(--fanui-primary);border-radius:var(--fanui-radius-full);background-color:var(--fanui-slider-thumb);box-shadow:0 1px 4px rgba(2,6,23,0.22)}
+.fanui-slider:hover::-webkit-slider-thumb{transform:scale(1.12)}
+.fanui-slider:active::-webkit-slider-thumb{transform:scale(1.2)}
+.fanui-slider:disabled{opacity:0.5;cursor:not-allowed}
+.fanui-slider:disabled::-webkit-slider-thumb{border-color:var(--fanui-color-border-strong)}
+.fanui-slider--sm{--fanui-slider-size:4px;--fanui-slider-thumb-size:14px}
+.fanui-slider--lg{--fanui-slider-size:8px;--fanui-slider-thumb-size:24px}
+.fanui-slider-field{position:relative;display:flex;align-items:center;gap:var(--fanui-space-3);padding-top:var(--fanui-space-5)}
+.fanui-slider-field .fanui-slider{flex:1 1 auto;min-width:0}
+.fanui-slider-field__bubble{position:absolute;top:0;left:var(--fanui-slider-fill,50%);transform:translateX(-50%);padding:1px 7px;font-size:var(--fanui-font-size-xs);font-variant-numeric:tabular-nums;color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-radius:var(--fanui-radius-sm);white-space:nowrap;pointer-events:none}
+.fanui-slider-field__value{min-width:3.5em;font-size:var(--fanui-font-size-sm);font-variant-numeric:tabular-nums;text-align:end;color:var(--fanui-color-text-muted)}
+.fanui-slider-field__marks{display:flex;justify-content:space-between;margin-top:var(--fanui-space-1);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-slider-range{position:relative;height:var(--fanui-slider-thumb-size,18px)}
+.fanui-slider-range .fanui-slider{position:absolute;inset:0;width:100%;pointer-events:none}
+.fanui-slider-range .fanui-slider::-webkit-slider-thumb{pointer-events:auto}
+.fanui-slider-range .fanui-slider::-moz-range-thumb{pointer-events:auto}
+.fanui-slider-range__rail{position:absolute;top:50%;left:0;right:0;height:var(--fanui-slider-size,6px);transform:translateY(-50%);border-radius:var(--fanui-radius-full);background-color:var(--fanui-color-border)}
+.fanui-slider-range__fill{position:absolute;top:50%;height:var(--fanui-slider-size,6px);transform:translateY(-50%);border-radius:var(--fanui-radius-full);background-image:linear-gradient(to right,var(--fanui-primary),var(--fanui-primary-vivid))}
+.fanui-rate{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;font-size:22px;line-height:1}
+.fanui-rate__input{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-rate__input:focus-visible~.fanui-rate__star{outline:2px solid var(--fanui-primary-ring);outline-offset:2px}
+.fanui-rate__star{color:var(--fanui-color-border-strong);cursor:pointer;user-select:none;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-rate__star::before{content:"★"}
+.fanui-rate__star:hover{transform:scale(1.15)}
+.fanui-rate__input:checked~.fanui-rate__star{color:var(--fanui-warning-vivid)}
+.fanui-rate__star:hover,.fanui-rate__star:hover~.fanui-rate__star{color:var(--fanui-warning)}
+.fanui-rate--primary .fanui-rate__input:checked~.fanui-rate__star{color:var(--fanui-primary)}
+.fanui-rate--primary .fanui-rate__star:hover,.fanui-rate--primary .fanui-rate__star:hover~.fanui-rate__star{color:var(--fanui-primary-hover)}
+.fanui-rate--sm{font-size:16px}
+.fanui-rate--lg{font-size:30px}
+.fanui-rate--readonly .fanui-rate__star{cursor:default;pointer-events:none}
+.fanui-rate--readonly .fanui-rate__star:hover{transform:none}
+.fanui-rate__value{margin-inline-start:var(--fanui-space-2);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);align-self:center}
+.fanui-rate__desc{margin-inline-start:var(--fanui-space-2);font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);align-self:center}
+.fanui-upload{display:flex;flex-direction:column;gap:var(--fanui-space-3)}
+.fanui-upload__drop{position:relative;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);background-color:var(--fanui-color-surface-sunken);color:var(--fanui-color-text-muted);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,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-upload__drop 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-upload__drop:hover,.fanui-upload__drop.is-dragover{border-color:var(--fanui-primary);background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink)}
+.fanui-upload__drop.is-dragover{transform:scale(1.01);box-shadow:0 0 0 4px var(--fanui-primary-ring)}
+.fanui-upload__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--fanui-radius-full);background-color:var(--fanui-primary-soft);color:var(--fanui-primary);font-size:var(--fanui-font-size-xl)}
+.fanui-upload__hint{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle)}
+.fanui-upload__list{display:flex;flex-direction:column;gap:var(--fanui-space-2);margin:0;padding:0;list-style:none}
+.fanui-upload__item{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-2) var(--fanui-space-3);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-surface);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-upload__item:hover{border-color:var(--fanui-color-border-strong)}
+.fanui-upload__item.is-error{border-color:var(--fanui-danger-border);background-color:var(--fanui-danger-soft)}
+.fanui-upload__item.is-done .fanui-upload__item__state{color:var(--fanui-success)}
+.fanui-upload__thumb{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:var(--fanui-radius-sm);background-color:var(--fanui-color-surface-sunken);color:var(--fanui-color-text-muted);overflow:hidden}
+.fanui-upload__thumb img{width:100%;height:100%;object-fit:cover}
+.fanui-upload__meta{flex:1 1 auto;min-width:0}
+.fanui-upload__name{display:block;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-upload__size{font-size:var(--fanui-font-size-xs);color:var(--fanui-color-text-subtle);font-variant-numeric:tabular-nums}
+.fanui-upload__state{color:var(--fanui-color-text-muted);flex:0 0 auto}
+.fanui-tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-1);min-height:var(--fanui-control-h);padding:5px 8px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-control-radius);background-color:var(--fanui-color-surface);cursor:text;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}
+.fanui-tag-input:hover{border-color:var(--fanui-color-border-strong)}
+.fanui-tag-input:focus-within{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-tag-input:focus-within{outline:2px solid transparent;outline-offset:2px}}
+.fanui-tag-input__tag{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 4px 2px 8px;font-size:var(--fanui-font-size-xs);line-height:1.5;color:var(--fanui-primary-ink);background-color:var(--fanui-primary-soft);border:1px solid var(--fanui-primary-border);border-radius:var(--fanui-radius-full);animation:fanui-tag-pop 180ms cubic-bezier(0.34,1.56,0.64,1) both}
+.fanui-tag-input__tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12em}
+.fanui-tag-input__remove{display:grid;place-items:center;width:16px;height:16px;padding:0;border:0;border-radius:var(--fanui-radius-full);background:transparent;color:currentColor;cursor:pointer;opacity:0.65;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-tag-input__remove::before{content:"×";font-size:14px;line-height:1}
+.fanui-tag-input__remove:hover{opacity:1;background-color:rgba(2,6,23,0.08)}
+.fanui-tag-input__field{flex:1 1 6em;min-width:6em;padding:2px 4px;border:0;background:transparent;font:inherit;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text)}
+.fanui-tag-input__field:focus{outline:none}
+.fanui-tag-input__field::placeholder{color:var(--fanui-color-text-subtle)}
+.fanui-tag-input__suggest{position:absolute;z-index:var(--fanui-z-dropdown);margin-top:var(--fanui-space-1);padding:var(--fanui-space-1);min-width:180px;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-overlay);box-shadow:var(--fanui-shadow-lg)}
+.fanui-tag-input__suggest button{display:block;width:100%;padding:6px 10px;border:0;border-radius:var(--fanui-radius-sm);background:transparent;font:inherit;font-size:var(--fanui-font-size-sm);text-align:start;color:var(--fanui-color-text);cursor:pointer}
+.fanui-tag-input__suggest button:hover{background-color:var(--fanui-color-hover)}
+.fanui-tag-input__suggest button.is-active{background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink)}@keyframes fanui-tag-pop{from{opacity:0;transform:scale(0.86)}
+to{opacity:1;transform:scale(1)}}
+.fanui-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-control-radius);background-color:var(--fanui-color-surface);overflow:hidden;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}
+.fanui-stepper:focus-within{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-stepper:focus-within{outline:2px solid transparent;outline-offset:2px}}
+.fanui-stepper__btn{display:grid;place-items:center;width:calc(var(--fanui-control-h) + 4px);border:0;background:transparent;color:var(--fanui-color-text-muted);font-size:16px;line-height:1;cursor:pointer;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-stepper__btn:hover:not(:disabled){background-color:var(--fanui-primary-soft);color:var(--fanui-primary-ink)}
+.fanui-stepper__btn:disabled{opacity:0.4;cursor:not-allowed}
+.fanui-stepper__input{width:3.6em;min-height:var(--fanui-control-h);padding:0 4px;border:0;border-inline:1px solid var(--fanui-color-border-subtle);background:transparent;font:inherit;font-size:var(--fanui-font-size-base);font-variant-numeric:tabular-nums;text-align:center;color:var(--fanui-color-text)}
+.fanui-stepper__input:focus{outline:none}
+.fanui-stepper__input::-webkit-outer-spin-button,.fanui-stepper__input::-webkit-inner-spin-button{appearance:none;margin:0}
+.fanui-stepper--sm{--fanui-control-h:28px}
+.fanui-stepper--lg{--fanui-control-h:40px}
+.fanui-pin{display:inline-flex;gap:var(--fanui-space-2)}
+.fanui-pin__cell{width:44px;height:52px;padding:0;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-surface);font-family:var(--fanui-font-mono);font-size:var(--fanui-font-size-xl);font-variant-numeric:tabular-nums;text-align:center;color:var(--fanui-color-text-strong);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,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-pin__cell:focus{outline:none;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-pin__cell:focus{outline:2px solid transparent;outline-offset:2px}}
+.fanui-pin__cell:focus{transform:translateY(-2px)}
+.fanui-pin__cell.is-filled{border-color:var(--fanui-primary-border);background-color:var(--fanui-primary-soft)}
+.fanui-pin__cell:disabled{background-color:var(--fanui-color-disabled-bg)}
+.fanui-pin--filled .fanui-pin__cell{background-color:var(--fanui-color-surface-sunken)}
+.fanui-pin--sm .fanui-pin__cell{width:36px;height:42px;font-size:var(--fanui-font-size-lg)}
+.fanui-pin--separated{gap:var(--fanui-space-4)}
+.fanui-swatch{display:inline-flex;flex-wrap:wrap;gap:var(--fanui-space-2)}
+.fanui-swatch__item{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid rgba(2,6,23,0.12);border-radius:var(--fanui-radius-md);background-color:var(--fanui-swatch-color,var(--fanui-color-border));cursor:pointer;transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-swatch__item:hover{transform:translateY(-2px);box-shadow:var(--fanui-shadow-md)}
+.fanui-swatch__item[aria-checked=true],.fanui-swatch__item.is-selected{box-shadow:0 0 0 2px var(--fanui-color-surface),0 0 0 4px var(--fanui-swatch-color)}
+.fanui-swatch__item[aria-checked=true]::after{content:"";width:10px;height:6px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4))}
+.fanui-swatch--lg .fanui-swatch__item{width:40px;height:40px}
+.fanui-swatch--round .fanui-swatch__item{border-radius:var(--fanui-radius-full)}
+.fanui-combobox{position:relative}
+.fanui-combobox__control{position:relative;display:flex;align-items:center}
+.fanui-combobox__input{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-combobox__input::placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-combobox__input::-webkit-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-combobox__input::-moz-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-combobox__input:-ms-input-placeholder{color:var(--fanui-color-text-subtle);opacity:1}
+.fanui-combobox__input:hover:not(:disabled):not(.is-disabled){border-color:var(--fanui-color-border-strong)}
+.fanui-combobox__input:focus,.fanui-combobox__input: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-combobox__input:focus,.fanui-combobox__input:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-combobox__input:disabled,.fanui-combobox__input.is-disabled{background-color:var(--fanui-color-disabled-bg);color:var(--fanui-color-disabled-text);cursor:not-allowed;resize:none}
+.fanui-combobox__input[readonly]{background-color:var(--fanui-color-surface-sunken)}
+.fanui-combobox__input{padding-inline-end:34px}
+.fanui-combobox__toggle{position:absolute;inset-inline-end:6px;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:var(--fanui-radius-sm);background:transparent;color:var(--fanui-color-text-muted);cursor:pointer}
+.fanui-combobox__toggle:hover{background-color:var(--fanui-color-hover)}
+.fanui-combobox__list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:var(--fanui-z-dropdown);max-height:260px;margin:0;padding:var(--fanui-space-1);list-style:none;overflow-y:auto;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-overlay);box-shadow:var(--fanui-shadow-xl);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,visibility 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-combobox__list.is-open{opacity:1;visibility:visible;transform:translateY(0)}
+.fanui-combobox__option{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-2);padding:7px 10px;border-radius:var(--fanui-radius-sm);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text);cursor:pointer}
+.fanui-combobox__option:hover,.fanui-combobox__option.is-active{background-color:var(--fanui-color-hover)}
+.fanui-combobox__option.is-selected{color:var(--fanui-primary-ink);background-color:var(--fanui-primary-soft)}
+.fanui-combobox__option.is-disabled{opacity:0.5;cursor:not-allowed}
+.fanui-combobox__empty{padding:var(--fanui-space-4);text-align:center;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle)}
+.fanui-combobox__mark{background-color:var(--fanui-warning-soft-2);color:inherit;font-weight:var(--fanui-font-weight-semibold)}