@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/icon.css

@@ -0,0 +1,225 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 icon 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-icon {
+    --xh-icon-skin: 1;
+  }
+
+  /*
+   * 根 <svg>。直径、描边粗细、行内位置都由这里给，记录只带几何。
+   * 不写 fill / stroke：记录里那两条呈现属性取 currentColor，改这里会把
+   * 描边图标与实心图标一起改掉；皮肤只给 color，配色随上下文流下来。
+   */
+  .xh-scope-icon[data-part='root'] {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+
+    /* 替换元素的基线就是自身下边缘，落在文字基线上时整块图形都在基线以上、看着偏高。
+       往下挪一小段，单位是 em，跟着相邻文字的字号一起缩放 */
+    vertical-align: var(--xh-icon-shift, var(--xh-glyph-baseline-shift));
+    color: var(--xh-icon-fg, currentColor);
+
+    /* 记录把 stroke-width 写成根上的呈现属性，呈现属性的层叠优先级低于任何 CSS 规则，
+       这条与下面两档因此能接管粗细，再沿继承落到每个图元上 */
+    stroke-width: var(--xh-icon-stroke, var(--xh-glyph-stroke-regular));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-icon[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 八档直径，缺省档 md 写在上面的基础规则里。
+     每一档都把 --xh-icon-size 排在自己的档值前面：这个槽是外层统一图元直径的通道，
+     档值直接写终值的话，写了 data-size 的那一枚就脱离外层控制，作者在祖先上的覆盖也改不动它 */
+  .xh-scope-icon[data-part='root'][data-size='text'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='sm'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='md'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='lg'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-lg));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='xl'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-xl));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-xl));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='2xl'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-2xl));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-2xl));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='3xl'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-3xl));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-3xl));
+  }
+
+  .xh-scope-icon[data-part='root'][data-size='4xl'] {
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-4xl));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-4xl));
+  }
+
+  /* 三档描边，缺省档同样写在基础规则里；--xh-icon-stroke 同样排在档值前面 */
+  .xh-scope-icon[data-part='root'][data-weight='light'] {
+    stroke-width: var(--xh-icon-stroke, var(--xh-glyph-stroke-light));
+  }
+
+  .xh-scope-icon[data-part='root'][data-weight='bold'] {
+    stroke-width: var(--xh-icon-stroke, var(--xh-glyph-stroke-bold));
+  }
+
+  /* 语气：图标没有底色，语气只落在前景上，取普通背景上表达该语气的那档文字色。
+     选择器上带 [data-tone] 是必需的：语气槽会沿继承流下来，不限定在写了语气的
+     那个节点上，放在语气容器里的装饰图标会跟着一起改色 */
+  .xh-scope-icon[data-part='root'][data-tone] {
+    color: var(--xh-icon-fg, var(--xh-_tone-fg, currentColor));
+  }
+
+  /* 旋转：四分之一圈的整数倍，是把箭头指向别处的结构性角度，不是可调幅度。
+     没有过渡也没有动画——转到位就停在那儿，减弱动效那一档碰不到它 */
+  .xh-scope-icon[data-part='root'][data-rotate='90'] {
+    rotate: 90deg;
+  }
+
+  .xh-scope-icon[data-part='root'][data-rotate='180'] {
+    rotate: 180deg;
+  }
+
+  .xh-scope-icon[data-part='root'][data-rotate='270'] {
+    rotate: 270deg;
+  }
+
+  /* 翻转：沿轴取反，同样是静态几何。与旋转是两个独立属性，同写时自然叠加 */
+  .xh-scope-icon[data-part='root'][data-flip='horizontal'] {
+    scale: -1 1;
+  }
+
+  .xh-scope-icon[data-part='root'][data-flip='vertical'] {
+    scale: 1 -1;
+  }
+
+  .xh-scope-icon[data-part='root'][data-flip='both'] {
+    scale: -1 -1;
+  }
+
+  /* —— 底框 —— */
+  /*
+   * 加了框的图标是一个定直径的圆底座：框画在 <svg> 自己的盒上，图元落在内容盒里居中。
+   * sm / md / lg 三档框与头像同档（取同一支控件高度令牌），图元按自己的档位取字形直径，
+   * 内衬由两者之差算出，框换档时图元跟着一起换。
+   * 框里的图元不读外层统一图元直径的通道 --xh-icon-size：框自己就是一个定尺对象，
+   * 落在按钮、提示条这类下发图元直径的容器里也不被改小。
+   * 排在档位与语气之后：框接管了盒的尺寸与配色。
+   */
+  .xh-scope-icon[data-part='root'][data-frame] {
+    /* 三档之外的档位经两支 step 槽给出字形直径与框直径，三档本身在下面的档位块里换 */
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-_icon-glyph-step, var(--xh-glyph-size-md)));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-_icon-frame-step, var(--xh-control-h-md)));
+
+    inline-size: var(--xh-_icon-frame-size);
+    block-size: var(--xh-_icon-frame-size);
+    padding: calc((var(--xh-_icon-frame-size) - var(--xh-_icon-glyph)) / 2 - var(--xh-stroke-thin));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-icon-frame-radius, var(--xh-shape-circle));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='sm'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-sm));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-sm));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='lg'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-lg));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-lg));
+  }
+
+  /* 头像只有三档；其余档的框沿用 md 档的内衬厚度：框直径 = 本档字形 + md 档框与字形之差 */
+  .xh-scope-icon[data-part='root'][data-frame][data-size='text'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-text);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-text) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='2xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-2xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-2xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='3xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-3xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-3xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame][data-size='4xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-4xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-4xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  /* 框的四种形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写语气取品牌实心 / 中性。
+     语气只认自己身上的 data-tone：语气槽会沿继承流下来，放在语气容器里的框不跟着改色。
+     实心档在顶边画一条极浅的内高光，把这块底座衬出厚度；另外三档面上没有实心底，不画 */
+  .xh-scope-icon[data-part='root'][data-frame='solid'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-brand));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-brand));
+    color: var(--xh-icon-fg, var(--xh-fg-on-brand));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='solid'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-tone));
+    color: var(--xh-icon-fg, var(--xh-_tone-on));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='subtle'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-subtle));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='subtle'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone-subtle));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='outline'] {
+    border-color: var(--xh-icon-frame-border, var(--xh-border-default));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='outline'][data-tone] {
+    border-color: var(--xh-icon-frame-border, var(--xh-_tone-border));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='ghost'] {
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  .xh-scope-icon[data-part='root'][data-frame='ghost'][data-tone] {
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+}

package/dist/css/image-cropper.css

@@ -0,0 +1,373 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 image cropper 样式。 */
+
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-image-cropper {
+    --xh-image-cropper-skin: 1;
+  }
+
+  /* 定位分工：裁切框在视口里的 left / top / width / height，以及图片与裁切框的
+     transform，由连接层每帧写进内联样式——那四个数是图片像素换算出来的百分比，
+     只有连接层算得出来。这份皮肤一个都不碰，写了不但是死声明，还会跟内联值抢位置。
+
+     私有槽两个，都挂在 root 上靠继承发下去：
+     handle-size 是把手的边长，zoom 是当前缩放倍率——裁切框整体被 scale 放大，
+     把手与描边要按倍率反向缩回去，否则放到 3 倍时把手也变成三倍大、描边变成三像素粗。 */
+  .xh-scope-image-cropper[data-part='root'] {
+    --xh-_image-cropper-handle-size: var(--xh-image-cropper-handle-size, var(--xh-control-indicator-size));
+    --xh-_image-cropper-zoom: 1;
+
+    position: relative;
+    display: block;
+    inline-size: var(--xh-image-cropper-w, 100%);
+  }
+
+  /* 量坐标的那个盒子。里面装的是图片像素坐标，不是文字：裁切框与把手的落点一律写物理属性，
+     不依赖这里的文字方向。overflow 收口：放大后的图片与遮罩都靠它裁掉。 */
+  .xh-scope-image-cropper[data-part='viewport'] {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--xh-image-cropper-viewport-radius, var(--xh-shape-surface));
+    background: var(--xh-image-cropper-bg, var(--xh-bg-muted));
+    user-select: none;
+  }
+
+  /* 图片铺满视口、高度自适应：视口的高度因此由图片撑出来，
+     裁切框的百分比坐标才与图片的像素一一对应。 */
+  .xh-scope-image-cropper[data-part='image'] {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+  }
+
+  /* 裁切框。遮罩用一圈超大的实心投影把框外压暗——不必再摆四块遮罩节点，
+     圆形裁切时投影也自动跟着圆角走。描边按倍率缩回去，放大时仍是一根细线。 */
+  .xh-scope-image-cropper[data-part='crop-area'] {
+    --xh-_image-cropper-corner-radius: var(--xh-shape-control);
+
+    position: absolute;
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: calc(var(--xh-stroke-thin) / var(--xh-_image-cropper-zoom));
+    border-color: var(--xh-image-cropper-crop-border, var(--xh-bg-surface));
+    box-shadow: 0 0 0 9999px var(--xh-image-cropper-mask, var(--xh-bg-overlay));
+    cursor: move;
+  }
+
+  /* 圆形裁切取 circle 档（50%）：shape 的固定长度档画出来是胶囊不是椭圆，
+     裁切框的宽高由数据决定、两边通常不等长，只有百分比才随框变成椭圆；圆角只能来自语义形状令牌 */
+  .xh-scope-image-cropper[data-part='crop-area'][data-shape='round'] {
+    --xh-_image-cropper-corner-radius: var(--xh-shape-circle);
+
+    border-radius: var(--xh-image-cropper-crop-area-radius, var(--xh-shape-circle));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-area'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-area'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 三分构图参考线：两条竖线、两条横线，落点写死在三分处，不占节点、不吃指针。
+     停靠点逐条写全而不用 repeating-：重复单元从 0 起算会在框的两条边缘上各多画一根，
+     那两根与裁切框的描边叠在一起，看着像描边加粗了一倍。
+     线宽跟着裁切框的倍率缩回去，与描边同一口径。
+     圆形裁切时参考线没有意义，收起来。 */
+  .xh-scope-image-cropper[data-part='grid'] {
+    --xh-_image-cropper-grid-w: calc(var(--xh-stroke-thin) / var(--xh-_image-cropper-zoom));
+
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(
+        to right,
+        transparent 0 33.3333%,
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 0 33.3333%,
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
+      );
+    pointer-events: none;
+  }
+
+  .xh-scope-image-cropper[data-part='grid'][data-shape='round'] {
+    background-image: none;
+  }
+
+  /* 把手的命中区仍以裁切框边界为中心，视觉短条与折角贴住边框并向框内绘制。 */
+  .xh-scope-image-cropper[data-part='crop-handle'] {
+    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg, var(--xh-bg-surface));
+
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+    border: 0;
+    background: transparent;
+    inline-size: var(--xh-_image-cropper-handle-size);
+    block-size: var(--xh-_image-cropper-handle-size);
+    translate: -50% -50%;
+    scale: calc(1 / var(--xh-_image-cropper-zoom));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle']::after {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    border-radius: var(--xh-image-cropper-handle-radius, var(--xh-shape-pill));
+    background: var(--xh-_image-cropper-handle-color);
+    pointer-events: none;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 看得见的方块比手指小：另铺一层不可见的命中区，把它撑到最小可点尺寸。
+     inset 取负值即向四面外扩，方块本身更大时这个值转正、命中区仍是方块那么大。 */
+  .xh-scope-image-cropper[data-part='crop-handle']::before {
+    position: absolute;
+    inset: calc((var(--xh-_image-cropper-handle-size) - var(--xh-control-action-size)) / 2);
+    content: '';
+  }
+
+  /* 把手静息是白面（bg-surface），悬停从同一语义面派生一档，不切到品牌淡底；拖动中才是品牌实心。
+     把手与网格线都压在照片上，取淡底的不透明档，照片深浅不一时才看得见 */
+  .xh-scope-image-cropper[data-part='crop-handle']:hover:not([data-disabled], [data-readonly]) {
+    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle-opaque));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-resizing] {
+    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-resizing, var(--xh-bg-brand));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle']:focus-visible {
+    --xh-_image-cropper-handle-color: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  /* —— 八个方位：落点 + 光标 —— */
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='nw'] {
+    top: 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 裁切框的坐标是图片像素，落点跟着物理方向走 */
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='n'] {
+    top: 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='ne'] {
+    top: 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 100%;
+    cursor: nesw-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='e'] {
+    top: 50%;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 100%;
+    cursor: ew-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='se'] {
+    top: 100%;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 100%;
+    cursor: nwse-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='s'] {
+    top: 100%;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 50%;
+    cursor: ns-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='sw'] {
+    top: 100%;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='w'] {
+    top: 50%;
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    left: 0;
+    cursor: ew-resize;
+  }
+
+  /* stylelint-disable property-disallowed-list -- 裁切框的八向位置使用图片物理坐标，内部标记必须朝对应物理方向内收 */
+  .xh-scope-image-cropper[data-part='crop-handle']:is([data-position='n'], [data-position='s'])::after {
+    left: 50%;
+    inline-size: var(--xh-image-cropper-handle-length, var(--xh-space-8));
+    block-size: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    translate: -50% 0;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='n']::after {
+    top: 50%;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='s']::after {
+    bottom: 50%;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle']:is([data-position='e'], [data-position='w'])::after {
+    top: 50%;
+    inline-size: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    block-size: var(--xh-image-cropper-handle-length, var(--xh-space-8));
+    translate: 0 -50%;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='e']::after {
+    right: 50%;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='w']::after {
+    left: 50%;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='nw'] {
+    border-start-start-radius: var(--xh-_image-cropper-corner-radius);
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='ne'] {
+    border-start-end-radius: var(--xh-_image-cropper-corner-radius);
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='sw'] {
+    border-end-start-radius: var(--xh-_image-cropper-corner-radius);
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='se'] {
+    border-end-end-radius: var(--xh-_image-cropper-corner-radius);
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle']:is(
+    [data-position='nw'],
+    [data-position='ne'],
+    [data-position='sw'],
+    [data-position='se']
+  )::after {
+    inline-size: calc(var(--xh-_image-cropper-handle-size) / 2);
+    block-size: calc(var(--xh-_image-cropper-handle-size) / 2);
+    border: 0 solid var(--xh-image-cropper-handle-border, var(--xh-_image-cropper-handle-color));
+    border-radius: inherit;
+    background: transparent;
+    outline: none;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='nw']::after {
+    right: 0;
+    bottom: 0;
+    border-block-start-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='ne']::after {
+    bottom: 0;
+    left: 0;
+    border-block-start-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='sw']::after {
+    top: 0;
+    right: 0;
+    border-block-end-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-position='se']::after {
+    top: 0;
+    left: 0;
+    border-block-end-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-image-cropper-handle-thickness, var(--xh-stroke-strong));
+  }
+  /* stylelint-enable property-disallowed-list */
+
+  /* 只读与禁用的光标排在八个方位之后：那八条每条都写了 cursor，特异性又完全相同，
+     排在前面会被逐条盖掉，整条规则等于没写。 */
+  .xh-scope-image-cropper[data-part='crop-handle'][data-readonly] {
+    cursor: default;
+  }
+
+  .xh-scope-image-cropper[data-part='crop-handle'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 两条控制轴用原生 range：拇指与轨道交给平台画，这里只给横向铺满与品牌色。
+     不写 block-size：原生 range 的高度由 UA 与拇指尺寸定，写死会把拇指切掉一截。 */
+  .xh-scope-image-cropper[data-part='zoom-slider'],
+  .xh-scope-image-cropper[data-part='rotate-slider'] {
+    inline-size: var(--xh-image-cropper-slider-w, 100%);
+    /* 原生 range 自带左右各一段外边距，与铺满的宽度叠在一起就把这两条轴顶出容器 */
+    margin-inline: 0;
+    accent-color: var(--xh-image-cropper-slider-accent, var(--xh-bg-brand));
+  }
+
+  /*
+   * 翻转按钮是裁切器旁的独立开关钮：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
+   * 按连接层投影的 data-xh-action-* 给出。翻着（data-state='on'）是无滑块开关的选中面：品牌淡底 12 → 悬停 20
+   * → 按压 28，前景 fg-on-brand-subtle；outline 的描边不换，淡底面上没有描边就与悬停面分不开。
+   */
+  .xh-scope-image-cropper[data-part='flip-trigger'] {
+    /* 作者塞进来的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+  }
+
+  .xh-scope-image-cropper[data-part='flip-trigger'][data-state='on'] {
+    --xh-action-bg-rest: var(--xh-bg-brand-subtle);
+    --xh-action-bg-hover: var(--xh-bg-brand-subtle-hover);
+    --xh-action-bg-pressed: var(--xh-bg-brand-subtle-active);
+    --xh-action-bg-focus-visible: var(--xh-bg-brand-subtle);
+    /* 翻着又被禁用：底色掺一半中性面，选中信息不丢。掺的是淡底的不透明档，墨色淡底半透明 */
+    --xh-action-bg-disabled: color-mix(in oklab, var(--xh-bg-brand-subtle) 50%, var(--xh-bg-subtle-opaque));
+    --xh-action-fg-rest: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-hover: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-pressed: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-focus-visible: var(--xh-fg-on-brand-subtle);
+  }
+
+  /* 禁用的整体压暗只做一次，落在最外层：视口、裁切框、把手各自再叠一层会越叠越黑。
+     这里只用 opacity、不换前景色：框里是图像，没有文字可换。 */
+  .xh-scope-image-cropper[data-part='root'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* hidden-input 是 type=hidden 的原生输入，浏览器本就不渲染它，
+     这里一条声明都不给：给了 display / 尺寸反而会把它拽回布局里撑出一块空白。 */
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位。
+     这条必须排在全部 display 声明之后。 */
+  .xh-scope-image-cropper[data-part='root'][hidden],
+  .xh-scope-image-cropper[data-part='viewport'][hidden],
+  .xh-scope-image-cropper[data-part='image'][hidden],
+  .xh-scope-image-cropper[data-part='crop-handle'][hidden] {
+    display: none;
+  }
+}