@xihan-ui/styles 1.0.0-alpha.0

package/css/typography.css

@@ -0,0 +1,151 @@
+@layer xihan.components {
+  [data-scope='typography'][data-part='root'] {
+    /* 尺寸档只换这几个私有槽，各段从根上继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_typography-body-size: var(--xh-text-body-size);
+    --xh-_typography-block-gap: var(--xh-space-4);
+    --xh-_typography-heading-gap: var(--xh-space-6);
+    --xh-_typography-h1: var(--xh-font-size-3xl);
+    --xh-_typography-h2: var(--xh-font-size-2xl);
+    --xh-_typography-h3: var(--xh-font-size-xl);
+    --xh-_typography-h4: var(--xh-font-size-lg);
+    --xh-_typography-h5: var(--xh-font-size-md);
+    --xh-_typography-h6: var(--xh-font-size-sm);
+    /* 读行宽度：整块正文不收窄就会拉成一行行难读的长句 */
+    --xh-_typography-measure: 68ch;
+    /* 行内代码跟着所在那行的字号缩，用相对单位而不是档位 */
+    --xh-_typography-code-size: 0.9em;
+
+    /* 建块级格式化上下文，段落的外边距不越过根往外塌 */
+    display: flow-root;
+    max-inline-size: var(--xh-typography-measure, var(--xh-_typography-measure));
+    color: var(--xh-typography-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-font-size, var(--xh-_typography-body-size));
+    font-weight: var(--xh-typography-font-weight, var(--xh-text-body-weight));
+    line-height: var(--xh-typography-leading, var(--xh-text-body-leading));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='typography'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 小档整体降一级字号档位 */
+  [data-scope='typography'][data-part='root'][data-size='sm'] {
+    --xh-_typography-body-size: var(--xh-font-size-sm);
+    --xh-_typography-block-gap: var(--xh-space-3);
+    --xh-_typography-heading-gap: var(--xh-space-5);
+    --xh-_typography-h1: var(--xh-font-size-2xl);
+    --xh-_typography-h2: var(--xh-font-size-xl);
+    --xh-_typography-h3: var(--xh-font-size-lg);
+    --xh-_typography-h4: var(--xh-font-size-md);
+    --xh-_typography-h5: var(--xh-font-size-sm);
+    --xh-_typography-h6: var(--xh-font-size-xs);
+  }
+
+  /* 大档只放大正文与段距：标题档位在 3xl 见顶，六档保持原样 */
+  [data-scope='typography'][data-part='root'][data-size='lg'] {
+    --xh-_typography-body-size: var(--xh-font-size-lg);
+    --xh-_typography-block-gap: var(--xh-space-5);
+    --xh-_typography-heading-gap: var(--xh-space-8);
+  }
+
+  /* —— 块级段落 —— */
+  /* 库里没有全局 preflight，作者写的 hN / p 带着 UA 外边距，在这儿抹平 */
+  [data-scope='typography'][data-part='heading'],
+  [data-scope='typography'][data-part='paragraph'] {
+    margin: 0;
+  }
+
+  [data-scope='typography'][data-part='heading'] {
+    color: var(--xh-typography-heading-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h3));
+    font-weight: var(--xh-typography-heading-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-typography-heading-leading, var(--xh-leading-tight));
+    /* 标题折行时把各行拉得一样长 */
+    text-wrap: balance;
+  }
+
+  /* —— 标题档位 —— */
+  /* 使用者槽位排在档位之前：写死一个值即盖过全部六档 */
+  [data-scope='typography'][data-part='heading'][data-level='1'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h1));
+  }
+
+  [data-scope='typography'][data-part='heading'][data-level='2'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h2));
+  }
+
+  [data-scope='typography'][data-part='heading'][data-level='3'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h3));
+  }
+
+  [data-scope='typography'][data-part='heading'][data-level='4'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h4));
+  }
+
+  [data-scope='typography'][data-part='heading'][data-level='5'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h5));
+  }
+
+  [data-scope='typography'][data-part='heading'][data-level='6'] {
+    font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h6));
+  }
+
+  /* —— 段间距 —— */
+  /* 间距画在后一块的上边，块与块之间只留一份，正文末尾也不多出一截 */
+  [data-scope='typography']:is([data-part='heading'], [data-part='paragraph'])
+    + [data-scope='typography']:is([data-part='heading'], [data-part='paragraph']) {
+    margin-block-start: var(--xh-typography-block-gap, var(--xh-_typography-block-gap));
+  }
+
+  /* 标题上面留得更开，它带起的是下面一整段 */
+  [data-scope='typography']:is([data-part='heading'], [data-part='paragraph'])
+    + [data-scope='typography'][data-part='heading'] {
+    margin-block-start: var(--xh-typography-heading-gap, var(--xh-_typography-heading-gap));
+  }
+
+  /* —— 行内文字 —— */
+  /* 不写形态与语气时就是一段普通正文，这里只声明形态各自加的那一层 */
+  [data-scope='typography'][data-part='text'][data-variant='muted'] {
+    color: var(--xh-typography-text-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='typography'][data-part='text'][data-variant='strong'] {
+    font-weight: var(--xh-typography-text-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  [data-scope='typography'][data-part='text'][data-variant='code'] {
+    padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
+    border-radius: var(--xh-typography-code-radius, var(--xh-radius-sm));
+    background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    font-family: var(--xh-font-family-mono);
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 语气排在形态之后：两个轴一起写时，用哪族颜色由语气说了算 */
+  [data-scope='typography'][data-part='text'][data-tone] {
+    color: var(--xh-typography-text-fg, var(--xh-_tone-fg));
+  }
+
+  /* —— 行内链接 —— */
+  [data-scope='typography'][data-part='link'] {
+    border-radius: var(--xh-typography-link-radius, var(--xh-radius-sm));
+    color: var(--xh-typography-link-fg, var(--xh-fg-brand));
+    text-decoration: underline;
+    text-underline-offset: var(--xh-typography-link-underline-offset, var(--xh-space-0_5));
+  }
+
+  /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  @media (hover: hover) {
+    [data-scope='typography'][data-part='link']:hover {
+      color: var(--xh-typography-link-fg-hover, var(--xh-fg-brand-strong));
+    }
+  }
+
+  [data-scope='typography'][data-part='link']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+}

package/css/undefined.css

@@ -0,0 +1,38 @@
+/*
+ * 元素升级前的形态。
+ *
+ * 收起态由元素在 wire() 里用内联 display 做，而 data-scope / data-part 也是那一刻才打上，
+ * 所以 JS 到达之前浮层子树既没有皮肤也没有收起——内容会以裸文本堆在页面流里，
+ * 并被搜索引擎与读屏当作正文。SSR / SSG 直出时这段时间尤其长。
+ *
+ * 这里按作者写的 data-xh-part 选中，那是升级前唯一存在的标记。
+ */
+@layer xihan.components {
+  :where(
+    xh-cascader,
+    xh-color-picker,
+    xh-combobox,
+    xh-context-menu,
+    xh-date-picker,
+    xh-dialog,
+    xh-drawer,
+    xh-hover-card,
+    xh-menu,
+    xh-menubar,
+    xh-navigation-menu,
+    xh-popover,
+    xh-select,
+    xh-time-picker,
+    xh-tooltip,
+    xh-tour,
+    xh-tree-select
+  ):not(:defined)
+    :where(
+      [data-xh-part='backdrop'],
+      [data-xh-part='content'],
+      [data-xh-part='positioner'],
+      [data-xh-part='viewport']
+    ) {
+    display: none;
+  }
+}

package/css/virtualizer.css

@@ -0,0 +1,104 @@
+@layer xihan.components {
+  /* 定位分工：条目在**主轴**上的位移、以及 content 在主轴上的总长，
+     由连接层每帧写进内联样式（竖向是 inset-block-start / block-size，横向是
+     inset-inline-start / inline-size）。这份皮肤一个都不碰：内联优先级高于样式表，
+     写了不但是死声明，换向的那一帧还会跟连接层清空另一轴的动作抢位置。
+     皮肤只管另一条轴（交叉轴）、滚动能力与焦点表现。
+
+     刻意不写任何过渡与动画：条目的位移每帧都在变，一加过渡整列就永远追在滚动后面；
+     条目的进出走的是 [hidden]（display:none），也没有退场动画可言。
+
+     主轴尺寸这里同样不给：给了就把动态测量钉死在这个值上——量到的永远等于钉上去的，
+     measureElement 再也收敛不了。等高列表由作者按 api 给出的 size 自己写。 */
+
+  [data-scope='virtualizer'][data-part='root'] {
+    display: block;
+    /* 作者给 root 定了尺寸后，长列表不该漫出这个框 */
+    overflow: hidden;
+  }
+
+  /* 真正滚动的那层。滚动能力一点不减——键盘（PageUp/PageDown、方向键、Home/End）
+     与滚轮走的都还是浏览器原生通路，组件只是跟着滚动量换一批该渲的下标。 */
+  [data-scope='virtualizer'][data-part='viewport'] {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    /* 逻辑等价物 overflow-inline / overflow-block 至今只有个别引擎实现，
+       这两条是本文件里仅有的物理属性，换成逻辑写法会在多数浏览器上直接失效 */
+    overflow-x: auto;
+    overflow-y: auto;
+    /* 滚到尽头时不把剩余的滚动传给外层：长列表嵌在页面里时，
+       滚到底还继续带着整页走会让人找不着北 */
+    overscroll-behavior: contain;
+  }
+
+  /* 单向列表把另一条轴关掉：那一向既没有内容也没有位移，能滚就成了滚不回来的暗格 */
+  [data-scope='virtualizer'][data-part='viewport'][data-orientation='vertical'] {
+    overflow-x: hidden;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-orientation='horizontal'] {
+    overflow-y: hidden;
+  }
+
+  /* 视口带 tabindex=0（长列表里可能一个可聚焦元素都没有），因此要有焦点环。
+     偏移取负：环画在视口内侧，否则会被 root 的 overflow:hidden 裁掉半圈 */
+  [data-scope='virtualizer'][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='virtualizer'][data-part='content'] {
+    position: relative;
+    display: block;
+    inline-size: 100%;
+  }
+
+  /* 主轴长度来自内联样式，交叉轴铺满视口 */
+  [data-scope='virtualizer'][data-part='content'][data-orientation='horizontal'] {
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* 条目。主轴位移来自内联样式，这里只给定位模式与单列时的交叉轴。
+     多列（lanes > 1）时交叉轴改由连接层写进内联样式，会盖过下面这两条。 */
+  [data-scope='virtualizer'][data-part='item'] {
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  [data-scope='virtualizer'][data-part='item'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  [data-scope='virtualizer'][data-part='item'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    block-size: 100%;
+  }
+
+  /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
+     该显形的也该是视口那圈环，不是这里再多画一圈。
+     条目内部的可聚焦内容（按钮、链接）有它们自己的焦点环，不受这条影响。 */
+  [data-scope='virtualizer'][data-part='root']:focus-visible,
+  [data-scope='virtualizer'][data-part='content']:focus-visible,
+  [data-scope='virtualizer'][data-part='item']:focus-visible {
+    outline: none;
+  }
+
+  /* root 上还有一个 data-scrolling 标记（手正在滚时在场）。这份皮肤刻意不用它：
+     滚动期间关掉 pointer-events 之类的常见招数会让"滚一下就点"落空，
+     留给作者按自己的取舍去接。 */
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位。
+     连接层只在条目上写 hidden（不在窗口里的那些），其余三个是防作者自己写 hidden */
+  [data-scope='virtualizer'][data-part='root'][hidden],
+  [data-scope='virtualizer'][data-part='viewport'][hidden],
+  [data-scope='virtualizer'][data-part='content'][hidden],
+  [data-scope='virtualizer'][data-part='item'][hidden] {
+    display: none;
+  }
+}

package/css/visually-hidden.css

@@ -0,0 +1,13 @@
+@layer xihan.components {
+  .xh-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/css/watermark.css

@@ -0,0 +1,48 @@
+@layer xihan.components {
+  /*
+   * 盖水印的那块地。层叠上下文就地隔离，印子只压在这块地里，不会盖到组件外面去。
+   */
+  [data-scope='watermark'][data-part='root'] {
+    position: relative;
+    isolation: isolate;
+  }
+
+  /* 被盖住的内容排在印子下面 */
+  [data-scope='watermark'][data-part='content'] {
+    position: relative;
+    z-index: 0;
+  }
+
+  /*
+   * 印子。图样由连接层算成一张 SVG，这里当遮罩用而不是当背景图铺：
+   * 遮罩只取图样的透明度，颜色从下面这个槽来，深浅主题各自跟着走；
+   * 当背景图铺就得把颜色写死在 SVG 里，换主题时那张图不会跟着变。
+   * 两条前缀都写：一部分 WebKit 只认带前缀那条。
+   *
+   * 没有可印的文字时 root 落 data-state="empty"，整层不画。
+   */
+  [data-scope='watermark'][data-part='root'][data-state='ready']::after {
+    content: '';
+
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+
+    /* 它只是一层印子：不吃点击，底下的内容照常点、照常选 */
+    pointer-events: none;
+    background-color: var(--xh-watermark-fg, var(--xh-fg-muted));
+    -webkit-mask-image: var(--xh-watermark-image, none);
+    mask-image: var(--xh-watermark-image, none);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-size: var(--xh-watermark-tile, auto);
+    mask-size: var(--xh-watermark-tile, auto);
+  }
+
+  /* 遮罩不支持时整层不画：只剩底色的话，盖上去的会是一整块实心色 */
+  @supports not ((mask-image: none) or (-webkit-mask-image: none)) {
+    [data-scope='watermark'][data-part='root'][data-state='ready']::after {
+      display: none;
+    }
+  }
+}

package/index.css

@@ -0,0 +1,113 @@
+/* 令牌先于一切：皮肤里不写兜底值，令牌缺席就是缺陷，不是降级。
+   tokens.css 自带 @layer xihan.tokens，层序由 layers.css 定。 */
+@import '@xihan-ui/tokens/tokens.css';
+
+/* 层序声明必须最先，其余按层归属排列。 */
+@import './css/affix.css';
+@import './css/avatar-group.css';
+@import './css/back-top.css';
+@import './css/button-group.css';
+@import './css/countdown.css';
+@import './css/descriptions.css';
+@import './css/dynamic-input.css';
+@import './css/ellipsis.css';
+@import './css/flex.css';
+@import './css/float-button.css';
+@import './css/gradient-text.css';
+@import './css/grid.css';
+@import './css/highlight.css';
+@import './css/icon-wrapper.css';
+@import './css/infinite-scroll.css';
+@import './css/layers.css';
+@import './css/layout.css';
+@import './css/list.css';
+@import './css/log.css';
+@import './css/marquee.css';
+@import './css/mention.css';
+@import './css/number-animation.css';
+@import './css/page-header.css';
+@import './css/popconfirm.css';
+@import './css/popselect.css';
+@import './css/qr-code.css';
+@import './css/reset.css';
+@import './css/motion.css';
+@import './css/result.css';
+@import './css/statistic.css';
+@import './css/time.css';
+@import './css/timeline.css';
+@import './css/typography.css';
+@import './css/undefined.css';
+@import './css/visually-hidden.css';
+@import './css/tone.css';
+@import './css/alert.css';
+@import './css/empty-state.css';
+@import './css/skeleton.css';
+@import './css/spinner.css';
+@import './css/accordion.css';
+@import './css/anchor.css';
+@import './css/avatar.css';
+@import './css/badge.css';
+@import './css/breadcrumb.css';
+@import './css/button.css';
+@import './css/calendar.css';
+@import './css/card.css';
+@import './css/carousel.css';
+@import './css/cascader.css';
+@import './css/checkbox.css';
+@import './css/checkbox-group.css';
+@import './css/clipboard.css';
+@import './css/code-block.css';
+@import './css/collapsible.css';
+@import './css/color-picker.css';
+@import './css/combobox.css';
+@import './css/composer.css';
+@import './css/context-menu.css';
+@import './css/date-field.css';
+@import './css/date-picker.css';
+@import './css/dialog.css';
+@import './css/drawer.css';
+@import './css/editable.css';
+@import './css/field.css';
+@import './css/file-upload.css';
+@import './css/form.css';
+@import './css/hover-card.css';
+@import './css/icon.css';
+@import './css/image.css';
+@import './css/listbox.css';
+@import './css/loading-bar.css';
+@import './css/menu.css';
+@import './css/menubar.css';
+@import './css/navigation-menu.css';
+@import './css/number-field.css';
+@import './css/pagination.css';
+@import './css/pin-input.css';
+@import './css/popover.css';
+@import './css/progress.css';
+@import './css/radio-group.css';
+@import './css/rating.css';
+@import './css/scroll-area.css';
+@import './css/select.css';
+@import './css/separator.css';
+@import './css/slider.css';
+@import './css/splitter.css';
+@import './css/steps.css';
+@import './css/switch.css';
+@import './css/table.css';
+@import './css/tabs.css';
+@import './css/tags-input.css';
+@import './css/text-field.css';
+@import './css/thread.css';
+@import './css/time-field.css';
+@import './css/time-picker.css';
+@import './css/toast.css';
+@import './css/toaster.css';
+@import './css/toggle.css';
+@import './css/toggle-group.css';
+@import './css/toolbar.css';
+@import './css/tooltip.css';
+@import './css/tour.css';
+@import './css/transfer.css';
+@import './css/tree.css';
+@import './css/tree-select.css';
+@import './css/virtualizer.css';
+@import './css/watermark.css';