@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0-alpha.3

package/css/segmented.css

@@ -0,0 +1,215 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='segmented'] {
+    --xh-segmented-skin: 1;
+  }
+
+  /* 一条轨道装着若干段，指示器在轨道里滑。指示器是绝对定位的，
+     root 必须是它的定位参照系；段与段之间不留缝，所以不设 gap */
+  [data-scope='segmented'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，段与文字从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_segmented-h: var(--xh-control-h-md);
+    --xh-_segmented-px: var(--xh-control-px-md);
+    --xh-_segmented-gap: var(--xh-control-gap-md);
+    --xh-_segmented-font-size: var(--xh-text-label-size);
+    /* 指示器底色与选中段的文字色；没写 data-tone 时就是这里的取值 */
+    --xh-_segmented-indicator-bg: var(--xh-bg-surface);
+    --xh-_segmented-fg-selected: var(--xh-fg-default);
+
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    padding: var(--xh-segmented-track-padding, var(--xh-space-0_5));
+    border: var(--xh-stroke-thin) solid var(--xh-segmented-border, var(--xh-border-subtle));
+    border-radius: var(--xh-segmented-radius, var(--xh-shape-control));
+    background: var(--xh-segmented-bg, var(--xh-bg-subtle));
+    font-size: var(--xh-segmented-font-size, var(--xh-_segmented-font-size));
+  }
+
+  /* 横排时外盒整体就是一档控件高：段被 align-items: stretch 撑满轨道内侧，与同行控件齐平 */
+  [data-scope='segmented'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+    block-size: var(--xh-segmented-h, var(--xh-_segmented-h));
+  }
+
+  [data-scope='segmented'][data-part='root'][data-orientation='horizontal'] [data-scope='segmented'][data-part='item'] {
+    block-size: auto;
+  }
+
+  [data-scope='segmented'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 撑满行宽：各段等分剩余空间，长短不一的文字也排得齐 */
+  [data-scope='segmented'][data-part='root'][data-block] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* 等分只在横排成立：竖排的主轴是块轴，flex-basis: 0 会顶掉段自己的高度档，
+     段高改由「等分容器高度」决定，三档控件高度从此对它没有作用。
+     竖排下段本来就靠上面那条 inline-size: 100% 与 align-items: stretch 撑满宽度 */
+  [data-scope='segmented'][data-part='root'][data-block][data-orientation='horizontal']
+    > [data-scope='segmented'][data-part='item'] {
+    flex: 1 1 0;
+  }
+
+  /* root 会短暂拿到 tabindex=0，但它的 onFocus 立刻把焦点转投给段，
+     在它身上画环只会闪一下就跳走，高亮要长在段上 */
+  [data-scope='segmented'][data-part='root']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='segmented'][data-part='root'][data-invalid] {
+    border-color: var(--xh-segmented-border-invalid, var(--xh-border-invalid));
+  }
+
+  [data-scope='segmented'][data-part='root'][data-disabled] {
+    background: var(--xh-segmented-bg-disabled, var(--xh-bg-muted));
+    cursor: not-allowed;
+  }
+
+  /* 整组禁用时指示器落回轨道平面（不再浮起），但底色一点不兑淡：
+     它上面压着选中段的文字，往 muted 兑哪怕一成，brand 的对比度就从 5.08 掉到 4.24 */
+  [data-scope='segmented'][data-part='root'][data-disabled]
+    [data-scope='segmented'][data-part='indicator'] {
+    box-shadow: var(--xh-segmented-indicator-shadow-disabled, none);
+  }
+
+  /* —— 语气 —— */
+  /* 选择器带 [data-tone] 限定：不限定的话，放在语气容器里的分段控件会跟着改色 */
+  [data-scope='segmented'][data-part='root'][data-tone] {
+    --xh-_segmented-indicator-bg: var(--xh-_tone, var(--xh-bg-surface));
+    --xh-_segmented-fg-selected: var(--xh-_tone-on, var(--xh-fg-default));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省的 md 档写在上面的基础规则里 */
+  [data-scope='segmented'][data-part='root'][data-size='sm'] {
+    --xh-_segmented-h: var(--xh-control-h-sm);
+    --xh-_segmented-px: var(--xh-control-px-sm);
+    --xh-_segmented-gap: var(--xh-control-gap-sm);
+    --xh-_segmented-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='segmented'][data-part='root'][data-size='lg'] {
+    --xh-_segmented-h: var(--xh-control-h-lg);
+    --xh-_segmented-px: var(--xh-control-px-lg);
+    --xh-_segmented-gap: var(--xh-control-gap-lg);
+    --xh-_segmented-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 段自己也定位，于是与绝对定位的指示器按文档序比高低：
+     指示器写在段之前，段与它的焦点环便压在指示器上面，不必动层号 */
+  [data-scope='segmented'][data-part='item'] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-segmented-item-gap, var(--xh-_segmented-gap));
+    block-size: var(--xh-segmented-item-h, var(--xh-_segmented-h));
+    padding-inline: var(--xh-segmented-item-px, var(--xh-_segmented-px));
+    border: 0;
+    border-radius: var(--xh-segmented-item-radius, var(--xh-shape-inset));
+    background: transparent;
+    color: var(--xh-segmented-item-fg, var(--xh-fg-muted));
+    /* 按钮不继承宿主字体，尺寸档在 root 上，两者都要显式接过来 */
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--xh-segmented-item-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 选中态：单选是 role=radio + aria-checked，样式一律读 data-state，不读 ARIA。
+     文字色也要跟着变——指示器是可选部件，作者不渲染它时"当前是哪一段"仍然要看得出来 */
+  [data-scope='segmented'][data-part='item'][data-state='checked'] {
+    color: var(--xh-segmented-item-fg-checked, var(--xh-_segmented-fg-selected));
+  }
+
+  /* 悬停只提亮未选中的那几段：选中段的底下压着指示器，再变色就成了两套强调。
+     底色用中性的悬停档——它是「指哪一段」的轻反馈，不表达选中 */
+  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-state='checked']):hover {
+    background-color: var(--xh-segmented-item-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-segmented-item-fg-hover, var(--xh-fg-default));
+  }
+
+  /* 按下去要有回应：整段轻微下压，松手即弹回。选中段也压——按在已选段上同样是一次点击。
+     只读段不压：它本来就不接受改值，压下去等于骗人 */
+  [data-scope='segmented'][data-part='item']:not([data-disabled]):not([data-readonly]):active {
+    scale: var(--xh-segmented-item-press-scale, var(--xh-motion-scale-press));
+  }
+
+  /* 只读：值改不动，但对比度不降，光标也不摆出"禁止"的样子 */
+  [data-scope='segmented'][data-part='item'][data-readonly] {
+    cursor: default;
+  }
+
+  /* 集合条目一律 aria-disabled 而非原生 disabled（禁用段仍要能当方向键的起点），
+     所以这里读 data-disabled，写 :disabled 永远不命中。
+     用了 fg-disabled 就不再叠 opacity：半透明会把底下的指示器透出来 */
+  [data-scope='segmented'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 禁用且选中的那一段不换文字色：它压着的是指示器的实心底，换成 fg-disabled 后
+     六族语气实测只剩 1.04–3.01 的对比度，「当前选的是哪一段」当场看不见。
+     禁用由轨道底色、未选中段的文字色与光标表达，选中段保持可读 */
+  [data-scope='segmented'][data-part='item'][data-disabled][data-state='checked'] {
+    color: var(--xh-segmented-item-fg-checked-disabled, var(--xh-_segmented-fg-selected));
+  }
+
+  /* 焦点环往内收一格：段贴着轨道内缘，往外画会被 root 的描边切掉一半 */
+  [data-scope='segmented'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-offset));
+  }
+
+  [data-scope='segmented'][data-part='item-text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  [data-scope='segmented'][data-part='indicator'] {
+    /* 位置与尺寸由连接层量好写成内联样式（它量得到，样式表量不到）；
+       这四个是还没量到时的落点，量到即被内联样式盖过 */
+    --xh-_segmented-indicator-x: 0;
+    --xh-_segmented-indicator-y: 0;
+    --xh-_segmented-indicator-w: 0;
+    --xh-_segmented-indicator-h: 0;
+
+    position: absolute;
+    display: block;
+    inset-inline-start: var(--xh-_segmented-indicator-x);
+    inset-block-start: var(--xh-_segmented-indicator-y);
+    inline-size: var(--xh-_segmented-indicator-w);
+    block-size: var(--xh-_segmented-indicator-h);
+    border-radius: var(--xh-segmented-indicator-radius, var(--xh-shape-inset));
+    background: var(--xh-segmented-indicator-bg, var(--xh-_segmented-indicator-bg));
+    box-shadow: var(--xh-segmented-indicator-shadow, var(--xh-elevation-raised));
+    /* 段压在它上面，点击一律交给段；作者把它写在段之后时也不至于吞掉点击 */
+    pointer-events: none;
+    /* 用标准曲线而不是进场那条：滑块是被推过去的，起步就该有速度，
+       纯减速曲线看着像自己飘过去。四个几何量同时走，段宽不等时才不会先变形再挪位 */
+    transition:
+      inset-inline-start var(--xh-motion-duration-enter) var(--xh-ease-standard),
+      inset-block-start var(--xh-motion-duration-enter) var(--xh-ease-standard),
+      inline-size var(--xh-motion-duration-enter) var(--xh-ease-standard),
+      block-size var(--xh-motion-duration-enter) var(--xh-ease-standard);
+  }
+
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  [data-scope='segmented'][data-part='root'][hidden],
+  [data-scope='segmented'][data-part='item'][hidden],
+  [data-scope='segmented'][data-part='indicator'][hidden] {
+    display: none;
+  }
+}