@xihan-ui/styles 1.0.0-alpha.0

package/css/date-picker.css

@@ -0,0 +1,231 @@
+@layer xihan.components {
+  /* 与文本框、分段日期同一套堆叠：标签一行、输入行一行 */
+  [data-scope='date-picker'][data-part='root'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-date-picker-gap, var(--xh-space-1));
+  }
+
+  /* 只要声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='date-picker'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-picker'][data-part='label'] {
+    color: var(--xh-date-picker-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-date-picker-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-date-picker-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    /* 点标题会把焦点送进首段，指针得说明这件事 */
+    cursor: default;
+  }
+
+  [data-scope='date-picker'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-picker'][data-part='label'][data-disabled] {
+    color: var(--xh-date-picker-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* 画成一个框的是 control 而不是 input：段位、清空按钮、日历按钮三者要看起来是一体的，
+     边框长在里面任何一个身上都会把另外两个割在框外 */
+  [data-scope='date-picker'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-date-picker-control-gap, var(--xh-control-gap-md));
+    min-inline-size: var(--xh-date-picker-control-min-w, var(--xh-overlay-min-w));
+    block-size: var(--xh-date-picker-control-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-date-picker-control-px, var(--xh-control-px-md));
+    padding-block: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-date-picker-control-border, var(--xh-border-default));
+    border-radius: var(--xh-date-picker-control-radius, var(--xh-shape-control));
+    background: var(--xh-date-picker-control-bg, var(--xh-bg-canvas));
+    color: var(--xh-date-picker-control-fg, var(--xh-fg-default));
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='date-picker'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  [data-scope='date-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
+    border-color: var(--xh-date-picker-control-border-hover, var(--xh-border-strong));
+  }
+
+  /* 焦点落在某一段或某个按钮上，而边框长在 control 上：焦点环得由内向外借一层。
+     control 自己不占 Tab 位，:focus-within 是它唯一能感知组内焦点的方式 */
+  [data-scope='date-picker'][data-part='control']:focus-within {
+    border-color: var(--xh-date-picker-control-border-focus, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='date-picker'][data-part='control'][data-invalid] {
+    border-color: var(--xh-date-picker-control-border-invalid, var(--xh-color-danger-500));
+  }
+
+  /* 只读仍可聚焦、日历仍能展开来看，不置灰，只把底色压下去表示"改不动" */
+  [data-scope='date-picker'][data-part='control'][data-readonly] {
+    background: var(--xh-date-picker-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  [data-scope='date-picker'][data-part='control'][data-disabled] {
+    background: var(--xh-date-picker-control-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 分段容器：段位自己那身皮由 date-field 那份样式负责（它们戴的是那一份解剖的标记），
+     这里只管把一排段位横过来、占满输入行剩下的宽度 */
+  [data-scope='date-picker'][data-part='input'] {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    min-inline-size: 0;
+    block-size: 100%;
+    color: inherit;
+    /* 表单控件不继承页面字体，只给字号会让段位用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-date-picker-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='date-picker'][data-part='input'][hidden] {
+    display: none;
+  }
+
+  /* 容器自己不占 Tab 位、也不承载焦点，环由 control 画，这里不再套一圈 */
+  [data-scope='date-picker'][data-part='input']:focus-visible {
+    outline: none;
+  }
+
+  /* 两个按钮同一副长相：贴在框内末端的小方钮，不占宽度也不撑高 control */
+  [data-scope='date-picker'][data-part='trigger'],
+  [data-scope='date-picker'][data-part='clear-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-date-picker-action-size, var(--xh-control-action-size));
+    block-size: var(--xh-date-picker-action-size, var(--xh-control-action-size));
+    padding: 0;
+    border: 0;
+    border-radius: var(--xh-date-picker-action-radius, var(--xh-shape-control));
+    background: var(--xh-date-picker-action-bg, transparent);
+    color: var(--xh-date-picker-action-fg, var(--xh-fg-muted));
+    font-family: inherit;
+    font-size: var(--xh-date-picker-action-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    user-select: none;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='date-picker'][data-part='trigger'][hidden],
+  [data-scope='date-picker'][data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-picker'][data-part='trigger']:hover:not(:disabled),
+  [data-scope='date-picker'][data-part='clear-trigger']:hover:not(:disabled) {
+    background: var(--xh-date-picker-action-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-date-picker-action-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='date-picker'][data-part='trigger']:active:not(:disabled),
+  [data-scope='date-picker'][data-part='clear-trigger']:active:not(:disabled) {
+    background: var(--xh-date-picker-action-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  /* 展开时按钮压一层底色，与浮层的存在互相印证 */
+  [data-scope='date-picker'][data-part='trigger'][data-state='open'] {
+    background: var(--xh-date-picker-action-bg-active, var(--xh-bg-subtle-active));
+    color: var(--xh-date-picker-action-fg-hover, var(--xh-fg-default));
+  }
+
+  /* trigger 在 Tab 序列里（清空按钮不在，它是 tabindex=-1 的兜底），落焦时必须看得见 */
+  [data-scope='date-picker'][data-part='trigger']:focus-visible,
+  [data-scope='date-picker'][data-part='clear-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='date-picker'][data-part='trigger']:disabled,
+  [data-scope='date-picker'][data-part='clear-trigger']:disabled {
+    background: var(--xh-date-picker-action-bg, transparent);
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  [data-scope='date-picker'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 里 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='date-picker'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='date-picker'][data-part='content'] {
+    display: block;
+    padding: var(--xh-date-picker-content-p, var(--xh-space-3));
+    border: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+    border-radius: var(--xh-date-picker-content-radius, var(--xh-shape-surface));
+    background: var(--xh-date-picker-content-bg, var(--xh-bg-surface));
+    color: var(--xh-date-picker-content-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-date-picker-content-shadow, var(--xh-elevation-2));
+    pointer-events: auto;
+  }
+
+  /* display 会盖掉 hidden 属性的 UA 规则，收起态显式让位 */
+  [data-scope='date-picker'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* 浮层壳不承载焦点（焦点直接落到聚焦日那一格），但它写着 tabindex=-1，
+     程序化落焦时不该再画一圈环 */
+  [data-scope='date-picker'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='date-picker'][data-part='content'][data-state='open'] {
+    animation: xh-date-picker-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 内嵌日历的挂载点同时充当日历的根节点：日历那份样式的 root 规则落在
+     [data-scope='calendar'][data-part='root'] 上，而这里没有那个节点，
+     所以网格外层该有的排布得在这儿补齐（网格内部的皮仍归 calendar 那一份） */
+  [data-scope='date-picker'][data-part='calendar'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-date-picker-calendar-gap, var(--xh-space-3));
+    /* 数字等宽：1 与 7 的字形宽度在比例字体里并不相同，不定住会让整张网格随月份抖动 */
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='date-picker'][data-part='calendar'][hidden] {
+    display: none;
+  }
+}
+
+@layer xihan.motion {
+  /* 浮层进场：淡入 + 轻微上浮。名字带组件前缀，不与公共关键帧抢名 */
+  @keyframes xh-date-picker-in {
+    from {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+}

package/css/descriptions.css

@@ -0,0 +1,200 @@
+@layer xihan.components {
+  [data-scope='descriptions'][data-part='root'] {
+    /* 一个尺寸档只换这几个私有槽，每一格与格内两段都从根上继承它们，
+       换档不必给每个部件各写一条选择器 */
+    --xh-_descriptions-gap: var(--xh-space-3);
+    --xh-_descriptions-pair-gap: var(--xh-space-1);
+    --xh-_descriptions-label-gap: var(--xh-space-2);
+    --xh-_descriptions-py: var(--xh-space-2);
+    --xh-_descriptions-px: var(--xh-space-3);
+    --xh-_descriptions-font-size: var(--xh-text-body-size);
+    /* 标签在左时那一列的宽度：收到最长的那个标签 */
+    --xh-_descriptions-label-w: max-content;
+
+    display: grid;
+    /* 不写 columns 即每行一组；二到六列各有一条规则 */
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--xh-descriptions-gap, var(--xh-_descriptions-gap));
+    /* 根可能写成 dl，UA 的上下外边距在这里清掉 */
+    margin: 0;
+    color: var(--xh-descriptions-fg, var(--xh-fg-default));
+    font-size: var(--xh-descriptions-font-size, var(--xh-_descriptions-font-size));
+    line-height: var(--xh-text-body-leading);
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='descriptions'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 列数 —— */
+  [data-scope='descriptions'][data-part='root'][data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-columns='3'] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-columns='4'] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-columns='5'] {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-columns='6'] {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='descriptions'][data-part='root'][data-size='sm'] {
+    --xh-_descriptions-gap: var(--xh-space-2);
+    --xh-_descriptions-py: var(--xh-space-1);
+    --xh-_descriptions-px: var(--xh-space-2);
+    --xh-_descriptions-font-size: var(--xh-font-size-sm);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-size='lg'] {
+    --xh-_descriptions-gap: var(--xh-space-4);
+    --xh-_descriptions-pair-gap: var(--xh-space-2);
+    --xh-_descriptions-label-gap: var(--xh-space-3);
+    --xh-_descriptions-py: var(--xh-space-3);
+    --xh-_descriptions-px: var(--xh-space-4);
+    --xh-_descriptions-font-size: var(--xh-font-size-lg);
+  }
+
+  /* —— 每一格 —— */
+  /* 一格自己也是网格：不写 placement 即标签一行、取值一行叠着排 */
+  [data-scope='descriptions'][data-part='item'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: var(--xh-descriptions-pair-gap, var(--xh-_descriptions-pair-gap));
+  }
+
+  /* 标签在左：一格分成「标签列 + 取值列」，两段的首行文字对齐同一条基线。
+     只认自己的直接子格，套在取值里的另一份描述由它自己的根管 */
+  [data-scope='descriptions'][data-part='root'][data-placement='left']
+    > [data-scope='descriptions'][data-part='item'] {
+    grid-template-columns: var(--xh-descriptions-label-w, var(--xh-_descriptions-label-w)) minmax(0, 1fr);
+    align-items: baseline;
+    column-gap: var(--xh-descriptions-label-gap, var(--xh-_descriptions-label-gap));
+  }
+
+  [data-scope='descriptions'][data-part='label'] {
+    color: var(--xh-descriptions-label-fg, var(--xh-fg-muted));
+    font-weight: var(--xh-descriptions-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  [data-scope='descriptions'][data-part='value'] {
+    /* 取值可能写成 dd，UA 的左缩进在这里清掉 */
+    margin: 0;
+    /* 网格项默认不肯收到内容以下，这行让长文本能被压窄 */
+    min-inline-size: 0;
+    color: var(--xh-descriptions-value-fg, var(--xh-fg-default));
+  }
+
+  /* —— 外框与网格线 —— */
+  [data-scope='descriptions'][data-part='root'][data-bordered] {
+    /* 网格线由每格自己的边线拼出来，格与格之间不能再留缝 */
+    gap: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-default));
+    border-radius: var(--xh-descriptions-radius, var(--xh-shape-surface));
+    background: var(--xh-descriptions-bg, var(--xh-bg-surface));
+    /* 四角的格子要被圆角裁住 */
+    overflow: hidden;
+  }
+
+  /* 每格自带上边线与左边线，行首与首行那几格再各自抹掉，相邻两格之间就只剩一条 */
+  [data-scope='descriptions'][data-part='root'][data-bordered]
+    > [data-scope='descriptions'][data-part='item'] {
+    padding-block: var(--xh-descriptions-item-py, var(--xh-_descriptions-py));
+    padding-inline: var(--xh-descriptions-item-px, var(--xh-_descriptions-px));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-descriptions-border, var(--xh-border-subtle));
+    /* 每行一组时左边没有邻居，宽度按列数补回来 */
+    border-inline-start: 0 solid var(--xh-descriptions-border, var(--xh-border-subtle));
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered]
+    > [data-scope='descriptions'][data-part='item']:first-child {
+    border-block-start-width: 0;
+  }
+
+  /* 二到六列：左边线一律补上，再抹掉每行第一格的左边线与首行那几格的上边线 */
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
+    > [data-scope='descriptions'][data-part='item'] {
+    border-inline-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
+    > [data-scope='descriptions'][data-part='item']:nth-child(2n + 1) {
+    border-inline-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='2']
+    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 2) {
+    border-block-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
+    > [data-scope='descriptions'][data-part='item'] {
+    border-inline-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
+    > [data-scope='descriptions'][data-part='item']:nth-child(3n + 1) {
+    border-inline-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='3']
+    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 3) {
+    border-block-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
+    > [data-scope='descriptions'][data-part='item'] {
+    border-inline-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
+    > [data-scope='descriptions'][data-part='item']:nth-child(4n + 1) {
+    border-inline-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='4']
+    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 4) {
+    border-block-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
+    > [data-scope='descriptions'][data-part='item'] {
+    border-inline-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
+    > [data-scope='descriptions'][data-part='item']:nth-child(5n + 1) {
+    border-inline-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='5']
+    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 5) {
+    border-block-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
+    > [data-scope='descriptions'][data-part='item'] {
+    border-inline-start-width: var(--xh-stroke-thin);
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
+    > [data-scope='descriptions'][data-part='item']:nth-child(6n + 1) {
+    border-inline-start-width: 0;
+  }
+
+  [data-scope='descriptions'][data-part='root'][data-bordered][data-columns='6']
+    > [data-scope='descriptions'][data-part='item']:nth-child(-n + 6) {
+    border-block-start-width: 0;
+  }
+}

package/css/dialog.css

@@ -0,0 +1,127 @@
+@layer xihan.components {
+  [data-scope='dialog'][data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-modal);
+    background: var(--xh-dialog-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  [data-scope='dialog'][data-part='backdrop'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='dialog'][data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  [data-scope='dialog'][data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--xh-space-4);
+  }
+
+  [data-scope='dialog'][data-part='positioner'][data-position='top'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='dialog'][data-part='content'] {
+    /* 尺寸档只换这一个私有槽。它声明在 content 而不是别处：dialog 的解剖里没有 root，
+       positioner 又不是必需部件，content 才是这层浮层恒在的最外层，且它会被 portal 到 body，
+       选择器只认得它自己身上那一份 data-size。 */
+    --xh-_dialog-max-w: 32rem;
+
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: var(--xh-dialog-max-w, var(--xh-_dialog-max-w));
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-dialog-gap, var(--xh-stack-gap-md));
+    padding-block: var(--xh-dialog-py, var(--xh-section-py));
+    padding-inline: var(--xh-dialog-px, var(--xh-control-px-lg));
+    border-radius: var(--xh-dialog-radius, var(--xh-shape-surface));
+    background: var(--xh-dialog-bg, var(--xh-bg-surface));
+    color: var(--xh-dialog-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-dialog-shadow, var(--xh-elevation-3));
+  }
+
+  /* 收起态：connect 会给 content 打 hidden，但上面那条 display 会盖掉 UA 的
+     [hidden]{display:none}。meta 里 positioner 并非必需部件，按最小合规结构
+     （只有 trigger + content）写时，没有这一条收起的对话框就一直摊在页面上。 */
+  [data-scope='dialog'][data-part='content'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 只有最大宽度分档；中间档不写规则，缺省即中档。
+     宽度上限之外的一切（内边距、字号、圆角）都不随档位动：弹层的语气归里面的内容表达。 */
+  [data-scope='dialog'][data-part='content'][data-size='sm'] {
+    --xh-_dialog-max-w: 24rem;
+  }
+
+  [data-scope='dialog'][data-part='content'][data-size='lg'] {
+    --xh-_dialog-max-w: 48rem;
+  }
+
+  [data-scope='dialog'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 入场用 @starting-style 只驱动动画名切换；退场由 presence 保留 DOM 后播放 */
+  [data-scope='dialog'][data-part='content'][data-state='open'] {
+    animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='dialog'][data-part='content'][data-state='closed'] {
+    animation: xh-dialog-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+  }
+
+  [data-scope='dialog'][data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-dialog-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-dialog-title-font-weight, var(--xh-text-heading-3-weight));
+    color: var(--xh-dialog-title-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='dialog'][data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-text-body-size);
+    color: var(--xh-dialog-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出右上角那块，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='close-trigger'])
+    [data-scope='dialog'][data-part='title'] {
+    padding-inline-end: calc(var(--xh-control-h-sm) + var(--xh-space-3));
+  }
+
+  [data-scope='dialog'][data-part='close-trigger'] {
+    position: absolute;
+    inset-block-start: var(--xh-space-3);
+    inset-inline-end: var(--xh-space-3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    inline-size: var(--xh-control-h-sm);
+    border: 0;
+    border-radius: var(--xh-shape-control);
+    background: transparent;
+    color: var(--xh-fg-muted);
+    cursor: pointer;
+  }
+
+  [data-scope='dialog'][data-part='close-trigger']:hover {
+    background: var(--xh-bg-subtle);
+    color: var(--xh-fg-default);
+  }
+
+  [data-scope='dialog'][data-part='close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+}