@xihan-ui/styles 1.0.0-alpha.0

package/css/editable.css

@@ -0,0 +1,249 @@
+@layer xihan.components {
+  /* 就地编辑是"一行文字里的一处可改内容"：标题、显示区与按钮天然同行，
+     所以根是一条横向的行，而不是文本框那种"标题一行、控件一行"的竖排。
+     要竖排的作者把 flex-direction 覆盖掉即可，其余尺寸都长在各自的角色节点上 */
+  [data-scope='editable'][data-part='root'] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-editable-gap, var(--xh-space-2));
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='editable'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='editable'][data-part='label'] {
+    color: var(--xh-editable-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-editable-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-editable-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    /* 点标题会把人送进编辑态（预览态下 for 指着的输入框是收起的，点了没反应），
+       所以光标要说明它可点 */
+    cursor: pointer;
+  }
+
+  [data-scope='editable'][data-part='label'][data-disabled] {
+    color: var(--xh-editable-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 预览区与输入框轮流上场，两者在同一处落脚：
+     area 定死最小宽高，切换形态时这一块不会忽大忽小地跳 */
+  [data-scope='editable'][data-part='area'] {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--xh-editable-area-min-h, var(--xh-control-h-md));
+    min-inline-size: var(--xh-editable-area-min-w, 6ch);
+  }
+
+  [data-scope='editable'][data-part='area'][hidden] {
+    display: none;
+  }
+
+  /* 预览区的内边距与边框要和输入框对齐：只有描边是透明的，
+     否则从预览切到编辑时文字会左右挪一下 */
+  [data-scope='editable'][data-part='preview'] {
+    display: inline-block;
+    inline-size: 100%;
+    padding-inline: var(--xh-editable-preview-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-editable-preview-radius, var(--xh-shape-control));
+    color: var(--xh-editable-preview-fg, var(--xh-fg-default));
+    font-size: var(--xh-editable-preview-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-editable-preview-line-height, var(--xh-control-h-md));
+    /* 值里的换行与连续空格照原样显示，但过长的行仍要能断开 */
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  /* 编辑态由连接层给 hidden；上面那条 display 会盖掉 UA 规则，少了这条就收不起来 */
+  [data-scope='editable'][data-part='preview'][hidden] {
+    display: none;
+  }
+
+  /* 认交互的预览区才给文字光标与悬停底色：
+     activation-mode=none 或整块不可编辑时，它就只是一段文字，别装成能点 */
+  [data-scope='editable'][data-part='preview']:not(
+    [data-activation-mode='none'],
+    [data-disabled],
+    [data-readonly]
+  ) {
+    cursor: text;
+  }
+
+  [data-scope='editable'][data-part='preview']:not(
+    [data-activation-mode='none'],
+    [data-disabled],
+    [data-readonly]
+  ):hover {
+    background: var(--xh-editable-preview-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  /* 显示的是占位文字而不是真值，压淡以示区别 */
+  [data-scope='editable'][data-part='preview'][data-placeholder] {
+    color: var(--xh-editable-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  [data-scope='editable'][data-part='preview'][data-disabled] {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 预览区是可聚焦节点（focus 模式下还占 Tab 位），焦点环不能省 */
+  [data-scope='editable'][data-part='preview']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='editable'][data-part='input'] {
+    inline-size: 100%;
+    block-size: var(--xh-editable-input-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-editable-input-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-default));
+    border-radius: var(--xh-editable-input-radius, var(--xh-shape-control));
+    background: var(--xh-editable-input-bg, var(--xh-bg-canvas));
+    color: var(--xh-editable-input-fg, var(--xh-fg-default));
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与预览区的文字对不上 */
+    font-family: inherit;
+    font-size: var(--xh-editable-input-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 预览态由连接层给 hidden；上面给了 inline-size 与 block-size 但没给 display，
+     UA 的 [hidden]{display:none} 仍然管用——这里补一条是防作者层另给 display */
+  [data-scope='editable'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  /* 宽度跟着内容走时交给原生 size 说了算，别再用 100% 把它撑满 */
+  [data-scope='editable'][data-part='input'][data-auto-resize] {
+    inline-size: auto;
+  }
+
+  [data-scope='editable'][data-part='input']::placeholder {
+    color: var(--xh-editable-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='editable'][data-part='input']:hover:not(:disabled, [data-invalid]) {
+    border-color: var(--xh-editable-input-border-hover, var(--xh-border-strong));
+  }
+
+  [data-scope='editable'][data-part='input']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='editable'][data-part='input'][data-invalid] {
+    border-color: var(--xh-editable-input-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 只读仍可聚焦、可复制，不置灰，只把底色压下去表示"改不动" */
+  [data-scope='editable'][data-part='input'][readonly] {
+    background: var(--xh-editable-input-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* 输入框是单体表单控件，禁用走原生 disabled */
+  [data-scope='editable'][data-part='input']:disabled {
+    background: var(--xh-editable-input-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='editable'][data-part='control'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--xh-editable-control-gap, var(--xh-space-1));
+  }
+
+  [data-scope='editable'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* 三颗按钮共用一份皮肤：它们是同一种东西，只是干的活不同，
+     分开写迟早会改了一颗忘了另外两颗 */
+  [data-scope='editable'][data-part='edit-trigger'],
+  [data-scope='editable'][data-part='submit-trigger'],
+  [data-scope='editable'][data-part='cancel-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-editable-trigger-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-editable-trigger-px, var(--xh-control-px-sm));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-editable-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-editable-trigger-bg, var(--xh-bg-subtle));
+    color: var(--xh-editable-trigger-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-editable-trigger-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 三颗按钮按形态轮流收起，连接层给的是 hidden 属性；
+     上面那条 display 已把 UA 规则盖掉，少了这里三条按钮就一直杵着 */
+  [data-scope='editable'][data-part='edit-trigger'][hidden],
+  [data-scope='editable'][data-part='submit-trigger'][hidden],
+  [data-scope='editable'][data-part='cancel-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='editable'][data-part='edit-trigger']:hover:not(:disabled),
+  [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled),
+  [data-scope='editable'][data-part='cancel-trigger']:hover:not(:disabled) {
+    border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-strong));
+    background: var(--xh-editable-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='editable'][data-part='edit-trigger']:active:not(:disabled),
+  [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled),
+  [data-scope='editable'][data-part='cancel-trigger']:active:not(:disabled) {
+    background: var(--xh-editable-trigger-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='editable'][data-part='edit-trigger']:focus-visible,
+  [data-scope='editable'][data-part='submit-trigger']:focus-visible,
+  [data-scope='editable'][data-part='cancel-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 单体控件用 :disabled（不是集合条目那套 [data-disabled]）：
+     禁用与只读时编辑钮置灰，收起态的提交/取消也一并落到这条上 */
+  [data-scope='editable'][data-part='edit-trigger']:disabled,
+  [data-scope='editable'][data-part='submit-trigger']:disabled,
+  [data-scope='editable'][data-part='cancel-trigger']:disabled {
+    border-color: var(--xh-editable-trigger-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-editable-trigger-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 提交按钮是这一组里的主操作，给它一层实心底色区分开 */
+  [data-scope='editable'][data-part='submit-trigger']:not(:disabled) {
+    border-color: var(--xh-editable-submit-border, var(--xh-bg-brand));
+    background: var(--xh-editable-submit-bg, var(--xh-bg-brand));
+    color: var(--xh-editable-submit-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled) {
+    border-color: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
+    background: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled) {
+    border-color: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
+    background: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
+  }
+}

package/css/ellipsis.css

@@ -0,0 +1,41 @@
+@layer xihan.components {
+  /* 单行：一行装不下就收成省略号。
+     行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
+  [data-scope='ellipsis'][data-part='root'] {
+    --xh-_ellipsis-lines: 1;
+
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 多行：按行数裁，裁掉的那一行末尾收省略号 */
+  [data-scope='ellipsis'][data-part='root'][data-multiline] {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--xh-_ellipsis-lines);
+    white-space: normal;
+    /* 一长串没有断点的字符（网址、编号）也得断开，否则它一路撑出去，裁不住 */
+    overflow-wrap: break-word;
+  }
+
+  /* 铺开：裁剪整个撤掉。写在两档之后，压得住上面同权重的那两条 */
+  [data-scope='ellipsis'][data-part='root'][data-expanded] {
+    display: block;
+    overflow: visible;
+    white-space: normal;
+  }
+
+  /* 可展开时整块文字就是那颗按钮 */
+  [data-scope='ellipsis'][data-part='root'][data-expandable] {
+    cursor: pointer;
+  }
+
+  /* 聚焦环恒是 --xh-ring-focus，不随语气走 */
+  [data-scope='ellipsis'][data-part='root'][data-expandable]:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+}

package/css/empty-state.css

@@ -0,0 +1,78 @@
+@layer xihan.components {
+  [data-scope='empty-state'][data-part='root'] {
+    /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_empty-state-gap: var(--xh-stack-gap-md);
+    --xh-_empty-state-py: var(--xh-section-py);
+    --xh-_empty-state-icon-size: 2.5rem;
+    --xh-_empty-state-title-size: var(--xh-font-size-lg);
+    /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
+    --xh-_empty-state-measure: 32rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-empty-state-gap, var(--xh-_empty-state-gap));
+    padding-block: var(--xh-empty-state-py, var(--xh-_empty-state-py));
+    padding-inline: var(--xh-empty-state-px, var(--xh-space-6));
+    color: var(--xh-empty-state-fg, var(--xh-fg-default));
+    text-align: center;
+  }
+
+  /* 活区节点常挂、靠 hidden 收起，上面声明了 display 会盖掉 UA 的 [hidden] 规则 */
+  [data-scope='empty-state'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='empty-state'][data-part='root'][data-size='sm'] {
+    --xh-_empty-state-gap: var(--xh-space-2);
+    --xh-_empty-state-py: var(--xh-space-4);
+    --xh-_empty-state-icon-size: 2rem;
+    --xh-_empty-state-title-size: var(--xh-font-size-md);
+  }
+
+  [data-scope='empty-state'][data-part='root'][data-size='lg'] {
+    --xh-_empty-state-gap: var(--xh-space-6);
+    --xh-_empty-state-py: var(--xh-space-8);
+    --xh-_empty-state-icon-size: 3.5rem;
+    --xh-_empty-state-title-size: var(--xh-font-size-xl);
+  }
+
+  [data-scope='empty-state'][data-part='icon'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    block-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
+    inline-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
+    color: var(--xh-empty-state-icon-fg, var(--xh-fg-subtle));
+    /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
+    font-size: var(--xh-empty-state-icon-font-size, var(--xh-font-size-3xl));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='empty-state'][data-part='title'] {
+    margin: 0;
+    color: var(--xh-empty-state-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-empty-state-title-font-size, var(--xh-_empty-state-title-size));
+    font-weight: var(--xh-empty-state-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-empty-state-title-leading, var(--xh-leading-tight));
+  }
+
+  [data-scope='empty-state'][data-part='description'] {
+    margin: 0;
+    max-inline-size: var(--xh-empty-state-description-max-w, var(--xh-_empty-state-measure));
+    color: var(--xh-empty-state-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-empty-state-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-empty-state-description-leading, var(--xh-text-body-leading));
+  }
+
+  [data-scope='empty-state'][data-part='action'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
+  }
+}

package/css/field.css

@@ -0,0 +1,65 @@
+@layer xihan.components {
+  [data-scope='field'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-field-gap, var(--xh-space-1));
+  }
+
+  [data-scope='field'][data-part='label'] {
+    color: var(--xh-field-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-field-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-field-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='field'][data-part='label'][data-disabled] {
+    color: var(--xh-field-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* control 是作者自己的输入控件，这里只给一套可被覆盖的基础皮肤 */
+  [data-scope='field'][data-part='control'] {
+    inline-size: 100%;
+    block-size: var(--xh-field-control-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-field-control-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-field-control-border, var(--xh-border-default));
+    border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
+    background: var(--xh-field-control-bg, var(--xh-bg-canvas));
+    color: var(--xh-field-control-fg, var(--xh-fg-default));
+    font-size: var(--xh-field-control-font-size, var(--xh-text-body-size));
+  }
+
+  [data-scope='field'][data-part='control']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='field'][data-part='control'][data-invalid] {
+    border-color: var(--xh-field-control-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 禁用由作者在控件上落原生 disabled，样式统一走 data-disabled */
+  [data-scope='field'][data-part='control'][data-disabled] {
+    background: var(--xh-field-control-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='field'][data-part='description'] {
+    margin: 0;
+    color: var(--xh-field-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-field-description-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='field'][data-part='description'][data-disabled] {
+    color: var(--xh-field-description-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 不 invalid 时节点带 hidden：此处不声明 display，交给浏览器的 [hidden] 规则收起 */
+  [data-scope='field'][data-part='error-text'] {
+    margin: 0;
+    color: var(--xh-field-error-fg, var(--xh-fg-danger));
+    font-size: var(--xh-field-error-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-normal);
+  }
+}