@xihan-ui/styles 1.0.0-alpha.0

package/css/drawer.css

@@ -0,0 +1,372 @@
+@layer xihan.motion {
+  /* 四条边各一对滑入/滑出。位移量用 translate 的百分比，参照的是面板自己的边框盒，
+     所以不管 --xh-drawer-size 被改成多少，"正好推到视口外"这件事都成立。
+
+     位移写成两个私有槽位而不是写死 ±100%：贴边用的是逻辑 inset（inset-inline-start 等），
+     RTL 下 inline-end 落在物理左边；transform 没有逻辑等价物，若这里写死物理方向，
+     就会出现"面板贴在左边、却从右边滑进来"。槽位在 RTL 下翻符号，两者才始终同向。
+     竖排书写模式下 block 轴不再是 Y 轴，位移会退化为纵向，但贴边本身仍由逻辑 inset 保证。 */
+  @keyframes xh-drawer-in-right {
+    from {
+      translate: var(--xh-_drawer-shift-inline, 100%) 0;
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-drawer-out-right {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: var(--xh-_drawer-shift-inline, 100%) 0;
+    }
+  }
+
+  @keyframes xh-drawer-in-left {
+    from {
+      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-drawer-out-left {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: calc(-1 * var(--xh-_drawer-shift-inline, 100%)) 0;
+    }
+  }
+
+  @keyframes xh-drawer-in-top {
+    from {
+      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-drawer-out-top {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: 0 calc(-1 * var(--xh-_drawer-shift-block, 100%));
+    }
+  }
+
+  @keyframes xh-drawer-in-bottom {
+    from {
+      translate: 0 var(--xh-_drawer-shift-block, 100%);
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-drawer-out-bottom {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: 0 var(--xh-_drawer-shift-block, 100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='drawer'][data-part] {
+      animation-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* root 留在页面原地，只是 data-side / data-state 的落点，不该凭空多出一层盒子把
+     trigger 从作者的 flex / grid 行里挤出去，故 display: contents。 */
+  [data-scope='drawer'][data-part='root'] {
+    display: contents;
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，作者手写 hidden 时得还回去 */
+  [data-scope='drawer'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='drawer'][data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-drawer-trigger-gap, var(--xh-control-gap-md));
+    block-size: var(--xh-drawer-trigger-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-drawer-trigger-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-drawer-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-drawer-trigger-bg, var(--xh-bg-canvas));
+    color: var(--xh-drawer-trigger-fg, var(--xh-fg-default));
+    font-size: var(--xh-drawer-trigger-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-drawer-trigger-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='drawer'][data-part='trigger']:hover:not(:disabled) {
+    background: var(--xh-drawer-trigger-bg-hover, var(--xh-bg-subtle-hover));
+    border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-strong));
+  }
+
+  /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
+     按钮自己得说明"这一扇是我开的"。 */
+  [data-scope='drawer'][data-part='trigger'][data-state='open'] {
+    background: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle-active));
+    border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-strong));
+  }
+
+  [data-scope='drawer'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* trigger 是单体控件，禁用走原生 disabled */
+  [data-scope='drawer'][data-part='trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='drawer'][data-part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-drawer);
+    background: var(--xh-drawer-backdrop-bg, var(--xh-bg-overlay));
+  }
+
+  [data-scope='drawer'][data-part='backdrop'][data-state='open'] {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场补 forwards：动画播完到宿主真正卸载之间还有一帧，不定住终态遮罩会闪回全黑 */
+  [data-scope='drawer'][data-part='backdrop'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* positioner 只负责把浮层抬到抽屉层，贴边一概不管（原因见 content）。
+     铺满视口是为了在自己这层里罩住 content，但不吃指针：非模态抽屉展开时
+     页面其余部分还要能点，模态的拦截由 backdrop 负责。 */
+  [data-scope='drawer'][data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--xh-layer-drawer);
+    pointer-events: none;
+  }
+
+  /* 贴边写在 content 自己身上，而不是交给 positioner：
+     positioner 在抽屉里不是必需部件，最小合规结构只有 root + content，
+     贴边若挂在 positioner 上，那种结构下面板会直接塌回文档流。
+     content 是 fixed，包住它的 positioner 没有 transform / filter，
+     不构成固定定位的包含块，两种结构下参照的都是视口，位置一致。 */
+  [data-scope='drawer'][data-part='content'] {
+    /* 位移方向的私有槽位：默认按 LTR，RTL 在下面整体翻符号 */
+    --xh-_drawer-shift-inline: 100%;
+    --xh-_drawer-shift-block: 100%;
+    /* 尺寸档只换这一个私有槽：左右放置时它是面板宽度、上下放置时是面板高度，
+       两种取法都在下面「四条边」那两条规则里。声明在 content 而不是 root：
+       content 会被 portal 到 body，root 上的槽位继承不过来（data-side 也是同一个道理） */
+    --xh-_drawer-size: 20rem;
+
+    position: fixed;
+    z-index: var(--xh-layer-drawer);
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-drawer-gap, var(--xh-stack-gap-md));
+    padding-block: var(--xh-drawer-py, var(--xh-section-py));
+    padding-inline: var(--xh-drawer-px, var(--xh-control-px-lg));
+    background: var(--xh-drawer-bg, var(--xh-bg-surface));
+    color: var(--xh-drawer-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-drawer-shadow, var(--xh-elevation-3));
+    overflow: auto;
+    /* 尺寸是照视口那条边算出来的，padding 再往外顶就会把面板挤出屏幕、
+       逼出一条横向滚动条。reset 层已有同款兜底，这里显式写一遍表明尺寸算法依赖它 */
+    box-sizing: border-box;
+    /* positioner 整层不吃指针，面板得自己收回来 */
+    pointer-events: auto;
+  }
+
+  [data-scope='drawer'][data-part='content']:dir(rtl) {
+    --xh-_drawer-shift-inline: -100%;
+  }
+
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致。
+     收起态连接层会给 content 打 hidden，而上面这条 display: flex 正是要盖掉
+     UA 的 [hidden]{display:none}——退场动画得先能播：
+     Vue 侧 presence 读的是 content 的 animationName，读到就申领租约、等 animationend
+     才卸载；一旦 display: none，动画根本不会启动，animationend 永不到达，
+     租约挂死，面板就永久留在 DOM 里（每开合一次多一份）。
+     真正的收起两个适配器各自兜住了：Vue 卸载整棵，WC 写内联 style.display。
+     其余声明了 display 的角色节点仍补了 [hidden]，那几处没有退场动画，作者手写 hidden 要生效。 */
+
+  /* 面板是焦点陷阱的兜底落点（tabindex="-1"），落焦不画环：环长在里面的可聚焦控件上 */
+  [data-scope='drawer'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* —— 尺寸 —— */
+  /* 只有面板厚度分档；中间档不写规则，缺省即中档。
+     data-size 与 data-side 一样同时打在 root 与 content 上，这里只认 content 自己那一份。 */
+  [data-scope='drawer'][data-part='content'][data-size='sm'] {
+    --xh-_drawer-size: 16rem;
+  }
+
+  [data-scope='drawer'][data-part='content'][data-size='lg'] {
+    --xh-_drawer-size: 28rem;
+  }
+
+  /* —— 四条边 ——
+     data-side 同时打在 root 与 content 上；content 会被 portal 到 body，
+     选择器只认得 content 自己身上这一份。 */
+
+  /* 左右：满高、定宽 */
+  [data-scope='drawer'][data-part='content'][data-side='left'],
+  [data-scope='drawer'][data-part='content'][data-side='right'] {
+    inset-block: 0;
+    inline-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    /* 视口比抽屉还窄时让位，否则面板会顶出一条横向滚动条 */
+    max-inline-size: 100%;
+  }
+
+  /* 只圆朝向页面那两个角：贴住视口的那条边圆角是看不见的，圆了反而露出底下的页面 */
+  [data-scope='drawer'][data-part='content'][data-side='left'] {
+    inset-inline-start: 0;
+    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='right'] {
+    inset-inline-end: 0;
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+  }
+
+  /* 上下：满宽、定高 */
+  [data-scope='drawer'][data-part='content'][data-side='top'],
+  [data-scope='drawer'][data-part='content'][data-side='bottom'] {
+    inset-inline: 0;
+    block-size: var(--xh-drawer-size, var(--xh-_drawer-size));
+    max-block-size: 100%;
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='top'] {
+    inset-block-start: 0;
+    border-end-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-end-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='bottom'] {
+    inset-block-end: 0;
+    border-start-start-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+    border-start-end-radius: var(--xh-drawer-radius, var(--xh-shape-surface));
+  }
+
+  /* 滑入/滑出按边配对。退场一律 forwards：presence 要等 animationend 才卸载，
+     不定住终态，面板会在最后一帧弹回原位再消失。 */
+  [data-scope='drawer'][data-part='content'][data-side='right'][data-state='open'] {
+    animation: xh-drawer-in-right var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='right'][data-state='closed'] {
+    animation: xh-drawer-out-right var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='open'] {
+    animation: xh-drawer-in-left var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='left'][data-state='closed'] {
+    animation: xh-drawer-out-left var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='open'] {
+    animation: xh-drawer-in-top var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='top'][data-state='closed'] {
+    animation: xh-drawer-out-top var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='open'] {
+    animation: xh-drawer-in-bottom var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='drawer'][data-part='content'][data-side='bottom'][data-state='closed'] {
+    animation: xh-drawer-out-bottom var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  [data-scope='drawer'][data-part='title'] {
+    margin: 0;
+    font-size: var(--xh-drawer-title-font-size, var(--xh-text-heading-3-size));
+    font-weight: var(--xh-drawer-title-font-weight, var(--xh-text-heading-3-weight));
+    color: var(--xh-drawer-title-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='drawer'][data-part='description'] {
+    margin: 0;
+    font-size: var(--xh-text-body-size);
+    color: var(--xh-drawer-description-fg, var(--xh-fg-muted));
+  }
+
+  /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出那块角，
+     否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
+  [data-scope='drawer'][data-part='content']:has([data-scope='drawer'][data-part='close-trigger'])
+    [data-scope='drawer'][data-part='title'] {
+    padding-inline-end: calc(var(--xh-control-h-sm) + var(--xh-space-3));
+  }
+
+  [data-scope='drawer'][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='drawer'][data-part='close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='drawer'][data-part='close-trigger']:hover {
+    background: var(--xh-bg-subtle);
+    color: var(--xh-fg-default);
+  }
+
+  [data-scope='drawer'][data-part='close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+}

package/css/dynamic-input.css

@@ -0,0 +1,157 @@
+@layer xihan.components {
+  /* 一行一条，纵向堆叠；新增把手跟在最后一行下面 */
+  [data-scope='dynamic-input'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-dynamic-input-gap, var(--xh-space-2));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='dynamic-input'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 内容在左、把手在右，把手那一列不随内容伸缩 */
+  [data-scope='dynamic-input'][data-part='item'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-dynamic-input-item-gap, var(--xh-space-2));
+    padding: var(--xh-dynamic-input-item-padding, var(--xh-space-0));
+    border-radius: var(--xh-dynamic-input-item-radius, var(--xh-shape-surface));
+  }
+
+  [data-scope='dynamic-input'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 行里放什么控件归作者，这里只给它一条能撑开也能收窄的轨道。
+     min-inline-size 归零：不写的话里面的输入框按 UA 默认宽度顶住，长内容会把整行撑破 */
+  [data-scope='dynamic-input'][data-part='item-content'] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--xh-dynamic-input-content-gap, var(--xh-space-2));
+    min-inline-size: 0;
+  }
+
+  [data-scope='dynamic-input'][data-part='item-action'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
+  }
+
+  /* —— 行内三个把手 —— */
+  [data-scope='dynamic-input'][data-part='remove-trigger'],
+  [data-scope='dynamic-input'][data-part='move-up-trigger'],
+  [data-scope='dynamic-input'][data-part='move-down-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
+    block-size: var(--xh-dynamic-input-trigger-size, var(--xh-control-action-size));
+    padding: 0;
+    border: 0;
+    border-radius: var(--xh-dynamic-input-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-dynamic-input-trigger-bg, transparent);
+    color: var(--xh-dynamic-input-trigger-fg, var(--xh-fg-muted));
+    font-family: inherit;
+    font-size: var(--xh-dynamic-input-trigger-font-size, var(--xh-font-size-sm));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 不换序时连接层给换序把手写 hidden；上面那条 display 会把 UA 的 [hidden]{display:none}
+     盖掉，少了这条把手还留在原地。删除把手同样声明了 display，作者自己收起它时要的是同一条 */
+  [data-scope='dynamic-input'][data-part='remove-trigger'][hidden],
+  [data-scope='dynamic-input'][data-part='move-up-trigger'][hidden],
+  [data-scope='dynamic-input'][data-part='move-down-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 按不动的把手不给悬停与按下反馈：它仍然可聚焦、可点，反馈会让人以为点得动 */
+  [data-scope='dynamic-input'][data-part='remove-trigger']:hover:not([aria-disabled='true']),
+  [data-scope='dynamic-input'][data-part='move-up-trigger']:hover:not([aria-disabled='true']),
+  [data-scope='dynamic-input'][data-part='move-down-trigger']:hover:not([aria-disabled='true']) {
+    background: var(--xh-dynamic-input-trigger-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-dynamic-input-trigger-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='dynamic-input'][data-part='remove-trigger']:active:not([aria-disabled='true']),
+  [data-scope='dynamic-input'][data-part='move-up-trigger']:active:not([aria-disabled='true']),
+  [data-scope='dynamic-input'][data-part='move-down-trigger']:active:not([aria-disabled='true']) {
+    background: var(--xh-dynamic-input-trigger-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  /* 删除把手悬停转危险色：它是这一行里唯一不可撤销的动作 */
+  [data-scope='dynamic-input'][data-part='remove-trigger']:hover:not([aria-disabled='true']) {
+    color: var(--xh-dynamic-input-remove-fg-hover, var(--xh-fg-danger-hover));
+  }
+
+  [data-scope='dynamic-input'][data-part='remove-trigger']:focus-visible,
+  [data-scope='dynamic-input'][data-part='move-up-trigger']:focus-visible,
+  [data-scope='dynamic-input'][data-part='move-down-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 到上下限、或整份禁用时用 aria-disabled 表达（原生 disabled 不派 click，禁用守卫走不到），
+     所以样式也得认这个属性，写 :disabled 永远不命中 */
+  [data-scope='dynamic-input'][data-part='remove-trigger'][aria-disabled='true'],
+  [data-scope='dynamic-input'][data-part='move-up-trigger'][aria-disabled='true'],
+  [data-scope='dynamic-input'][data-part='move-down-trigger'][aria-disabled='true'] {
+    background: transparent;
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* —— 新增把手 —— */
+  /* 虚线描边把它和行里的实心控件区分开：它加的是行，不是行里的值 */
+  [data-scope='dynamic-input'][data-part='add-trigger'] {
+    display: inline-flex;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
+    block-size: var(--xh-dynamic-input-add-height, var(--xh-control-h-md));
+    padding-inline: var(--xh-dynamic-input-add-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-default));
+    border-radius: var(--xh-dynamic-input-add-radius, var(--xh-shape-control));
+    background: var(--xh-dynamic-input-add-bg, transparent);
+    color: var(--xh-dynamic-input-add-fg, var(--xh-fg-brand));
+    font-family: inherit;
+    font-size: var(--xh-dynamic-input-add-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='dynamic-input'][data-part='add-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='dynamic-input'][data-part='add-trigger']:hover:not([aria-disabled='true']) {
+    border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-strong));
+    background: var(--xh-dynamic-input-add-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='dynamic-input'][data-part='add-trigger']:active:not([aria-disabled='true']) {
+    background: var(--xh-dynamic-input-add-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='dynamic-input'][data-part='add-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='dynamic-input'][data-part='add-trigger'][aria-disabled='true'] {
+    border-color: var(--xh-border-subtle);
+    background: transparent;
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+}