@zhang_jifan/fanui 2.1.0

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

@@ -0,0 +1,122 @@
+.fanui-alert{position:relative;display:flex;align-items:flex-start;gap:var(--fanui-space-3);padding:var(--fanui-space-3) var(--fanui-space-4);font-size:var(--fanui-font-size-base);line-height:1.6;color:var(--fanui-color-text);background-color:var(--fanui-color-surface-sunken);border:1px solid var(--fanui-color-border);border-inline-start:3px solid var(--fanui-color-text-subtle);border-radius:var(--fanui-radius-md);box-sizing:border-box;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s,transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-alert.is-hidden,.fanui-alert[hidden]{display:none}
+.fanui-alert__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;font-size:16px;line-height:1}
+.fanui-alert__content{flex:1 1 auto;min-width:0}
+.fanui-alert__title{margin:0 0 2px;font-size:var(--fanui-font-size-base);font-weight:600;line-height:1.5;color:var(--fanui-color-text-strong)}
+.fanui-alert__desc{margin:0;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text-muted);word-break:break-word}
+.fanui-alert__actions{margin-top:var(--fanui-space-3);display:flex;align-items:center;gap:var(--fanui-space-2)}
+.fanui-alert__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-2px -4px 0 0;padding:0;font-size:14px;line-height:1;color:inherit;opacity:0.6;background:none;border:0;border-radius:var(--fanui-radius-sm);cursor:pointer;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-alert__close:hover{opacity:1;background-color:rgba(15,23,42,0.08)}
+.fanui-alert__close: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-alert__close:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-alert ul,.fanui-alert ol{margin:var(--fanui-space-2) 0 0;padding-inline-start:1.25em;color:var(--fanui-color-text-muted)}
+.fanui-alert--primary{background-color:var(--fanui-primary-soft,rgba(14,116,144,0.1));border-color:var(--fanui-primary-border,rgba(14,116,144,0.28));border-left-color:var(--fanui-primary,#0e7490)}
+.fanui-alert--primary .fanui-alert__icon{color:var(--fanui-primary,#0e7490)}
+.fanui-alert--primary .fanui-alert__title{color:rgb(4.062745098%,33.662745098%,41.7882352941%)}
+.fanui-alert--primary .fanui-alert__desc{color:rgb(4.831372549%,40.031372549%,49.6941176471%)}
+[data-fanui-theme=dark] .fanui-alert--primary{background-color:rgba(14,116,144,0.16);border-color:rgba(14,116,144,0.34)}
+[data-fanui-theme=dark] .fanui-alert--primary .fanui-alert__title{color:var(--fanui-primary-ink,rgb(35.7333333333%,62.9333333333%,70.4%))}
+[data-fanui-theme=dark] .fanui-alert--primary .fanui-alert__desc{color:var(--fanui-primary,rgb(16.831372549%,52.031372549%,61.6941176471%))}
+.fanui-alert--solid.fanui-alert--primary{background-color:var(--fanui-primary,#0e7490);border-color:var(--fanui-primary,#0e7490);border-left-color:rgb(4.1176470588%,34.1176470588%,42.3529411765%);color:var(--fanui-primary-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__title,.fanui-alert--solid.fanui-alert--primary .fanui-alert__desc,.fanui-alert--solid.fanui-alert--primary .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--primary{background-color:transparent;border-color:rgba(14,116,144,0.45);border-left-color:var(--fanui-primary,#0e7490)}
+.fanui-alert--outline.fanui-alert--primary .fanui-alert__icon{color:var(--fanui-primary,#0e7490)}
+.fanui-alert--accent{background-color:var(--fanui-accent-soft,rgba(124,58,237,0.1));border-color:var(--fanui-accent-border,rgba(124,58,237,0.28));border-left-color:var(--fanui-accent,#7c3aed)}
+.fanui-alert--accent .fanui-alert__icon{color:var(--fanui-accent,#7c3aed)}
+.fanui-alert--accent .fanui-alert__title{color:rgb(35.9843137255%,16.831372549%,68.7764705882%)}
+.fanui-alert--accent .fanui-alert__desc{color:rgb(42.7921568627%,20.0156862745%,81.7882352941%)}
+[data-fanui-theme=dark] .fanui-alert--accent{background-color:rgba(124,58,237,0.16);border-color:rgba(124,58,237,0.34)}
+[data-fanui-theme=dark] .fanui-alert--accent .fanui-alert__title{color:var(--fanui-accent-ink,rgb(65.0666666667%,47.4666666667%,95.2%))}
+[data-fanui-theme=dark] .fanui-alert--accent .fanui-alert__desc{color:var(--fanui-accent,rgb(54.7921568627%,32.0156862745%,93.7882352941%))}
+.fanui-alert--solid.fanui-alert--accent{background-color:var(--fanui-accent,#7c3aed);border-color:var(--fanui-accent,#7c3aed);border-left-color:rgb(36.4705882353%,17.0588235294%,69.7058823529%);color:var(--fanui-accent-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__title,.fanui-alert--solid.fanui-alert--accent .fanui-alert__desc,.fanui-alert--solid.fanui-alert--accent .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--accent{background-color:transparent;border-color:rgba(124,58,237,0.45);border-left-color:var(--fanui-accent,#7c3aed)}
+.fanui-alert--outline.fanui-alert--accent .fanui-alert__icon{color:var(--fanui-accent,#7c3aed)}
+.fanui-alert--success{background-color:var(--fanui-success-soft,rgba(4,120,87,0.1));border-color:var(--fanui-success-border,rgba(4,120,87,0.28));border-left-color:var(--fanui-success,#047857)}
+.fanui-alert--success .fanui-alert__icon{color:var(--fanui-success,#047857)}
+.fanui-alert--success .fanui-alert__title{color:rgb(1.1607843137%,34.8235294118%,25.2470588235%)}
+.fanui-alert--success .fanui-alert__desc{color:rgb(1.3803921569%,41.4117647059%,30.0235294118%)}
+[data-fanui-theme=dark] .fanui-alert--success{background-color:rgba(4,120,87,0.16);border-color:rgba(4,120,87,0.34)}
+[data-fanui-theme=dark] .fanui-alert--success .fanui-alert__title{color:var(--fanui-success-ink,rgb(33.0666666667%,64%,55.2%))}
+[data-fanui-theme=dark] .fanui-alert--success .fanui-alert__desc{color:var(--fanui-success,rgb(13.3803921569%,53.4117647059%,42.0235294118%))}
+.fanui-alert--solid.fanui-alert--success{background-color:var(--fanui-success,#047857);border-color:var(--fanui-success,#047857);border-left-color:rgb(1.1764705882%,35.2941176471%,25.5882352941%);color:var(--fanui-success-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--success .fanui-alert__title,.fanui-alert--solid.fanui-alert--success .fanui-alert__desc,.fanui-alert--solid.fanui-alert--success .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--success .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--success{background-color:transparent;border-color:rgba(4,120,87,0.45);border-left-color:var(--fanui-success,#047857)}
+.fanui-alert--outline.fanui-alert--success .fanui-alert__icon{color:var(--fanui-success,#047857)}
+.fanui-alert--warning{background-color:var(--fanui-warning-soft,rgba(180,83,9,0.1));border-color:var(--fanui-warning-border,rgba(180,83,9,0.28));border-left-color:var(--fanui-warning,#b45309)}
+.fanui-alert--warning .fanui-alert__icon{color:var(--fanui-warning,#b45309)}
+.fanui-alert--warning .fanui-alert__title{color:rgb(52.2352941176%,24.0862745098%,2.6117647059%)}
+.fanui-alert--warning .fanui-alert__desc{color:rgb(62.1176470588%,28.6431372549%,3.1058823529%)}
+[data-fanui-theme=dark] .fanui-alert--warning{background-color:rgba(180,83,9,0.16);border-color:rgba(180,83,9,0.34)}
+[data-fanui-theme=dark] .fanui-alert--warning .fanui-alert__title{color:var(--fanui-warning-ink,rgb(80%,54.1333333333%,34.4%))}
+[data-fanui-theme=dark] .fanui-alert--warning .fanui-alert__desc{color:var(--fanui-warning,rgb(74.1176470588%,40.6431372549%,15.1058823529%))}
+.fanui-alert--solid.fanui-alert--warning{background-color:var(--fanui-warning,#b45309);border-color:var(--fanui-warning,#b45309);border-left-color:rgb(52.9411764706%,24.4117647059%,2.6470588235%);color:var(--fanui-warning-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__title,.fanui-alert--solid.fanui-alert--warning .fanui-alert__desc,.fanui-alert--solid.fanui-alert--warning .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--warning{background-color:transparent;border-color:rgba(180,83,9,0.45);border-left-color:var(--fanui-warning,#b45309)}
+.fanui-alert--outline.fanui-alert--warning .fanui-alert__icon{color:var(--fanui-warning,#b45309)}
+.fanui-alert--danger{background-color:var(--fanui-danger-soft,rgba(185,28,28,0.1));border-color:var(--fanui-danger-border,rgba(185,28,28,0.28));border-left-color:var(--fanui-danger,#b91c1c)}
+.fanui-alert--danger .fanui-alert__icon{color:var(--fanui-danger,#b91c1c)}
+.fanui-alert--danger .fanui-alert__title{color:rgb(53.6862745098%,8.1254901961%,8.1254901961%)}
+.fanui-alert--danger .fanui-alert__desc{color:rgb(63.8431372549%,9.662745098%,9.662745098%)}
+[data-fanui-theme=dark] .fanui-alert--danger{background-color:rgba(185,28,28,0.16);border-color:rgba(185,28,28,0.34)}
+[data-fanui-theme=dark] .fanui-alert--danger .fanui-alert__title{color:var(--fanui-danger-ink,rgb(81.3333333333%,39.4666666667%,39.4666666667%))}
+[data-fanui-theme=dark] .fanui-alert--danger .fanui-alert__desc{color:var(--fanui-danger,rgb(75.8431372549%,21.662745098%,21.662745098%))}
+.fanui-alert--solid.fanui-alert--danger{background-color:var(--fanui-danger,#b91c1c);border-color:var(--fanui-danger,#b91c1c);border-left-color:rgb(54.4117647059%,8.2352941176%,8.2352941176%);color:var(--fanui-danger-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__title,.fanui-alert--solid.fanui-alert--danger .fanui-alert__desc,.fanui-alert--solid.fanui-alert--danger .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--danger{background-color:transparent;border-color:rgba(185,28,28,0.45);border-left-color:var(--fanui-danger,#b91c1c)}
+.fanui-alert--outline.fanui-alert--danger .fanui-alert__icon{color:var(--fanui-danger,#b91c1c)}
+.fanui-alert--info{background-color:var(--fanui-info-soft,rgba(3,105,161,0.1));border-color:var(--fanui-info-border,rgba(3,105,161,0.28));border-left-color:var(--fanui-info,#0369a1)}
+.fanui-alert--info .fanui-alert__icon{color:var(--fanui-info,#0369a1)}
+.fanui-alert--info .fanui-alert__title{color:rgb(0.8705882353%,30.4705882353%,46.7215686275%)}
+.fanui-alert--info .fanui-alert__desc{color:rgb(1.0352941176%,36.2352941176%,55.5607843137%)}
+[data-fanui-theme=dark] .fanui-alert--info{background-color:rgba(3,105,161,0.16);border-color:rgba(3,105,161,0.34)}
+[data-fanui-theme=dark] .fanui-alert--info .fanui-alert__title{color:var(--fanui-info-ink,rgb(32.8%,60%,74.9333333333%))}
+[data-fanui-theme=dark] .fanui-alert--info .fanui-alert__desc{color:var(--fanui-info,rgb(13.0352941176%,48.2352941176%,67.5607843137%))}
+.fanui-alert--solid.fanui-alert--info{background-color:var(--fanui-info,#0369a1);border-color:var(--fanui-info,#0369a1);border-left-color:rgb(0.8823529412%,30.8823529412%,47.3529411765%);color:var(--fanui-info-fg,#ffffff)}
+.fanui-alert--solid.fanui-alert--info .fanui-alert__title,.fanui-alert--solid.fanui-alert--info .fanui-alert__desc,.fanui-alert--solid.fanui-alert--info .fanui-alert__icon{color:inherit}
+.fanui-alert--solid.fanui-alert--info .fanui-alert__desc{opacity:0.88}
+.fanui-alert--outline.fanui-alert--info{background-color:transparent;border-color:rgba(3,105,161,0.45);border-left-color:var(--fanui-info,#0369a1)}
+.fanui-alert--outline.fanui-alert--info .fanui-alert__icon{color:var(--fanui-info,#0369a1)}
+.fanui-alert--sm{padding:var(--fanui-space-2) var(--fanui-space-3);font-size:var(--fanui-font-size-sm)}
+.fanui-alert--sm .fanui-alert__icon{width:16px;height:16px;font-size:14px}
+.fanui-alert--lg{padding:var(--fanui-space-4) var(--fanui-space-5)}
+.fanui-alert--lg .fanui-alert__title{font-size:var(--fanui-font-size-md)}
+.fanui-alert--center{align-items:center;text-align:center;flex-direction:column}
+.fanui-alert--center .fanui-alert__icon{margin-top:0}
+.fanui-alert--flat{border-radius:0;border-inline-start-width:0;border-top-width:0;border-inline-end-width:0}
+.fanui-alert--bordered-all{border-inline-start-width:1px}
+.fanui-alert--banner{border-radius:0;border-width:0 0 1px 0;border-inline-start-width:0;padding:var(--fanui-space-3) var(--fanui-container-px,16px);justify-content:center}
+.fanui-alert--banner .fanui-alert__content{flex:0 1 auto;display:flex;align-items:center;gap:var(--fanui-space-2);flex-wrap:wrap}
+.fanui-alert--inline{display:inline-flex;padding:4px 10px;font-size:var(--fanui-font-size-sm);border-radius:var(--fanui-radius-full);border-inline-start-width:1px}
+.fanui-toast-region{position:fixed;top:var(--fanui-space-5);left:50%;transform:translateX(-50%);z-index:var(--fanui-z-toast,1090);display:flex;flex-direction:column;align-items:center;gap:var(--fanui-space-3);pointer-events:none;max-width:min(92vw,480px)}
+.fanui-toast-region--top-right{left:auto;right:var(--fanui-space-5);transform:none;align-items:flex-end}
+.fanui-toast-region--top-left{left:var(--fanui-space-5);transform:none;align-items:flex-start}
+.fanui-toast-region--bottom{top:auto;bottom:var(--fanui-space-5)}
+.fanui-toast-region--bottom-right{top:auto;bottom:var(--fanui-space-5);left:auto;right:var(--fanui-space-5);transform:none;align-items:flex-end}
+.fanui-toast{display:flex;align-items:center;gap:var(--fanui-space-3);padding:var(--fanui-space-3) var(--fanui-space-4);min-width:220px;pointer-events:none;font-size:var(--fanui-font-size-base);color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);box-shadow:var(--fanui-shadow-lg);animation:fanui-toast-in 200ms cubic-bezier(0,0,0.2,1) both}
+.fanui-toast--interactive{pointer-events:auto}
+.fanui-toast__icon{flex:0 0 auto;display:flex;font-size:16px}
+.fanui-toast__content{flex:1 1 auto;min-width:0}
+.fanui-toast__title{font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-toast__desc{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-toast__actions{display:flex;gap:var(--fanui-space-2);margin-inline-start:var(--fanui-space-2);flex:0 0 auto}
+.fanui-toast.is-leaving{animation:fanui-fade-out 200ms cubic-bezier(0.4,0,1,1) both}
+.fanui-toast--primary{border-inline-start:3px solid var(--fanui-primary,#0e7490)}
+.fanui-toast--primary .fanui-toast__icon{color:var(--fanui-primary,#0e7490)}
+.fanui-toast--accent{border-inline-start:3px solid var(--fanui-accent,#7c3aed)}
+.fanui-toast--accent .fanui-toast__icon{color:var(--fanui-accent,#7c3aed)}
+.fanui-toast--success{border-inline-start:3px solid var(--fanui-success,#047857)}
+.fanui-toast--success .fanui-toast__icon{color:var(--fanui-success,#047857)}
+.fanui-toast--warning{border-inline-start:3px solid var(--fanui-warning,#b45309)}
+.fanui-toast--warning .fanui-toast__icon{color:var(--fanui-warning,#b45309)}
+.fanui-toast--danger{border-inline-start:3px solid var(--fanui-danger,#b91c1c)}
+.fanui-toast--danger .fanui-toast__icon{color:var(--fanui-danger,#b91c1c)}
+.fanui-toast--info{border-inline-start:3px solid var(--fanui-info,#0369a1)}
+.fanui-toast--info .fanui-toast__icon{color:var(--fanui-info,#0369a1)}
+.fanui-toast--solid{background-color:var(--fanui-color-text-strong);color:var(--fanui-color-surface);border-color:transparent}
+.fanui-toast--solid .fanui-toast__title{color:inherit}
+.fanui-toast--solid .fanui-toast__desc{color:rgba(255,255,255,0.72)}

package/dist/modules/fanui-badge.css

@@ -0,0 +1,426 @@
+/* fanUI v2.1.0 · module: badge（独立产物，自带令牌） */
+.fanui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 8px;
+  font-size: var(--fanui-font-size-xs);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: var(--fanui-color-text-inverse);
+  background-color: var(--fanui-color-text-muted);
+  border: 1px solid transparent;
+  border-radius: var(--fanui-radius-sm);
+  box-sizing: border-box;
+}
+.fanui-badge--pill {
+  border-radius: 9999px;
+  padding: 0 8px;
+}
+.fanui-badge--square {
+  border-radius: var(--fanui-radius-sm);
+}
+.fanui-badge--circle {
+  width: 20px;
+  padding: 0;
+  border-radius: 50%;
+  font-variant-numeric: tabular-nums;
+}
+.fanui-badge--xs {
+  height: 16px;
+  padding: 0 6px;
+  font-size: 10px;
+}
+.fanui-badge--sm {
+  height: 18px;
+  padding: 0 7px;
+  font-size: 11px;
+}
+.fanui-badge--md {
+  height: 22px;
+  padding: 0 9px;
+  font-size: var(--fanui-font-size-xs);
+}
+.fanui-badge--lg {
+  height: 26px;
+  padding: 0 11px;
+  font-size: var(--fanui-font-size-sm);
+}
+.fanui-badge__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  flex: 0 0 auto;
+}
+.fanui-badge__count {
+  font-variant-numeric: tabular-nums;
+}
+
+.fanui-badge--primary {
+  background-color: var(--fanui-primary, #0e7490);
+  color: var(--fanui-primary-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--primary {
+  background-color: var(--fanui-primary-soft);
+  color: var(--fanui-primary);
+  border-color: var(--fanui-primary-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--primary {
+  color: var(--fanui-primary-ink, rgb(33.8431372549%, 61.8431372549%, 69.5294117647%));
+}
+
+.fanui-badge--outline.fanui-badge--primary {
+  background-color: transparent;
+  color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+}
+
+.fanui-badge--dot.fanui-badge--primary {
+  background-color: var(--fanui-primary);
+}
+
+.fanui-badge--accent {
+  background-color: var(--fanui-accent, #7c3aed);
+  color: var(--fanui-accent-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--accent {
+  background-color: var(--fanui-accent-soft);
+  color: var(--fanui-accent);
+  border-color: var(--fanui-accent-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--accent {
+  color: var(--fanui-accent-ink, rgb(64.0392156863%, 45.9215686275%, 95.0588235294%));
+}
+
+.fanui-badge--outline.fanui-badge--accent {
+  background-color: transparent;
+  color: var(--fanui-accent);
+  border-color: var(--fanui-accent);
+}
+
+.fanui-badge--dot.fanui-badge--accent {
+  background-color: var(--fanui-accent);
+}
+
+.fanui-badge--success {
+  background-color: var(--fanui-success, #047857);
+  color: var(--fanui-success-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--success {
+  background-color: var(--fanui-success-soft);
+  color: var(--fanui-success);
+  border-color: var(--fanui-success-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--success {
+  color: var(--fanui-success-ink, rgb(31.0980392157%, 62.9411764706%, 53.8823529412%));
+}
+
+.fanui-badge--outline.fanui-badge--success {
+  background-color: transparent;
+  color: var(--fanui-success);
+  border-color: var(--fanui-success);
+}
+
+.fanui-badge--dot.fanui-badge--success {
+  background-color: var(--fanui-success);
+}
+
+.fanui-badge--warning {
+  background-color: var(--fanui-warning, #b45309);
+  color: var(--fanui-warning-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--warning {
+  background-color: var(--fanui-warning-soft);
+  color: var(--fanui-warning);
+  border-color: var(--fanui-warning-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--warning {
+  color: var(--fanui-warning-ink, rgb(79.4117647059%, 52.7843137255%, 32.4705882353%));
+}
+
+.fanui-badge--outline.fanui-badge--warning {
+  background-color: transparent;
+  color: var(--fanui-warning);
+  border-color: var(--fanui-warning);
+}
+
+.fanui-badge--dot.fanui-badge--warning {
+  background-color: var(--fanui-warning);
+}
+
+.fanui-badge--danger {
+  background-color: var(--fanui-danger, #b91c1c);
+  color: var(--fanui-danger-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--danger {
+  background-color: var(--fanui-danger-soft);
+  color: var(--fanui-danger);
+  border-color: var(--fanui-danger-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--danger {
+  color: var(--fanui-danger-ink, rgb(80.7843137255%, 37.6862745098%, 37.6862745098%));
+}
+
+.fanui-badge--outline.fanui-badge--danger {
+  background-color: transparent;
+  color: var(--fanui-danger);
+  border-color: var(--fanui-danger);
+}
+
+.fanui-badge--dot.fanui-badge--danger {
+  background-color: var(--fanui-danger);
+}
+
+.fanui-badge--info {
+  background-color: var(--fanui-info, #0369a1);
+  color: var(--fanui-info-fg, #ffffff);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--info {
+  background-color: var(--fanui-info-soft);
+  color: var(--fanui-info);
+  border-color: var(--fanui-info-border);
+}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--info {
+  color: var(--fanui-info-ink, rgb(30.8235294118%, 58.8235294118%, 74.1960784314%));
+}
+
+.fanui-badge--outline.fanui-badge--info {
+  background-color: transparent;
+  color: var(--fanui-info);
+  border-color: var(--fanui-info);
+}
+
+.fanui-badge--dot.fanui-badge--info {
+  background-color: var(--fanui-info);
+}
+
+.fanui-badge--neutral,
+.fanui-badge--gray {
+  background-color: var(--fanui-color-text-muted);
+  color: var(--fanui-color-text-inverse);
+  border-color: transparent;
+}
+
+.fanui-badge--soft.fanui-badge--neutral,
+.fanui-badge--soft.fanui-badge--gray {
+  background-color: var(--fanui-color-surface-sunken);
+  color: var(--fanui-color-text-muted);
+  border-color: var(--fanui-color-border);
+}
+
+.fanui-badge--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: var(--fanui-color-text-muted);
+  border: 0;
+}
+.fanui-badge--dot.fanui-badge--lg {
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+}
+.fanui-badge--dot.fanui-badge--sm {
+  width: 6px;
+  height: 6px;
+  min-width: 6px;
+}
+.fanui-badge--dot--pulse {
+  position: relative;
+}
+.fanui-badge--dot--pulse::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 50%;
+  background-color: inherit;
+  animation: fanui-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+.fanui-badge-sup {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  transform-origin: 100% 0;
+}
+.fanui-badge-sup--dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+  transform: translate(35%, -35%);
+}
+.fanui-badge-sup--bordered {
+  border: 2px solid var(--fanui-color-surface);
+}
+
+.fanui-badge-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.fanui-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: var(--fanui-font-size-sm);
+  line-height: 1;
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface-sunken);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-base);
+  box-sizing: border-box;
+  white-space: nowrap;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-tag--pill {
+  border-radius: 9999px;
+}
+.fanui-tag--solid {
+  background-color: var(--fanui-color-text);
+  color: var(--fanui-color-surface);
+  border-color: transparent;
+}
+.fanui-tag--outline {
+  background-color: transparent;
+}
+.fanui-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-inline-end: -2px;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--fanui-color-text-subtle);
+  background: none;
+  border: 0;
+  border-radius: 50%;
+  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-tag__close:hover {
+  color: var(--fanui-color-text-strong);
+  background-color: rgba(15, 23, 42, 0.12);
+}
+.fanui-tag--interactive {
+  cursor: pointer;
+}
+.fanui-tag--interactive:hover {
+  border-color: var(--fanui-color-border-strong);
+  background-color: var(--fanui-color-hover);
+}
+.fanui-tag--selected {
+  background-color: var(--fanui-primary-soft);
+  border-color: var(--fanui-primary);
+  color: var(--fanui-primary);
+}
+
+.fanui-tag--primary {
+  background-color: var(--fanui-primary-soft);
+  border-color: var(--fanui-primary-border);
+  color: var(--fanui-primary);
+}
+
+.fanui-tag--accent {
+  background-color: var(--fanui-accent-soft);
+  border-color: var(--fanui-accent-border);
+  color: var(--fanui-accent);
+}
+
+.fanui-tag--success {
+  background-color: var(--fanui-success-soft);
+  border-color: var(--fanui-success-border);
+  color: var(--fanui-success);
+}
+
+.fanui-tag--warning {
+  background-color: var(--fanui-warning-soft);
+  border-color: var(--fanui-warning-border);
+  color: var(--fanui-warning);
+}
+
+.fanui-tag--danger {
+  background-color: var(--fanui-danger-soft);
+  border-color: var(--fanui-danger-border);
+  color: var(--fanui-danger);
+}
+
+.fanui-tag--info {
+  background-color: var(--fanui-info-soft);
+  border-color: var(--fanui-info-border);
+  color: var(--fanui-info);
+}
+
+.fanui-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fanui-space-2);
+}
+
+.fanui-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-status__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--fanui-color-text-muted);
+  flex: 0 0 auto;
+}
+.fanui-status--online {
+  color: var(--fanui-success);
+}
+.fanui-status--online .fanui-status__dot {
+  background-color: var(--fanui-success);
+}
+.fanui-status--offline {
+  color: var(--fanui-color-text-subtle);
+}
+.fanui-status--offline .fanui-status__dot {
+  background-color: var(--fanui-color-text-subtle);
+}
+.fanui-status--busy {
+  color: var(--fanui-danger);
+}
+.fanui-status--busy .fanui-status__dot {
+  background-color: var(--fanui-danger);
+}
+.fanui-status--away {
+  color: var(--fanui-warning);
+}
+.fanui-status--away .fanui-status__dot {
+  background-color: var(--fanui-warning);
+}

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

@@ -0,0 +1,77 @@
+.fanui-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:0 8px;font-size:var(--fanui-font-size-xs);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;color:var(--fanui-color-text-inverse);background-color:var(--fanui-color-text-muted);border:1px solid transparent;border-radius:var(--fanui-radius-sm);box-sizing:border-box}
+.fanui-badge--pill{border-radius:9999px;padding:0 8px}
+.fanui-badge--square{border-radius:var(--fanui-radius-sm)}
+.fanui-badge--circle{width:20px;padding:0;border-radius:50%;font-variant-numeric:tabular-nums}
+.fanui-badge--xs{height:16px;padding:0 6px;font-size:10px}
+.fanui-badge--sm{height:18px;padding:0 7px;font-size:11px}
+.fanui-badge--md{height:22px;padding:0 9px;font-size:var(--fanui-font-size-xs)}
+.fanui-badge--lg{height:26px;padding:0 11px;font-size:var(--fanui-font-size-sm)}
+.fanui-badge__dot{width:6px;height:6px;border-radius:50%;background-color:currentColor;flex:0 0 auto}
+.fanui-badge__count{font-variant-numeric:tabular-nums}
+.fanui-badge--primary{background-color:var(--fanui-primary,#0e7490);color:var(--fanui-primary-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--primary{background-color:var(--fanui-primary-soft);color:var(--fanui-primary);border-color:var(--fanui-primary-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--primary{color:var(--fanui-primary-ink,rgb(33.8431372549%,61.8431372549%,69.5294117647%))}
+.fanui-badge--outline.fanui-badge--primary{background-color:transparent;color:var(--fanui-primary);border-color:var(--fanui-primary)}
+.fanui-badge--dot.fanui-badge--primary{background-color:var(--fanui-primary)}
+.fanui-badge--accent{background-color:var(--fanui-accent,#7c3aed);color:var(--fanui-accent-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--accent{background-color:var(--fanui-accent-soft);color:var(--fanui-accent);border-color:var(--fanui-accent-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--accent{color:var(--fanui-accent-ink,rgb(64.0392156863%,45.9215686275%,95.0588235294%))}
+.fanui-badge--outline.fanui-badge--accent{background-color:transparent;color:var(--fanui-accent);border-color:var(--fanui-accent)}
+.fanui-badge--dot.fanui-badge--accent{background-color:var(--fanui-accent)}
+.fanui-badge--success{background-color:var(--fanui-success,#047857);color:var(--fanui-success-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--success{background-color:var(--fanui-success-soft);color:var(--fanui-success);border-color:var(--fanui-success-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--success{color:var(--fanui-success-ink,rgb(31.0980392157%,62.9411764706%,53.8823529412%))}
+.fanui-badge--outline.fanui-badge--success{background-color:transparent;color:var(--fanui-success);border-color:var(--fanui-success)}
+.fanui-badge--dot.fanui-badge--success{background-color:var(--fanui-success)}
+.fanui-badge--warning{background-color:var(--fanui-warning,#b45309);color:var(--fanui-warning-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--warning{background-color:var(--fanui-warning-soft);color:var(--fanui-warning);border-color:var(--fanui-warning-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--warning{color:var(--fanui-warning-ink,rgb(79.4117647059%,52.7843137255%,32.4705882353%))}
+.fanui-badge--outline.fanui-badge--warning{background-color:transparent;color:var(--fanui-warning);border-color:var(--fanui-warning)}
+.fanui-badge--dot.fanui-badge--warning{background-color:var(--fanui-warning)}
+.fanui-badge--danger{background-color:var(--fanui-danger,#b91c1c);color:var(--fanui-danger-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--danger{background-color:var(--fanui-danger-soft);color:var(--fanui-danger);border-color:var(--fanui-danger-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--danger{color:var(--fanui-danger-ink,rgb(80.7843137255%,37.6862745098%,37.6862745098%))}
+.fanui-badge--outline.fanui-badge--danger{background-color:transparent;color:var(--fanui-danger);border-color:var(--fanui-danger)}
+.fanui-badge--dot.fanui-badge--danger{background-color:var(--fanui-danger)}
+.fanui-badge--info{background-color:var(--fanui-info,#0369a1);color:var(--fanui-info-fg,#ffffff);border-color:transparent}
+.fanui-badge--soft.fanui-badge--info{background-color:var(--fanui-info-soft);color:var(--fanui-info);border-color:var(--fanui-info-border)}
+[data-fanui-theme=dark] .fanui-badge--soft.fanui-badge--info{color:var(--fanui-info-ink,rgb(30.8235294118%,58.8235294118%,74.1960784314%))}
+.fanui-badge--outline.fanui-badge--info{background-color:transparent;color:var(--fanui-info);border-color:var(--fanui-info)}
+.fanui-badge--dot.fanui-badge--info{background-color:var(--fanui-info)}
+.fanui-badge--neutral,.fanui-badge--gray{background-color:var(--fanui-color-text-muted);color:var(--fanui-color-text-inverse);border-color:transparent}
+.fanui-badge--soft.fanui-badge--neutral,.fanui-badge--soft.fanui-badge--gray{background-color:var(--fanui-color-surface-sunken);color:var(--fanui-color-text-muted);border-color:var(--fanui-color-border)}
+.fanui-badge--dot{width:8px;height:8px;min-width:8px;padding:0;border-radius:50%;background-color:var(--fanui-color-text-muted);border:0}
+.fanui-badge--dot.fanui-badge--lg{width:10px;height:10px;min-width:10px}
+.fanui-badge--dot.fanui-badge--sm{width:6px;height:6px;min-width:6px}
+.fanui-badge--dot--pulse{position:relative}
+.fanui-badge--dot--pulse::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-color:inherit;animation:fanui-pulse 1.8s cubic-bezier(0.4,0,0.2,1) infinite}
+.fanui-badge-sup{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:1;transform-origin:100% 0}
+.fanui-badge-sup--dot{width:8px;height:8px;padding:0;border-radius:50%;transform:translate(35%,-35%)}
+.fanui-badge-sup--bordered{border:2px solid var(--fanui-color-surface)}
+.fanui-badge-wrap{position:relative;display:inline-flex}
+.fanui-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;font-size:var(--fanui-font-size-sm);line-height:1;color:var(--fanui-color-text);background-color:var(--fanui-color-surface-sunken);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-base);box-sizing:border-box;white-space:nowrap;transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-tag--pill{border-radius:9999px}
+.fanui-tag--solid{background-color:var(--fanui-color-text);color:var(--fanui-color-surface);border-color:transparent}
+.fanui-tag--outline{background-color:transparent}
+.fanui-tag__close{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-inline-end:-2px;padding:0;font-size:12px;line-height:1;color:var(--fanui-color-text-subtle);background:none;border:0;border-radius:50%;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-tag__close:hover{color:var(--fanui-color-text-strong);background-color:rgba(15,23,42,0.12)}
+.fanui-tag--interactive{cursor:pointer}
+.fanui-tag--interactive:hover{border-color:var(--fanui-color-border-strong);background-color:var(--fanui-color-hover)}
+.fanui-tag--selected{background-color:var(--fanui-primary-soft);border-color:var(--fanui-primary);color:var(--fanui-primary)}
+.fanui-tag--primary{background-color:var(--fanui-primary-soft);border-color:var(--fanui-primary-border);color:var(--fanui-primary)}
+.fanui-tag--accent{background-color:var(--fanui-accent-soft);border-color:var(--fanui-accent-border);color:var(--fanui-accent)}
+.fanui-tag--success{background-color:var(--fanui-success-soft);border-color:var(--fanui-success-border);color:var(--fanui-success)}
+.fanui-tag--warning{background-color:var(--fanui-warning-soft);border-color:var(--fanui-warning-border);color:var(--fanui-warning)}
+.fanui-tag--danger{background-color:var(--fanui-danger-soft);border-color:var(--fanui-danger-border);color:var(--fanui-danger)}
+.fanui-tag--info{background-color:var(--fanui-info-soft);border-color:var(--fanui-info-border);color:var(--fanui-info)}
+.fanui-tag-list{display:flex;flex-wrap:wrap;gap:var(--fanui-space-2)}
+.fanui-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-status__dot{width:6px;height:6px;border-radius:50%;background-color:var(--fanui-color-text-muted);flex:0 0 auto}
+.fanui-status--online{color:var(--fanui-success)}
+.fanui-status--online .fanui-status__dot{background-color:var(--fanui-success)}
+.fanui-status--offline{color:var(--fanui-color-text-subtle)}
+.fanui-status--offline .fanui-status__dot{background-color:var(--fanui-color-text-subtle)}
+.fanui-status--busy{color:var(--fanui-danger)}
+.fanui-status--busy .fanui-status__dot{background-color:var(--fanui-danger)}
+.fanui-status--away{color:var(--fanui-warning)}
+.fanui-status--away .fanui-status__dot{background-color:var(--fanui-warning)}