@xihan-ui/styles 1.0.0-alpha.0

package/css/listbox.css

@@ -0,0 +1,174 @@
+@layer xihan.components {
+  [data-scope='listbox'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-listbox-gap, var(--xh-space-2));
+  }
+
+  [data-scope='listbox'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='listbox'][data-part='label'] {
+    color: var(--xh-listbox-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-listbox-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-listbox-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  /* 整组禁用会把 data-disabled 一路打到 label / content / item-group 上，各处观感保持一致 */
+  [data-scope='listbox'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 常驻列表不是浮层：容器留边框与底色，但不投影、不脱离文档流，
+     因此这里既不写 position 也不写 z-index，滚动发生在容器自身 */
+  [data-scope='listbox'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    max-block-size: var(--xh-listbox-content-max-h, var(--xh-overlay-max-h));
+    padding-block: var(--xh-listbox-content-py, var(--xh-space-1));
+    padding-inline: var(--xh-listbox-content-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-listbox-content-border, var(--xh-border-default));
+    border-radius: var(--xh-listbox-content-radius, var(--xh-shape-surface));
+    background: var(--xh-listbox-content-bg, var(--xh-bg-surface));
+    color: var(--xh-listbox-content-fg, var(--xh-fg-default));
+    /* 两轴一起给：条目文字用省略号收口，正常不会横向溢出，
+       但作者塞进宽内容时至少还够得着，而不是被裁掉 */
+    overflow: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，作者手动收起时要显式让位 */
+  [data-scope='listbox'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 横向列表沿主轴排，此时高度由内容决定，再压最大高度只会白留一条滚动条 */
+  [data-scope='listbox'][data-part='content'][data-orientation='horizontal'] {
+    flex-direction: row;
+    align-items: center;
+    max-block-size: none;
+  }
+
+  /* 焦点在列表外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在条目上 */
+  [data-scope='listbox'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='listbox'][data-part='item-group'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-scope='listbox'][data-part='item-group'][hidden] {
+    display: none;
+  }
+
+  /* 组间留白只加在后继分组上：首组顶上已经有 content 的内边距，再加一层会显得头重 */
+  [data-scope='listbox'][data-part='item-group'] + [data-scope='listbox'][data-part='item-group'] {
+    margin-block-start: var(--xh-listbox-group-gap, var(--xh-space-2));
+  }
+
+  /* 分组标题不是选项、进不了导航，画成小号次要文字，
+     内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
+  [data-scope='listbox'][data-part='item-group-label'] {
+    display: block;
+    padding-block: var(--xh-listbox-group-label-py, var(--xh-space-1));
+    padding-inline: var(--xh-listbox-group-label-px, var(--xh-control-px-sm));
+    color: var(--xh-listbox-group-label-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-listbox-group-label-font-size, var(--xh-font-size-xs));
+    font-weight: var(--xh-listbox-group-label-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='listbox'][data-part='item-group-label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='listbox'][data-part='item-group-label'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='listbox'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-listbox-item-gap, var(--xh-control-gap-md));
+    padding-block: var(--xh-listbox-item-py, var(--xh-space-1));
+    padding-inline: var(--xh-listbox-item-px, var(--xh-control-px-sm));
+    border-radius: var(--xh-listbox-item-radius, var(--xh-shape-control));
+    color: var(--xh-listbox-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-listbox-item-font-size, var(--xh-text-body-size));
+    /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
+    line-height: var(--xh-listbox-item-leading, var(--xh-leading-normal));
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 条目可以按需收起（过滤掉的选项），有 display 就得补这条 */
+  [data-scope='listbox'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+     data-highlighted 跟的是连接层记的焦点条目，与选中互相独立 */
+  [data-scope='listbox'][data-part='item']:not([data-disabled]):is(:hover, [data-highlighted]) {
+    background: var(--xh-listbox-item-bg-highlight, var(--xh-bg-subtle-hover));
+  }
+
+  /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，
+     两者因此能同时看见 */
+  [data-scope='listbox'][data-part='item'][data-state='checked'] {
+    color: var(--xh-listbox-item-fg-selected, var(--xh-fg-brand-strong));
+    font-weight: var(--xh-listbox-item-font-weight-selected, var(--xh-font-weight-medium));
+  }
+
+  [data-scope='listbox'][data-part='item']:focus {
+    outline: none;
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：条目仍要可聚焦（它还得当方向键的起点），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='listbox'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='listbox'][data-part='item-text'] {
+    flex: 1;
+    /* 弹性子项默认最小尺寸是内容尺寸，不归零则长文本把行撑破、省略号轮不上 */
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 勾选标记只在选中项上出现；未选中时占位不塌，切换选中不引起行宽抖动 */
+  [data-scope='listbox'][data-part='item-indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-listbox-item-indicator-size, var(--xh-control-indicator-size));
+    color: var(--xh-listbox-item-indicator-fg, var(--xh-bg-brand));
+    visibility: hidden;
+  }
+
+  [data-scope='listbox'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画勾；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='listbox'][data-part='item-indicator']:empty::before {
+    content: '✓';
+  }
+
+  [data-scope='listbox'][data-part='item-indicator'][data-state='checked'] {
+    visibility: visible;
+  }
+
+  [data-scope='listbox'][data-part='item-indicator'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+}

package/css/loading-bar.css

@@ -0,0 +1,66 @@
+@layer xihan.components {
+  /*
+   * 贴在视口顶边的一条细带。厚度那条轴（block-size）由连接层写进内联样式——
+   * height 这个 prop 的缺省值在 connect 里收口，这里再声明一次只会被内联盖掉，
+   * 还会让人误以为厚度归样式层管。
+   *
+   * fixed 认的是视口，祖先上一旦出现 transform / filter / backdrop-filter / contain
+   * 就会把包含块抢走，条子立刻贴错位置——覆盖钩子里别加这几个属性。
+   */
+  [data-scope='loading-bar'][data-part='root'] {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: var(--xh-loading-bar-layer, var(--xh-layer-sticky));
+
+    /* 它只报进度，不吃点击：盖在顶栏上的一条带子若拦住指针，页面顶部就点不动了 */
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity var(--xh-loading-bar-fade, var(--xh-motion-duration-exit)) var(--xh-motion-ease-exit);
+  }
+
+  /* 只要声明过任何 display，就盖掉了 UA 的 [hidden]{display:none}；
+     这里虽然没声明，作者层随手给一条 display 也会盖掉，所以补齐这条兜住收起态。
+     连接层只会给 root 写 hidden，track / range 不需要同样的兜底 */
+  [data-scope='loading-bar'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 冲到 100 之后进入淡出：机器会在淡出窗口走完之前一直停在 finishing，
+     这段过渡才有时间跑完；窗口与时长两处默认值都是 200ms，改一处记得对齐另一处 */
+  [data-scope='loading-bar'][data-part='root'][data-state='finishing'] {
+    opacity: 0;
+  }
+
+  /* 背景槽。默认透明：顶部加载条通常直接压在页面顶边上，一条贯穿整屏的浅色底
+     在视觉上等于凭空多出一道分隔线 */
+  [data-scope='loading-bar'][data-part='track'] {
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: 100%;
+    background: var(--xh-loading-bar-track, transparent);
+  }
+
+  /*
+   * 进度段。宽度那条轴（inline-size）由连接层写进内联样式，这里绝不重复写。
+   * 背景色同理：给了 color 就走内联，盖过下面这条。
+   *
+   * 语气取柔和档 --xh-_tone-soft（500）而不是 --xh-_tone（600）：600 是给实心底与
+   * 文字用的强调档，压在这么一条细带上偏重。槽位由 root 上的 data-tone 声明，继承下来。
+   * 没写 data-tone 时该槽没被声明，退回原来的品牌色。
+   */
+  [data-scope='loading-bar'][data-part='range'] {
+    block-size: 100%;
+    background: var(--xh-loading-bar-range, var(--xh-_tone-soft, var(--xh-bg-brand)));
+    transition: inline-size var(--xh-loading-bar-speed, var(--xh-motion-duration-enter)) var(--xh-motion-ease-enter);
+  }
+
+  /* 减少动效：宽度与淡出都立刻到位。进度本身照常推进，只是不再有过渡的过程——
+     一条按 200ms 一拍持续变宽的带子正是最容易引发不适的那种动效 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='loading-bar'][data-part='root'],
+    [data-scope='loading-bar'][data-part='range'] {
+      transition: none;
+    }
+  }
+}

package/css/log.css

@@ -0,0 +1,66 @@
+@layer xihan.components {
+  /* 行高是本组件的定尺基准：视口按行数定高、每行排版，都从这一个槽位来。
+     它的兜底值须与连接层内联高度里用的那份逐字一致，否则 rows 算出来的高度对不上行。 */
+  [data-scope='log'][data-part='root'] {
+    --xh-_log-line-h: var(--xh-log-line-height, 1.25rem);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid var(--xh-log-border, var(--xh-border-default));
+    border-radius: var(--xh-log-radius, var(--xh-shape-surface));
+    background: var(--xh-log-bg, var(--xh-bg-subtle));
+    color: var(--xh-log-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='log'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 滚动容器，粘底读的是它的 scrollTop / clientHeight / scrollHeight。
+     flex-basis 取 auto，连接层写的按行数高度才算数，同时外层给了高度时还能撑满；
+     min-block-size: 0 让它在弹性父级里能被压缩从而真的溢出；
+     两个轴都 auto：长行不折，横向也要能滚；
+     overscroll-behavior: contain 阻止滚动量传给页面；
+     scrollbar-gutter: stable 避免滚动条出现与消失时推动文字。 */
+  [data-scope='log'][data-part='viewport'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    block-size: calc(var(--xh-_log-line-h) * var(--xh-log-rows, 16));
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  /* 视口带 tabindex=0，需要焦点环；偏移取负画在内侧，避免被 root 裁掉 */
+  [data-scope='log'][data-part='viewport']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  /* 取行期间指针给出忙的反馈 */
+  [data-scope='log'][data-part='root'][data-loading] [data-scope='log'][data-part='viewport'] {
+    cursor: progress;
+  }
+
+  /* 等宽排版落在包裹层上，各行继承；行与行之间不留空隙，视口高度才等于整数行 */
+  [data-scope='log'][data-part='content'] {
+    display: block;
+    padding-inline: var(--xh-log-content-px, var(--xh-space-3));
+    font-family: var(--xh-log-font, var(--xh-font-family-mono));
+    font-size: var(--xh-log-font-size, var(--xh-font-size-sm));
+  }
+
+  [data-scope='log'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 一行不折行，超出的部分由视口横向滚动；行高与定高基准同源 */
+  [data-scope='log'][data-part='line'] {
+    line-height: var(--xh-_log-line-h);
+    white-space: pre;
+    tab-size: var(--xh-log-tab-size, 4);
+  }
+}

package/css/marquee.css

@@ -0,0 +1,182 @@
+@layer xihan.motion {
+  /*
+   * 横轴一条、纵轴一条。四个方向乘两种铺法共八组起止点，若不外提就要写八份几乎一样的关键帧。
+   * 关键帧里的自定义属性取元素上的计算值，一圈跑下来它不变，所以两条就够。
+   */
+  @keyframes xh-marquee-x {
+    from {
+      transform: translateX(var(--xh-_marquee-from));
+    }
+
+    to {
+      transform: translateX(var(--xh-_marquee-to));
+    }
+  }
+
+  @keyframes xh-marquee-y {
+    from {
+      transform: translateY(var(--xh-_marquee-from));
+    }
+
+    to {
+      transform: translateY(var(--xh-_marquee-to));
+    }
+  }
+}
+
+@layer xihan.components {
+  /*
+   * 窗口：只露出轨道的一段。
+   *
+   * 方向、轴与铺法全部换成根上的私有槽，轨道与每一份内容各自只有一条规则去取值。
+   * 这样写不只是为了短：轨道那条选择器因此能写成 [data-scope][data-part] 的复合式，
+   * 而不是从根往下够的后代式——marquee 里嵌一个同样有 content 部件的组件时，
+   * 后代式会一路匹配到别人家的节点上去。
+   *
+   * 一圈的时长 = 一份内容的长度 ÷ 每秒像素数。--xh-_marquee-span 是一份内容在滚动轴上的长度，
+   * 单位像素、写成纯数字。CSS 读不到布局尺寸，这里给的是缺省值；内容明显长于或短于它时，
+   * 由使用者改写 --xh-marquee-span 对齐真实长度，速度才逐字等于每秒那么多像素。
+   */
+  [data-scope='marquee'][data-part='root'] {
+    --xh-_marquee-span: var(--xh-marquee-span, 600);
+    --xh-_marquee-speed: var(--xh-marquee-speed, 60);
+
+    /* 铺一份时一圈走两倍自身长度：从窗口一侧整段进来，再整段出到另一侧 */
+    --xh-_marquee-duration: calc(2 * var(--xh-_marquee-span) / var(--xh-_marquee-speed) * 1s);
+    --xh-_marquee-play: running;
+    --xh-_marquee-flow: row;
+    --xh-_marquee-name: xh-marquee-x;
+    --xh-_marquee-track-inline: max-content;
+    --xh-_marquee-track-block: auto;
+
+    /* 轨道自身至少铺满窗口，起点那一跳才真的落在窗口外面 */
+    --xh-_marquee-fill-inline: 100%;
+    --xh-_marquee-fill-block: auto;
+    --xh-_marquee-copy-inline: auto;
+    --xh-_marquee-copy-block: auto;
+    --xh-_marquee-gap-inline: var(--xh-marquee-gap, var(--xh-space-6));
+    --xh-_marquee-gap-block: 0;
+    --xh-_marquee-from: 100%;
+    --xh-_marquee-to: -100%;
+
+    display: flex;
+    overflow: hidden;
+    max-inline-size: 100%;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，补这条兜住收起态 */
+  [data-scope='marquee'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 竖着滚要有一个定高的窗口，否则内容自己把窗口撑到一样高，一格都走不动 */
+  [data-scope='marquee'][data-part='root'][data-orientation='vertical'] {
+    --xh-_marquee-flow: column;
+    --xh-_marquee-name: xh-marquee-y;
+    --xh-_marquee-track-inline: auto;
+    --xh-_marquee-track-block: max-content;
+    --xh-_marquee-fill-inline: auto;
+    --xh-_marquee-fill-block: 100%;
+    --xh-_marquee-gap-inline: 0;
+    --xh-_marquee-gap-block: var(--xh-marquee-gap, var(--xh-space-6));
+
+    block-size: var(--xh-marquee-block-size, 10rem);
+  }
+
+  /* 往右、往下是同一条轨迹倒过来走 */
+  [data-scope='marquee'][data-part='root'][data-direction='right'],
+  [data-scope='marquee'][data-part='root'][data-direction='down'] {
+    --xh-_marquee-from: -100%;
+    --xh-_marquee-to: 100%;
+  }
+
+  /*
+   * 铺两份：一圈只走一份的长度，走完那一刻第二份正好压在起点上，看不出接缝。
+   * 这条排在竖轴那条之后：两者同权，铺两份时轨道自己不必铺满窗口，改由每一份各自铺满。
+   */
+  [data-scope='marquee'][data-part='root'][data-auto-fill] {
+    --xh-_marquee-duration: calc(var(--xh-_marquee-span) / var(--xh-_marquee-speed) * 1s);
+    --xh-_marquee-fill-inline: auto;
+    --xh-_marquee-fill-block: auto;
+  }
+
+  /* 内容短于窗口时每份自己先铺满一整窗，两份接起来才不会在接缝处露出空白 */
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-orientation='horizontal'] {
+    --xh-_marquee-copy-inline: 100%;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-orientation='vertical'] {
+    --xh-_marquee-copy-block: 100%;
+  }
+
+  /* 起止点逐档写全：铺法与方向同权，交叉的四种情形各写一条才不看书写顺序 */
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-direction='left'],
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-direction='up'] {
+    --xh-_marquee-from: 0%;
+    --xh-_marquee-to: -50%;
+  }
+
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-direction='right'],
+  [data-scope='marquee'][data-part='root'][data-auto-fill][data-direction='down'] {
+    --xh-_marquee-from: -50%;
+    --xh-_marquee-to: 0%;
+  }
+
+  /* 悬停暂停：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  @media (hover: hover) {
+    [data-scope='marquee'][data-part='root'][data-pause-on-hover]:hover {
+      --xh-_marquee-play: paused;
+    }
+  }
+
+  /* 键盘用户没有悬停：焦点落进窗口时同样停住，否则轨道里的链接刚聚焦就被带走了 */
+  [data-scope='marquee'][data-part='root'][data-pause-on-hover]:focus-within {
+    --xh-_marquee-play: paused;
+  }
+
+  /* 轨道：走的是这一层，一圈走完立刻回到起点接着走 */
+  [data-scope='marquee'][data-part='content'] {
+    display: flex;
+    flex: none;
+    flex-direction: var(--xh-_marquee-flow);
+    inline-size: var(--xh-_marquee-track-inline);
+    min-inline-size: var(--xh-_marquee-fill-inline);
+    block-size: var(--xh-_marquee-track-block);
+    min-block-size: var(--xh-_marquee-fill-block);
+    animation-name: var(--xh-_marquee-name);
+    animation-duration: var(--xh-_marquee-duration);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: var(--xh-_marquee-play);
+  }
+
+  /*
+   * 一份内容。份与份之间的空白做成每份自己的收尾内边距，而不是轨道上的 gap：
+   * gap 只加在中间那一道，两份就不等长了，而接缝对不对得上看的正是"走完的距离等于一份的长度"。
+   */
+  [data-scope='marquee'][data-part='content'] > [data-xh-copy] {
+    display: flex;
+    flex: none;
+    flex-direction: var(--xh-_marquee-flow);
+    align-items: center;
+    min-inline-size: var(--xh-_marquee-copy-inline);
+    min-block-size: var(--xh-_marquee-copy-block);
+    padding-inline-end: var(--xh-_marquee-gap-inline);
+    padding-block-end: var(--xh-_marquee-gap-block);
+  }
+
+  /*
+   * 减少动效：轨道停在起点不再走。一段自己动起来、不停到底的横移正是最容易引发不适的那一类，
+   * 这里不能只把速度压到很慢——慢速横移仍然是横移。
+   * 停下后窗口外那段就够不着了，故窗口同时改成可滚，内容仍然读得全。
+   */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='marquee'][data-part='content'] {
+      animation: none;
+    }
+
+    [data-scope='marquee'][data-part='root'] {
+      overflow: auto;
+    }
+  }
+}