@xihan-ui/styles 1.0.0-alpha.0

package/css/card.css

@@ -0,0 +1,116 @@
+@layer xihan.components {
+  [data-scope='card'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    /* 封面要被圆角裁住，所以根自己收边 */
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-card-radius, var(--xh-shape-surface));
+    background: var(--xh-card-bg, var(--xh-bg-surface));
+    color: var(--xh-card-fg, var(--xh-fg-default));
+    /* 各段的内边距由根上这一个槽位统一给，换档只改这里 */
+    --xh-_card-pad: var(--xh-space-4);
+  }
+
+  /* —— 形态 —— */
+  [data-scope='card'][data-part='root'][data-variant='outline'] {
+    border-color: var(--xh-card-border, var(--xh-border-default));
+  }
+
+  [data-scope='card'][data-part='root'][data-variant='subtle'] {
+    background: var(--xh-card-bg, var(--xh-bg-subtle));
+  }
+
+  [data-scope='card'][data-part='root'][data-variant='elevated'] {
+    box-shadow: var(--xh-elevation-2);
+  }
+
+  [data-scope='card'][data-part='root'][data-variant='ghost'] {
+    background: transparent;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='card'][data-part='root'][data-size='sm'] {
+    --xh-_card-pad: var(--xh-space-3);
+  }
+
+  [data-scope='card'][data-part='root'][data-size='lg'] {
+    --xh-_card-pad: var(--xh-space-6);
+  }
+
+  /* 悬停抬起：只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
+  @media (hover: hover) {
+    [data-scope='card'][data-part='root'][data-hoverable]:hover {
+      border-color: var(--xh-card-border, var(--xh-border-strong));
+      box-shadow: var(--xh-elevation-2);
+    }
+  }
+
+  [data-scope='card'][data-part='root'][data-hoverable] {
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 各段 —— */
+  /* 封面顶到根的边上，不吃内边距 */
+  [data-scope='card'][data-part='cover'] {
+    display: block;
+    overflow: hidden;
+  }
+
+  [data-scope='card'][data-part='header'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-space-1);
+    padding: var(--xh-_card-pad);
+    /* 头下面若还有别的段，间距由那一段自己的内边距接上，这里不重复留白 */
+    padding-block-end: var(--xh-space-2);
+  }
+
+  [data-scope='card'][data-part='title'] {
+    font-size: var(--xh-card-title-font-size, var(--xh-font-size-md));
+    font-weight: var(--xh-font-weight-medium);
+    line-height: var(--xh-leading-tight);
+  }
+
+  [data-scope='card'][data-part='root'][data-size='lg'] [data-part='title'] {
+    font-size: var(--xh-card-title-font-size, var(--xh-font-size-lg));
+  }
+
+  [data-scope='card'][data-part='description'] {
+    color: var(--xh-fg-muted);
+    font-size: var(--xh-font-size-sm);
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='card'][data-part='body'] {
+    flex: 1 1 auto;
+    padding: var(--xh-_card-pad);
+  }
+
+  /* 头与身相邻时，头已经收窄了下边距，身不必再从顶上留一份 */
+  [data-scope='card'][data-part='header'] + [data-part='body'] {
+    padding-block-start: var(--xh-space-2);
+  }
+
+  [data-scope='card'][data-part='footer'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-space-2);
+    padding: var(--xh-_card-pad);
+    padding-block-start: var(--xh-space-2);
+  }
+
+  /* —— 分段 —— */
+  /* 分隔线画在下一段的上边，段与段之间才只有一条 */
+  [data-scope='card'][data-part='root'][data-segmented] [data-part='body'],
+  [data-scope='card'][data-part='root'][data-segmented] [data-part='footer'] {
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-card-border, var(--xh-border-subtle));
+    padding-block-start: var(--xh-_card-pad);
+  }
+
+  [data-scope='card'][data-part='root'][data-segmented] [data-part='header'] {
+    padding-block-end: var(--xh-_card-pad);
+  }
+}

package/css/carousel.css

