@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-tabs.css

@@ -0,0 +1,333 @@
+/* fanUI v2.1.0 · module: tabs（独立产物，自带令牌） */
+.fanui-tabs {
+  display: flex;
+  flex-direction: column;
+}
+.fanui-tabs__list {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-1);
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.fanui-tabs__list::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.fanui-tabs__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  padding: 10px 14px;
+  font-size: var(--fanui-font-size-base);
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--fanui-color-text-muted);
+  text-decoration: none;
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-tabs__item:hover {
+  color: var(--fanui-color-text-strong);
+  text-decoration: none;
+}
+.fanui-tabs__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-tabs__item:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-tabs__item.is-active, .fanui-tabs__item[aria-selected=true] {
+  color: var(--fanui-primary);
+  border-bottom-color: var(--fanui-primary);
+  font-weight: 600;
+}
+.fanui-tabs__item.is-disabled, .fanui-tabs__item:disabled {
+  color: var(--fanui-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.fanui-tabs__item__icon {
+  display: inline-flex;
+  font-size: 1.05em;
+}
+.fanui-tabs__item__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 2px;
+  margin-inline-end: -4px;
+  border-radius: 50%;
+  color: inherit;
+  opacity: 0.6;
+}
+.fanui-tabs__item__close:hover {
+  opacity: 1;
+  background-color: rgba(15, 23, 42, 0.1);
+}
+.fanui-tabs__panel {
+  display: none;
+  padding-top: var(--fanui-space-4);
+}
+.fanui-tabs__panel.is-active {
+  display: block;
+  animation: fanui-fade-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
+}
+.fanui-tabs__badge {
+  margin-inline-start: 4px;
+}
+.fanui-tabs--line > .fanui-tabs__list {
+  border-bottom: 1px solid var(--fanui-color-border);
+}
+.fanui-tabs--card > .fanui-tabs__list {
+  gap: 4px;
+  padding: 4px 4px 0;
+  border-bottom: 1px solid var(--fanui-color-border);
+}
+.fanui-tabs--card > .fanui-tabs__list > .fanui-tabs__item {
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: var(--fanui-radius-base) var(--fanui-radius-base) 0 0;
+  margin-bottom: -1px;
+}
+.fanui-tabs--card > .fanui-tabs__list > .fanui-tabs__item.is-active {
+  background-color: var(--fanui-color-surface);
+  border-color: var(--fanui-color-border);
+  border-bottom-color: var(--fanui-color-surface);
+}
+.fanui-tabs--pill > .fanui-tabs__list {
+  gap: 4px;
+  padding: 4px;
+  background-color: var(--fanui-color-surface-sunken);
+  border-radius: var(--fanui-radius-md);
+  border-bottom: 0;
+}
+.fanui-tabs--pill > .fanui-tabs__list > .fanui-tabs__item {
+  border-bottom: 0;
+  border-radius: var(--fanui-radius-base);
+  padding: 7px 14px;
+}
+.fanui-tabs--pill > .fanui-tabs__list > .fanui-tabs__item.is-active {
+  color: var(--fanui-color-text-strong);
+  background-color: var(--fanui-color-surface);
+  box-shadow: var(--fanui-shadow-xs);
+}
+.fanui-tabs--segmented > .fanui-tabs__list {
+  gap: 0;
+  border-bottom: 0;
+}
+.fanui-tabs--segmented > .fanui-tabs__list > .fanui-tabs__item {
+  border: 1px solid var(--fanui-color-border);
+  border-bottom: 1px solid var(--fanui-color-border);
+  border-inline-end-width: 0;
+  border-radius: 0;
+  padding: 7px 16px;
+  margin-inline-start: -1px;
+}
+.fanui-tabs--segmented > .fanui-tabs__list > .fanui-tabs__item:first-child {
+  margin-inline-start: 0;
+  border-radius: var(--fanui-radius-base) 0 0 var(--fanui-radius-base);
+}
+.fanui-tabs--segmented > .fanui-tabs__list > .fanui-tabs__item:last-child {
+  border-inline-end-width: 1px;
+  border-radius: 0 var(--fanui-radius-base) var(--fanui-radius-base) 0;
+}
+.fanui-tabs--segmented > .fanui-tabs__list > .fanui-tabs__item.is-active {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+  z-index: 1;
+}
+.fanui-tabs--vertical {
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--fanui-space-4);
+}
+.fanui-tabs--vertical > .fanui-tabs__list {
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: 0;
+  border-inline-end: 1px solid var(--fanui-color-border);
+  overflow: visible;
+  min-width: var(--fanui-tabs-aside-width, 160px);
+}
+.fanui-tabs--vertical > .fanui-tabs__list > .fanui-tabs__item {
+  justify-content: flex-start;
+  border-bottom: 0;
+  border-inline-end: 2px solid transparent;
+  border-radius: var(--fanui-radius-base) 0 0 var(--fanui-radius-base);
+  margin-inline-end: -1px;
+}
+.fanui-tabs--vertical > .fanui-tabs__list > .fanui-tabs__item.is-active {
+  border-right-color: var(--fanui-primary);
+  background-color: var(--fanui-primary-soft);
+}
+.fanui-tabs--vertical > .fanui-tabs__panel {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-top: 0;
+}
+
+.fanui-accordion {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-lg);
+  overflow: hidden;
+  background-color: var(--fanui-color-surface);
+}
+.fanui-accordion--flush {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.fanui-accordion--separated {
+  gap: var(--fanui-space-2);
+  border: 0;
+  background: transparent;
+}
+.fanui-accordion__item {
+  border-bottom: 1px solid var(--fanui-color-border);
+}
+.fanui-accordion__item:last-child {
+  border-bottom: 0;
+}
+.fanui-accordion--separated .fanui-accordion__item {
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  overflow: hidden;
+  background-color: var(--fanui-color-surface);
+}
+.fanui-accordion__header {
+  margin: 0;
+  font-size: inherit;
+  font-weight: inherit;
+}
+.fanui-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-3);
+  width: 100%;
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+  font-size: var(--fanui-font-size-base);
+  font-weight: 600;
+  line-height: 1.5;
+  text-align: start;
+  color: var(--fanui-color-text-strong);
+  background: none;
+  border: 0;
+  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-accordion__trigger:hover {
+  background-color: var(--fanui-color-hover);
+}
+.fanui-accordion__trigger: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-accordion__trigger:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-accordion__trigger__icon,
+.fanui-accordion__trigger .fanui-accordion__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  font-size: 14px;
+  color: var(--fanui-color-text-subtle);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-accordion__trigger[aria-expanded=true] .fanui-accordion__icon, .fanui-accordion__trigger[aria-expanded=true] .fanui-accordion__trigger__icon {
+  transform: rotate(180deg);
+}
+.fanui-accordion__trigger--sm {
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-sm);
+}
+.fanui-accordion__trigger--lg {
+  padding: var(--fanui-space-5);
+  font-size: var(--fanui-font-size-md);
+}
+.fanui-accordion__panel {
+  display: none;
+  padding: 0 var(--fanui-space-5) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-base);
+  line-height: var(--fanui-line-height-relaxed);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-accordion__panel.is-open, .fanui-accordion__panel.is-active {
+  display: block;
+  animation: fanui-slide-in-down 200ms cubic-bezier(0, 0, 0.2, 1) both;
+}
+
+.fanui-collapse__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fanui-font-size-base);
+  font-weight: 500;
+  color: var(--fanui-color-text);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+.fanui-collapse__trigger__icon {
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-collapse__trigger[aria-expanded=true] .fanui-collapse__trigger__icon {
+  transform: rotate(90deg);
+}
+.fanui-collapse__panel {
+  display: none;
+}
+.fanui-collapse__panel.is-open {
+  display: block;
+  animation: fanui-slide-in-down 200ms cubic-bezier(0, 0, 0.2, 1) both;
+}
+
+.fanui-tab-scroll {
+  display: flex;
+  gap: var(--fanui-space-2);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-tab-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.fanui-tab-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-tab-scroll::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-tab-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-tab-scroll {
+  padding-bottom: 2px;
+}

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

@@ -0,0 +1,58 @@
+.fanui-tabs{display:flex;flex-direction:column}
+.fanui-tabs__list{display:flex;align-items:center;gap:var(--fanui-space-1);position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
+.fanui-tabs__list::-webkit-scrollbar{display:none;width:0;height:0}
+.fanui-tabs__item{position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:10px 14px;font-size:var(--fanui-font-size-base);font-weight:500;line-height:1.4;color:var(--fanui-color-text-muted);text-decoration:none;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;box-sizing:border-box;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,border-color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-tabs__item:hover{color:var(--fanui-color-text-strong);text-decoration:none}
+.fanui-tabs__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-tabs__item:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-tabs__item.is-active,.fanui-tabs__item[aria-selected=true]{color:var(--fanui-primary);border-bottom-color:var(--fanui-primary);font-weight:600}
+.fanui-tabs__item.is-disabled,.fanui-tabs__item:disabled{color:var(--fanui-color-disabled-text);cursor:not-allowed;pointer-events:none}
+.fanui-tabs__item__icon{display:inline-flex;font-size:1.05em}
+.fanui-tabs__item__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-inline-start:2px;margin-inline-end:-4px;border-radius:50%;color:inherit;opacity:0.6}
+.fanui-tabs__item__close:hover{opacity:1;background-color:rgba(15,23,42,0.1)}
+.fanui-tabs__panel{display:none;padding-top:var(--fanui-space-4)}
+.fanui-tabs__panel.is-active{display:block;animation:fanui-fade-in 200ms cubic-bezier(0,0,0.2,1) both}
+.fanui-tabs__badge{margin-inline-start:4px}
+.fanui-tabs--line>.fanui-tabs__list{border-bottom:1px solid var(--fanui-color-border)}
+.fanui-tabs--card>.fanui-tabs__list{gap:4px;padding:4px 4px 0;border-bottom:1px solid var(--fanui-color-border)}
+.fanui-tabs--card>.fanui-tabs__list>.fanui-tabs__item{border:1px solid transparent;border-bottom:0;border-radius:var(--fanui-radius-base) var(--fanui-radius-base) 0 0;margin-bottom:-1px}
+.fanui-tabs--card>.fanui-tabs__list>.fanui-tabs__item.is-active{background-color:var(--fanui-color-surface);border-color:var(--fanui-color-border);border-bottom-color:var(--fanui-color-surface)}
+.fanui-tabs--pill>.fanui-tabs__list{gap:4px;padding:4px;background-color:var(--fanui-color-surface-sunken);border-radius:var(--fanui-radius-md);border-bottom:0}
+.fanui-tabs--pill>.fanui-tabs__list>.fanui-tabs__item{border-bottom:0;border-radius:var(--fanui-radius-base);padding:7px 14px}
+.fanui-tabs--pill>.fanui-tabs__list>.fanui-tabs__item.is-active{color:var(--fanui-color-text-strong);background-color:var(--fanui-color-surface);box-shadow:var(--fanui-shadow-xs)}
+.fanui-tabs--segmented>.fanui-tabs__list{gap:0;border-bottom:0}
+.fanui-tabs--segmented>.fanui-tabs__list>.fanui-tabs__item{border:1px solid var(--fanui-color-border);border-bottom:1px solid var(--fanui-color-border);border-inline-end-width:0;border-radius:0;padding:7px 16px;margin-inline-start:-1px}
+.fanui-tabs--segmented>.fanui-tabs__list>.fanui-tabs__item:first-child{margin-inline-start:0;border-radius:var(--fanui-radius-base) 0 0 var(--fanui-radius-base)}
+.fanui-tabs--segmented>.fanui-tabs__list>.fanui-tabs__item:last-child{border-inline-end-width:1px;border-radius:0 var(--fanui-radius-base) var(--fanui-radius-base) 0}
+.fanui-tabs--segmented>.fanui-tabs__list>.fanui-tabs__item.is-active{color:var(--fanui-primary-fg);background-color:var(--fanui-primary);border-color:var(--fanui-primary);z-index:1}
+.fanui-tabs--vertical{flex-direction:row;align-items:stretch;gap:var(--fanui-space-4)}
+.fanui-tabs--vertical>.fanui-tabs__list{flex-direction:column;align-items:stretch;border-bottom:0;border-inline-end:1px solid var(--fanui-color-border);overflow:visible;min-width:var(--fanui-tabs-aside-width,160px)}
+.fanui-tabs--vertical>.fanui-tabs__list>.fanui-tabs__item{justify-content:flex-start;border-bottom:0;border-inline-end:2px solid transparent;border-radius:var(--fanui-radius-base) 0 0 var(--fanui-radius-base);margin-inline-end:-1px}
+.fanui-tabs--vertical>.fanui-tabs__list>.fanui-tabs__item.is-active{border-right-color:var(--fanui-primary);background-color:var(--fanui-primary-soft)}
+.fanui-tabs--vertical>.fanui-tabs__panel{flex:1 1 auto;min-width:0;padding-top:0}
+.fanui-accordion{display:flex;flex-direction:column;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);overflow:hidden;background-color:var(--fanui-color-surface)}
+.fanui-accordion--flush{border:0;border-radius:0;background:transparent}
+.fanui-accordion--separated{gap:var(--fanui-space-2);border:0;background:transparent}
+.fanui-accordion__item{border-bottom:1px solid var(--fanui-color-border)}
+.fanui-accordion__item:last-child{border-bottom:0}
+.fanui-accordion--separated .fanui-accordion__item{border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);overflow:hidden;background-color:var(--fanui-color-surface)}
+.fanui-accordion__header{margin:0;font-size:inherit;font-weight:inherit}
+.fanui-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);width:100%;padding:var(--fanui-space-4) var(--fanui-space-5);font-size:var(--fanui-font-size-base);font-weight:600;line-height:1.5;text-align:start;color:var(--fanui-color-text-strong);background:none;border:0;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-accordion__trigger:hover{background-color:var(--fanui-color-hover)}
+.fanui-accordion__trigger: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-accordion__trigger:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-accordion__trigger__icon,.fanui-accordion__trigger .fanui-accordion__icon{flex:0 0 auto;display:inline-flex;font-size:14px;color:var(--fanui-color-text-subtle);transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-accordion__trigger[aria-expanded=true] .fanui-accordion__icon,.fanui-accordion__trigger[aria-expanded=true] .fanui-accordion__trigger__icon{transform:rotate(180deg)}
+.fanui-accordion__trigger--sm{padding:var(--fanui-space-3) var(--fanui-space-4);font-size:var(--fanui-font-size-sm)}
+.fanui-accordion__trigger--lg{padding:var(--fanui-space-5);font-size:var(--fanui-font-size-md)}
+.fanui-accordion__panel{display:none;padding:0 var(--fanui-space-5) var(--fanui-space-4);font-size:var(--fanui-font-size-base);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text-muted)}
+.fanui-accordion__panel.is-open,.fanui-accordion__panel.is-active{display:block;animation:fanui-slide-in-down 200ms cubic-bezier(0,0,0.2,1) both}
+.fanui-collapse__trigger{display:inline-flex;align-items:center;gap:6px;font-size:var(--fanui-font-size-base);font-weight:500;color:var(--fanui-color-text);background:none;border:0;cursor:pointer;padding:0}
+.fanui-collapse__trigger__icon{transition:transform 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-collapse__trigger[aria-expanded=true] .fanui-collapse__trigger__icon{transform:rotate(90deg)}
+.fanui-collapse__panel{display:none}
+.fanui-collapse__panel.is-open{display:block;animation:fanui-slide-in-down 200ms cubic-bezier(0,0,0.2,1) both}
+.fanui-tab-scroll{display:flex;gap:var(--fanui-space-2);overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-tab-scroll::-webkit-scrollbar{width:6px;height:6px}
+.fanui-tab-scroll::-webkit-scrollbar-track{background:transparent}
+.fanui-tab-scroll::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-tab-scroll::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-tab-scroll{padding-bottom:2px}