@zhang_jifan/fanui 2.1.0

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

@@ -0,0 +1,125 @@
+.fanui-avatar{--fanui-avatar-size:40px;--fanui-avatar-radius:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--fanui-avatar-size);height:var(--fanui-avatar-size);font-size:calc(var(--fanui-avatar-size) * 0.4);font-weight:600;line-height:1;color:var(--fanui-color-text-inverse);background-color:var(--fanui-primary);border-radius:var(--fanui-avatar-radius);overflow:hidden;user-select:none;box-sizing:border-box}
+.fanui-avatar>img,.fanui-avatar>video{width:100%;height:100%;object-fit:cover;display:block}
+.fanui-avatar__icon{display:inline-flex;font-size:1.1em}
+.fanui-avatar__text{font-size:0.85em;letter-spacing:0.02em}
+.fanui-avatar--xs{--fanui-avatar-size:24px;font-size:11px}
+.fanui-avatar--sm{--fanui-avatar-size:32px;font-size:13px}
+.fanui-avatar--md{--fanui-avatar-size:40px}
+.fanui-avatar--lg{--fanui-avatar-size:48px}
+.fanui-avatar--xl{--fanui-avatar-size:64px;font-size:22px}
+.fanui-avatar--2xl{--fanui-avatar-size:80px;font-size:28px}
+.fanui-avatar--square{--fanui-avatar-radius:var(--fanui-radius-base)}
+.fanui-avatar--rounded{--fanui-avatar-radius:var(--fanui-radius-lg)}
+.fanui-avatar--bordered{border:2px solid var(--fanui-color-surface);box-shadow:var(--fanui-shadow-sm)}
+.fanui-avatar--primary{background-color:var(--fanui-primary,#0e7490);color:var(--fanui-primary-fg,#ffffff)}
+.fanui-avatar--accent{background-color:var(--fanui-accent,#7c3aed);color:var(--fanui-accent-fg,#ffffff)}
+.fanui-avatar--success{background-color:var(--fanui-success,#047857);color:var(--fanui-success-fg,#ffffff)}
+.fanui-avatar--warning{background-color:var(--fanui-warning,#b45309);color:var(--fanui-warning-fg,#ffffff)}
+.fanui-avatar--danger{background-color:var(--fanui-danger,#b91c1c);color:var(--fanui-danger-fg,#ffffff)}
+.fanui-avatar--info{background-color:var(--fanui-info,#0369a1);color:var(--fanui-info-fg,#ffffff)}
+.fanui-avatar--neutral{background-color:var(--fanui-color-surface-sunken);color:var(--fanui-color-text-muted)}
+.fanui-avatar__status{position:absolute;right:0;bottom:0;width:28%;height:28%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--fanui-color-surface);background-color:var(--fanui-color-text-subtle);box-sizing:content-box}
+.fanui-avatar__status--online{background-color:var(--fanui-success)}
+.fanui-avatar__status--busy{background-color:var(--fanui-danger)}
+.fanui-avatar__status--away{background-color:var(--fanui-warning)}
+.fanui-avatar__status--offline{background-color:var(--fanui-color-text-subtle)}
+.fanui-avatar-group{display:inline-flex;align-items:center}
+.fanui-avatar-group>.fanui-avatar{margin-inline-start:-10px;border:2px solid var(--fanui-color-surface);transition:transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,z-index 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-avatar-group>.fanui-avatar:first-child{margin-inline-start:0}
+.fanui-avatar-group>.fanui-avatar:hover{transform:translateY(-2px);z-index:2}
+.fanui-avatar-group--sm>.fanui-avatar{margin-inline-start:-8px}
+.fanui-avatar-group--lg>.fanui-avatar{margin-inline-start:-12px}
+.fanui-avatar-group__more{background-color:var(--fanui-color-surface-sunken) !important;color:var(--fanui-color-text-muted) !important;font-size:12px}
+.fanui-avatar-media{display:flex;align-items:center;gap:var(--fanui-space-3);min-width:0}
+.fanui-avatar-media__body{min-width:0}
+.fanui-avatar-media__title{font-size:var(--fanui-font-size-base);font-weight:500;color:var(--fanui-color-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-avatar-media__desc{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-list-group{display:flex;flex-direction:column;padding:0;margin:0;list-style:none;background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);overflow:hidden}
+.fanui-list-group--flush{border:0;border-radius:0;background:transparent}
+.fanui-list-group--separated{gap:var(--fanui-space-2);border:0;background:transparent;overflow:visible}
+.fanui-list-item{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-3) var(--fanui-space-4);font-size:var(--fanui-font-size-base);color:var(--fanui-color-text);background-color:transparent;border-bottom:1px solid var(--fanui-color-border);text-decoration:none;box-sizing:border-box;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-list-item:last-child{border-bottom:0}
+.fanui-list-item--interactive{cursor:pointer}
+.fanui-list-item--interactive:hover{background-color:var(--fanui-color-hover);text-decoration:none}
+.fanui-list-item--interactive:active{background-color:var(--fanui-color-active)}
+.fanui-list-item--interactive:focus-visible{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-list-item--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-list-item.is-active,.fanui-list-item--active{background-color:var(--fanui-primary-soft);color:var(--fanui-primary);border-color:var(--fanui-primary-border,var(--fanui-primary));--fanui-color-text-subtle:var(--fanui-primary-ink,var(--fanui-color-text-muted))}
+.fanui-list-item.is-disabled{opacity:0.55;pointer-events:none}
+.fanui-list-group--separated .fanui-list-item{border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);background-color:var(--fanui-color-surface)}
+.fanui-list-item__icon{flex:0 0 auto;display:inline-flex;width:20px;justify-content:center;color:var(--fanui-color-text-muted)}
+.fanui-list-item__body{flex:1 1 auto;min-width:0}
+.fanui-list-item__title{font-weight:500;color:var(--fanui-color-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fanui-list-item__desc{margin-top:2px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
+.fanui-list-item__meta{flex:0 0 auto;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle);white-space:nowrap}
+.fanui-list-item__action{flex:0 0 auto;margin-inline-start:auto}
+.fanui-list-item--sm{padding:6px 12px;font-size:var(--fanui-font-size-sm)}
+.fanui-list-item--lg{padding:var(--fanui-space-4) var(--fanui-space-5)}
+.fanui-list-header{padding:var(--fanui-space-3) var(--fanui-space-4);font-size:var(--fanui-font-size-xs);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--fanui-color-text-subtle);background-color:var(--fanui-color-surface-sunken);border-bottom:1px solid var(--fanui-color-border)}
+.fanui-descriptions{display:grid;gap:var(--fanui-space-3) var(--fanui-space-6);font-size:var(--fanui-font-size-base)}
+.fanui-descriptions__item{min-width:0}
+.fanui-descriptions__label{margin-bottom:2px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-descriptions__value{color:var(--fanui-color-text-strong);word-break:break-word}
+.fanui-descriptions--2{grid-template-columns:repeat(2,minmax(0,1fr))}
+.fanui-descriptions--3{grid-template-columns:repeat(3,minmax(0,1fr))}
+.fanui-descriptions--4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:767.95px){.fanui-descriptions--3,.fanui-descriptions--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:575.95px){.fanui-descriptions--2,.fanui-descriptions--3,.fanui-descriptions--4{grid-template-columns:minmax(0,1fr)}}
+.fanui-descriptions--inline{display:flex;flex-wrap:wrap;gap:var(--fanui-space-5);grid-template-columns:none}
+.fanui-descriptions--inline .fanui-descriptions__item{display:flex;gap:8px}
+.fanui-descriptions--inline .fanui-descriptions__label{margin-bottom:0}
+.fanui-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-1);padding:0;margin:0;list-style:none}
+.fanui-pagination__item{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;font-size:var(--fanui-font-size-base);font-weight:500;color:var(--fanui-color-text);text-decoration:none;background-color:transparent;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-base);cursor:pointer;box-sizing:border-box;user-select:none;font-variant-numeric:tabular-nums;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-pagination__item:hover:not(.is-disabled):not([aria-disabled=true]):not(.is-active){color:var(--fanui-primary);border-color:var(--fanui-primary);background-color:var(--fanui-primary-soft);text-decoration:none}
+.fanui-pagination__item:focus-visible{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-pagination__item:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-pagination__item.is-active,.fanui-pagination__item[aria-current=page]{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-pagination__item.is-disabled,.fanui-pagination__item[aria-disabled=true]{color:var(--fanui-color-disabled-text);cursor:not-allowed;pointer-events:none}
+.fanui-pagination__item--ellipsis{border-color:transparent;background:transparent;color:var(--fanui-color-text-subtle);cursor:default;pointer-events:none}
+.fanui-pagination__item--icon{padding:0}
+.fanui-pagination__info{margin-inline-start:var(--fanui-space-3);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-pagination--borderless .fanui-pagination__item{border-color:transparent}
+.fanui-pagination--pill .fanui-pagination__item{border-radius:9999px}
+.fanui-pagination--sm .fanui-pagination__item{min-width:26px;height:26px;font-size:var(--fanui-font-size-sm)}
+.fanui-pagination--lg .fanui-pagination__item{min-width:38px;height:38px;font-size:var(--fanui-font-size-md)}
+.fanui-pagination--center{justify-content:center}
+.fanui-pagination--end{justify-content:flex-end}
+.fanui-pagination--simple{gap:var(--fanui-space-2)}
+.fanui-pagination--simple .fanui-pagination__item{border-color:transparent}
+.fanui-pagination-page-size{display:inline-flex;align-items:center;gap:var(--fanui-space-2);font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-pagination-page-size .fanui-select{width:auto;min-width:72px}
+.fanui-steps{--fanui-step-dot:28px;display:flex;align-items:flex-start;width:100%;list-style:none;margin:0;padding:0}
+.fanui-steps__item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fanui-space-2)}
+.fanui-steps__item:not(:last-child)::after{content:"";position:absolute;top:calc(var(--fanui-step-dot) / 2);left:calc(50% + var(--fanui-step-dot) / 2 + 6px);right:calc(-50% + var(--fanui-step-dot) / 2 + 6px);height:2px;background-color:var(--fanui-color-border);transition:background-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-steps__item.is-done:not(:last-child)::after{background-color:var(--fanui-primary)}
+.fanui-steps__dot{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--fanui-step-dot);height:var(--fanui-step-dot);font-size:var(--fanui-font-size-sm);font-weight:600;line-height:1;color:var(--fanui-color-text-muted);background-color:var(--fanui-color-surface);border:2px solid var(--fanui-color-border-strong);border-radius:50%;box-sizing:border-box;z-index:1;transition:color 200ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 200ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-steps__title{font-size:var(--fanui-font-size-base);font-weight:500;color:var(--fanui-color-text-muted);transition:color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-steps__desc{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle);line-height:1.5}
+.fanui-steps__item.is-active .fanui-steps__dot{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary);box-shadow:0 0 0 4px var(--fanui-primary-soft)}
+.fanui-steps__item.is-active .fanui-steps__title{color:var(--fanui-color-text-strong);font-weight:600}
+.fanui-steps__item.is-done .fanui-steps__dot{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-steps__item.is-done .fanui-steps__title{color:var(--fanui-color-text)}
+.fanui-steps__item.is-error .fanui-steps__dot{color:var(--fanui-danger-fg);background-color:var(--fanui-danger);border-color:var(--fanui-danger)}
+.fanui-steps__item.is-error .fanui-steps__title{color:var(--fanui-danger)}
+.fanui-steps--simple .fanui-steps__item:not(:last-child)::after{left:calc(var(--fanui-step-dot) / 2 + 8px);right:calc(-50% + var(--fanui-step-dot) / 2 + 12px)}
+.fanui-steps--navigation{gap:var(--fanui-space-3);align-items:stretch}
+.fanui-steps--navigation .fanui-steps__item{flex-direction:row;align-items:flex-start;text-align:start;gap:var(--fanui-space-3);padding:var(--fanui-space-3);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);cursor:pointer}
+.fanui-steps--navigation .fanui-steps__item::after{display:none}
+.fanui-steps--navigation .fanui-steps__item:hover{border-color:var(--fanui-primary)}
+.fanui-steps--navigation .fanui-steps__item.is-active{border-color:var(--fanui-primary);background-color:var(--fanui-primary-soft)}
+.fanui-steps--navigation .fanui-steps__dot{margin-top:1px}
+.fanui-steps--vertical{flex-direction:column;gap:0}
+.fanui-steps--vertical .fanui-steps__item{flex-direction:row;align-items:flex-start;text-align:start;gap:var(--fanui-space-3);padding-bottom:var(--fanui-space-5);flex:0 0 auto}
+.fanui-steps--vertical .fanui-steps__item:not(:last-child)::after{top:calc(var(--fanui-step-dot) + 4px);left:calc(var(--fanui-step-dot) / 2 - 1px);right:auto;bottom:4px;width:2px;height:auto}
+.fanui-steps--vertical .fanui-steps__item:last-child{padding-bottom:0}
+.fanui-steps--vertical .fanui-steps__body{text-align:start}
+.fanui-steps__body{min-width:0}
+.fanui-timeline{position:relative;list-style:none;margin:0;padding:0}
+.fanui-timeline__item{position:relative;display:flex;gap:var(--fanui-space-4);padding-bottom:var(--fanui-space-5)}
+.fanui-timeline__item:last-child{padding-bottom:0}
+.fanui-timeline__item:not(:last-child)::before{content:"";position:absolute;top:18px;bottom:0;left:6px;width:2px;background-color:var(--fanui-color-border)}
+.fanui-timeline__dot{position:relative;flex:0 0 auto;width:14px;height:14px;margin-top:4px;background-color:var(--fanui-color-surface);border:2px solid var(--fanui-color-border-strong);border-radius:50%;box-sizing:border-box;z-index:1}
+.fanui-timeline__dot--primary{background-color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-timeline__dot--success{background-color:var(--fanui-success);border-color:var(--fanui-success)}
+.fanui-timeline__dot--warning{background-color:var(--fanui-warning);border-color:var(--fanui-warning)}
+.fanui-timeline__dot--danger{background-color:var(--fanui-danger);border-color:var(--fanui-danger)}
+.fanui-timeline__body{flex:1 1 auto;min-width:0}
+.fanui-timeline__time{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-subtle);font-variant-numeric:tabular-nums}
+.fanui-timeline__title{font-size:var(--fanui-font-size-base);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-timeline__desc{margin-top:4px;font-size:var(--fanui-font-size-base);line-height:1.6;color:var(--fanui-color-text-muted)}

package/dist/modules/fanui-feedback.css

@@ -0,0 +1,432 @@
+/* fanUI v2.1.0 · module: feedback（独立产物，自带令牌） */
+.fanui-progress {
+  --fanui-progress-h: 8px;
+  --fanui-progress-radius: var(--fanui-radius-full);
+  --fanui-progress-track: var(--fanui-color-surface-sunken);
+  --fanui-progress-bar: var(--fanui-primary);
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--fanui-progress-h);
+  overflow: hidden;
+  background-color: var(--fanui-progress-track);
+  border-radius: var(--fanui-progress-radius);
+  box-sizing: border-box;
+}
+.fanui-progress__bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 0;
+  height: 100%;
+  background-color: var(--fanui-progress-bar);
+  border-radius: inherit;
+  transition: width 300ms cubic-bezier(0, 0, 0.2, 1) 0s;
+}
+.fanui-progress__label {
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--fanui-color-text-inverse);
+  white-space: nowrap;
+}
+.fanui-progress--xs {
+  --fanui-progress-h: 3px;
+}
+.fanui-progress--sm {
+  --fanui-progress-h: 5px;
+}
+.fanui-progress--lg {
+  --fanui-progress-h: 12px;
+}
+.fanui-progress--xl {
+  --fanui-progress-h: 18px;
+}
+.fanui-progress--striped .fanui-progress__bar {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+.fanui-progress--animated .fanui-progress__bar {
+  animation: fanui-progress-stripes 1s linear infinite;
+}
+.fanui-progress--indeterminate .fanui-progress__bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  animation: fanui-progress-indeterminate 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.fanui-progress--primary {
+  --fanui-progress-bar: var(--fanui-primary, #0e7490);
+}
+.fanui-progress--accent {
+  --fanui-progress-bar: var(--fanui-accent, #7c3aed);
+}
+.fanui-progress--success {
+  --fanui-progress-bar: var(--fanui-success, #047857);
+}
+.fanui-progress--warning {
+  --fanui-progress-bar: var(--fanui-warning, #b45309);
+}
+.fanui-progress--danger {
+  --fanui-progress-bar: var(--fanui-danger, #b91c1c);
+}
+.fanui-progress--info {
+  --fanui-progress-bar: var(--fanui-info, #0369a1);
+}
+.fanui-progress--neutral {
+  --fanui-progress-bar: var(--fanui-color-text-muted);
+}
+
+.fanui-progress-line {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+}
+.fanui-progress-line .fanui-progress {
+  flex: 1 1 auto;
+}
+.fanui-progress-line__text {
+  flex: 0 0 auto;
+  min-width: 40px;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.fanui-progress-ring {
+  --fanui-ring-size: 56px;
+  --fanui-ring-width: 6px;
+  --fanui-ring-value: 0;
+  --fanui-ring-color: var(--fanui-primary);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fanui-ring-size);
+  height: var(--fanui-ring-size);
+  border-radius: 50%;
+  background: conic-gradient(var(--fanui-ring-color) calc(var(--fanui-ring-value) * 1%), var(--fanui-color-surface-sunken) 0);
+}
+.fanui-progress-ring::before {
+  content: "";
+  position: absolute;
+  inset: var(--fanui-ring-width);
+  border-radius: 50%;
+  background-color: var(--fanui-color-surface);
+}
+.fanui-progress-ring__text {
+  position: relative;
+  font-size: var(--fanui-font-size-sm);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+  font-variant-numeric: tabular-nums;
+}
+.fanui-progress-ring--sm {
+  --fanui-ring-size: 40px;
+  --fanui-ring-width: 4px;
+}
+.fanui-progress-ring--lg {
+  --fanui-ring-size: 80px;
+  --fanui-ring-width: 8px;
+}
+
+.fanui-spinner {
+  --fanui-spinner-size: 20px;
+  --fanui-spinner-width: 2px;
+  --fanui-spinner-color: currentColor;
+  display: inline-block;
+  width: var(--fanui-spinner-size);
+  height: var(--fanui-spinner-size);
+  border: var(--fanui-spinner-width) solid rgba(100, 116, 139, 0.25);
+  border-top-color: var(--fanui-spinner-color);
+  border-radius: 50%;
+  animation: fanui-spin 720ms linear infinite;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+.fanui-spinner--primary {
+  --fanui-spinner-color: var(--fanui-primary, #0e7490);
+}
+.fanui-spinner--accent {
+  --fanui-spinner-color: var(--fanui-accent, #7c3aed);
+}
+.fanui-spinner--success {
+  --fanui-spinner-color: var(--fanui-success, #047857);
+}
+.fanui-spinner--warning {
+  --fanui-spinner-color: var(--fanui-warning, #b45309);
+}
+.fanui-spinner--danger {
+  --fanui-spinner-color: var(--fanui-danger, #b91c1c);
+}
+.fanui-spinner--info {
+  --fanui-spinner-color: var(--fanui-info, #0369a1);
+}
+.fanui-spinner--xs {
+  --fanui-spinner-size: 12px;
+  --fanui-spinner-width: 2px;
+}
+.fanui-spinner--sm {
+  --fanui-spinner-size: 16px;
+  --fanui-spinner-width: 2px;
+}
+.fanui-spinner--lg {
+  --fanui-spinner-size: 28px;
+  --fanui-spinner-width: 3px;
+}
+.fanui-spinner--xl {
+  --fanui-spinner-size: 40px;
+  --fanui-spinner-width: 4px;
+}
+.fanui-spinner--dots {
+  width: auto;
+  height: auto;
+  border: 0;
+  animation: none;
+  display: inline-flex;
+  gap: 5px;
+}
+.fanui-spinner--dots::before, .fanui-spinner--dots::after,
+.fanui-spinner--dots > i {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--fanui-spinner-color);
+  animation: fanui-bounce 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+.fanui-spinner--dots::after {
+  animation-delay: 0.15s;
+}
+.fanui-spinner--dots > i {
+  animation-delay: 0.3s;
+}
+.fanui-spinner--pulse {
+  border: 0;
+  animation: fanui-pulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  background-color: var(--fanui-spinner-color);
+  border-radius: 50%;
+}
+
+.fanui-loading {
+  position: relative;
+}
+.fanui-loading__mask {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fanui-space-3);
+  color: var(--fanui-color-text-muted);
+  font-size: var(--fanui-font-size-sm);
+  background-color: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(1px);
+  border-radius: inherit;
+}
+:root[data-fanui-theme=dark] .fanui-loading__mask {
+  background-color: rgba(2, 6, 23, 0.62);
+}
+.fanui-loading.is-loading {
+  pointer-events: none;
+}
+
+.fanui-skeleton {
+  --fanui-skeleton-bg: var(--fanui-color-surface-sunken);
+  --fanui-skeleton-shine: rgba(255, 255, 255, 0.55);
+  display: block;
+  width: 100%;
+  height: 1em;
+  border-radius: var(--fanui-radius-base);
+  background-color: var(--fanui-skeleton-bg);
+  background-image: linear-gradient(90deg, transparent 0%, var(--fanui-skeleton-shine) 50%, transparent 100%);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: fanui-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+:root[data-fanui-theme=dark] .fanui-skeleton {
+  --fanui-skeleton-shine: rgba(255, 255, 255, 0.08);
+}
+.fanui-skeleton--text {
+  height: 1em;
+  border-radius: var(--fanui-radius-sm);
+}
+.fanui-skeleton--title {
+  height: 1.4em;
+  width: 40%;
+  border-radius: var(--fanui-radius-sm);
+}
+.fanui-skeleton--circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+.fanui-skeleton--rect {
+  height: 120px;
+  border-radius: var(--fanui-radius-md);
+}
+.fanui-skeleton--button {
+  height: 32px;
+  width: 88px;
+  border-radius: var(--fanui-radius-base);
+}
+.fanui-skeleton--w-25 {
+  width: 25%;
+}
+.fanui-skeleton--w-50 {
+  width: 50%;
+}
+.fanui-skeleton--w-75 {
+  width: 75%;
+}
+.fanui-skeleton--w-100 {
+  width: 100%;
+}
+.fanui-skeleton--no-anim {
+  animation: none;
+  background-image: none;
+}
+
+.fanui-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fanui-space-2);
+}
+
+.fanui-skeleton-media {
+  display: flex;
+  gap: var(--fanui-space-3);
+  align-items: flex-start;
+}
+
+.fanui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-12) var(--fanui-space-5);
+  text-align: center;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-empty__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-bottom: var(--fanui-space-1);
+  font-size: 28px;
+  color: var(--fanui-color-text-subtle);
+  background-color: var(--fanui-color-surface-sunken);
+  border-radius: 50%;
+}
+.fanui-empty__title {
+  margin: 0;
+  font-size: var(--fanui-font-size-md);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-empty__desc {
+  margin: 0;
+  max-width: 380px;
+  font-size: var(--fanui-font-size-base);
+  line-height: 1.6;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-empty__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  margin-top: var(--fanui-space-2);
+}
+.fanui-empty--sm {
+  padding: var(--fanui-space-6) var(--fanui-space-4);
+}
+.fanui-empty--inline {
+  flex-direction: row;
+  justify-content: flex-start;
+  text-align: start;
+  padding: var(--fanui-space-4);
+}
+
+.fanui-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-12) var(--fanui-space-5);
+  text-align: center;
+}
+.fanui-result__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  font-size: 26px;
+  border-radius: 50%;
+  color: var(--fanui-color-surface);
+  background-color: var(--fanui-color-text-muted);
+}
+.fanui-result__title {
+  font-size: var(--fanui-font-size-xl);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-result__desc {
+  max-width: 440px;
+  font-size: var(--fanui-font-size-base);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-result--primary .fanui-result__icon {
+  background-color: var(--fanui-primary, #0e7490);
+}
+.fanui-result--accent .fanui-result__icon {
+  background-color: var(--fanui-accent, #7c3aed);
+}
+.fanui-result--success .fanui-result__icon {
+  background-color: var(--fanui-success, #047857);
+}
+.fanui-result--warning .fanui-result__icon {
+  background-color: var(--fanui-warning, #b45309);
+}
+.fanui-result--danger .fanui-result__icon {
+  background-color: var(--fanui-danger, #b91c1c);
+}
+.fanui-result--info .fanui-result__icon {
+  background-color: var(--fanui-info, #0369a1);
+}
+
+.fanui-top-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: var(--fanui-z-toast, 1090);
+  background-color: transparent;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-top-progress.is-active {
+  opacity: 1;
+}
+.fanui-top-progress.is-active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 40%;
+  background-color: var(--fanui-primary);
+  border-radius: 9999px;
+  animation: fanui-progress-indeterminate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}

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

@@ -0,0 +1,79 @@
+.fanui-progress{--fanui-progress-h:8px;--fanui-progress-radius:var(--fanui-radius-full);--fanui-progress-track:var(--fanui-color-surface-sunken);--fanui-progress-bar:var(--fanui-primary);position:relative;display:flex;width:100%;height:var(--fanui-progress-h);overflow:hidden;background-color:var(--fanui-progress-track);border-radius:var(--fanui-progress-radius);box-sizing:border-box}
+.fanui-progress__bar{display:flex;align-items:center;justify-content:flex-end;width:0;height:100%;background-color:var(--fanui-progress-bar);border-radius:inherit;transition:width 300ms cubic-bezier(0,0,0.2,1) 0s}
+.fanui-progress__label{padding:0 6px;font-size:10px;font-weight:600;line-height:1;color:var(--fanui-color-text-inverse);white-space:nowrap}
+.fanui-progress--xs{--fanui-progress-h:3px}
+.fanui-progress--sm{--fanui-progress-h:5px}
+.fanui-progress--lg{--fanui-progress-h:12px}
+.fanui-progress--xl{--fanui-progress-h:18px}
+.fanui-progress--striped .fanui-progress__bar{background-image:linear-gradient(45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent);background-size:1rem 1rem}
+.fanui-progress--animated .fanui-progress__bar{animation:fanui-progress-stripes 1s linear infinite}
+.fanui-progress--indeterminate .fanui-progress__bar{position:absolute;top:0;bottom:0;width:35%;animation:fanui-progress-indeterminate 1.6s cubic-bezier(0.4,0,0.2,1) infinite}
+.fanui-progress--primary{--fanui-progress-bar:var(--fanui-primary,#0e7490)}
+.fanui-progress--accent{--fanui-progress-bar:var(--fanui-accent,#7c3aed)}
+.fanui-progress--success{--fanui-progress-bar:var(--fanui-success,#047857)}
+.fanui-progress--warning{--fanui-progress-bar:var(--fanui-warning,#b45309)}
+.fanui-progress--danger{--fanui-progress-bar:var(--fanui-danger,#b91c1c)}
+.fanui-progress--info{--fanui-progress-bar:var(--fanui-info,#0369a1)}
+.fanui-progress--neutral{--fanui-progress-bar:var(--fanui-color-text-muted)}
+.fanui-progress-line{display:flex;align-items:center;gap:var(--fanui-space-3)}
+.fanui-progress-line .fanui-progress{flex:1 1 auto}
+.fanui-progress-line__text{flex:0 0 auto;min-width:40px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted);text-align:end;font-variant-numeric:tabular-nums}
+.fanui-progress-ring{--fanui-ring-size:56px;--fanui-ring-width:6px;--fanui-ring-value:0;--fanui-ring-color:var(--fanui-primary);position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--fanui-ring-size);height:var(--fanui-ring-size);border-radius:50%;background:conic-gradient(var(--fanui-ring-color) calc(var(--fanui-ring-value) * 1%),var(--fanui-color-surface-sunken) 0)}
+.fanui-progress-ring::before{content:"";position:absolute;inset:var(--fanui-ring-width);border-radius:50%;background-color:var(--fanui-color-surface)}
+.fanui-progress-ring__text{position:relative;font-size:var(--fanui-font-size-sm);font-weight:600;color:var(--fanui-color-text-strong);font-variant-numeric:tabular-nums}
+.fanui-progress-ring--sm{--fanui-ring-size:40px;--fanui-ring-width:4px}
+.fanui-progress-ring--lg{--fanui-ring-size:80px;--fanui-ring-width:8px}
+.fanui-spinner{--fanui-spinner-size:20px;--fanui-spinner-width:2px;--fanui-spinner-color:currentColor;display:inline-block;width:var(--fanui-spinner-size);height:var(--fanui-spinner-size);border:var(--fanui-spinner-width) solid rgba(100,116,139,0.25);border-top-color:var(--fanui-spinner-color);border-radius:50%;animation:fanui-spin 720ms linear infinite;box-sizing:border-box;flex:0 0 auto}
+.fanui-spinner--primary{--fanui-spinner-color:var(--fanui-primary,#0e7490)}
+.fanui-spinner--accent{--fanui-spinner-color:var(--fanui-accent,#7c3aed)}
+.fanui-spinner--success{--fanui-spinner-color:var(--fanui-success,#047857)}
+.fanui-spinner--warning{--fanui-spinner-color:var(--fanui-warning,#b45309)}
+.fanui-spinner--danger{--fanui-spinner-color:var(--fanui-danger,#b91c1c)}
+.fanui-spinner--info{--fanui-spinner-color:var(--fanui-info,#0369a1)}
+.fanui-spinner--xs{--fanui-spinner-size:12px;--fanui-spinner-width:2px}
+.fanui-spinner--sm{--fanui-spinner-size:16px;--fanui-spinner-width:2px}
+.fanui-spinner--lg{--fanui-spinner-size:28px;--fanui-spinner-width:3px}
+.fanui-spinner--xl{--fanui-spinner-size:40px;--fanui-spinner-width:4px}
+.fanui-spinner--dots{width:auto;height:auto;border:0;animation:none;display:inline-flex;gap:5px}
+.fanui-spinner--dots::before,.fanui-spinner--dots::after,.fanui-spinner--dots>i{content:"";display:block;width:6px;height:6px;border-radius:50%;background-color:var(--fanui-spinner-color);animation:fanui-bounce 1.2s cubic-bezier(0.4,0,0.2,1) infinite}
+.fanui-spinner--dots::after{animation-delay:0.15s}
+.fanui-spinner--dots>i{animation-delay:0.3s}
+.fanui-spinner--pulse{border:0;animation:fanui-pulse 1.4s cubic-bezier(0.4,0,0.2,1) infinite;background-color:var(--fanui-spinner-color);border-radius:50%}
+.fanui-loading{position:relative}
+.fanui-loading__mask{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fanui-space-3);color:var(--fanui-color-text-muted);font-size:var(--fanui-font-size-sm);background-color:rgba(255,255,255,0.72);backdrop-filter:blur(1px);border-radius:inherit}
+:root[data-fanui-theme=dark] .fanui-loading__mask{background-color:rgba(2,6,23,0.62)}
+.fanui-loading.is-loading{pointer-events:none}
+.fanui-skeleton{--fanui-skeleton-bg:var(--fanui-color-surface-sunken);--fanui-skeleton-shine:rgba(255,255,255,0.55);display:block;width:100%;height:1em;border-radius:var(--fanui-radius-base);background-color:var(--fanui-skeleton-bg);background-image:linear-gradient(90deg,transparent 0%,var(--fanui-skeleton-shine) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:fanui-skeleton-shimmer 1.6s ease-in-out infinite}
+:root[data-fanui-theme=dark] .fanui-skeleton{--fanui-skeleton-shine:rgba(255,255,255,0.08)}
+.fanui-skeleton--text{height:1em;border-radius:var(--fanui-radius-sm)}
+.fanui-skeleton--title{height:1.4em;width:40%;border-radius:var(--fanui-radius-sm)}
+.fanui-skeleton--circle{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
+.fanui-skeleton--rect{height:120px;border-radius:var(--fanui-radius-md)}
+.fanui-skeleton--button{height:32px;width:88px;border-radius:var(--fanui-radius-base)}
+.fanui-skeleton--w-25{width:25%}
+.fanui-skeleton--w-50{width:50%}
+.fanui-skeleton--w-75{width:75%}
+.fanui-skeleton--w-100{width:100%}
+.fanui-skeleton--no-anim{animation:none;background-image:none}
+.fanui-skeleton-group{display:flex;flex-direction:column;gap:var(--fanui-space-2)}
+.fanui-skeleton-media{display:flex;gap:var(--fanui-space-3);align-items:flex-start}
+.fanui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fanui-space-3);padding:var(--fanui-space-12) var(--fanui-space-5);text-align:center;color:var(--fanui-color-text-muted)}
+.fanui-empty__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:var(--fanui-space-1);font-size:28px;color:var(--fanui-color-text-subtle);background-color:var(--fanui-color-surface-sunken);border-radius:50%}
+.fanui-empty__title{margin:0;font-size:var(--fanui-font-size-md);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-empty__desc{margin:0;max-width:380px;font-size:var(--fanui-font-size-base);line-height:1.6;color:var(--fanui-color-text-muted)}
+.fanui-empty__actions{display:flex;align-items:center;gap:var(--fanui-space-3);margin-top:var(--fanui-space-2)}
+.fanui-empty--sm{padding:var(--fanui-space-6) var(--fanui-space-4)}
+.fanui-empty--inline{flex-direction:row;justify-content:flex-start;text-align:start;padding:var(--fanui-space-4)}
+.fanui-result{display:flex;flex-direction:column;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-12) var(--fanui-space-5);text-align:center}
+.fanui-result__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;font-size:26px;border-radius:50%;color:var(--fanui-color-surface);background-color:var(--fanui-color-text-muted)}
+.fanui-result__title{font-size:var(--fanui-font-size-xl);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-result__desc{max-width:440px;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text-muted)}
+.fanui-result--primary .fanui-result__icon{background-color:var(--fanui-primary,#0e7490)}
+.fanui-result--accent .fanui-result__icon{background-color:var(--fanui-accent,#7c3aed)}
+.fanui-result--success .fanui-result__icon{background-color:var(--fanui-success,#047857)}
+.fanui-result--warning .fanui-result__icon{background-color:var(--fanui-warning,#b45309)}
+.fanui-result--danger .fanui-result__icon{background-color:var(--fanui-danger,#b91c1c)}
+.fanui-result--info .fanui-result__icon{background-color:var(--fanui-info,#0369a1)}
+.fanui-top-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:var(--fanui-z-toast,1090);background-color:transparent;overflow:hidden;opacity:0;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-top-progress.is-active{opacity:1}
+.fanui-top-progress.is-active::after{content:"";position:absolute;top:0;bottom:0;width:40%;background-color:var(--fanui-primary);border-radius:9999px;animation:fanui-progress-indeterminate 1.4s cubic-bezier(0.4,0,0.2,1) infinite}