@@ -0,0 +1,193 @@
+@layer xihan.components {
+  /* 根节点是 region 地标：把上一张 / 视口 / 下一张排成一行，指示点另起一行。
+     两端按钮浮在视口上还是排在两侧由作者定，这里只给最朴素的一版排布 */
+  [data-scope='carousel'][data-part='root'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-carousel-gap, var(--xh-space-2));
+  }
+
+  [data-scope='carousel'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 纵轨时按钮在上下两端，整条竖着排 */
+  [data-scope='carousel'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 视口是裁切窗口：轨道比它宽（高），露在外面的那些张全靠它切掉。
+     min-inline-size: 0 是关键——弹性子项的默认最小尺寸是内容尺寸，
+     不压成 0 的话视口会被整条轨道撑开，什么都切不掉 */
+  [data-scope='carousel'][data-part='viewport'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    border-radius: var(--xh-carousel-viewport-radius, var(--xh-shape-surface));
+  }
+
+  [data-scope='carousel'][data-part='viewport'][hidden] {
+    display: none;
+  }
+
+  /* 被位移的那条轨道。
+     transform 归连接层：整页位移与拖拽中的像素偏移都写在它的内联 style 上，
+     样式层再碰这条轴就会把两个位移互相覆盖，画面当场错位。
+     这里只负责排布与过渡 */
+  [data-scope='carousel'][data-part='item-group'] {
+    display: flex;
+    flex-direction: row;
+    block-size: 100%;
+    transition: transform var(--xh-carousel-duration, var(--xh-motion-duration-enter))
+      var(--xh-carousel-ease, var(--xh-motion-ease-enter));
+  }
+
+  [data-scope='carousel'][data-part='item-group'][hidden] {
+    display: none;
+  }
+
+  [data-scope='carousel'][data-part='item-group'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 拖拽期间关掉过渡：留着的话画面会拖着手指慢半拍，像在拉一根皮筋 */
+  [data-scope='carousel'][data-part='item-group'][data-dragging] {
+    transition: none;
+  }
+
+  /* 一张幻灯片。
+     尺寸（flex-basis）与间距（padding）同样归连接层：一屏放几张只有它知道，
+     CSS 拿不到那个数（属性值参与不了计算）。这里只补三件配套的事：
+     · box-sizing —— 内联的 padding 不得把这张撑出格子（reset 层已有同款兜底）；
+     · flex-grow/shrink 归零 —— 弹性布局默认会把不满一屏的那几张拉伸，位移就对不上了；
+     · min-inline-size: 0 —— 同视口，防止长内容把这张顶宽 */
+  [data-scope='carousel'][data-part='item'] {
+    box-sizing: border-box;
+    flex-grow: 0;
+    flex-shrink: 0;
+    min-inline-size: 0;
+  }
+
+  [data-scope='carousel'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 两端按钮：圆形、与控件同高，禁用时靠原生 :disabled 变灰 */
+  [data-scope='carousel'][data-part='prev-trigger'],
+  [data-scope='carousel'][data-part='next-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-carousel-trigger-size, var(--xh-control-h-md));
+    block-size: var(--xh-carousel-trigger-size, var(--xh-control-h-md));
+    border: var(--xh-stroke-thin) solid var(--xh-carousel-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-carousel-trigger-radius, var(--xh-shape-pill));
+    background: var(--xh-carousel-trigger-bg, var(--xh-bg-surface));
+    color: var(--xh-carousel-trigger-fg, var(--xh-fg-default));
+    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='carousel'][data-part='prev-trigger'][hidden],
+  [data-scope='carousel'][data-part='next-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='carousel'][data-part='prev-trigger']:hover:not(:disabled),
+  [data-scope='carousel'][data-part='next-trigger']:hover:not(:disabled) {
+    background: var(--xh-carousel-trigger-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='carousel'][data-part='prev-trigger']:active:not(:disabled),
+  [data-scope='carousel'][data-part='next-trigger']:active:not(:disabled) {
+    background: var(--xh-carousel-trigger-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='carousel'][data-part='prev-trigger']:focus-visible,
+  [data-scope='carousel'][data-part='next-trigger']:focus-visible,
+  [data-scope='carousel'][data-part='indicator']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 两端到头时按钮是原生 disabled（不可聚焦、进不了 Tab 序列），所以这里必须用 :disabled；
+     连接层同时给的 data-disabled 只是留给作者的钩子 */
+  [data-scope='carousel'][data-part='prev-trigger']:disabled,
+  [data-scope='carousel'][data-part='next-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 视口与指示点都不是可聚焦节点，落焦只会是浏览器兜底行为，别画焦点环 */
+  [data-scope='carousel'][data-part='viewport']:focus-visible,
+  [data-scope='carousel'][data-part='item-group']:focus-visible,
+  [data-scope='carousel'][data-part='indicator-group']:focus-visible {
+    outline: none;
+  }
+
+  [data-scope='carousel'][data-part='indicator-group'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-carousel-indicator-gap, var(--xh-space-1));
+  }
+
+  [data-scope='carousel'][data-part='indicator-group'][hidden] {
+    display: none;
+  }
+
+  [data-scope='carousel'][data-part='indicator-group'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* 横轨时指示点另起一行占满整宽（根节点开了 flex-wrap），不跟两端按钮挤在同一行 */
+  [data-scope='carousel'][data-part='indicator-group'][data-orientation='horizontal'] {
+    flex-basis: 100%;
+  }
+
+  /* 指示点：一颗小圆点。点得动的东西必须够大才点得中，
+     所以圆点本身小、可点区域靠内边距撑到最小触达尺寸 */
+  [data-scope='carousel'][data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    block-size: var(--xh-carousel-indicator-size, var(--xh-space-2));
+    /* 圆点本身没有文字，按钮里的文案（页码）交给作者，默认不显示 */
+    padding: 0;
+    border: 0;
+    border-radius: var(--xh-carousel-indicator-radius, var(--xh-radius-full));
+    background: var(--xh-carousel-indicator-bg, var(--xh-border-strong));
+    font-size: 0;
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='carousel'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='carousel'][data-part='indicator']:hover:not([data-selected]) {
+    background: var(--xh-carousel-indicator-bg-hover, var(--xh-fg-subtle));
+  }
+
+  /* 当前页：data-selected 与 aria-current='true' 由连接层成对给出，
+     样式挂在 data 钩子上，无障碍语义留给 aria，两边各司其职 */
+  [data-scope='carousel'][data-part='indicator'][data-selected] {
+    background: var(--xh-carousel-indicator-bg-selected, var(--xh-bg-brand));
+  }
+
+  /* 减少动效：位移立刻到位。翻页本身照常发生，只是不再有滑动的过程 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='carousel'][data-part='item-group'] {
+      transition: none;
+    }
+  }
+}