@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-form.css

@@ -0,0 +1,779 @@
+/* fanUI v2.1.0 · module: form（独立产物，自带令牌） */
+@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;
+}