@zhang_jifan/fanui 2.1.0

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

@@ -0,0 +1,56 @@
+.fanui-btn{--fanui-btn-bg:var(--fanui-primary);--fanui-btn-fg:var(--fanui-primary-fg,#fff);--fanui-btn-border:var(--fanui-primary);--fanui-btn-hover-bg:var(--fanui-primary-hover);--fanui-btn-hover-fg:var(--fanui-primary-fg,#fff);--fanui-btn-hover-border:var(--fanui-primary-hover);--fanui-btn-active-bg:var(--fanui-primary-active);--fanui-btn-active-fg:var(--fanui-primary-fg,#fff);--fanui-btn-active-border:var(--fanui-primary-active);--fanui-btn-ring:var(--fanui-primary-ring);--fanui-btn-height:var(--fanui-control-h,36px);--fanui-btn-padding-x:var(--fanui-control-px,14px);--fanui-btn-font-size:var(--fanui-font-size-base);--fanui-btn-radius:var(--fanui-radius-base);--fanui-btn-gap:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fanui-btn-gap);min-height:var(--fanui-btn-height);padding:0 var(--fanui-btn-padding-x);font-family:inherit;font-size:var(--fanui-btn-font-size);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle;text-decoration:none;text-align:center;color:var(--fanui-btn-fg);background-color:var(--fanui-btn-bg);border:1px solid var(--fanui-btn-border);border-radius:var(--fanui-btn-radius);cursor:pointer;user-select:none;box-sizing:border-box;overflow:hidden;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,box-shadow 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s,opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-clip:padding-box}
+.fanui-btn:hover:not(:disabled):not(.is-disabled){color:var(--fanui-btn-hover-fg);background-color:var(--fanui-btn-hover-bg);border-color:var(--fanui-btn-hover-border);text-decoration:none}
+.fanui-btn:active:not(:disabled):not(.is-disabled),.fanui-btn.is-active{color:var(--fanui-btn-active-fg);background-color:var(--fanui-btn-active-bg);border-color:var(--fanui-btn-active-border)}
+.fanui-btn:focus-visible{outline:0;box-shadow:0 0 0 var(--fanui-btn-ring)}
+.fanui-btn>svg,.fanui-btn .fanui-btn__icon{flex:0 0 auto;width:1em;height:1em;font-size:1.15em;line-height:1;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
+.fanui-btn:disabled,.fanui-btn.is-disabled,.fanui-btn[aria-disabled=true]{opacity:0.55;cursor:not-allowed;pointer-events:none;box-shadow:none}
+.fanui-btn[aria-busy=true]{pointer-events:none}
+.fanui-btn--primary{--fanui-btn-bg:var(--fanui-primary,#0e7490);--fanui-btn-fg:var(--fanui-primary-fg,#ffffff);--fanui-btn-border:var(--fanui-primary,#0e7490);--fanui-btn-hover-bg:var(--fanui-primary-hover,rgb(4.9411764706%,40.9411764706%,50.8235294118%));--fanui-btn-hover-fg:var(--fanui-primary-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-primary-hover,rgb(4.9411764706%,40.9411764706%,50.8235294118%));--fanui-btn-active-bg:var(--fanui-primary-active,rgb(4.5019607843%,37.3019607843%,46.3058823529%));--fanui-btn-active-fg:var(--fanui-primary-fg,#ffffff);--fanui-btn-active-border:var(--fanui-primary-active,rgb(4.5019607843%,37.3019607843%,46.3058823529%));--fanui-btn-ring:var(--fanui-primary-ring,rgba(14,116,144,0.3))}
+.fanui-btn--accent{--fanui-btn-bg:var(--fanui-accent,#7c3aed);--fanui-btn-fg:var(--fanui-accent-fg,#ffffff);--fanui-btn-border:var(--fanui-accent,#7c3aed);--fanui-btn-hover-bg:var(--fanui-accent-hover,rgb(43.7647058824%,20.4705882353%,83.6470588235%));--fanui-btn-hover-fg:var(--fanui-accent-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-accent-hover,rgb(43.7647058824%,20.4705882353%,83.6470588235%));--fanui-btn-active-bg:var(--fanui-accent-active,rgb(39.8745098039%,18.6509803922%,76.2117647059%));--fanui-btn-active-fg:var(--fanui-accent-fg,#ffffff);--fanui-btn-active-border:var(--fanui-accent-active,rgb(39.8745098039%,18.6509803922%,76.2117647059%));--fanui-btn-ring:var(--fanui-accent-ring,rgba(124,58,237,0.3))}
+.fanui-btn--success{--fanui-btn-bg:var(--fanui-success,#047857);--fanui-btn-fg:var(--fanui-success-fg,#ffffff);--fanui-btn-border:var(--fanui-success,#047857);--fanui-btn-hover-bg:var(--fanui-success-hover,rgb(1.4117647059%,42.3529411765%,30.7058823529%));--fanui-btn-hover-fg:var(--fanui-success-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-success-hover,rgb(1.4117647059%,42.3529411765%,30.7058823529%));--fanui-btn-active-bg:var(--fanui-success-active,rgb(1.2862745098%,38.5882352941%,27.9764705882%));--fanui-btn-active-fg:var(--fanui-success-fg,#ffffff);--fanui-btn-active-border:var(--fanui-success-active,rgb(1.2862745098%,38.5882352941%,27.9764705882%));--fanui-btn-ring:var(--fanui-success-ring,rgba(4,120,87,0.3))}
+.fanui-btn--warning{--fanui-btn-bg:var(--fanui-warning,#b45309);--fanui-btn-fg:var(--fanui-warning-fg,#ffffff);--fanui-btn-border:var(--fanui-warning,#b45309);--fanui-btn-hover-bg:var(--fanui-warning-hover,rgb(63.5294117647%,29.2941176471%,3.1764705882%));--fanui-btn-hover-fg:var(--fanui-warning-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-warning-hover,rgb(63.5294117647%,29.2941176471%,3.1764705882%));--fanui-btn-active-bg:var(--fanui-warning-active,rgb(57.8823529412%,26.6901960784%,2.8941176471%));--fanui-btn-active-fg:var(--fanui-warning-fg,#ffffff);--fanui-btn-active-border:var(--fanui-warning-active,rgb(57.8823529412%,26.6901960784%,2.8941176471%));--fanui-btn-ring:var(--fanui-warning-ring,rgba(180,83,9,0.3))}
+.fanui-btn--danger{--fanui-btn-bg:var(--fanui-danger,#b91c1c);--fanui-btn-fg:var(--fanui-danger-fg,#ffffff);--fanui-btn-border:var(--fanui-danger,#b91c1c);--fanui-btn-hover-bg:var(--fanui-danger-hover,rgb(65.2941176471%,9.8823529412%,9.8823529412%));--fanui-btn-hover-fg:var(--fanui-danger-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-danger-hover,rgb(65.2941176471%,9.8823529412%,9.8823529412%));--fanui-btn-active-bg:var(--fanui-danger-active,rgb(59.4901960784%,9.0039215686%,9.0039215686%));--fanui-btn-active-fg:var(--fanui-danger-fg,#ffffff);--fanui-btn-active-border:var(--fanui-danger-active,rgb(59.4901960784%,9.0039215686%,9.0039215686%));--fanui-btn-ring:var(--fanui-danger-ring,rgba(185,28,28,0.3))}
+.fanui-btn--info{--fanui-btn-bg:var(--fanui-info,#0369a1);--fanui-btn-fg:var(--fanui-info-fg,#ffffff);--fanui-btn-border:var(--fanui-info,#0369a1);--fanui-btn-hover-bg:var(--fanui-info-hover,rgb(1.0588235294%,37.0588235294%,56.8235294118%));--fanui-btn-hover-fg:var(--fanui-info-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-info-hover,rgb(1.0588235294%,37.0588235294%,56.8235294118%));--fanui-btn-active-bg:var(--fanui-info-active,rgb(0.9647058824%,33.7647058824%,51.7725490196%));--fanui-btn-active-fg:var(--fanui-info-fg,#ffffff);--fanui-btn-active-border:var(--fanui-info-active,rgb(0.9647058824%,33.7647058824%,51.7725490196%));--fanui-btn-ring:var(--fanui-info-ring,rgba(3,105,161,0.3))}
+.fanui-btn--neutral,.fanui-btn--default{--fanui-btn-bg:var(--fanui-color-surface);--fanui-btn-fg:var(--fanui-color-text);--fanui-btn-border:var(--fanui-color-border-strong);--fanui-btn-hover-bg:var(--fanui-color-hover);--fanui-btn-hover-fg:var(--fanui-color-text-strong);--fanui-btn-hover-border:var(--fanui-color-border-strong);--fanui-btn-active-bg:var(--fanui-color-active);--fanui-btn-active-fg:var(--fanui-color-text-strong);--fanui-btn-active-border:var(--fanui-color-border-strong);--fanui-btn-ring:rgba(14,116,144,0.28)}
+.fanui-btn--white{--fanui-btn-bg:#ffffff;--fanui-btn-fg:var(--fanui-color-text-strong);--fanui-btn-border:#ffffff;--fanui-btn-hover-bg:rgb(90%,90%,90%);--fanui-btn-hover-fg:var(--fanui-color-text-strong);--fanui-btn-hover-border:rgb(90%,90%,90%);--fanui-btn-active-bg:rgb(82%,82%,82%);--fanui-btn-active-fg:var(--fanui-color-text-strong);--fanui-btn-active-border:rgb(82%,82%,82%);--fanui-btn-ring:rgba(255,255,255,0.3)}
+.fanui-btn--outline.fanui-btn--primary{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-primary,#0e7490);--fanui-btn-border:var(--fanui-primary,#0e7490);--fanui-btn-hover-bg:var(--fanui-primary,#0e7490);--fanui-btn-hover-fg:var(--fanui-primary-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-primary,#0e7490);--fanui-btn-active-bg:var(--fanui-primary-active,rgb(4.5019607843%,37.3019607843%,46.3058823529%));--fanui-btn-active-fg:var(--fanui-primary-fg,#ffffff);--fanui-btn-active-border:var(--fanui-primary-active,rgb(4.5019607843%,37.3019607843%,46.3058823529%));--fanui-btn-ring:var(--fanui-primary-ring,rgba(14,116,144,0.3))}
+.fanui-btn--outline.fanui-btn--accent{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-accent,#7c3aed);--fanui-btn-border:var(--fanui-accent,#7c3aed);--fanui-btn-hover-bg:var(--fanui-accent,#7c3aed);--fanui-btn-hover-fg:var(--fanui-accent-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-accent,#7c3aed);--fanui-btn-active-bg:var(--fanui-accent-active,rgb(39.8745098039%,18.6509803922%,76.2117647059%));--fanui-btn-active-fg:var(--fanui-accent-fg,#ffffff);--fanui-btn-active-border:var(--fanui-accent-active,rgb(39.8745098039%,18.6509803922%,76.2117647059%));--fanui-btn-ring:var(--fanui-accent-ring,rgba(124,58,237,0.3))}
+.fanui-btn--outline.fanui-btn--success{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-success,#047857);--fanui-btn-border:var(--fanui-success,#047857);--fanui-btn-hover-bg:var(--fanui-success,#047857);--fanui-btn-hover-fg:var(--fanui-success-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-success,#047857);--fanui-btn-active-bg:var(--fanui-success-active,rgb(1.2862745098%,38.5882352941%,27.9764705882%));--fanui-btn-active-fg:var(--fanui-success-fg,#ffffff);--fanui-btn-active-border:var(--fanui-success-active,rgb(1.2862745098%,38.5882352941%,27.9764705882%));--fanui-btn-ring:var(--fanui-success-ring,rgba(4,120,87,0.3))}
+.fanui-btn--outline.fanui-btn--warning{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-warning,#b45309);--fanui-btn-border:var(--fanui-warning,#b45309);--fanui-btn-hover-bg:var(--fanui-warning,#b45309);--fanui-btn-hover-fg:var(--fanui-warning-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-warning,#b45309);--fanui-btn-active-bg:var(--fanui-warning-active,rgb(57.8823529412%,26.6901960784%,2.8941176471%));--fanui-btn-active-fg:var(--fanui-warning-fg,#ffffff);--fanui-btn-active-border:var(--fanui-warning-active,rgb(57.8823529412%,26.6901960784%,2.8941176471%));--fanui-btn-ring:var(--fanui-warning-ring,rgba(180,83,9,0.3))}
+.fanui-btn--outline.fanui-btn--danger{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-danger,#b91c1c);--fanui-btn-border:var(--fanui-danger,#b91c1c);--fanui-btn-hover-bg:var(--fanui-danger,#b91c1c);--fanui-btn-hover-fg:var(--fanui-danger-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-danger,#b91c1c);--fanui-btn-active-bg:var(--fanui-danger-active,rgb(59.4901960784%,9.0039215686%,9.0039215686%));--fanui-btn-active-fg:var(--fanui-danger-fg,#ffffff);--fanui-btn-active-border:var(--fanui-danger-active,rgb(59.4901960784%,9.0039215686%,9.0039215686%));--fanui-btn-ring:var(--fanui-danger-ring,rgba(185,28,28,0.3))}
+.fanui-btn--outline.fanui-btn--info{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-info,#0369a1);--fanui-btn-border:var(--fanui-info,#0369a1);--fanui-btn-hover-bg:var(--fanui-info,#0369a1);--fanui-btn-hover-fg:var(--fanui-info-fg,#ffffff);--fanui-btn-hover-border:var(--fanui-info,#0369a1);--fanui-btn-active-bg:var(--fanui-info-active,rgb(0.9647058824%,33.7647058824%,51.7725490196%));--fanui-btn-active-fg:var(--fanui-info-fg,#ffffff);--fanui-btn-active-border:var(--fanui-info-active,rgb(0.9647058824%,33.7647058824%,51.7725490196%));--fanui-btn-ring:var(--fanui-info-ring,rgba(3,105,161,0.3))}
+.fanui-btn--ghost,.fanui-btn--text{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-color-text-muted);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-color-hover);--fanui-btn-hover-fg:var(--fanui-color-text);--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:var(--fanui-color-active);--fanui-btn-active-fg:var(--fanui-color-text-strong);--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-primary-ring)}
+.fanui-btn--ghost.fanui-btn--primary,.fanui-btn--text.fanui-btn--primary{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-primary,#0e7490);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-primary-soft,rgba(14,116,144,0.1));--fanui-btn-hover-fg:var(--fanui-primary-hover,rgb(5.0509803922%,41.8509803922%,51.9529411765%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(14,116,144,0.18);--fanui-btn-active-fg:var(--fanui-primary-active,rgb(4.6117647059%,38.2117647059%,47.4352941176%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-primary-ring,rgba(14,116,144,0.3))}
+.fanui-btn--ghost.fanui-btn--accent,.fanui-btn--text.fanui-btn--accent{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-accent,#7c3aed);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-accent-soft,rgba(124,58,237,0.1));--fanui-btn-hover-fg:var(--fanui-accent-hover,rgb(44.737254902%,20.9254901961%,85.5058823529%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(124,58,237,0.18);--fanui-btn-active-fg:var(--fanui-accent-active,rgb(40.8470588235%,19.1058823529%,78.0705882353%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-accent-ring,rgba(124,58,237,0.3))}
+.fanui-btn--ghost.fanui-btn--success,.fanui-btn--text.fanui-btn--success{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-success,#047857);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-success-soft,rgba(4,120,87,0.1));--fanui-btn-hover-fg:var(--fanui-success-hover,rgb(1.4431372549%,43.2941176471%,31.3882352941%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(4,120,87,0.18);--fanui-btn-active-fg:var(--fanui-success-active,rgb(1.3176470588%,39.5294117647%,28.6588235294%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-success-ring,rgba(4,120,87,0.3))}
+.fanui-btn--ghost.fanui-btn--warning,.fanui-btn--text.fanui-btn--warning{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-warning,#b45309);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-warning-soft,rgba(180,83,9,0.1));--fanui-btn-hover-fg:var(--fanui-warning-hover,rgb(64.9411764706%,29.9450980392%,3.2470588235%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(180,83,9,0.18);--fanui-btn-active-fg:var(--fanui-warning-active,rgb(59.2941176471%,27.3411764706%,2.9647058824%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-warning-ring,rgba(180,83,9,0.3))}
+.fanui-btn--ghost.fanui-btn--danger,.fanui-btn--text.fanui-btn--danger{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-danger,#b91c1c);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-danger-soft,rgba(185,28,28,0.1));--fanui-btn-hover-fg:var(--fanui-danger-hover,rgb(66.7450980392%,10.1019607843%,10.1019607843%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(185,28,28,0.18);--fanui-btn-active-fg:var(--fanui-danger-active,rgb(60.9411764706%,9.2235294118%,9.2235294118%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-danger-ring,rgba(185,28,28,0.3))}
+.fanui-btn--ghost.fanui-btn--info,.fanui-btn--text.fanui-btn--info{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-info,#0369a1);--fanui-btn-border:transparent;--fanui-btn-hover-bg:var(--fanui-info-soft,rgba(3,105,161,0.1));--fanui-btn-hover-fg:var(--fanui-info-hover,rgb(1.0823529412%,37.8823529412%,58.0862745098%));--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:rgba(3,105,161,0.18);--fanui-btn-active-fg:var(--fanui-info-active,rgb(0.9882352941%,34.5882352941%,53.0352941176%));--fanui-btn-active-border:transparent;--fanui-btn-ring:var(--fanui-info-ring,rgba(3,105,161,0.3))}
+.fanui-btn--link{--fanui-btn-bg:transparent;--fanui-btn-fg:var(--fanui-primary);--fanui-btn-border:transparent;--fanui-btn-hover-bg:transparent;--fanui-btn-hover-fg:var(--fanui-primary-hover);--fanui-btn-hover-border:transparent;--fanui-btn-active-bg:transparent;--fanui-btn-active-fg:var(--fanui-primary-active);--fanui-btn-active-border:transparent;padding:0;min-height:auto;text-decoration:none}
+.fanui-btn--link:hover{text-decoration:underline}
+.fanui-btn--xs{--fanui-btn-height:24px;--fanui-btn-padding-x:8px;--fanui-btn-font-size:var(--fanui-font-size-xs);--fanui-btn-radius:var(--fanui-radius-sm);--fanui-btn-gap:4px}
+.fanui-btn--sm{--fanui-btn-height:28px;--fanui-btn-padding-x:10px;--fanui-btn-font-size:var(--fanui-font-size-sm);--fanui-btn-gap:4px}
+.fanui-btn--md{--fanui-btn-height:32px;--fanui-btn-padding-x:12px;--fanui-btn-font-size:var(--fanui-font-size-base)}
+.fanui-btn--base,.fanui-btn--lg{--fanui-btn-height:40px;--fanui-btn-padding-x:16px;--fanui-btn-font-size:var(--fanui-font-size-md)}
+.fanui-btn--xl{--fanui-btn-height:48px;--fanui-btn-padding-x:22px;--fanui-btn-font-size:var(--fanui-font-size-lg);--fanui-btn-radius:var(--fanui-radius-md)}
+.fanui-btn--block{display:flex;width:100%}
+.fanui-btn--square{--fanui-btn-padding-x:0;width:var(--fanui-btn-height);padding:0;flex:0 0 auto}
+.fanui-btn--circle{--fanui-btn-padding-x:0;width:var(--fanui-btn-height);padding:0;border-radius:9999px;flex:0 0 auto}
+.fanui-btn--pill{--fanui-btn-radius:9999px}
+.fanui-btn--sharp{--fanui-btn-radius:0}
+.fanui-btn--icon-start{flex-direction:row-reverse}
+.fanui-btn--icon-end{flex-direction:row}
+.fanui-btn--loading,.fanui-btn.is-loading{pointer-events:none;color:transparent !important}
+.fanui-btn--loading::after,.fanui-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-0.5em 0 0 -0.5em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:var(--fanui-btn-fg);animation:fanui-spin 700ms linear infinite}
+.fanui-btn--loading>*,.fanui-btn.is-loading>*{visibility:hidden}
+.fanui-btn-group{display:inline-flex;vertical-align:middle;border-radius:var(--fanui-radius-base);overflow:hidden}
+.fanui-btn-group>.fanui-btn{border-radius:0;margin-inline-start:-1px;flex:1 1 auto}
+.fanui-btn-group>.fanui-btn:first-child{margin-inline-start:0;border-start-start-radius:var(--fanui-radius-base);border-end-start-radius:var(--fanui-radius-base)}
+.fanui-btn-group>.fanui-btn:last-child{border-start-end-radius:var(--fanui-radius-base);border-end-end-radius:var(--fanui-radius-base)}
+.fanui-btn-group>.fanui-btn:hover,.fanui-btn-group>.fanui-btn:focus-visible,.fanui-btn-group>.fanui-btn.is-active{z-index:1}
+.fanui-btn-group--pill{border-radius:9999px}
+.fanui-btn-group--vertical{flex-direction:column}
+.fanui-btn-group--vertical>.fanui-btn{margin-inline-start:0;margin-top:-1px;width:100%}
+.fanui-btn-group--vertical>.fanui-btn:first-child{border-radius:var(--fanui-radius-base) var(--fanui-radius-base) 0 0}
+.fanui-btn-group--vertical>.fanui-btn:last-child{border-radius:0 0 var(--fanui-radius-base) var(--fanui-radius-base)}
+.fanui-btn-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fanui-space-3)}

package/dist/modules/fanui-card.css

@@ -0,0 +1,291 @@
+/* fanUI v2.1.0 · module: card（独立产物，自带令牌） */
+.fanui-card {
+  --fanui-card-padding: var(--fanui-space-5);
+  --fanui-card-radius: var(--fanui-radius-lg);
+  --fanui-card-bg: var(--fanui-color-surface);
+  --fanui-card-border: var(--fanui-color-border);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--fanui-card-bg);
+  border: 1px solid var(--fanui-card-border);
+  border-radius: var(--fanui-card-radius);
+  box-shadow: var(--fanui-shadow-sm);
+  box-sizing: border-box;
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-card-padding);
+  border-bottom: 1px solid var(--fanui-card-border);
+  flex: 0 0 auto;
+}
+.fanui-card__title {
+  margin: 0;
+  font-size: var(--fanui-font-size-md);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-card__subtitle {
+  margin: 2px 0 0;
+  font-size: var(--fanui-font-size-sm);
+  font-weight: 400;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-card__extra {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-card__body {
+  flex: 1 1 auto;
+  padding: var(--fanui-card-padding);
+  min-width: 0;
+}
+.fanui-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-card-padding);
+  border-top: 1px solid var(--fanui-card-border);
+  flex: 0 0 auto;
+}
+.fanui-card__footer--start {
+  justify-content: flex-start;
+}
+.fanui-card__footer--between {
+  justify-content: space-between;
+}
+.fanui-card__media {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: hidden;
+  border-radius: var(--fanui-card-radius) var(--fanui-card-radius) 0 0;
+  background-color: var(--fanui-color-surface-sunken);
+}
+.fanui-card__media > img,
+.fanui-card__media > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.fanui-card__body--flush {
+  padding: 0;
+}
+.fanui-card__body--tight {
+  padding: var(--fanui-space-3);
+}
+.fanui-card__body--loose {
+  padding: var(--fanui-space-8);
+}
+
+.fanui-card--flat,
+.fanui-card--bordered {
+  box-shadow: none;
+}
+
+.fanui-card--elevated {
+  border-color: transparent;
+  box-shadow: var(--fanui-shadow-md);
+}
+
+.fanui-card--glass {
+  background-color: rgba(255, 255, 255, 0.66);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+:root[data-fanui-theme=dark] .fanui-card--glass {
+  background-color: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.fanui-card--sunken {
+  --fanui-card-bg: var(--fanui-color-surface-sunken);
+  box-shadow: none;
+}
+
+.fanui-card--ghost {
+  --fanui-card-bg: transparent;
+  --fanui-card-border: transparent;
+  box-shadow: none;
+}
+
+.fanui-card--accent-bar {
+  overflow: hidden;
+}
+.fanui-card--accent-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 3px;
+  background-color: var(--fanui-card-accent, var(--fanui-primary));
+}
+
+.fanui-card--primary {
+  --fanui-card-border: rgba(14, 116, 144, 0.35);
+  --fanui-card-accent: var(--fanui-primary, #0e7490);
+}
+
+.fanui-card--accent {
+  --fanui-card-border: rgba(124, 58, 237, 0.35);
+  --fanui-card-accent: var(--fanui-accent, #7c3aed);
+}
+
+.fanui-card--success {
+  --fanui-card-border: rgba(4, 120, 87, 0.35);
+  --fanui-card-accent: var(--fanui-success, #047857);
+}
+
+.fanui-card--warning {
+  --fanui-card-border: rgba(180, 83, 9, 0.35);
+  --fanui-card-accent: var(--fanui-warning, #b45309);
+}
+
+.fanui-card--danger {
+  --fanui-card-border: rgba(185, 28, 28, 0.35);
+  --fanui-card-accent: var(--fanui-danger, #b91c1c);
+}
+
+.fanui-card--info {
+  --fanui-card-border: rgba(3, 105, 161, 0.35);
+  --fanui-card-accent: var(--fanui-info, #0369a1);
+}
+
+.fanui-card--interactive {
+  cursor: pointer;
+}
+.fanui-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--fanui-shadow-lg);
+  border-color: var(--fanui-color-border-strong);
+}
+.fanui-card--interactive:active {
+  transform: translateY(0);
+}
+.fanui-card--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-card--interactive:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+
+.fanui-card--selected {
+  border-color: var(--fanui-primary);
+  box-shadow: 0 0 0 1px var(--fanui-primary), var(--fanui-shadow-md);
+}
+
+.fanui-card--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  filter: grayscale(0.3);
+}
+
+.fanui-card--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+}
+.fanui-card--horizontal .fanui-card__media {
+  flex: 0 0 auto;
+  width: var(--fanui-card-media-width, 33.333%);
+  border-radius: var(--fanui-card-radius) 0 0 var(--fanui-card-radius);
+}
+.fanui-card--horizontal .fanui-card__media > img, .fanui-card--horizontal .fanui-card__media > video {
+  height: 100%;
+}
+@media (max-width: 575.95px) {
+  .fanui-card--horizontal {
+    flex-direction: column;
+  }
+  .fanui-card--horizontal .fanui-card__media {
+    width: 100%;
+    border-radius: var(--fanui-card-radius) var(--fanui-card-radius) 0 0;
+  }
+}
+
+.fanui-card--fill {
+  height: 100%;
+}
+
+.fanui-card--compact {
+  --fanui-card-padding: var(--fanui-space-3);
+  --fanui-card-radius: var(--fanui-radius-md);
+}
+
+.fanui-card--roomy {
+  --fanui-card-padding: var(--fanui-space-8);
+}
+
+.fanui-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--fanui-space-5);
+}
+
+.fanui-panel {
+  padding: var(--fanui-space-5);
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+}
+.fanui-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--fanui-space-4);
+  padding-bottom: var(--fanui-space-3);
+  border-bottom: 1px solid var(--fanui-color-border-subtle);
+}
+.fanui-panel__title {
+  font-size: var(--fanui-font-size-base);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+
+.fanui-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fanui-space-2);
+}
+.fanui-stat__label {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-stat__value {
+  font-size: var(--fanui-font-size-3xl);
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--fanui-color-text-strong);
+  font-variant-numeric: tabular-nums;
+}
+.fanui-stat__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--fanui-font-size-sm);
+  font-weight: 500;
+}
+.fanui-stat__trend--up {
+  color: var(--fanui-danger);
+}
+.fanui-stat__trend--down {
+  color: var(--fanui-success);
+}
+.fanui-stat__trend--flat {
+  color: var(--fanui-color-text-muted);
+}

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

@@ -0,0 +1,52 @@
+.fanui-card{--fanui-card-padding:var(--fanui-space-5);--fanui-card-radius:var(--fanui-radius-lg);--fanui-card-bg:var(--fanui-color-surface);--fanui-card-border:var(--fanui-color-border);position:relative;display:flex;flex-direction:column;min-width:0;background-color:var(--fanui-card-bg);border:1px solid var(--fanui-card-border);border-radius:var(--fanui-card-radius);box-shadow:var(--fanui-shadow-sm);box-sizing:border-box;transition:box-shadow 200ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 200ms cubic-bezier(0.4,0,0.2,1) 0s,transform 200ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);padding:var(--fanui-card-padding);border-bottom:1px solid var(--fanui-card-border);flex:0 0 auto}
+.fanui-card__title{margin:0;font-size:var(--fanui-font-size-md);font-weight:600;line-height:1.4;color:var(--fanui-color-text-strong)}
+.fanui-card__subtitle{margin:2px 0 0;font-size:var(--fanui-font-size-sm);font-weight:400;color:var(--fanui-color-text-muted)}
+.fanui-card__extra{flex:0 0 auto;display:flex;align-items:center;gap:var(--fanui-space-2);color:var(--fanui-color-text-muted)}
+.fanui-card__body{flex:1 1 auto;padding:var(--fanui-card-padding);min-width:0}
+.fanui-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fanui-space-3);padding:var(--fanui-card-padding);border-top:1px solid var(--fanui-card-border);flex:0 0 auto}
+.fanui-card__footer--start{justify-content:flex-start}
+.fanui-card__footer--between{justify-content:space-between}
+.fanui-card__media{position:relative;flex:0 0 auto;overflow:hidden;border-radius:var(--fanui-card-radius) var(--fanui-card-radius) 0 0;background-color:var(--fanui-color-surface-sunken)}
+.fanui-card__media>img,.fanui-card__media>video{width:100%;height:100%;object-fit:cover;display:block}
+.fanui-card__body--flush{padding:0}
+.fanui-card__body--tight{padding:var(--fanui-space-3)}
+.fanui-card__body--loose{padding:var(--fanui-space-8)}
+.fanui-card--flat,.fanui-card--bordered{box-shadow:none}
+.fanui-card--elevated{border-color:transparent;box-shadow:var(--fanui-shadow-md)}
+.fanui-card--glass{background-color:rgba(255,255,255,0.66);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-color:rgba(255,255,255,0.5)}
+:root[data-fanui-theme=dark] .fanui-card--glass{background-color:rgba(15,23,42,0.6);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-color:rgba(255,255,255,0.1)}
+.fanui-card--sunken{--fanui-card-bg:var(--fanui-color-surface-sunken);box-shadow:none}
+.fanui-card--ghost{--fanui-card-bg:transparent;--fanui-card-border:transparent;box-shadow:none}
+.fanui-card--accent-bar{overflow:hidden}
+.fanui-card--accent-bar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background-color:var(--fanui-card-accent,var(--fanui-primary))}
+.fanui-card--primary{--fanui-card-border:rgba(14,116,144,0.35);--fanui-card-accent:var(--fanui-primary,#0e7490)}
+.fanui-card--accent{--fanui-card-border:rgba(124,58,237,0.35);--fanui-card-accent:var(--fanui-accent,#7c3aed)}
+.fanui-card--success{--fanui-card-border:rgba(4,120,87,0.35);--fanui-card-accent:var(--fanui-success,#047857)}
+.fanui-card--warning{--fanui-card-border:rgba(180,83,9,0.35);--fanui-card-accent:var(--fanui-warning,#b45309)}
+.fanui-card--danger{--fanui-card-border:rgba(185,28,28,0.35);--fanui-card-accent:var(--fanui-danger,#b91c1c)}
+.fanui-card--info{--fanui-card-border:rgba(3,105,161,0.35);--fanui-card-accent:var(--fanui-info,#0369a1)}
+.fanui-card--interactive{cursor:pointer}
+.fanui-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--fanui-shadow-lg);border-color:var(--fanui-color-border-strong)}
+.fanui-card--interactive:active{transform:translateY(0)}
+.fanui-card--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-card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-card--selected{border-color:var(--fanui-primary);box-shadow:0 0 0 1px var(--fanui-primary),var(--fanui-shadow-md)}
+.fanui-card--disabled{opacity:0.6;pointer-events:none;filter:grayscale(0.3)}
+.fanui-card--horizontal{flex-direction:row;align-items:stretch}
+.fanui-card--horizontal .fanui-card__media{flex:0 0 auto;width:var(--fanui-card-media-width,33.333%);border-radius:var(--fanui-card-radius) 0 0 var(--fanui-card-radius)}
+.fanui-card--horizontal .fanui-card__media>img,.fanui-card--horizontal .fanui-card__media>video{height:100%}@media (max-width:575.95px){.fanui-card--horizontal{flex-direction:column}
+.fanui-card--horizontal .fanui-card__media{width:100%;border-radius:var(--fanui-card-radius) var(--fanui-card-radius) 0 0}}
+.fanui-card--fill{height:100%}
+.fanui-card--compact{--fanui-card-padding:var(--fanui-space-3);--fanui-card-radius:var(--fanui-radius-md)}
+.fanui-card--roomy{--fanui-card-padding:var(--fanui-space-8)}
+.fanui-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--fanui-space-5)}
+.fanui-panel{padding:var(--fanui-space-5);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md)}
+.fanui-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fanui-space-4);padding-bottom:var(--fanui-space-3);border-bottom:1px solid var(--fanui-color-border-subtle)}
+.fanui-panel__title{font-size:var(--fanui-font-size-base);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-stat{display:flex;flex-direction:column;gap:var(--fanui-space-2)}
+.fanui-stat__label{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-stat__value{font-size:var(--fanui-font-size-3xl);font-weight:700;line-height:1.1;color:var(--fanui-color-text-strong);font-variant-numeric:tabular-nums}
+.fanui-stat__trend{display:inline-flex;align-items:center;gap:4px;font-size:var(--fanui-font-size-sm);font-weight:500}
+.fanui-stat__trend--up{color:var(--fanui-danger)}
+.fanui-stat__trend--down{color:var(--fanui-success)}
+.fanui-stat__trend--flat{color:var(--fanui-color-text-muted)}