@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/graph-chart.css

@@ -0,0 +1,205 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 graph chart 样式。 */
+
+/* 标题、视口、图例、提示框、空态与焦点环走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-graph-chart {
+    --xh-graph-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何。
+     节点的基准半径借点径那一格传进去 */
+  .xh-scope-graph-chart[data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-line-width: var(--xh-chart-line-width);
+    --xh-_chart-metric-point-size: var(--xh-graph-chart-node-size, var(--xh-chart-point-size));
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-radius: var(--xh-shape-inset);
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
+    --xh-_chart-gap: var(--xh-graph-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  .xh-scope-graph-chart[data-part='viewport'] {
+    --xh-_chart-height: var(--xh-graph-chart-height, var(--xh-chart-height));
+  }
+
+  .xh-scope-graph-chart[data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-graph-chart-legend-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-graph-chart[data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-graph-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-graph-chart[data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-graph-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-graph-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-graph-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-graph-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-graph-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  .xh-scope-graph-chart[data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-graph-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-graph-chart[data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-graph-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：分组由色槽承担，作者可以在节点上覆盖 --xh-graph-chart-series-color ——
+     节点、被强调的连线、图例项都带着色槽，各自从这里取系列色 */
+  .xh-scope-graph-chart[data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-1));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-2));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-3));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-4));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-5));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-6));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-7));
+  }
+
+  .xh-scope-graph-chart[data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-graph-chart-series-color, var(--xh-chart-categorical-8));
+  }
+
+  /* —— 连线：次要的中性色细线，有权重时按权重加粗（宽度由连接层写进私有槽）；箭头与线同色。
+     指着一个节点时连着它的线换成它的颜色，其余淡出 —— */
+  .xh-scope-graph-chart[data-part='link'],
+  .xh-scope-graph-chart[data-part='arrow'] {
+    --xh-_graph-link: var(--xh-graph-chart-link-color, var(--xh-fg-subtle));
+
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-graph-chart[data-part='link'] {
+    fill: none;
+    stroke: var(--xh-_graph-link);
+    stroke-width: var(--xh-_graph-link-width, var(--xh-graph-chart-link-width, var(--xh-stroke-thin)));
+    stroke-linecap: round;
+  }
+
+  .xh-scope-graph-chart[data-part='arrow'] {
+    fill: var(--xh-_graph-link);
+    stroke: none;
+  }
+
+  .xh-scope-graph-chart[data-part='link'][data-highlighted],
+  .xh-scope-graph-chart[data-part='arrow'][data-highlighted] {
+    --xh-_graph-link: var(--xh-_chart-series);
+  }
+
+  /* —— 节点：取分组的系列色，外面描一圈承载面色，节点挨在一起、压在连线上时边界照样分明 —— */
+  .xh-scope-graph-chart[data-part='node'] {
+    fill: var(--xh-_chart-series);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-graph-chart[data-part='link'][data-dimmed],
+  .xh-scope-graph-chart[data-part='arrow'][data-dimmed],
+  .xh-scope-graph-chart[data-part='node'][data-dimmed],
+  .xh-scope-graph-chart[data-part='node-label'][data-dimmed],
+  .xh-scope-graph-chart[data-part='link-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 节点名可能压在连线上：正文色，描一圈承载面色，交叠处也读得清。名字不接指针，命中归节点 */
+  .xh-scope-graph-chart[data-part='node-label'] {
+    fill: var(--xh-fg-default);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linejoin: round;
+    paint-order: stroke;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 连线上的字就压在线上：次级文字色与节点名分出主次，同样描一圈承载面色把线从字底下断开 */
+  .xh-scope-graph-chart[data-part='link-label'] {
+    fill: var(--xh-fg-muted);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linejoin: round;
+    paint-order: stroke;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 直接操纵：能拖的节点给抓手，拖着时整张图是抓紧的手；放大后空白处也能拖着平移。
+     触屏在节点上的拖动归图，其余地方照常滚动页面 —— */
+  .xh-scope-graph-chart[data-part='plot'][data-draggable] [data-part='node']:where(.xh-scope-graph-chart) {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .xh-scope-graph-chart[data-part='plot'][data-zoomed] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .xh-scope-graph-chart[data-part='plot'][data-dragging],
+  .xh-scope-graph-chart[data-part='plot'][data-dragging] [data-part='node']:where(.xh-scope-graph-chart) {
+    cursor: grabbing;
+  }
+
+  /* 强制色：节点改成系统色的面与描边，连线取次级系统色、被强调的取高亮色，名字取正文色；
+     焦点环、图例与色标在配方里 */
+  @media (forced-colors: active) {
+    .xh-scope-graph-chart[data-part='node'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-graph-chart[data-part='link'],
+    .xh-scope-graph-chart[data-part='arrow'] {
+      --xh-_graph-link: GrayText;
+    }
+
+    .xh-scope-graph-chart[data-part='link'][data-highlighted],
+    .xh-scope-graph-chart[data-part='arrow'][data-highlighted] {
+      --xh-_graph-link: Highlight;
+    }
+
+    .xh-scope-graph-chart[data-part='node-label'],
+    .xh-scope-graph-chart[data-part='link-label'] {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+  }
+}

package/dist/css/grid-list.css

@@ -0,0 +1,235 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* GridList 的行复用 Collection Item；拖动把手由组合进来的 Sortable 负责。 */
+@import '../family/action-control.css';
+@import '../family/check-mark.css';
+@import '../family/collection-item.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
+
+@layer xihan.components {
+  .xh-scope-grid-list {
+    --xh-grid-list-skin: 1;
+  }
+
+  .xh-scope-grid-list[data-part='root'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-md);
+    --xh-_grid-list-indicator-glyph: calc(var(--xh-_grid-list-indicator) * 0.75);
+    --xh-_grid-list-indicator-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
+    --xh-_grid-list-indicator-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-md));
+    /* 占位文案与条目同档：字号与行内内衬随尺寸档 */
+    --xh-_grid-list-state-font-size: var(--xh-control-font-md);
+    --xh-_grid-list-state-px: var(--xh-control-px-md);
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: var(--xh-grid-list-gap, var(--xh-list-option-gap));
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--xh-grid-list-p, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-grid-list-radius, var(--xh-shape-surface));
+    background: var(--xh-grid-list-bg, transparent);
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-variant='outline'] {
+    border-color: var(--xh-grid-list-border, var(--xh-border-default));
+    background: var(--xh-grid-list-bg, var(--xh-bg-surface));
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-variant='subtle'] {
+    background: var(--xh-grid-list-bg, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-invalid] {
+    border-color: var(--xh-grid-list-border-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-grid-list[data-part='root']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-size='sm'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-sm);
+    --xh-_grid-list-state-font-size: var(--xh-control-font-sm);
+    --xh-_grid-list-state-px: var(--xh-control-px-sm);
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-size='lg'] {
+    --xh-_grid-list-indicator: var(--xh-control-indicator-lg);
+    --xh-_grid-list-state-font-size: var(--xh-control-font-lg);
+    --xh-_grid-list-state-px: var(--xh-control-px-lg);
+    --xh-icon-size: var(--xh-grid-list-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  .xh-scope-grid-list[data-part='label'] {
+    padding-block: var(--xh-grid-list-label-py, var(--xh-space-1));
+    padding-inline: var(--xh-grid-list-label-px, var(--xh-control-px-md));
+    color: var(--xh-grid-list-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-grid-list-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 行走 Collection Item 的 page 语境（页内持久集合），与 Table、Transfer 同一种选中标记：品牌淡底行面 +
+     淡底前景（selected+hover 20% / +pressed 28%），外加行首勾选框；两者都由家族与勾选标记配方给，
+     这里只映射圆角与选中面的公开槽 */
+  .xh-scope-grid-list[data-part='row'] {
+    --xh-collection-radius: var(--xh-grid-list-row-radius, var(--xh-shape-control));
+    --xh-collection-bg-selected: var(--xh-grid-list-row-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-fg-selected: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-hover: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-highlight: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+    --xh-collection-fg-selected-pressed: var(--xh-grid-list-row-fg-selected, var(--xh-fg-on-brand-subtle));
+
+    /* 家族只过渡换面的两支；重新取数时整列淡下同样走 micro，opacity 补进同一份列表 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* Headless 会预先保留下一次 roving focus 的 highlighted 行（指针点过的行也记着）；容器尚未真正获得
+     键盘焦点时，这只是内部导航位置，不能提前画成焦点态：面退回静息（选中行退回选中面），指针移入仍按
+     悬停那一档回应 */
+  .xh-scope-grid-list[data-part='row'][data-highlighted]:not(:focus-visible) {
+    --xh-collection-bg-keyboard-highlight: transparent;
+    --xh-collection-outline-keyboard-highlight: transparent;
+    --xh-collection-bg-selected-highlight: var(--xh-grid-list-row-bg-selected, var(--xh-bg-brand-subtle));
+    --xh-collection-outline-selected-highlight: transparent;
+  }
+
+  .xh-scope-grid-list[data-part='row'][data-highlighted]:not(:focus-visible):hover {
+    --xh-collection-bg-keyboard-highlight: var(--xh-bg-subtle);
+    --xh-collection-bg-selected-highlight: var(--xh-bg-brand-subtle-hover);
+  }
+
+  .xh-scope-grid-list[data-part='root'][data-readonly]
+  .xh-scope-grid-list[data-part='row'] {
+    cursor: default;
+  }
+
+  /* 已有行时重新取数：不换成占位，行保留上一帧、按 micro 淡到禁用透明度，数据到了再淡回；
+     这一段不接指针——取数在途时选中与行内动作都不生效。aria-busy 与这一副可见回执同源 */
+  .xh-scope-grid-list[data-part='root'][data-loading]
+  .xh-scope-grid-list[data-part='row'] {
+    opacity: var(--xh-grid-list-row-loading-opacity, var(--xh-state-disabled-opacity));
+    pointer-events: none;
+  }
+
+  /* content 保持真实 gridcell 盒；里面两行自己排，不依赖 Collection Item 的直接子项网格。 */
+  .xh-scope-grid-list[data-part='row-content'] {
+    display: flex;
+    grid-row: 1 / span 2;
+    grid-column: text;
+    flex-direction: column;
+    gap: var(--xh-grid-list-row-content-gap, var(--xh-space-1));
+    min-inline-size: 0;
+  }
+
+  .xh-scope-grid-list[data-part='row-text'],
+  .xh-scope-grid-list[data-part='row-description'] {
+    grid-row: auto;
+    grid-column: auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-grid-list[data-part='row-text'] {
+    color: inherit;
+    white-space: nowrap;
+  }
+
+  .xh-scope-grid-list[data-part='row-description'] {
+    color: var(--xh-grid-list-row-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-grid-list-row-description-font-size, var(--xh-control-caption-md));
+    white-space: nowrap;
+  }
+
+  .xh-scope-grid-list[data-part='row-actions'] {
+    display: flex;
+    grid-row: 1 / span 2;
+    grid-column: suffix / span 2;
+    gap: var(--xh-grid-list-row-actions-gap, var(--xh-space-1));
+    align-items: center;
+    margin-inline-start: var(--xh-grid-list-row-actions-ms, var(--xh-control-gap-md));
+  }
+
+  .xh-scope-grid-list[data-part='row-action'] {
+    --xh-action-font-size: var(--xh-grid-list-row-action-font-size, var(--xh-control-font-sm));
+  }
+
+  /* 行首方框：静息透明底 + 控件盒描边，勾上换语气实心面。框里的勾由勾选标记配方画（常驻、按状态淡变并轻缩放），
+     尺寸读这里改接的 --xh-icon-size：方框边长 × 0.75，与 Checkbox 同一比例 */
+  .xh-scope-grid-list[data-part='row-selection-indicator'] {
+    --xh-icon-size: var(--xh-grid-list-row-indicator-glyph-size, var(--xh-_grid-list-indicator-glyph));
+
+    display: grid;
+    grid-row: 1 / span 2;
+    grid-column: prefix;
+    place-items: center;
+    inline-size: var(--xh-grid-list-row-indicator-size, var(--xh-_grid-list-indicator));
+    block-size: var(--xh-grid-list-row-indicator-size, var(--xh-_grid-list-indicator));
+    margin-inline-end: var(--xh-grid-list-row-indicator-me, var(--xh-control-gap-md));
+    border: var(--xh-stroke-thin) solid var(--xh-grid-list-row-indicator-border, var(--xh-border-control));
+    border-radius: var(--xh-grid-list-row-indicator-radius, var(--xh-shape-inset));
+    background: var(--xh-grid-list-row-indicator-bg, transparent);
+    color: var(--xh-grid-list-row-indicator-fg-selected, var(--xh-_grid-list-indicator-on-accent));
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-grid-list[data-part='row-selection-indicator'][data-state='checked'] {
+    border-color: var(--xh-grid-list-row-indicator-border-selected, var(--xh-_grid-list-indicator-accent));
+    background: var(--xh-grid-list-row-indicator-bg-selected, var(--xh-_grid-list-indicator-accent));
+  }
+
+  /* 空态与加载态占同一个位置、同一副排版：一行文案居中，字号与行内内衬随尺寸档与条目同档，次要文字色，
+     块向内距一档，不设最小高 */
+  .xh-scope-grid-list[data-part='empty'],
+  .xh-scope-grid-list[data-part='loading'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-grid-list-state-gap, var(--xh-control-gap-md));
+    padding-block: var(--xh-grid-list-state-py, var(--xh-space-3));
+    padding-inline: var(--xh-grid-list-state-px, var(--xh-_grid-list-state-px));
+    color: var(--xh-grid-list-state-fg, var(--xh-fg-muted));
+    font-size: var(--xh-grid-list-state-font-size, var(--xh-_grid-list-state-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+  }
+
+  /* 还没有行、正在取：一枚加载环排在文案之前。环由加载环配方画成（轨道 + 起始边、随 data-loading 淡入并转），
+     这里只给它盒子：直径取尺寸档的图标档 */
+  .xh-scope-grid-list[data-part='loading']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-grid-list[data-part='row-selection-indicator'][hidden],
+  .xh-scope-grid-list[data-part='row-content'][hidden],
+  .xh-scope-grid-list[data-part='row-actions'][hidden],
+  .xh-scope-grid-list[data-part='empty'][hidden],
+  .xh-scope-grid-list[data-part='loading'][hidden],
+  .xh-scope-grid-list[data-part='root'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    .xh-scope-grid-list[data-part='row-actions'] {
+      display: none;
+    }
+  }
+}