@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/virtualizer.css

@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 virtualizer 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-virtualizer {
+    --xh-virtualizer-skin: 1;
+  }
+
+  /* 定位分工：条目在**主轴**上的位移、以及 content 在主轴上的总长，
+     由连接层每帧写进内联样式（竖向是 inset-block-start / block-size，横向是
+     inset-inline-start / inline-size）。这份皮肤一个都不碰：内联优先级高于样式表，
+     写了不但是死声明，换向的那一帧还会跟连接层清空另一轴的动作抢位置。
+     皮肤只管另一条轴（交叉轴）、滚动能力与焦点表现。
+
+     刻意不写任何过渡与动画：条目的位移每帧都在变，一加过渡整列就永远追在滚动后面；
+     条目的进出走的是 [hidden]（display:none），也没有退场动画可言。
+
+     主轴尺寸这里同样不给：给了就把动态测量钉死在这个值上——量到的永远等于钉上去的，
+     measureElement 再也收敛不了。等高列表由作者按 api 给出的 size 自己写。 */
+
+  .xh-scope-virtualizer[data-part='root'] {
+    display: block;
+    /* 作者给 root 定了尺寸后，长列表不该漫出这个框；
+       自建定位上下文，作者往里挂的 scrollbar 贴的是这个框 */
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* 真正滚动的那层。滚动能力一点不减——键盘（PageUp/PageDown、方向键、Home/End）
+     与滚轮走的都还是浏览器原生通路，组件只是跟着滚动量换一批该渲的下标。 */
+  .xh-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 保持 auto）：
+       contain 只给浮层、模态 body 与粘底视口。滚动条走 reset 层的原生细条 */
+  }
+
+  /* 单向列表把另一条轴关掉：那一向既没有内容也没有位移，能滚就成了滚不回来的暗格 */
+  .xh-scope-virtualizer[data-part='viewport'][data-orientation='vertical'] {
+    overflow-x: hidden;
+  }
+
+  .xh-scope-virtualizer[data-part='viewport'][data-orientation='horizontal'] {
+    overflow-y: hidden;
+  }
+
+  /* 随整页滚动：这层不再是滚动容器，高度随内容撑开，两向都不裁 */
+  .xh-scope-virtualizer[data-part='viewport'][data-scroll-container='window'] {
+    block-size: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+
+  /* 贴底：不足一屏时把内容推到尽头那一侧，最新的一条贴着底；超过一屏时自动外距归零，照常滚动 */
+  .xh-scope-virtualizer[data-part='viewport'][data-anchor='end'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .xh-scope-virtualizer[data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .xh-scope-virtualizer[data-part='viewport'][data-anchor='end'] > .xh-scope-virtualizer[data-part='content'] {
+    flex-shrink: 0;
+    margin-block-start: auto;
+  }
+
+  .xh-scope-virtualizer[data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] > .xh-scope-virtualizer[data-part='content'] {
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
+  /* 撑出总长的那层，同时是条目的定位上下文——条目是绝对定位的，
+     没有它就会以最近的定位祖先（多半是页面某处）为参照，整列飘走。 */
+  .xh-scope-virtualizer[data-part='content'] {
+    position: relative;
+    display: block;
+    inline-size: 100%;
+  }
+
+  /* 主轴长度来自内联样式，交叉轴铺满视口 */
+  .xh-scope-virtualizer[data-part='content'][data-orientation='horizontal'] {
+    inline-size: auto;
+    block-size: 100%;
+  }
+
+  /* 条目。主轴位移来自内联样式，这里只给定位模式与单列时的交叉轴。
+     多列（lanes > 1）时交叉轴改由连接层写进内联样式，会盖过下面这两条。 */
+  .xh-scope-virtualizer[data-part='item'] {
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .xh-scope-virtualizer[data-part='item'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  .xh-scope-virtualizer[data-part='item'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    block-size: 100%;
+  }
+
+  /* 钉住的分组标题：留在文档流里按 sticky 钉在视口起点（连接层不给它写主轴位移），
+     压在滚过去的条目上面，所以要一块实底 */
+  .xh-scope-virtualizer[data-part='item'][data-fixed] {
+    position: sticky;
+    z-index: var(--xh-virtualizer-sticky-layer, var(--xh-layer-sticky));
+    background: var(--xh-virtualizer-sticky-bg, var(--xh-bg-surface));
+  }
+
+  .xh-scope-virtualizer[data-part='item'][data-fixed][data-orientation='vertical'] {
+    inset-block-start: 0;
+  }
+
+  /* 横向时留在文档流里的块会铺满整条内容层，收成自身宽度 */
+  .xh-scope-virtualizer[data-part='item'][data-fixed][data-orientation='horizontal'] {
+    inset-inline-start: 0;
+    inline-size: fit-content;
+  }
+
+  /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
+     该显形的也该是视口那圈环，不是这里再多画一圈。
+     条目内部的可聚焦内容（按钮、链接）有它们自己的焦点环，不受这条影响。 */
+  .xh-scope-virtualizer[data-part='root']:focus-visible,
+  .xh-scope-virtualizer[data-part='content']:focus-visible,
+  .xh-scope-virtualizer[data-part='item']:focus-visible {
+    outline: none;
+  }
+
+  /* root 上还有一个 data-scrolling 标记（手正在滚时在场）。这份皮肤刻意不用它：
+     滚动期间关掉 pointer-events 之类的常见招数会让"滚一下就点"落空，
+     留给作者按自己的取舍去接。 */
+
+  /* 高对比档里实底换成系统底色、与滚过去的条目同色：钉住的标题补一条系统描边，与下面的内容分开 */
+  @media (forced-colors: active) {
+    .xh-scope-virtualizer[data-part='item'][data-fixed][data-orientation='vertical'] {
+      border-block-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+
+    .xh-scope-virtualizer[data-part='item'][data-fixed][data-orientation='horizontal'] {
+      border-inline-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+  }
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位。
+     连接层只在条目上写 hidden（不在窗口里的那些），其余三个是防作者自己写 hidden */
+  .xh-scope-virtualizer[data-part='root'][hidden],
+  .xh-scope-virtualizer[data-part='viewport'][hidden],
+  .xh-scope-virtualizer[data-part='content'][hidden],
+  .xh-scope-virtualizer[data-part='item'][hidden] {
+    display: none;
+  }
+}

package/dist/css/visually-hidden.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 visually hidden 样式。 */
+
+@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/dist/css/watermark.css

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 watermark 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-watermark {
+    --xh-watermark-skin: 1;
+  }
+
+  /*
+   * 盖水印的那块地。层叠上下文就地隔离，印子只压在这块地里，不会盖到组件外面去。
+   */
+  .xh-scope-watermark[data-part='root'] {
+    position: relative;
+    isolation: isolate;
+  }
+
+  /* 被盖住的内容排在印子下面；这层不自建层叠上下文，里面展开的浮层按自己的层号压过印子 */
+  .xh-scope-watermark[data-part='content'] {
+    position: relative;
+  }
+
+  /*
+   * 印子。图样由连接层算成一张 SVG，这里当遮罩用而不是当背景图铺：
+   * 遮罩只取图样的透明度，颜色从下面这个槽来，深浅主题各自跟着走；
+   * 当背景图铺就得把颜色写死在 SVG 里，换主题时那张图不会跟着变。
+   * 两条前缀都写：一部分 WebKit 只认带前缀那条。
+   *
+   * 没有可印的文字时 root 落 data-state="empty"，整层不画。
+   */
+  .xh-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);
+  }
+
+  /* 全屏档：印子固定铺满整个视口，压在页面一切内容之上（对话框、轻提示、文字提示都在它下面），页面滚动时原地不动。
+     根不再建层叠上下文：隔离了的话，印子的层号只在根里比大小，会被根外那些浮层压住 */
+  .xh-scope-watermark[data-part='root'][data-fullscreen] {
+    isolation: auto;
+  }
+
+  .xh-scope-watermark[data-part='root'][data-state='ready'][data-fullscreen]::after {
+    position: fixed;
+    z-index: var(--xh-watermark-layer, var(--xh-layer-tooltip));
+  }
+
+  /*
+   * 高对比档：印子的颜色是遮罩底下那块底色，这一档里被系统换成 Canvas，与页面同色，整层印子消失。
+   * 印子是防泄露的标记，不能因为读者开了高对比就不印：退出强制换色、取 GrayText——系统给「弱化内容」
+   * 留的那个角色，深浅仍由图样自带的透明度压着，不与正文抢对比
+   */
+  @media (forced-colors: active) {
+    .xh-scope-watermark[data-part='root'][data-state='ready']::after {
+      forced-color-adjust: none;
+      background-color: GrayText;
+    }
+  }
+
+  /* 遮罩不支持时整层不画：只剩底色的话，盖上去的会是一整块实心色 */
+  @supports not ((mask-image: none) or (-webkit-mask-image: none)) {
+    .xh-scope-watermark[data-part='root'][data-state='ready']::after {
+      display: none;
+    }
+  }
+}