@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/citation.css

@@ -0,0 +1,475 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 citation 样式。 */
+
+@import '../family/action-control.css';
+/* hover 档的卡片：共享关键帧与 frosted 材质配方 */
+@import '../family/motion.css';
+@import '../family/material.css';
+
+@layer xihan.motion {
+  /* 预览的披露：内容区高度从 0 长到连接层量下的那一版，内缩与描边一起长回来，
+     它前面那道间距由负的上外距从抵消状态放开；收起反过来收回 0 */
+  @keyframes xh-citation-preview-expand {
+    from {
+      block-size: 0;
+      padding-block: 0;
+      border-block-width: 0;
+      margin-block-start: calc(-1 * var(--xh-_citation-preview-gap));
+    }
+
+    to {
+      block-size: var(--xh-_citation-preview-block-size);
+    }
+  }
+
+  @keyframes xh-citation-preview-collapse {
+    from {
+      block-size: var(--xh-_citation-preview-block-size);
+    }
+
+    to {
+      block-size: 0;
+      padding-block: 0;
+      border-block-width: 0;
+      margin-block-start: calc(-1 * var(--xh-_citation-preview-gap));
+    }
+  }
+}
+
+@layer xihan.components {
+  .xh-scope-citation {
+    --xh-citation-skin: 1;
+  }
+
+  /* 尺寸档的私有槽写在根上，也写在 hover 档的定位壳上：它被搬到 portal 落点后继承不到根上的值 */
+  .xh-scope-citation:is([data-part='root'], [data-part='positioner']) {
+    --xh-_citation-gap: var(--xh-space-3);
+    --xh-_citation-pad: var(--xh-surface-pad-md);
+    --xh-_citation-font-size: var(--xh-control-font-md);
+    --xh-_citation-icon-size: var(--xh-glyph-size-md);
+    --xh-icon-size: var(--xh-citation-icon-size, var(--xh-_citation-icon-size));
+  }
+
+  .xh-scope-citation[data-part='root'] {
+    /* 纵向一列：预览展开的首帧用负的上外距抵掉它前面那道间距，flex 里负外距会把后面的内容一起拉回来 */
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-citation-gap, var(--xh-_citation-gap));
+    color: var(--xh-citation-fg, var(--xh-fg-default));
+    font-size: var(--xh-citation-font-size, var(--xh-_citation-font-size));
+  }
+
+  /* 禁用降前景：正文落到禁用色，不靠整体透明度（编号的面与字由家族的禁用档给） */
+  .xh-scope-citation[data-part='root'][data-disabled] .xh-scope-citation[data-part='text'] {
+    color: var(--xh-fg-disabled);
+  }
+
+  .xh-scope-citation[data-part='text'] {
+    display: inline;
+    color: var(--xh-citation-text-fg, var(--xh-fg-default));
+    line-height: var(--xh-text-prose-leading);
+  }
+
+  /* 引用编号跟正文同排，是一个一维引用对象：用 pill 把短编号包成稳定目标。 */
+  .xh-scope-citation[data-part='trigger'] {
+    --xh-action-visual-size: var(--xh-citation-trigger-h, var(--xh-space-6));
+    --xh-action-min-inline-size: var(--xh-citation-trigger-h, var(--xh-space-6));
+    --xh-action-padding-inline: var(--xh-citation-trigger-px, var(--xh-space-1));
+    --xh-action-radius: var(--xh-citation-trigger-radius, var(--xh-shape-pill));
+    --xh-action-font-size: var(--xh-citation-trigger-font-size, var(--xh-text-caption-size));
+    --xh-action-fg-rest: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+    --xh-action-fg-hover: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+    --xh-action-fg-pressed: var(--xh-citation-trigger-fg, var(--xh-fg-brand));
+
+    margin-inline: var(--xh-citation-trigger-margin, var(--xh-space-0_5));
+    vertical-align: text-top;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 打开中不是选中：与悬停同档的中性面，悬停不再加深，按下照常走下一档 */
+  .xh-scope-citation[data-part='trigger'][data-state='open'] {
+    --xh-action-bg-rest: var(--xh-_action-variant-bg-hover);
+  }
+
+  .xh-scope-citation[data-part='preview'] {
+    display: grid;
+    gap: var(--xh-citation-preview-gap, var(--xh-space-3));
+    padding-block: var(--xh-citation-preview-py, var(--xh-_citation-pad));
+    padding-inline: var(--xh-citation-preview-px, var(--xh-_citation-pad));
+  }
+
+  /* inline 档：预览是正文流里的静态 surface，不漂浮、不盖住正文。
+     开合是 surface 级披露：高度按内容区（content-box）动，展开与收起途中把长出盒外的内容裁掉。
+     hover 档的预览带 data-xh-material，面交给材质配方画 */
+  .xh-scope-citation[data-part='preview']:not([data-xh-material]) {
+    /* 根上那道间距：展开与收起时用负外距抵掉它 */
+    --xh-_citation-preview-gap: var(--xh-citation-gap, var(--xh-_citation-gap));
+
+    box-sizing: content-box;
+    overflow: clip;
+    border: var(--xh-stroke-thin) solid var(--xh-citation-preview-border, var(--xh-border-default));
+    border-radius: var(--xh-citation-preview-radius, var(--xh-shape-surface));
+    background: var(--xh-citation-preview-bg, var(--xh-bg-surface));
+    color: var(--xh-citation-preview-fg, var(--xh-fg-default));
+  }
+
+  /* 展开与收起只在开合时播：首帧就开着的预览直接呈现（data-instant）。
+     收起时连接层押后 hidden，收回 0 播完才藏起；forwards 把末态钉住，免得播完到藏起之间弹回原样。
+     减弱动效下两支披露时长瞬时完成 */
+  .xh-scope-citation[data-part='preview'][data-preview-mode='inline'][data-state='open']:not([data-instant]) {
+    animation: xh-citation-preview-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-citation[data-part='preview'][data-preview-mode='inline'][data-state='closed']:not([data-instant]) {
+    animation: xh-citation-preview-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 定位壳：inline 档不参与排版，里面的预览照常在正文流里 */
+  .xh-scope-citation[data-part='positioner'][data-preview-mode='inline'] {
+    display: contents;
+  }
+
+  /* hover 档：坐标由定位引擎写进 style（left / top），这里只定位模式与层级 */
+  .xh-scope-citation[data-part='positioner'][data-preview-mode='hover'] {
+    /* 落定那一侧的可用高度与宽度，由定位引擎经内联自定义属性写进来，卡片据此限高限宽；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口 */
+    --xh-_citation-available-h: 100vh;
+    --xh-_citation-available-w: 100vw;
+
+    position: fixed;
+    z-index: var(--xh-citation-layer, var(--xh-_layer, var(--xh-layer-popover)));
+    font-size: var(--xh-citation-font-size, var(--xh-_citation-font-size));
+  }
+
+  /* 锚点被滚出可视区：卡片随之收起 */
+  .xh-scope-citation[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  .xh-scope-citation[data-part='positioner'][hidden] {
+    display: none;
+  }
+
+  /* 缩放原点与进场位移按落定的那一侧给：卡片从贴着引用编号的那条边涨开。两个槽由预览继承；
+     placement 是物理方向，origin 与 translate 也是物理量，不随书写方向翻 */
+  .xh-scope-citation[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-origin-y: 100%;
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-citation[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-origin-y: 0;
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-citation[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-origin-x: 100%;
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-citation[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-origin-x: 0;
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* hover 档的预览是锚定面板：材质家族配方画 frosted 面（描边、底、1px 顶光、前景、投影与背景滤镜），
+     这里只把使用者槽接进来；形状取 overlay，内容长了在卡片里滚 */
+  .xh-scope-citation[data-part='preview'][data-preview-mode='hover'] {
+    --xh-frosted-bg: var(--xh-citation-card-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-citation-card-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-citation-card-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-citation-card-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-citation-card-backdrop, var(--xh-_material-backdrop));
+
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(var(--xh-citation-card-max-w, var(--xh-overlay-max-w)), var(--xh-_citation-available-w));
+    max-block-size: min(var(--xh-citation-card-max-h, var(--xh-overlay-max-h)), var(--xh-_citation-available-h));
+    /* 卡片不做滚动面：引文收到有限几行，全文经打开来源的链接看 */
+    overflow: clip;
+    border-radius: var(--xh-citation-card-radius, var(--xh-shape-overlay));
+    transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
+  }
+
+  /* hover 档的引文按行数裁，裁掉的那一行末尾收省略号 */
+  .xh-scope-citation[data-part='preview'][data-preview-mode='hover'] .xh-scope-citation[data-part='quote']:not([hidden]) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--xh-citation-card-quote-lines, 6);
+  }
+
+  /* 出现与退场按锚定面板那一组：开着时 pop-in，收起时 pop-out 播完才藏起；卡片里轮换来源不再播 */
+  .xh-scope-citation[data-part='preview'][data-preview-mode='hover'][data-state='open']:not([data-instant]) {
+    animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-citation[data-part='preview'][data-preview-mode='hover'][data-state='closed']:not([data-instant]) {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 一处多源的轮换：两颗翻页钮夹着位置，排在收起钮之前 */
+  .xh-scope-citation[data-part='prev-trigger'],
+  .xh-scope-citation[data-part='next-trigger'] {
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-citation-pager-radius, var(--xh-shape-control));
+    flex: none;
+  }
+
+  .xh-scope-citation[data-part='prev-trigger']:empty::before,
+  .xh-scope-citation[data-part='next-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-left) center / contain no-repeat;
+    /* 上一个指向行首、下一个指向行尾：RTL 下水平翻过来 */
+    scale: var(--xh-direction-sign) 1;
+  }
+
+  .xh-scope-citation[data-part='next-trigger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-chevron-right);
+    mask-image: var(--xh-glyph-mark-chevron-right);
+  }
+
+  .xh-scope-citation[data-part='preview-index'] {
+    flex: none;
+    align-self: center;
+    color: var(--xh-citation-meta-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-meta-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-citation[data-part='prev-trigger'][hidden],
+  .xh-scope-citation[data-part='next-trigger'][hidden],
+  .xh-scope-citation[data-part='preview-index'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-citation[data-part='preview'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-citation[data-part='preview-header'] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--xh-citation-preview-header-gap, var(--xh-space-3));
+  }
+
+  .xh-scope-citation[data-part='preview-header'] > :first-child {
+    display: grid;
+    flex: 1;
+    gap: var(--xh-citation-preview-header-content-gap, var(--xh-space-0_5));
+    min-inline-size: 0;
+  }
+
+  .xh-scope-citation[data-part='preview-title'] {
+    overflow: hidden;
+    color: var(--xh-citation-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-citation-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-citation-title-font-weight, var(--xh-font-weight-medium));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xh-scope-citation[data-part='preview-meta'],
+  .xh-scope-citation[data-part='source-meta'] {
+    overflow: hidden;
+    color: var(--xh-citation-meta-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-meta-font-size, var(--xh-text-caption-size));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xh-scope-citation[data-part='quote'] {
+    margin: 0;
+    padding-inline-start: var(--xh-citation-quote-ps, var(--xh-space-3));
+    border-inline-start: var(--xh-stroke-thick) solid var(--xh-citation-quote-border, var(--xh-fg-brand));
+    color: var(--xh-citation-quote-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-quote-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-text-prose-leading);
+  }
+
+  .xh-scope-citation[data-part='quote'][hidden] {
+    display: none;
+  }
+
+  /* 预览面里的收起钮与其它面板内的关闭钮同一身份：控件圆角 */
+  .xh-scope-citation[data-part='dismiss-trigger'] {
+    --xh-action-padding-inline: 0;
+    --xh-action-radius: var(--xh-citation-dismiss-trigger-radius, var(--xh-shape-control));
+    flex: none;
+  }
+
+  .xh-scope-citation[data-part='dismiss-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
+
+  .xh-scope-citation[data-part='preview-link'] {
+    inline-size: fit-content;
+    color: var(--xh-citation-link-fg, var(--xh-fg-brand));
+    font-weight: var(--xh-text-label-weight);
+    text-decoration: none;
+  }
+
+  .xh-scope-citation[data-part='preview-link']:is(:hover, :focus-visible) {
+    text-decoration: underline;
+    text-underline-offset: var(--xh-space-1);
+  }
+
+  .xh-scope-citation[data-part='preview-link']:focus-visible {
+    border-radius: var(--xh-citation-preview-link-radius, var(--xh-shape-control));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  .xh-scope-citation[data-part='list'] {
+    display: grid;
+    gap: var(--xh-citation-list-gap, var(--xh-space-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .xh-scope-citation[data-part='source'] {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .xh-scope-citation[data-part='source-link'] {
+    --xh-action-padding-inline: var(--xh-citation-source-px, var(--xh-space-3));
+    --xh-action-padding-block: var(--xh-citation-source-py, var(--xh-space-2));
+    --xh-action-radius: var(--xh-citation-source-radius, var(--xh-shape-control));
+    --xh-action-fg-rest: var(--xh-citation-source-fg, var(--xh-fg-default));
+
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    text-align: start;
+  }
+
+  /* 排成「序号 | 标题 / 来源」两列，盖掉 row 档的 display: flex。选择器点名 row 档，
+     有层与无层两份产物里都压得住它；收起的来源行留给 [hidden] 那条 */
+  .xh-scope-citation[data-part='source-link'][data-xh-action-profile='row']:not([hidden]) {
+    display: grid;
+  }
+
+  .xh-scope-citation[data-part='source-link'][data-current] {
+    --xh-action-bg-rest: var(--xh-bg-brand-subtle);
+    --xh-action-bg-hover: var(--xh-bg-brand-subtle);
+  }
+
+  .xh-scope-citation[data-part='source-link'] > :last-child {
+    display: grid;
+    gap: var(--xh-citation-source-link-content-gap, var(--xh-space-0_5));
+    min-inline-size: 0;
+  }
+
+  .xh-scope-citation[data-part='source-index'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--xh-citation-index-size, var(--xh-control-box-sm));
+    block-size: var(--xh-citation-index-size, var(--xh-control-box-sm));
+    border-radius: var(--xh-citation-index-radius, var(--xh-shape-circle));
+    background: var(--xh-citation-index-bg, var(--xh-bg-subtle));
+    color: var(--xh-citation-index-fg, var(--xh-fg-muted));
+    font-size: var(--xh-citation-index-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-citation[data-part='source'][data-state='active'] [data-part='source-index']:where(.xh-scope-citation) {
+    background: var(--xh-citation-index-active-bg, var(--xh-bg-brand));
+    color: var(--xh-citation-index-active-fg, var(--xh-fg-on-brand));
+  }
+
+  .xh-scope-citation[data-part='source-title'] {
+    overflow: hidden;
+    color: var(--xh-citation-source-title-fg, var(--xh-fg-default));
+    font-weight: var(--xh-text-label-weight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xh-scope-citation:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-_citation-gap: var(--xh-space-2);
+    --xh-_citation-pad: var(--xh-surface-pad-sm);
+    --xh-_citation-font-size: var(--xh-control-font-sm);
+    --xh-_citation-icon-size: var(--xh-glyph-size-sm);
+  }
+
+  .xh-scope-citation:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-_citation-gap: var(--xh-space-4);
+    --xh-_citation-pad: var(--xh-surface-pad-lg);
+    --xh-_citation-font-size: var(--xh-control-font-lg);
+    --xh-_citation-icon-size: var(--xh-glyph-size-lg);
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-citation[data-part='source'][data-state='active'] [data-part='source-index']:where(.xh-scope-citation) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    .xh-scope-citation[data-part='dismiss-trigger'],
+    .xh-scope-citation[data-part='prev-trigger'],
+    .xh-scope-citation[data-part='next-trigger'] {
+      display: none;
+    }
+
+    /* 悬停卡片是瞬态浮层，打印时不出现 */
+    .xh-scope-citation[data-part='positioner'][data-preview-mode='hover'] {
+      display: none;
+    }
+
+    .xh-scope-citation[data-part='preview-link'] {
+      color: currentColor;
+    }
+  }
+
+  .xh-scope-citation[data-part='root'][hidden],
+  .xh-scope-citation[data-part='text'][hidden],
+  .xh-scope-citation[data-part='preview-header'][hidden],
+  .xh-scope-citation[data-part='list'][hidden],
+  .xh-scope-citation[data-part='source'][hidden],
+  .xh-scope-citation[data-part='source-link'][hidden],
+  .xh-scope-citation[data-part='source-index'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-citation:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-citation:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-citation:is([data-part='prev-trigger'], [data-part='next-trigger'], [data-part='dismiss-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}