@xihan-ui/styles 1.0.0-alpha.0

package/css/context-menu.css

@@ -0,0 +1,263 @@
+@layer xihan.components {
+  /* 根只是把触发区与浮层圈在一起做作用域，不该在作者布局里多插一层盒子 */
+  [data-scope='context-menu'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，条目与分组标题都从 root 继承它们，
+       换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承
+       （display:contents 不影响继承：自定义属性沿 DOM 树传） */
+    --xh-_context-menu-item-py: var(--xh-space-2);
+    --xh-_context-menu-item-px: var(--xh-control-px-sm);
+    --xh-_context-menu-item-gap: var(--xh-control-gap-md);
+    --xh-_context-menu-font-size: var(--xh-text-body-size);
+
+    /* 条目高亮底与标记位强调色随语气走。没写 data-tone 时这两个语气槽没被声明，各自退回原来的取值 */
+    --xh-_context-menu-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_context-menu-accent: var(--xh-_tone, var(--xh-fg-subtle));
+
+    display: contents;
+  }
+
+  [data-scope='context-menu'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
+     （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+  [data-scope='context-menu'][data-part='root'][data-size='sm'] {
+    --xh-_context-menu-item-py: var(--xh-space-1);
+    --xh-_context-menu-item-px: var(--xh-space-1);
+    --xh-_context-menu-item-gap: var(--xh-control-gap-sm);
+    --xh-_context-menu-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='context-menu'][data-part='root'][data-size='lg'] {
+    --xh-_context-menu-item-py: var(--xh-space-3);
+    --xh-_context-menu-item-px: var(--xh-space-3);
+    --xh-_context-menu-item-gap: var(--xh-control-gap-lg);
+    --xh-_context-menu-font-size: var(--xh-font-size-lg);
+  }
+
+  /* 触发区是作者自己的一块内容，尺寸与排布归他；这里只管交互观感：
+     长按会先选中区域内的文字，长按菜单弹出时手指底下是一片高亮，很难看 */
+  [data-scope='context-menu'][data-part='trigger'] {
+    user-select: none;
+  }
+
+  /* 触发区自带 Tab 位（Shift+F10 / 菜单键的落点），必须画得出焦点 */
+  [data-scope='context-menu'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='context-menu'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='context-menu'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='context-menu'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--xh-context-menu-min-w, var(--xh-overlay-menu-min-w));
+    max-inline-size: var(--xh-context-menu-max-w, var(--xh-overlay-max-w));
+    padding-block: var(--xh-context-menu-py, var(--xh-space-1));
+    padding-inline: var(--xh-context-menu-px, var(--xh-space-1));
+    border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-border-default));
+    border-radius: var(--xh-context-menu-radius, var(--xh-shape-surface));
+    background: var(--xh-context-menu-bg, var(--xh-bg-surface));
+    color: var(--xh-context-menu-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-context-menu-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='context-menu'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
+  [data-scope='context-menu'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 展开时轻微涨开：菜单是被光标"点出来"的，纯淡入显得它一直都在
+     （不设 transform-origin：那个属性没有逻辑关键字，写死方向会在 RTL 下反着涨） */
+  [data-scope='context-menu'][data-part='content'][data-state='open'] {
+    animation: xh-context-menu-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 关掉动效的用户不该被涨开动画晃一下；这里只管本组件，公共那份不动 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='context-menu'][data-part='content'][data-state='open'] {
+      animation-duration: 0.01ms;
+    }
+  }
+
+  [data-scope='context-menu'][data-part='group'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-scope='context-menu'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+     内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
+  [data-scope='context-menu'][data-part='group-label'] {
+    display: block;
+    padding-block: var(--xh-context-menu-group-label-py, var(--xh-space-1));
+    padding-inline: var(--xh-context-menu-group-label-px, var(--xh-_context-menu-item-px));
+    color: var(--xh-context-menu-group-label-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-context-menu-group-label-font-size, var(--xh-font-size-xs));
+    font-weight: var(--xh-context-menu-group-label-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='context-menu'][data-part='group-label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='context-menu'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-context-menu-item-gap, var(--xh-_context-menu-item-gap));
+    padding-block: var(--xh-context-menu-item-py, var(--xh-_context-menu-item-py));
+    padding-inline: var(--xh-context-menu-item-px, var(--xh-_context-menu-item-px));
+    border-radius: var(--xh-context-menu-item-radius, var(--xh-shape-control));
+    color: var(--xh-context-menu-item-fg, var(--xh-fg-default));
+    font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
+  [data-scope='context-menu'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+     data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
+     子部件够不着那个伪类，只能读这个标记 */
+  [data-scope='context-menu'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
+    background: var(--xh-context-menu-item-bg-highlight, var(--xh-_context-menu-item-highlight-bg));
+  }
+
+  [data-scope='context-menu'][data-part='item']:focus {
+    outline: none;
+  }
+
+  /* 禁用走 aria-disabled 而非原生 disabled：条目仍要可聚焦（它还得当方向键的起点），
+     所以只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  [data-scope='context-menu'][data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='context-menu'][data-part='item-text'] {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  [data-scope='context-menu'][data-part='item-text'][hidden] {
+    display: none;
+  }
+
+  /* 标记位（勾选符号 / 图标 / 快捷键提示）：定宽占位，切换内容不引起行宽抖动 */
+  [data-scope='context-menu'][data-part='item-indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-context-menu-item-indicator-size, var(--xh-control-indicator-size));
+    color: var(--xh-context-menu-item-indicator-fg, var(--xh-_context-menu-accent));
+  }
+
+  [data-scope='context-menu'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='context-menu'][data-part='item-indicator'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  [data-scope='context-menu'][data-part='separator'] {
+    block-size: var(--xh-context-menu-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-context-menu-separator-my, var(--xh-space-1));
+    background: var(--xh-context-menu-separator-color, var(--xh-border-default));
+  }
+
+  [data-scope='context-menu'][data-part='separator'][hidden] {
+    display: none;
+  }
+
+  /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
+     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+  [data-scope='context-menu'][data-part='arrow'] {
+    position: absolute;
+    inline-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+    block-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+    background: var(--xh-context-menu-bg, var(--xh-bg-surface));
+    border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-border-default));
+    rotate: 45deg;
+  }
+
+  [data-scope='context-menu'][data-part='arrow'][hidden] {
+    display: none;
+  }
+
+  [data-scope='context-menu'][data-part='arrow'][data-placement^='bottom'] {
+    inset-block-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='context-menu'][data-part='arrow'][data-placement^='top'] {
+    inset-block-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-start: 0;
+  }
+
+  [data-scope='context-menu'][data-part='arrow'][data-placement^='right'] {
+    inset-inline-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-start: 0;
+    border-inline-end: 0;
+  }
+
+  [data-scope='context-menu'][data-part='arrow'][data-placement^='left'] {
+    inset-inline-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
+    inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    border-block-end: 0;
+    border-inline-start: 0;
+  }
+}
+
+@layer xihan.motion {
+  /* 自带前缀独占一个名字，不动公共的那份关键帧 */
+  @keyframes xh-context-menu-in {
+    from {
+      opacity: 0;
+      scale: 0.96;
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+}

package/css/countdown.css

@@ -0,0 +1,21 @@
+@layer xihan.components {
+  [data-scope='countdown'][data-part='root'] {
+    display: inline-block;
+    color: var(--xh-countdown-fg, var(--xh-fg-default));
+    /* 不自带字号：倒计时多半嵌在一句话里或摆在别人的数值槽里，跟着上下文走 */
+    /* 等宽数字：逐位宽度一致，秒数换位时冒号不会左右挪动 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='countdown'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 到点之后这串 00:00:00 不再是活的信息，退一档；它与"暂停在 30 秒上"是两回事，
+     后者仍然是要盯着看的数，所以退档只认 data-finished，不认 data-state */
+  [data-scope='countdown'][data-part='root'][data-finished] {
+    color: var(--xh-countdown-finished-fg, var(--xh-fg-muted));
+  }
+}

package/css/date-field.css

@@ -0,0 +1,200 @@
+@layer xihan.components {
+  /* 与文本框、数字框同一套堆叠：标签一行、分段框一行 */
+  [data-scope='date-field'][data-part='root'] {
+    /* 尺寸档只换这四个私有槽，标题与分段框都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    --xh-_date-field-control-h: var(--xh-control-h-md);
+    --xh-_date-field-control-px: var(--xh-control-px-md);
+    --xh-_date-field-font-size: var(--xh-text-body-size);
+    --xh-_date-field-label-font-size: var(--xh-text-label-size);
+    /* 形态档只换这三个私有槽：底色与两档描边 */
+    --xh-_date-field-control-bg: var(--xh-bg-canvas);
+    --xh-_date-field-control-border: var(--xh-border-default);
+    --xh-_date-field-control-border-hover: var(--xh-border-strong);
+    /* 聚焦环与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
+    --xh-_date-field-ring: var(--xh-ring-focus);
+    --xh-_date-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_date-field-segment-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-date-field-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='date-field'][data-part='root'][data-size='sm'] {
+    --xh-_date-field-control-h: var(--xh-control-h-sm);
+    --xh-_date-field-control-px: var(--xh-control-px-sm);
+    --xh-_date-field-font-size: var(--xh-font-size-sm);
+    --xh-_date-field-label-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='date-field'][data-part='root'][data-size='lg'] {
+    --xh-_date-field-control-h: var(--xh-control-h-lg);
+    --xh-_date-field-control-px: var(--xh-control-px-lg);
+    --xh-_date-field-font-size: var(--xh-font-size-lg);
+    --xh-_date-field-label-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 形态 —— */
+  /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
+  [data-scope='date-field'][data-part='root'][data-variant='outline'] {
+    --xh-_date-field-control-bg: var(--xh-bg-canvas);
+    --xh-_date-field-control-border: var(--xh-border-default);
+    --xh-_date-field-control-border-hover: var(--xh-border-strong);
+  }
+
+  /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
+  [data-scope='date-field'][data-part='root'][data-variant='subtle'] {
+    --xh-_date-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_date-field-control-border: transparent;
+    --xh-_date-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+  }
+
+  /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */
+  [data-scope='date-field'][data-part='root'][data-variant='ghost'] {
+    --xh-_date-field-control-bg: transparent;
+    --xh-_date-field-control-border: transparent;
+    --xh-_date-field-control-border-hover: transparent;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='date-field'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-field'][data-part='label'] {
+    color: var(--xh-date-field-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-date-field-label-font-size, var(--xh-_date-field-label-font-size));
+    font-weight: var(--xh-date-field-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    /* 点标题会把焦点送进首段，指针得说明这件事 */
+    cursor: default;
+  }
+
+  [data-scope='date-field'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-field'][data-part='label'][data-disabled] {
+    color: var(--xh-date-field-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 分段框整体长得像一个输入框：边框与背景长在 control 上，各段只是里面的文字。
+     段与段之间的分隔符（'/'、'年'）由作者自己写在段之间，不在角色表里 */
+  [data-scope='date-field'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--xh-date-field-control-h, var(--xh-_date-field-control-h));
+    padding-inline: var(--xh-date-field-control-px, var(--xh-_date-field-control-px));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-date-field-control-border, var(--xh-_date-field-control-border));
+    border-radius: var(--xh-date-field-control-radius, var(--xh-shape-control));
+    background: var(--xh-date-field-control-bg, var(--xh-_date-field-control-bg));
+    color: var(--xh-date-field-control-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让分段框用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-date-field-font-size, var(--xh-_date-field-font-size));
+    line-height: var(--xh-leading-none);
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='date-field'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='date-field'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
+    border-color: var(--xh-date-field-control-border-hover, var(--xh-_date-field-control-border-hover));
+  }
+
+  /* 焦点落在某一段上，而边框长在 control 上：焦点环得由内向外借一层。
+     control 自己不占 Tab 位，:focus-within 是它唯一能感知组内焦点的方式 */
+  [data-scope='date-field'][data-part='control']:focus-within {
+    border-color: var(--xh-date-field-control-border-focus, var(--xh-_date-field-ring));
+    outline: var(--xh-ring-width) solid var(--xh-_date-field-ring);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='date-field'][data-part='control'][data-invalid] {
+    border-color: var(--xh-date-field-control-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 只读仍可聚焦、可换段，不置灰，只把底色压下去表示"改不动" */
+  [data-scope='date-field'][data-part='control'][data-readonly] {
+    background: var(--xh-date-field-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* 整组禁用：段位是 div 而非原生控件，禁用只表达得成 data-disabled */
+  [data-scope='date-field'][data-part='control'][data-disabled] {
+    background: var(--xh-date-field-control-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 每一段是一块可聚焦的文字：宽度随内容走，两侧留一点让选中底色不贴着数字 */
+  [data-scope='date-field'][data-part='segment'] {
+    display: inline-block;
+    padding-inline: var(--xh-date-field-segment-px, var(--xh-space-1));
+    padding-block: var(--xh-date-field-segment-py, var(--xh-space-0));
+    border-radius: var(--xh-date-field-segment-radius, var(--xh-radius-sm));
+    color: inherit;
+    font: inherit;
+    /* 等宽数字：各位字宽不一时，上下键连按会让整行数字左右跳 */
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+    text-align: center;
+    /* 段位靠键盘编辑，不是文本：让它被选中只会在拖选时选出半截日期 */
+    user-select: none;
+    /* 触屏上连点两下不该被当成缩放手势 */
+    touch-action: manipulation;
+  }
+
+  /* granularity 用不上的段带 hidden 留在文档里（不卸载作者节点）。
+     上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='date-field'][data-part='segment'][hidden] {
+    display: none;
+  }
+
+  /* 未填的段用弱色显示占位串，和填好的数字拉开差别 */
+  [data-scope='date-field'][data-part='segment'][data-placeholder] {
+    color: var(--xh-date-field-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* 段位是集合里的条目，用 data-* 而不是 :disabled —— 它是 div，没有原生禁用态 */
+  [data-scope='date-field'][data-part='segment'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 正在编辑的那一段要看得出来：整行数字长得一模一样，光标那道线这里根本没有。
+     data-focus 由机器给（它知道当前是哪一段），:focus-visible 兜住机器状态还没回流的那一帧。
+     焦点环画在 control 上，段位这里只反白，两层各管各的不打架 */
+  [data-scope='date-field'][data-part='segment'][data-focus],
+  [data-scope='date-field'][data-part='segment']:focus-visible {
+    background: var(--xh-date-field-segment-bg-focus, var(--xh-_date-field-segment-bg));
+    color: var(--xh-date-field-segment-fg-focus, var(--xh-_date-field-segment-fg));
+    outline: none;
+  }
+
+  /* 反白之后占位串那条弱色规则会被盖掉，专门再压一遍才看得清 */
+  [data-scope='date-field'][data-part='segment'][data-focus][data-placeholder] {
+    color: var(--xh-date-field-segment-fg-focus, var(--xh-_date-field-segment-fg));
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  [data-scope='date-field'][data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}