@xihan-ui/styles 1.0.0-alpha.0

package/css/clipboard.css

@@ -0,0 +1,133 @@
+@layer xihan.components {
+  /* 与文本框同一套堆叠：标签一行、输入行一行 */
+  [data-scope='clipboard'][data-part='root'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-clipboard-gap, var(--xh-space-1));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='clipboard'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='clipboard'][data-part='label'] {
+    color: var(--xh-clipboard-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-clipboard-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-clipboard-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='clipboard'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 输入框与按钮并排，两者各自把高度对齐即可成一体 */
+  [data-scope='clipboard'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-clipboard-control-gap, var(--xh-control-gap-md));
+  }
+
+  [data-scope='clipboard'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  [data-scope='clipboard'][data-part='input'] {
+    min-inline-size: var(--xh-clipboard-input-min-w, 12rem);
+    block-size: var(--xh-clipboard-input-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-clipboard-input-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-clipboard-input-border, var(--xh-border-default));
+    border-radius: var(--xh-clipboard-input-radius, var(--xh-shape-control));
+    /* 只读态压低底色表示"改不动"，但仍可聚焦、可选中复制 */
+    background: var(--xh-clipboard-input-bg, var(--xh-bg-subtle));
+    color: var(--xh-clipboard-input-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族 */
+    font-family: inherit;
+    font-size: var(--xh-clipboard-input-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    /* 密钥、哈希这类内容一律等宽：截断与换行处对得齐，也更好逐字核对 */
+    font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
+  }
+
+  [data-scope='clipboard'][data-part='input']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='clipboard'][data-part='trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-clipboard-trigger-gap, var(--xh-control-gap-sm));
+    block-size: var(--xh-clipboard-trigger-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-clipboard-trigger-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-clipboard-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-clipboard-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-clipboard-trigger-bg, var(--xh-bg-canvas));
+    color: var(--xh-clipboard-trigger-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-clipboard-trigger-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    /* 复制按钮常被连点，触屏上默认会当成双击缩放 */
+    user-select: none;
+    touch-action: manipulation;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
+  [data-scope='clipboard'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='clipboard'][data-part='trigger']:hover {
+    border-color: var(--xh-clipboard-trigger-border-hover, var(--xh-border-strong));
+    background: var(--xh-clipboard-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='clipboard'][data-part='trigger']:active {
+    background: var(--xh-clipboard-trigger-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='clipboard'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 写入在途：按钮还在原地不动，只把它压暗一点，免得连点 */
+  [data-scope='clipboard'][data-part='trigger'][data-state='copying'] {
+    cursor: progress;
+    opacity: 0.7;
+  }
+
+  /* 复制成功那一段换成成功色，撑住"这次真的写进去了"这句话 */
+  [data-scope='clipboard'][data-part='trigger'][data-copied] {
+    border-color: var(--xh-clipboard-trigger-border-copied, var(--xh-fg-success));
+    color: var(--xh-clipboard-trigger-fg-copied, var(--xh-fg-success));
+  }
+
+  [data-scope='clipboard'][data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 两个指示器靠 hidden 互斥显隐；上面给了 display，这条不补的话收起态当场失效 */
+  [data-scope='clipboard'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 成功那一侧的图标用成功色；平时那侧跟着按钮的文字色走 */
+  [data-scope='clipboard'][data-part='indicator'][data-copied] {
+    color: var(--xh-clipboard-indicator-fg-copied, var(--xh-fg-success));
+  }
+}

package/css/code-block.css

@@ -0,0 +1,81 @@
+@layer xihan.components {
+  /* overflow: hidden 让内部 <pre> 的滚动内容沿圆角收边；不设 display，排布由作者决定 */
+  [data-scope='code-block'][data-part='root'] {
+    overflow: hidden;
+    border-radius: var(--xh-code-block-radius, var(--xh-shape-surface));
+    background: var(--xh-code-block-bg, var(--xh-bg-subtle));
+  }
+
+  /* 显式 block 使作者用 <span> 时也能吃进 padding-block；user-select: none 让它不被框选带走 */
+  [data-scope='code-block'][data-part='lang-label'] {
+    display: block;
+    padding-inline: var(--xh-code-block-label-px, var(--xh-space-3));
+    padding-block: var(--xh-code-block-label-py, var(--xh-space-1));
+    color: var(--xh-code-block-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-code-block-label-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='code-block'][data-part='lang-label'][hidden] {
+    display: none;
+  }
+
+  /* margin: 0 去掉 UA 给 <pre> 的默认外边距。
+     --xh-code-block-line-height 的兜底值须与连接层内联 min-block-size 用的一致，
+     且因参与 calc 乘法必须是长度而非无单位倍数。 */
+  [data-scope='code-block'][data-part='pre'] {
+    /* 逻辑属性 overflow-inline 尚无可用实现，写物理轴 */
+    overflow-x: auto;
+    padding: var(--xh-code-block-p, var(--xh-space-3));
+    margin: 0;
+    line-height: var(--xh-code-block-line-height, 1.5rem);
+  }
+
+  /* <pre> 带 tabindex=0，需要焦点环；偏移取负画在内侧，避免被 root 的 overflow: hidden 裁掉 */
+  [data-scope='code-block'][data-part='pre']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  /* white-space: pre 保留缩进不自动换行，长行改为横向滚动 */
+  [data-scope='code-block'][data-part='code'] {
+    font-family: var(--xh-code-block-font, var(--xh-font-family-mono));
+    white-space: pre;
+  }
+
+  /* 语法配色。令牌集里没有语法色这一类，所以就地声明成可覆盖的变量：
+     注释与标点复用既有语义色，只有三种真需要色相的走 light-dark()。
+     浏览器不认 light-dark() 时这几条整体失效，退化成单色代码，读起来照常。 */
+  [data-scope='code-block'][data-part='root'] {
+    --xh-code-block-comment-fg: var(--xh-fg-muted);
+    --xh-code-block-punctuation-fg: var(--xh-fg-subtle);
+    --xh-code-block-string-fg: light-dark(#0a7f5f, #7ee2b8);
+    --xh-code-block-number-fg: light-dark(#9a5b00, #f0b866);
+    --xh-code-block-keyword-fg: light-dark(#8250df, #d2a8ff);
+  }
+
+  /* 记号本身不带任何布局，只上色：它是 <code> 里的行内片段，多一点盒模型都会破坏对齐 */
+  [data-scope='code-block'][data-part='token'][data-kind='comment'] {
+    color: var(--xh-code-block-comment-fg);
+    font-style: italic;
+  }
+
+  [data-scope='code-block'][data-part='token'][data-kind='string'] {
+    color: var(--xh-code-block-string-fg);
+  }
+
+  [data-scope='code-block'][data-part='token'][data-kind='number'] {
+    color: var(--xh-code-block-number-fg);
+  }
+
+  [data-scope='code-block'][data-part='token'][data-kind='keyword'] {
+    color: var(--xh-code-block-keyword-fg);
+    font-weight: var(--xh-code-block-keyword-weight, 600);
+  }
+
+  [data-scope='code-block'][data-part='token'][data-kind='punctuation'] {
+    color: var(--xh-code-block-punctuation-fg);
+  }
+}

package/css/collapsible.css

@@ -0,0 +1,63 @@
+@layer xihan.components {
+  /* 根容器自己不排版，这条只声明尺寸档的私有槽：触发按钮从 root 继承它们，
+     换档不必给部件各写一条选择器 */
+  [data-scope='collapsible'][data-part='root'] {
+    --xh-_collapsible-trigger-h: var(--xh-control-h-md);
+    --xh-_collapsible-trigger-px: var(--xh-control-px-md);
+    --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
+    --xh-_collapsible-trigger-font-size: var(--xh-text-label-size);
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面那条里 */
+  [data-scope='collapsible'][data-part='root'][data-size='sm'] {
+    --xh-_collapsible-trigger-h: var(--xh-control-h-sm);
+    --xh-_collapsible-trigger-px: var(--xh-control-px-sm);
+    --xh-_collapsible-trigger-gap: var(--xh-control-gap-sm);
+    --xh-_collapsible-trigger-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='collapsible'][data-part='root'][data-size='lg'] {
+    --xh-_collapsible-trigger-h: var(--xh-control-h-lg);
+    --xh-_collapsible-trigger-px: var(--xh-control-px-lg);
+    --xh-_collapsible-trigger-gap: var(--xh-control-gap-lg);
+    --xh-_collapsible-trigger-font-size: var(--xh-font-size-lg);
+  }
+
+  [data-scope='collapsible'][data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    inline-size: 100%;
+    gap: var(--xh-collapsible-trigger-gap, var(--xh-_collapsible-trigger-gap));
+    block-size: var(--xh-collapsible-trigger-h, var(--xh-_collapsible-trigger-h));
+    padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_collapsible-trigger-px));
+    border: 0;
+    border-radius: var(--xh-collapsible-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-collapsible-trigger-bg, transparent);
+    color: var(--xh-collapsible-trigger-fg, var(--xh-fg-default));
+    font-size: var(--xh-collapsible-trigger-font-size, var(--xh-_collapsible-trigger-font-size));
+    font-weight: var(--xh-collapsible-trigger-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='collapsible'][data-part='trigger']:hover {
+    background: var(--xh-collapsible-trigger-bg-hover, var(--xh-bg-subtle));
+  }
+
+  [data-scope='collapsible'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='collapsible'][data-part='trigger'][data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='collapsible'][data-part='content'] {
+    padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
+    color: var(--xh-collapsible-content-fg, var(--xh-fg-default));
+  }
+}