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

package/css/scrollbar.css

@@ -0,0 +1,170 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='scrollbar'] {
+    --xh-scrollbar-skin: 1;
+  }
+
+  /* 挂了自绘滚动条的容器：原生滚动条只藏外观，滚动能力一点不动。
+     标记由机器挂监听时打上，最后一条滚动条拆走才撤。下面那条 ::-webkit-scrollbar 兜住还没实现 scrollbar-width 的引擎 */
+  [data-xh-scrollbar] {
+    scrollbar-width: none;
+  }
+
+  [data-xh-scrollbar]::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 定位分工：滑块在**主轴**上的起点与长度由连接层每帧写进内联样式——
+     竖向是 inset-block-start / block-size，横向是 inset-inline-start / inline-size。
+     这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
+     换轴的那一帧还会跟连接层清空另一轴的动作抢位置，把滑块钉在两轴都被约束的地方。
+     皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。
+
+     根用绝对定位、贴容器的对应边：滚动容器归作者，本组件只要求它自己的定位祖先建了上下文。
+     作者要把它放在别处（比如浮在内容之上、或摆到框外），改这一条即可。 */
+  [data-scope='scrollbar'][data-part='root'] {
+    /* 厚度只算一次：尺寸档换的就是它，交叉口的让位与补丁都按同一个数 */
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-md);
+
+    position: absolute;
+    /* 浮层的 positioner 一律 pointer-events: none，条子作为它的子节点会继承到，拖不动也点不着；
+       收起态那条规则优先级更高，仍旧穿透 */
+    pointer-events: auto;
+    /* touch-action 关掉浏览器自己的手势：不关的话手指一按滑块页面就跟着滚，
+       指针随即被系统收走（pointercancel），拖到一半的滑块停在原地。
+       user-select 同理——拖动时选中页面文字会让滑块"粘"住。 */
+    touch-action: none;
+    user-select: none;
+    /* 露出与收起都淡变；收起态连 visibility 一起收，退场播完才真正摸不到、也进不了 Tab 序 */
+    transition:
+      opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter),
+      visibility 0s linear 0s;
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-size='sm'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-sm);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-size='lg'] {
+    --xh-_scrollbar-thickness: var(--xh-scrollbar-thickness-lg);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='vertical'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='horizontal'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: var(--xh-_scrollbar-thickness);
+  }
+
+  /* 横竖两条同时摆着：各自在末端让出交叉口那一格，交叉口由 corner 补 */
+  [data-scope='scrollbar'][data-part='root'][data-orientation='vertical'][data-gutter] {
+    inset-block-end: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-orientation='horizontal'][data-gutter] {
+    inset-inline-end: var(--xh-_scrollbar-thickness);
+  }
+
+  [data-scope='scrollbar'][data-part='root'][data-state='hidden'] {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit),
+      visibility 0s linear var(--xh-motion-duration-exit);
+  }
+
+  /* 触屏上交给原生滚动：整条不占位也不画 */
+  [data-scope='scrollbar'][data-part='root'][data-native] {
+    display: none;
+  }
+
+  /* 轨道铺满根，滑块的行程按它量。内边距把滑块从两侧收进来一点，
+     与 scroll-area 那份共用同一个间隙令牌 */
+  [data-scope='scrollbar'][data-part='track'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    padding: var(--xh-scrollbar-gutter);
+    background: var(--xh-scrollbar-track-bg, var(--xh-bg-scrollbar-track));
+  }
+
+  /* 滑块。主轴（起点 + 长度）来自内联样式，这里只给定位模式、交叉轴与配色。
+     绝不给 inset / size 加过渡：滚动时这两个值每帧都在变，一加过渡滑块就永远追在内容后面。
+     也刻意不写 min-block-size / min-inline-size：滑块的最短长度由几何层折进内联尺寸里，
+     样式表再给一个下限就成了两个事实源，两者一旦不一致，滑块的实际长度与它能走的距离就对不上。 */
+  [data-scope='scrollbar'][data-part='thumb'] {
+    position: absolute;
+    border-radius: var(--xh-scrollbar-thumb-radius, var(--xh-shape-pill));
+    background: var(--xh-scrollbar-thumb-bg, var(--xh-fg-scrollbar-thumb));
+    cursor: default;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 交叉轴在轨道内两侧各收进一个间隙，与轨道那条 padding 共用同一个旋钮。
+     这一侧的 inset 连接层每帧写成空串（即不设），样式表接手才有确定值；
+     不写的话绝对定位会退回"静态位置"。
+     主轴那一侧一律不写：几何层量的轨道是 padding box，滑块长度也解析在同一个盒子上。 */
+  [data-scope='scrollbar'][data-part='thumb'][data-orientation='vertical'] {
+    inset-inline: var(--xh-scrollbar-gutter);
+  }
+
+  [data-scope='scrollbar'][data-part='thumb'][data-orientation='horizontal'] {
+    inset-block: var(--xh-scrollbar-gutter);
+  }
+
+  [data-scope='scrollbar'][data-part='thumb']:hover {
+    background: var(--xh-scrollbar-thumb-bg-hover, var(--xh-fg-scrollbar-thumb-hover));
+  }
+
+  [data-scope='scrollbar'][data-part='thumb'][data-dragging] {
+    background: var(--xh-scrollbar-thumb-bg-active, var(--xh-fg-scrollbar-thumb-active));
+  }
+
+  /* 只有开了 focusable 的滑块进得了 Tab 序，环也就只画在它身上。
+     偏移取负：环画在轨道内侧，否则会被滚动容器的溢出边界裁掉半圈 */
+  [data-scope='scrollbar'][data-part='thumb']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  /* 根与轨道都是纯容器，不承载焦点；作者若给它们加了 tabindex，也不该在这儿多画一圈 */
+  [data-scope='scrollbar'][data-part='root']:focus-visible,
+  [data-scope='scrollbar'][data-part='track']:focus-visible {
+    outline: none;
+  }
+
+  /* 禁用：整条不显形，这里只兜住作者硬把它显出来的那一路 */
+  [data-scope='scrollbar'][data-part='thumb'][data-disabled] {
+    background: var(--xh-scrollbar-thumb-bg-disabled, var(--xh-border-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 交叉口补丁：贴在本条末端之外的那一格，与轨道同色，跟着本条淡入淡出 */
+  [data-scope='scrollbar'][data-part='corner'] {
+    position: absolute;
+    inline-size: var(--xh-_scrollbar-thickness);
+    block-size: var(--xh-_scrollbar-thickness);
+    background: var(--xh-scrollbar-corner-bg, var(--xh-scrollbar-track-bg, var(--xh-bg-scrollbar-track)));
+  }
+
+  [data-scope='scrollbar'][data-part='corner'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inset-block-end: calc(-1 * var(--xh-_scrollbar-thickness));
+  }
+
+  [data-scope='scrollbar'][data-part='corner'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    inset-inline-end: calc(-1 * var(--xh-_scrollbar-thickness));
+  }
+
+  [data-scope='scrollbar'][data-part='root'][hidden],
+  [data-scope='scrollbar'][data-part='corner'][hidden] {
+    display: none;
+  }
+}

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-control-font-md);
+    /* 指示器底色与选中段的文字色；没写 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;
+  }
+}