oink-ui 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/README.md +32 -10
  2. package/dist/core/corner.d.ts +123 -0
  3. package/dist/core/cornerFallback.d.ts +13 -0
  4. package/dist/core/index.d.ts +3 -0
  5. package/dist/core/theme.d.ts +6 -1
  6. package/dist/inputs/Button.d.ts +1 -1
  7. package/dist/oink-ui.cjs +1 -1
  8. package/dist/oink-ui.css +1 -1
  9. package/dist/oink-ui.js +4593 -4059
  10. package/dist/popups/Tooltip.d.ts +7 -1
  11. package/dist/styles/accordion.css +1 -1
  12. package/dist/styles/alert.css +1 -1
  13. package/dist/styles/app-shell.css +1 -1
  14. package/dist/styles/avatar.css +1 -1
  15. package/dist/styles/badge.css +1 -1
  16. package/dist/styles/base.css +1 -1
  17. package/dist/styles/breadcrumb.css +1 -1
  18. package/dist/styles/button.css +1 -1
  19. package/dist/styles/calendar.css +1 -1
  20. package/dist/styles/card.css +1 -1
  21. package/dist/styles/checkbox.css +1 -1
  22. package/dist/styles/chip.css +1 -1
  23. package/dist/styles/code.css +1 -1
  24. package/dist/styles/color-picker.css +1 -1
  25. package/dist/styles/color-swatches.css +1 -1
  26. package/dist/styles/command-palette.css +1 -1
  27. package/dist/styles/count.css +1 -1
  28. package/dist/styles/dialog.css +1 -1
  29. package/dist/styles/empty-state.css +1 -1
  30. package/dist/styles/file-drop.css +1 -1
  31. package/dist/styles/fill-meter.css +1 -1
  32. package/dist/styles/floating-card.css +1 -1
  33. package/dist/styles/group.css +1 -1
  34. package/dist/styles/hotkey.css +1 -1
  35. package/dist/styles/image.css +1 -1
  36. package/dist/styles/input.css +1 -1
  37. package/dist/styles/kbd.css +1 -1
  38. package/dist/styles/list.css +1 -1
  39. package/dist/styles/menu.css +1 -1
  40. package/dist/styles/nav.css +1 -1
  41. package/dist/styles/number-input.css +1 -1
  42. package/dist/styles/option-card.css +1 -1
  43. package/dist/styles/pagination.css +1 -1
  44. package/dist/styles/pin-input.css +1 -1
  45. package/dist/styles/popup.css +1 -1
  46. package/dist/styles/primitives.css +1 -1
  47. package/dist/styles/progress.css +1 -1
  48. package/dist/styles/radio.css +1 -1
  49. package/dist/styles/rating.css +1 -1
  50. package/dist/styles/reaction.css +1 -1
  51. package/dist/styles/segmented.css +1 -1
  52. package/dist/styles/select.css +1 -1
  53. package/dist/styles/skeleton.css +1 -1
  54. package/dist/styles/slider.css +1 -1
  55. package/dist/styles/spinner.css +1 -1
  56. package/dist/styles/split-pane.css +1 -1
  57. package/dist/styles/stat.css +1 -1
  58. package/dist/styles/steps.css +1 -1
  59. package/dist/styles/surface.css +1 -1
  60. package/dist/styles/switch.css +1 -1
  61. package/dist/styles/tab-bar.css +1 -1
  62. package/dist/styles/table.css +1 -1
  63. package/dist/styles/tabs.css +1 -1
  64. package/dist/styles/tag.css +1 -1
  65. package/dist/styles/textarea.css +1 -1
  66. package/dist/styles/timeline.css +1 -1
  67. package/dist/styles/toast.css +1 -1
  68. package/dist/styles/tooltip.css +1 -1
  69. package/dist/styles/tree.css +1 -1
  70. package/package.json +1 -1
package/dist/popups/Tooltip.d.ts CHANGED
@@ -15,6 +15,12 @@ export interface TooltipProps {
15
15
  skipDelayWithin?: number;
16
16
  /** 指针离开后多久收起（ms）。默认 160，期间可以把指针移到提示上 */
17
17
  hideDelay?: number;
18
+ /**
19
+ * 提示能不能交互：指针能移到提示上停留、能选中复制提示里的文字。默认 true。
20
+ * 设为 false 时提示不接指针（指针离开目标就按 hideDelay 收起，移到提示上也不留），文字也不能选中——
21
+ * 适合只是说明一下、没有需要复制的内容的提示
22
+ */
23
+ interactive?: boolean;
18
24
  disabled?: boolean;
19
25
  open?: boolean;
20
26
  defaultOpen?: boolean;
@@ -25,4 +31,4 @@ export interface TooltipProps {
25
31
  * 文字提示：悬停或键盘聚焦触发，首次延迟出现，相邻提示之间直接滑过去。
26
32
  * 触屏不显示（触屏上没有悬停，长按留给系统菜单）；所以不要把必要信息只放在提示里。
27
33
  */
28
- export declare function Tooltip({ content, shortcut, children, placement, offset, delay, skipDelayWithin, hideDelay, disabled, open: openProp, defaultOpen, onOpenChange, className, }: TooltipProps): import("react").JSX.Element;
34
+ export declare function Tooltip({ content, shortcut, children, placement, offset, delay, skipDelayWithin, hideDelay, interactive, disabled, open: openProp, defaultOpen, onOpenChange, className, }: TooltipProps): import("react").JSX.Element;
package/dist/styles/accordion.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/accordion.css · 先引入 base、group */
2
- .ok-accordion{min-width:0}.ok-accordion__item+.ok-accordion__item{border-top:1px solid var(--ok-line)}.ok-accordion__heading{margin:0;font:inherit}.ok-accordion__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:var(--ok-s-2) var(--_inset, var(--ok-s-5));margin:0;border:0;border-radius:calc(20px * var(--ok-rk));corner-shape:var(--ok-corner);background:none;font:600 15px/1.3 var(--ok-font);color:var(--ok-text);text-align:left;cursor:pointer}.ok-accordion__head.ok-focusable:focus-visible{outline-offset:-3px}.ok-accordion__title{min-width:0;overflow-wrap:anywhere}.ok-accordion--plain{--_inset: 0px}.ok-accordion--plain .ok-accordion__head{border-radius:calc(8px * var(--ok-rk))}.ok-accordion--plain .ok-accordion__head.ok-focusable:focus-visible{outline-offset:-2px}.ok-accordion__head .ok-icon{width:18px;height:18px;color:var(--ok-text-3);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}@media (hover: hover){.ok-accordion__head:not(:disabled):hover .ok-icon{color:var(--ok-text)}}.ok-accordion__head:disabled{cursor:not-allowed;opacity:.5}.ok-accordion{--_dur: calc(391ms * var(--ok-ms))}.ok-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_dur) var(--ok-spring-soft)}.ok-accordion__body>div{min-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity calc(.1s * var(--ok-ms)) var(--ok-ease-in),transform calc(.16s * var(--ok-ms)) var(--ok-ease-out),visibility 0s linear var(--_dur)}.ok-accordion__content{padding:0 var(--_inset, var(--ok-s-5)) var(--_row, var(--ok-s-3));font:450 14px/1.65 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-accordion__content>:first-child{margin-top:0}.ok-accordion__content>:last-child{margin-bottom:0}.ok-accordion__item[data-state=open] .ok-accordion__head .ok-icon{transform:rotate(90deg);color:var(--ok-text)}.ok-accordion__item[data-state=open] .ok-accordion__body{grid-template-rows:1fr}.ok-accordion__item[data-state=open] .ok-accordion__body>div{opacity:1;transform:none;visibility:visible;transition:opacity calc(.16s * var(--ok-ms)) var(--ok-ease-out) calc(53ms * var(--ok-ms)),transform calc(.24s * var(--ok-ms)) var(--ok-ease-out) calc(40ms * var(--ok-ms)),visibility 0s}
2
+ .ok-accordion{min-width:0}.ok-accordion__item+.ok-accordion__item{border-top:1px solid var(--ok-line)}.ok-accordion__heading{margin:0;font:inherit}.ok-accordion__head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:var(--ok-s-2) var(--_inset, var(--ok-s-5));margin:0;border:0;border-radius:calc(20px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:600 15px/1.3 var(--ok-font);color:var(--ok-text);text-align:left;cursor:pointer}.ok-accordion__head.ok-focusable:focus-visible{outline-offset:-3px}.ok-accordion__title{min-width:0;overflow-wrap:anywhere}.ok-accordion--plain{--_inset: 0px}.ok-accordion--plain .ok-accordion__head{border-radius:calc(8px * var(--ok-rk))}.ok-accordion--plain .ok-accordion__head.ok-focusable:focus-visible{outline-offset:-2px}.ok-accordion__head .ok-icon{width:18px;height:18px;color:var(--ok-text-3);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}@media (hover: hover){.ok-accordion__head:not(:disabled):hover .ok-icon{color:var(--ok-text)}}.ok-accordion__head:disabled{cursor:not-allowed;opacity:.5}.ok-accordion{--_dur: calc(391ms * var(--ok-ms))}.ok-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_dur) var(--ok-spring-soft)}.ok-accordion__body>div{min-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity calc(.1s * var(--ok-ms)) var(--ok-ease-in),transform calc(.16s * var(--ok-ms)) var(--ok-ease-out),visibility 0s linear var(--_dur)}.ok-accordion__content{padding:0 var(--_inset, var(--ok-s-5)) var(--_row, var(--ok-s-3));font:450 14px/1.65 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-accordion__content>:first-child{margin-top:0}.ok-accordion__content>:last-child{margin-bottom:0}.ok-accordion__item[data-state=open] .ok-accordion__head .ok-icon{transform:rotate(90deg);color:var(--ok-text)}.ok-accordion__item[data-state=open] .ok-accordion__body{grid-template-rows:1fr}.ok-accordion__item[data-state=open] .ok-accordion__body>div{opacity:1;transform:none;visibility:visible;transition:opacity calc(.16s * var(--ok-ms)) var(--ok-ease-out) calc(53ms * var(--ok-ms)),transform calc(.24s * var(--ok-ms)) var(--ok-ease-out) calc(40ms * var(--ok-ms)),visibility 0s}
package/dist/styles/alert.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/alert.css · 先引入 base、button、group */
2
- .ok-alert{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);display:flex;align-items:flex-start;gap:12px;min-width:0;padding:var(--ok-s-4);border-radius:var(--ok-r-nested, calc(18px * var(--ok-rk)));corner-shape:var(--ok-corner);background:var(--_s);color:var(--ok-text);font:450 14px/1.55 var(--ok-font)}.ok-alert>.ok-icon{color:var(--_c);margin-top:1px}.ok-alert b{font-weight:600}.ok-alert__body{flex:1;min-width:0;overflow-wrap:anywhere}.ok-alert__title{margin-right:.35em}.ok-alert__action{display:flex;align-items:center;gap:var(--ok-s-2);flex:none;margin:-5px 0}.ok-alert>.ok-btn{flex:none;margin:-5px -6px -5px 0}.ok-alert--neutral{--_c: var(--ok-text-2);--_s: var(--ok-fill)}.ok-alert--info{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-alert--success{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-alert--warning{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-alert--danger{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}@media (max-width: 519.98px){.ok-alert:has(.ok-alert__action){flex-wrap:wrap}.ok-alert__action{order:3;flex-basis:100%;margin:0;padding-left:32px}}
2
+ .ok-alert{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);display:flex;align-items:flex-start;gap:12px;min-width:0;padding:var(--ok-s-4);border-radius:var(--ok-r-nested, calc(18px * var(--ok-rk)));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--_s);color:var(--ok-text);font:450 14px/1.55 var(--ok-font)}.ok-alert>.ok-icon{color:var(--_c);margin-top:1px}.ok-alert b{font-weight:600}.ok-alert__body{flex:1;min-width:0;overflow-wrap:anywhere}.ok-alert__title{margin-right:.35em}.ok-alert__action{display:flex;align-items:center;gap:var(--ok-s-2);flex:none;margin:-5px 0}.ok-alert>.ok-btn{flex:none;margin:-5px -6px -5px 0}.ok-alert--neutral{--_c: var(--ok-text-2);--_s: var(--ok-fill)}.ok-alert--info{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-alert--success{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-alert--warning{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-alert--danger{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}@media (max-width: 519.98px){.ok-alert:has(.ok-alert__action){flex-wrap:wrap}.ok-alert__action{order:3;flex-basis:100%;margin:0;padding-left:32px}}
package/dist/styles/app-shell.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/app-shell.css · 先引入 base、button、floating-card、nav */
2
- .ok-shell{--_gap: var(--ok-shell-gap, 12px);position:relative;box-sizing:border-box;display:grid;min-width:0;grid-template:"header header header" auto "sidebar main aside" minmax(0,1fr) "footer footer footer" auto / auto minmax(0,1fr) auto;height:100vh;height:100dvh;overflow:hidden;overflow:clip;padding:max(var(--_gap),env(safe-area-inset-top,0px)) max(var(--_gap),env(safe-area-inset-right,0px)) max(var(--_gap),env(safe-area-inset-bottom,0px)) max(var(--_gap),env(safe-area-inset-left,0px));background:var(--ok-bg);color:var(--ok-text);font-family:var(--ok-font)}@media (max-width: 519.98px){.ok-shell:not([data-contained]){--_gap: var(--ok-shell-gap, 8px)}}.ok-shell[data-contained]{height:100%;padding:var(--_gap);container:ok-shell / inline-size}.ok-skip-link{position:absolute;z-index:90;top:var(--_gap, 12px);left:var(--_gap, 12px);display:inline-flex;align-items:center;height:var(--ok-h-md);padding:0 var(--ok-s-4);border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-inverse);color:var(--ok-on-inverse);font:600 14px/1 var(--ok-font);text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(calc(-100% - 2 * var(--_gap, 12px)));pointer-events:none;transition:opacity var(--ok-dur-2) var(--ok-ease-in),transform var(--ok-dur-3) var(--ok-ease-in)}.ok-skip-link:focus,.ok-skip-link:focus-visible{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-soft-dur) var(--ok-spring-soft)}.ok-shell-card{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--ok-shell-card-pad, var(--ok-s-5));border-radius:var(--ok-r-5);corner-shape:var(--ok-corner);background:var(--ok-surface);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;position:relative}.ok-shell-card,.ok-float__card.ok-shell-card{--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--ok-r-5) - var(--ok-shell-card-pad, var(--ok-s-5)) * var(--ok-rk)))}.ok-float__card.ok-shell__drawer{box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-shell__drawer-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0}.ok-shell__sidebar{grid-area:sidebar;margin-inline-end:var(--_gap);width:var(--ok-shell-sidebar-w, 260px);max-width:45vw;transition:width var(--ok-spring-soft-dur) var(--ok-spring-soft)}.ok-shell__sidebar[data-rail]{width:calc(36px + 2 * var(--ok-shell-card-pad, var(--ok-s-5)))}@media (pointer: coarse){.ok-shell__sidebar[data-rail]{width:calc(44px + 2 * var(--ok-shell-card-pad, var(--ok-s-5)))}}.ok-shell__aside{grid-area:aside;margin-inline-start:var(--_gap);width:var(--ok-shell-aside-w, 320px);max-width:45vw}.ok-shell__main{position:relative;grid-area:main;box-sizing:border-box;min-width:0;min-height:0;overflow:auto}.ok-shell__main:focus-visible{outline-offset:-2px;border-radius:var(--ok-r-3)}.ok-shell__header,.ok-shell__footer{box-sizing:border-box;display:flex;align-items:center;gap:var(--ok-s-3);min-width:0}.ok-shell__header{grid-area:header;min-height:var(--ok-h-lg);margin-bottom:var(--_gap);padding:0 var(--ok-s-2)}.ok-shell__footer{grid-area:footer;min-height:var(--ok-h-md);margin-top:var(--_gap);padding:0 var(--ok-s-2);font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-shell__header>*,.ok-shell__footer>*{min-width:0}:is(.ok-shell__header,.ok-shell__footer)[data-variant=card]{padding:var(--ok-s-2) var(--ok-s-4);border-radius:var(--ok-r-4);corner-shape:var(--ok-corner);background:var(--ok-surface);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}@media (max-width: 519.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=sm]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=sm]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 519.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=sm]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=sm]>.ok-shell__aside{display:none}}@media (max-width: 767.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=md]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=md]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 767.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=md]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=md]>.ok-shell__aside{display:none}}@media (max-width: 1023.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=lg]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=lg]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 1023.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=lg]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=lg]>.ok-shell__aside{display:none}}@media (max-width: 1279.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=xl]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=xl]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 1279.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=xl]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=xl]>.ok-shell__aside{display:none}}
2
+ .ok-shell{--_gap: var(--ok-shell-gap, 12px);position:relative;box-sizing:border-box;display:grid;min-width:0;grid-template:"header header header" auto "sidebar main aside" minmax(0,1fr) "footer footer footer" auto / auto minmax(0,1fr) auto;height:100vh;height:100dvh;overflow:hidden;overflow:clip;padding:max(var(--_gap),env(safe-area-inset-top,0px)) max(var(--_gap),env(safe-area-inset-right,0px)) max(var(--_gap),env(safe-area-inset-bottom,0px)) max(var(--_gap),env(safe-area-inset-left,0px));background:var(--ok-bg);color:var(--ok-text);font-family:var(--ok-font)}@media (max-width: 519.98px){.ok-shell:not([data-contained]){--_gap: var(--ok-shell-gap, 8px)}}.ok-shell[data-contained]{height:100%;padding:var(--_gap);container:ok-shell / inline-size}.ok-skip-link{position:absolute;z-index:90;top:var(--_gap, 12px);left:var(--_gap, 12px);display:inline-flex;align-items:center;height:var(--ok-h-md);padding:0 var(--ok-s-4);border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-inverse);color:var(--ok-on-inverse);font:600 14px/1 var(--ok-font);text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(calc(-100% - 2 * var(--_gap, 12px)));pointer-events:none;transition:opacity var(--ok-dur-2) var(--ok-ease-in),transform var(--ok-dur-3) var(--ok-ease-in)}.ok-skip-link:focus,.ok-skip-link:focus-visible{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-soft-dur) var(--ok-spring-soft)}.ok-shell-card{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;min-height:0;padding:var(--ok-shell-card-pad, var(--ok-s-5));border-radius:var(--ok-r-5);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-surface);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;position:relative}.ok-shell-card,.ok-float__card.ok-shell-card{--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--ok-r-5) - var(--ok-shell-card-pad, var(--ok-s-5)) * var(--ok-rk)))}.ok-float__card.ok-shell__drawer{box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-shell__drawer-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0}.ok-shell__sidebar{grid-area:sidebar;margin-inline-end:var(--_gap);width:var(--ok-shell-sidebar-w, 260px);max-width:45vw;transition:width var(--ok-spring-soft-dur) var(--ok-spring-soft)}.ok-shell__sidebar[data-rail]{width:calc(36px + 2 * var(--ok-shell-card-pad, var(--ok-s-5)))}@media (pointer: coarse){.ok-shell__sidebar[data-rail]{width:calc(44px + 2 * var(--ok-shell-card-pad, var(--ok-s-5)))}}.ok-shell__aside{grid-area:aside;margin-inline-start:var(--_gap);width:var(--ok-shell-aside-w, 320px);max-width:45vw}.ok-shell__main{position:relative;grid-area:main;box-sizing:border-box;min-width:0;min-height:0;overflow:auto}.ok-shell__main:focus-visible{outline-offset:-2px;border-radius:var(--ok-r-3)}.ok-shell__header,.ok-shell__footer{box-sizing:border-box;display:flex;align-items:center;gap:var(--ok-s-3);min-width:0}.ok-shell__header{grid-area:header;min-height:var(--ok-h-lg);margin-bottom:var(--_gap);padding:0 var(--ok-s-2)}.ok-shell__footer{grid-area:footer;min-height:var(--ok-h-md);margin-top:var(--_gap);padding:0 var(--ok-s-2);font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-shell__header>*,.ok-shell__footer>*{min-width:0}:is(.ok-shell__header,.ok-shell__footer)[data-variant=card]{padding:var(--ok-s-2) var(--ok-s-4);border-radius:var(--ok-r-4);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-surface);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}@media (max-width: 519.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=sm]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=sm]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 519.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=sm]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=sm]>.ok-shell__aside{display:none}}@media (max-width: 767.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=md]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=md]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 767.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=md]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=md]>.ok-shell__aside{display:none}}@media (max-width: 1023.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=lg]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=lg]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 1023.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=lg]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=lg]>.ok-shell__aside{display:none}}@media (max-width: 1279.98px){.ok-shell:not([data-contained])[data-collapsed=auto][data-collapse-below=xl]>.ok-shell__sidebar,.ok-shell:not([data-contained])[data-collapsed=auto][data-aside-collapse-below=xl]>.ok-shell__aside{display:none}}@container ok-shell (max-width: 1279.98px){.ok-shell[data-contained][data-collapsed=auto][data-collapse-below=xl]>.ok-shell__sidebar,.ok-shell[data-contained][data-collapsed=auto][data-aside-collapse-below=xl]>.ok-shell__aside{display:none}}
package/dist/styles/avatar.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/avatar.css · 先引入 base、popup */
2
- .ok-avatar{--c: var(--ok-accent);--size: 36px;position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;corner-shape:round;flex:none;background:var(--c);color:#1b1c22;font:700 calc(var(--size) * .36)/1 var(--ok-font);vertical-align:middle;-webkit-user-select:none;user-select:none;box-shadow:0 0 0 2.5px var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__fallback{display:grid;place-items:center;white-space:nowrap}.ok-avatar__fallback .ok-icon{width:calc(var(--size) * .56);height:calc(var(--size) * .56)}.ok-avatar__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:inherit;corner-shape:inherit;object-fit:cover}.ok-avatar--more{--c: var(--ok-fill);color:var(--ok-text-2);font-size:calc(var(--size) * .32);font-variant-numeric:tabular-nums}.ok-avatar__status{position:absolute;right:-1px;bottom:-1px;width:max(9px,calc(var(--size) * .28));height:max(9px,calc(var(--size) * .28));border-radius:50%;corner-shape:round;background:var(--ok-success);box-shadow:0 0 0 2px var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=busy]{background:var(--ok-danger)}.ok-avatar__status[data-status=busy]:after{content:"";position:absolute;inset:calc(50% - 1px) 22%;border-radius:1px;background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=away]{background:var(--ok-warning)}.ok-avatar__status[data-status=away]:after{content:"";position:absolute;left:-10%;top:-10%;width:60%;height:60%;border-radius:50%;corner-shape:round;background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=offline]{background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=offline]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;corner-shape:round;box-shadow:inset 0 0 0 2px var(--ok-text-3)}.ok-avatars{display:inline-flex;min-width:0}.ok-avatars .ok-avatar+.ok-avatar{margin-left:-10px}.ok-avatars__more{display:inline-flex;margin:0 0 0 -10px;padding:0;border:0;background:none;border-radius:50%;corner-shape:round;cursor:pointer}.ok-avatars__more .ok-avatar--more{margin-left:0}@media (hover: hover){.ok-avatars__more:hover .ok-avatar--more{--c: var(--ok-fill-hover);color:var(--ok-text)}}.ok-avatars__panel{min-width:200px;max-width:min(280px,calc(100vw - 16px))}.ok-avatars__list{margin:0;padding:6px;list-style:none;max-height:min(320px,var(--ok-popup-avail-h, 320px));overflow:auto}.ok-avatars__item{display:flex;align-items:center;gap:10px;min-height:var(--ok-h-item);padding:0 10px}.ok-avatars__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/1.3 var(--ok-font)}.ok-avatars__rest{margin:0;padding:4px 16px 12px;font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}
2
+ .ok-avatar{--c: var(--ok-accent);--size: 36px;position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;corner-shape:round;--ok-shape: round;flex:none;background:var(--c);color:#1b1c22;font:700 calc(var(--size) * .36)/1 var(--ok-font);vertical-align:middle;-webkit-user-select:none;user-select:none;box-shadow:0 0 0 2.5px var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__fallback{display:grid;place-items:center;white-space:nowrap}.ok-avatar__fallback .ok-icon{width:calc(var(--size) * .56);height:calc(var(--size) * .56)}.ok-avatar__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;object-fit:cover}.ok-avatar--more{--c: var(--ok-fill);color:var(--ok-text-2);font-size:calc(var(--size) * .32);font-variant-numeric:tabular-nums}.ok-avatar__status{position:absolute;right:-1px;bottom:-1px;width:max(9px,calc(var(--size) * .28));height:max(9px,calc(var(--size) * .28));border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-success);box-shadow:0 0 0 2px var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=busy]{background:var(--ok-danger)}.ok-avatar__status[data-status=busy]:after{content:"";position:absolute;inset:calc(50% - 1px) 22%;border-radius:1px;background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=away]{background:var(--ok-warning)}.ok-avatar__status[data-status=away]:after{content:"";position:absolute;left:-10%;top:-10%;width:60%;height:60%;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=offline]{background:var(--ok-avatar-ring, var(--ok-surface))}.ok-avatar__status[data-status=offline]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;corner-shape:round;--ok-shape: round;box-shadow:inset 0 0 0 2px var(--ok-text-3)}.ok-avatars{display:inline-flex;min-width:0}.ok-avatars .ok-avatar+.ok-avatar{margin-left:-10px}.ok-avatars__more{display:inline-flex;margin:0 0 0 -10px;padding:0;border:0;background:none;border-radius:50%;corner-shape:round;--ok-shape: round;cursor:pointer}.ok-avatars__more .ok-avatar--more{margin-left:0}@media (hover: hover){.ok-avatars__more:hover .ok-avatar--more{--c: var(--ok-fill-hover);color:var(--ok-text)}}.ok-avatars__panel{min-width:200px;max-width:min(280px,calc(100vw - 16px))}.ok-avatars__list{margin:0;padding:6px;list-style:none;max-height:min(320px,var(--ok-popup-avail-h, 320px));overflow:auto}.ok-avatars__item{display:flex;align-items:center;gap:10px;min-height:var(--ok-h-item);padding:0 10px}.ok-avatars__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/1.3 var(--ok-font)}.ok-avatars__rest{margin:0;padding:4px 16px 12px;font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}
package/dist/styles/badge.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/badge.css · 先引入 base */
2
- .ok-badge{--_c: var(--ok-text-2);--_s: var(--ok-fill);--_solid: var(--ok-accent);--_on: var(--ok-on-accent);display:inline-flex;align-items:center;gap:6px;height:24px;max-width:100%;padding:0 10px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--_s);color:var(--_c);font:600 12px/1 var(--ok-font);white-space:nowrap;vertical-align:middle}.ok-badge--accent{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);--_solid: var(--ok-accent);--_on: var(--ok-on-accent)}.ok-badge--success{--_c: var(--ok-success-text);--_s: var(--ok-success-soft);--_solid: var(--ok-success);--_on: #1B1C22}.ok-badge--warning{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft);--_solid: var(--ok-warning);--_on: #1B1C22}.ok-badge--danger{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft);--_solid: var(--ok-danger);--_on: #1B1C22}.ok-badge--info{--_c: var(--ok-info-text);--_s: var(--ok-info-soft);--_solid: var(--ok-info);--_on: #1B1C22}.ok-badge--solid{background:var(--_solid);color:var(--_on)}.ok-badge--ink{background:var(--ok-inverse);color:var(--ok-on-inverse)}.ok-dot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;corner-shape:round;background:currentColor;flex:none}.ok-dot--live:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;corner-shape:round;background:currentColor;animation:ok-ping calc(1.8s * var(--ok-ms)) var(--ok-ease-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-dot--live:after{animation:none}}:root[data-motion=reduced] .ok-dot--live:after{animation:none}
2
+ .ok-badge{--_c: var(--ok-text-2);--_s: var(--ok-fill);--_solid: var(--ok-accent);--_on: var(--ok-on-accent);display:inline-flex;align-items:center;gap:6px;height:24px;max-width:100%;padding:0 10px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--_s);color:var(--_c);font:600 12px/1 var(--ok-font);white-space:nowrap;vertical-align:middle}.ok-badge--accent{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);--_solid: var(--ok-accent);--_on: var(--ok-on-accent)}.ok-badge--success{--_c: var(--ok-success-text);--_s: var(--ok-success-soft);--_solid: var(--ok-success);--_on: #1B1C22}.ok-badge--warning{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft);--_solid: var(--ok-warning);--_on: #1B1C22}.ok-badge--danger{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft);--_solid: var(--ok-danger);--_on: #1B1C22}.ok-badge--info{--_c: var(--ok-info-text);--_s: var(--ok-info-soft);--_solid: var(--ok-info);--_on: #1B1C22}.ok-badge--solid{background:var(--_solid);color:var(--_on)}.ok-badge--ink{background:var(--ok-inverse);color:var(--ok-on-inverse)}.ok-dot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;corner-shape:round;--ok-shape: round;background:currentColor;flex:none}.ok-dot--live:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:currentColor;animation:ok-ping calc(1.8s * var(--ok-ms)) var(--ok-ease-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-dot--live:after{animation:none}}:root[data-motion=reduced] .ok-dot--live:after{animation:none}
package/dist/styles/base.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/base.css · 所有组件样式的前提，最先引入 */
2
- :root{color-scheme:light;--ok-ink: #1B1C22;--ok-pink: #FF6B8E;--ok-paper: #F4F4F6;--ok-bg-light: #F9F9FB;--ok-bg-dark: #1B1A18;--ok-bg: var(--ok-bg-light);--ok-surface: #FDFDFE;--ok-card: #FFFFFF;--ok-raised: #FFFFFF;--ok-well: #ECECEF;--ok-well-2: #E0E0E5;--ok-well-hi: #F6F6F8;--ok-fill: #ECECEF;--ok-fill-hover: #E0E0E5;--ok-scrollbar: color-mix(in srgb, var(--ok-text-3) 55%, var(--ok-bg));--ok-scrollbar-hover: color-mix(in srgb, var(--ok-text-3) 85%, var(--ok-bg));--ok-hover: rgb(27 28 34 / .055);--ok-pop: #FFFFFF;--ok-thumb: #FFFFFF;--ok-line: rgb(27 28 34 / .07);--ok-line-2: rgb(27 28 34 / .14);--ok-hi: rgb(255 255 255 / .9);--ok-scrim: rgb(17 18 22 / .38);--ok-text: #1B1C22;--ok-text-2: #5F606A;--ok-text-3: #989AA4;--ok-inverse: #1B1C22;--ok-inverse-hover: #2D2E36;--ok-on-inverse: #F4F4F6;--ok-accent: #FF6B8E;--ok-accent-deep: #D42E62;--ok-on-accent: #1B1C22;--ok-success: #2FBF71;--ok-success-text: #17794D;--ok-warning: #F5A524;--ok-warning-text: #96600A;--ok-danger: #F04452;--ok-danger-text: #C7283A;--ok-info: #3B82F6;--ok-info-text: #1D5FD1;--ok-font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;--ok-font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;--ok-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--ok-corner: round;--ok-rk: 1;--ok-r-1: calc(8px * var(--ok-rk));--ok-r-2: calc(12px * var(--ok-rk));--ok-r-3: calc(16px * var(--ok-rk));--ok-r-4: calc(24px * var(--ok-rk));--ok-r-5: calc(32px * var(--ok-rk));--ok-r-6: calc(44px * var(--ok-rk));--ok-r-full: 999px;--ok-s-1: 4px;--ok-s-2: 8px;--ok-s-3: 12px;--ok-s-4: 16px;--ok-s-5: 20px;--ok-s-6: 24px;--ok-s-8: 32px;--ok-s-10: 40px;--ok-s-12: 48px;--ok-s-16: 64px;--ok-h-sm: 32px;--ok-h-md: 40px;--ok-h-lg: 48px;--ok-fs-display: 56px;--ok-fs-h1: 40px;--ok-fs-h2: 28px;--ok-fs-h3: 20px;--ok-fs-h4: 17px;--ok-h-item: 36px;--ok-h-item-sub: 30px;--ok-ms: 1;--ok-dur-1: calc(90ms * var(--ok-ms));--ok-dur-2: calc(.15s * var(--ok-ms));--ok-dur-3: calc(.24s * var(--ok-ms));--ok-dur-4: calc(.36s * var(--ok-ms));--ok-dur-5: calc(.52s * var(--ok-ms));--ok-dur-6: calc(.8s * var(--ok-ms));--ok-ease-out: cubic-bezier(.22, 1, .36, 1);--ok-ease-in: cubic-bezier(.55, 0, 1, .45);--ok-ease-in-out: cubic-bezier(.65, 0, .35, 1);--ok-ease-standard: cubic-bezier(.2, 0, 0, 1);--ok-spring-soft: cubic-bezier(.22, 1, .36, 1);--ok-spring: cubic-bezier(.3, 1.3, .5, 1);--ok-spring-snappy: cubic-bezier(.3, 1.25, .45, 1);--ok-spring-bouncy: cubic-bezier(.3, 1.7, .5, 1);--ok-spring-wobbly: cubic-bezier(.3, 2.3, .5, 1);--ok-spring-soft-dur: calc(587ms * var(--ok-ms));--ok-spring-dur: calc(454ms * var(--ok-ms));--ok-spring-snappy-dur: calc(325ms * var(--ok-ms));--ok-spring-bouncy-dur: calc(542ms * var(--ok-ms));--ok-spring-wobbly-dur: calc(1104ms * var(--ok-ms));--ok-float-in-dur: calc(303ms * var(--ok-ms));--ok-float-in-ease: var(--ok-spring-soft);--ok-float-fade-dur: calc(.1s * var(--ok-ms));--ok-float-out-dur: calc(.16s * var(--ok-ms));--ok-float-out-ease: var(--ok-ease-in)}@supports (corner-shape: squircle){:root{--ok-corner: superellipse(1.75);--ok-rk: 1.45}}@supports (transition-timing-function: linear(0,1)){:root{--ok-spring-soft: linear(0, .015, .055, .109, .173, .24, .309, .377, .441, .502, .558, .61, .657, .699, .737, .771, .801, .827, .85, .871, .888, .904, .917, .929, .939, .948, .955, .962, .967, .972, .976, .98, .983, .985, .988, .989, .991, .992, .994, .995, .995, 1);--ok-spring: linear(0, .023, .083, .166, .262, .363, .463, .558, .645, .722, .79, .847, .894, .933, .963, .986, 1.003, 1.016, 1.023, 1.028, 1.03, 1.03, 1.029, 1.027, 1.024, 1.021, 1.018, 1.015, 1.012, 1.01, 1.007, 1.006, 1);--ok-spring-snappy: linear(0, .044, .15, .284, .426, .561, .68, .78, .86, .92, .965, .995, 1.014, 1.024, 1.029, 1.03, 1.027, 1.024, 1.02, 1.016, 1.012, 1.008, 1.006, 1);--ok-spring-bouncy: linear(0, .028, .101, .206, .33, .462, .592, .715, .825, .92, .997, 1.058, 1.101, 1.129, 1.144, 1.148, 1.143, 1.131, 1.116, 1.097, 1.078, 1.058, 1.04, 1.024, 1.01, .999, .991, .984, .981, .979, .978, .979, .981, .983, .986, .989, .992, .994, 1);--ok-spring-wobbly: linear(0, .044, .162, .329, .522, .72, .904, 1.063, 1.186, 1.271, 1.316, 1.326, 1.307, 1.264, 1.208, 1.144, 1.079, 1.02, .971, .933, .908, .895, .894, .902, .917, .936, .957, .978, .997, 1.012, 1.024, 1.031, 1.035, 1.034, 1.031, 1.026, 1.02, 1.013, 1.006, 1, .995, .992, .989, .989, .989, .99, .992, .994, 1)}}:root[data-theme=dark]{color-scheme:dark;--ok-bg: var(--ok-bg-dark);--ok-surface: #232220;--ok-card: #2A2927;--ok-raised: #3E3C38;--ok-well: #181716;--ok-well-2: #383632;--ok-well-hi: #2E2D2A;--ok-fill: #33322E;--ok-fill-hover: #413F3A;--ok-hover: rgb(255 255 255 / .055);--ok-pop: #312F2C;--ok-thumb: #EEEEF0;--ok-line: rgb(255 255 255 / .07);--ok-line-2: rgb(255 255 255 / .15);--ok-hi: rgb(255 255 255 / .05);--ok-scrim: rgb(0 0 0 / .56);--ok-text: #F4F4F6;--ok-text-2: #AEACA8;--ok-text-3: #7A7875;--ok-inverse: #EEEEF0;--ok-inverse-hover: #F9F9F9;--ok-on-inverse: #1B1C22;--ok-success-text: #5FD99A;--ok-warning-text: #FFC35C;--ok-danger-text: #FF7C87;--ok-info-text: #7FB0FF}[data-accent=pink]{--ok-accent: #FF6B8E;--ok-accent-deep: #D42E62;--ok-on-accent: #1B1C22}[data-accent=orange]{--ok-accent: #FF7A2F;--ok-accent-deep: #C2470A;--ok-on-accent: #1B1C22}[data-accent=amber]{--ok-accent: #FFBE3B;--ok-accent-deep: #96600A;--ok-on-accent: #1B1C22}[data-accent=blue]{--ok-accent: #2E7BFF;--ok-accent-deep: #1D5FD1;--ok-on-accent: #FFFFFF}[data-accent=violet]{--ok-accent: #C77DFF;--ok-accent-deep: #8B36D6;--ok-on-accent: #1B1C22}:root,[data-accent]{--ok-accent-hover: color-mix(in srgb, var(--ok-accent) 88%, #1B1C22);--ok-accent-soft: color-mix(in srgb, var(--ok-accent) 16%, #FFFFFF);--ok-accent-ring: color-mix(in srgb, var(--ok-accent) 36%, #FFFFFF);--ok-accent-text: var(--ok-accent-deep);--ok-accent-tint: color-mix(in srgb, var(--ok-accent) 26%, #FFFFFF);--ok-accent-tint-2: color-mix(in srgb, var(--ok-accent) 40%, #FFFFFF);--ok-accent-fill: color-mix(in srgb, var(--ok-accent) 70%, #FFFFFF);--ok-accent-fill-hover: color-mix(in srgb, var(--ok-accent) 86%, #FFFFFF);--ok-success-soft: color-mix(in srgb, var(--ok-success) 16%, #FFFFFF);--ok-warning-soft: color-mix(in srgb, var(--ok-warning) 18%, #FFFFFF);--ok-danger-soft: color-mix(in srgb, var(--ok-danger) 14%, #FFFFFF);--ok-info-soft: color-mix(in srgb, var(--ok-info) 14%, #FFFFFF);--ok-danger-soft-2: color-mix(in srgb, var(--ok-danger) 24%, #FFFFFF)}:root[data-theme=dark],:root[data-theme=dark] [data-accent]{--ok-accent-hover: color-mix(in srgb, var(--ok-accent) 86%, #FFFFFF);--ok-accent-text: color-mix(in srgb, var(--ok-accent) 78%, #FFFFFF);--ok-accent-tint: color-mix(in srgb, var(--ok-accent) 34%, #2A2927);--ok-accent-tint-2: color-mix(in srgb, var(--ok-accent) 48%, #2A2927);--ok-accent-fill-hover: color-mix(in srgb, var(--ok-accent) 56%, #FFFFFF);--ok-accent-soft: color-mix(in srgb, var(--ok-accent) 16%, #2A2927);--ok-accent-ring: color-mix(in srgb, var(--ok-accent) 36%, #2A2927);--ok-success-soft: color-mix(in srgb, var(--ok-success) 16%, #2A2927);--ok-warning-soft: color-mix(in srgb, var(--ok-warning) 18%, #2A2927);--ok-danger-soft: color-mix(in srgb, var(--ok-danger) 14%, #2A2927);--ok-info-soft: color-mix(in srgb, var(--ok-info) 14%, #2A2927);--ok-danger-soft-2: color-mix(in srgb, var(--ok-danger) 24%, #2A2927)}:root[data-theme=dark][data-accent=custom],:root[data-theme=dark] [data-accent=custom]{--ok-accent-text: var(--ok-accent-light, color-mix(in srgb, var(--ok-accent) 78%, #FFFFFF))}[data-accent]{--ok-logo-snout: var(--ok-accent)}:root[data-accent=custom],[data-accent=custom]{--ok-logo-snout: var(--ok-logo-snout-light, var(--ok-accent))}:root[data-theme=dark][data-accent=custom],:root[data-theme=dark] [data-accent=custom]{--ok-logo-snout: var(--ok-logo-snout-dark, var(--ok-accent))}[data-accent=blue]{--ok-accent-fill: var(--ok-accent);--ok-accent-fill-hover: var(--ok-accent-hover)}:root[data-theme=dark][data-accent=blue],:root[data-theme=dark] [data-accent=blue]{--ok-accent-fill-hover: var(--ok-accent-hover)}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]){--ok-ms: 0 !important}}:root[data-motion=reduced]{--ok-ms: 0 !important}*,*:before,*:after{box-sizing:border-box}.ok-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ok-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ok-icon--fill{fill:currentColor;stroke:none}.ok-focusable{outline:2px solid transparent;outline-offset:5px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ok-focusable:focus-visible{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out),outline-color var(--ok-dur-2)}.ok-t-display{font:700 var(--ok-fs-display)/1.06 var(--ok-font-display);letter-spacing:-.025em}.ok-t-h1{font:700 var(--ok-fs-h1)/1.15 var(--ok-font-display);letter-spacing:-.02em}.ok-t-h2{font:700 var(--ok-fs-h2)/1.25 var(--ok-font-display);letter-spacing:-.015em}.ok-t-h3{font:600 var(--ok-fs-h3)/1.35 var(--ok-font);letter-spacing:-.01em}@media (max-width: 519.98px){:root{--ok-fs-display: 38px;--ok-fs-h1: 30px;--ok-fs-h2: 24px;--ok-fs-h3: 18px;--ok-fs-h4: 16px}}.ok-t-body-l{font:450 17px/1.6 var(--ok-font)}.ok-t-body{font:450 15px/1.6 var(--ok-font)}.ok-t-label{font:600 15px/1.3 var(--ok-font)}.ok-t-caption{font:500 13px/1.4 var(--ok-font)}.ok-t-micro{font:700 11px/1.3 var(--ok-font);letter-spacing:.08em;text-transform:uppercase}.ok-t-mono{font:500 13px/1.5 var(--ok-font-mono)}@media (pointer: coarse){:root{--ok-h-sm: 36px;--ok-h-md: 44px;--ok-h-lg: 52px}.ok-input input{font-size:16px}}[data-touch]{--ok-h-sm: 36px;--ok-h-md: 44px;--ok-h-lg: 52px}@media (pointer: coarse){:root{--ok-h-item: 44px;--ok-h-item-sub: 44px}}@media (max-width: 519.98px){:root{--ok-h-item: 44px;--ok-h-item-sub: 44px}}[data-touch]{--ok-h-item: 44px;--ok-h-item-sub: 44px}[data-touch] .ok-input input{font-size:16px}@property --ok-sb{syntax: "<color>"; inherits: true; initial-value: transparent;}.ok-scroll{overflow:auto}.ok-scroll,.ok-table{--ok-sb: var(--ok-scrollbar)}@media (hover: hover){.ok-scroll,.ok-table{--ok-sb: transparent;transition:--ok-sb var(--ok-dur-2) var(--ok-ease-out)}.ok-scroll:hover,.ok-scroll:focus-visible,.ok-table:hover,.ok-table:focus-visible{--ok-sb: var(--ok-scrollbar)}}.ok-scroll:focus-visible,.ok-table:focus-visible{outline:2px solid var(--ok-accent);outline-offset:2px}@media (hover: hover){.ok-scroll::-webkit-scrollbar,.ok-table::-webkit-scrollbar{width:10px;height:10px}.ok-scroll::-webkit-scrollbar-track,.ok-table::-webkit-scrollbar-track,.ok-scroll::-webkit-scrollbar-corner,.ok-table::-webkit-scrollbar-corner{background:transparent}.ok-scroll::-webkit-scrollbar-track:vertical,.ok-table::-webkit-scrollbar-track:vertical{margin:10px 0}.ok-scroll::-webkit-scrollbar-track:horizontal,.ok-table::-webkit-scrollbar-track:horizontal{margin:0 10px}.ok-scroll::-webkit-scrollbar-thumb,.ok-table::-webkit-scrollbar-thumb{min-width:28px;min-height:28px;border:2px solid transparent;border-radius:999px;background-clip:content-box;background-color:var(--ok-sb)}.ok-scroll::-webkit-scrollbar-thumb:hover,.ok-scroll::-webkit-scrollbar-thumb:active,.ok-table::-webkit-scrollbar-thumb:hover,.ok-table::-webkit-scrollbar-thumb:active{border-width:1px;background-color:var(--ok-scrollbar-hover)}}@supports not selector(::-webkit-scrollbar){.ok-scroll,.ok-table{scrollbar-width:thin;scrollbar-color:var(--ok-sb) transparent}}.ok-particle{position:fixed;z-index:600;left:0;top:0;border-radius:50%;corner-shape:round;pointer-events:none}@keyframes ok-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ok-pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}@keyframes ok-draw{to{stroke-dashoffset:0}}@keyframes ok-spin{to{transform:rotate(360deg)}}@keyframes ok-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}35%{transform:translate(6px)}55%{transform:translate(-4px)}75%{transform:translate(2px)}}@keyframes ok-bump{0%{transform:scale(1)}30%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes ok-ping{0%{transform:scale(1);opacity:.7}80%,to{transform:scale(3.2);opacity:0}}@keyframes ok-breathe{0%,to{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 3px var(--ok-accent-soft)}50%{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 7px var(--ok-accent-soft)}}@keyframes ok-shimmer{0%{background-position:100% 0}to{background-position:-50% 0}}@keyframes ok-indeterminate{0%{left:-40%;width:30%}50%{width:55%}to{left:100%;width:30%}}@keyframes ok-tail-draw{0%{stroke-dashoffset:1.05}45%,55%{stroke-dashoffset:0}to{stroke-dashoffset:-1.05}}@keyframes ok-tail-wag{0%,to{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}@keyframes ok-dot-bounce{0%,60%,to{transform:translateY(0) scale(1);opacity:.45}30%{transform:translateY(-7px) scale(.92,1.1);opacity:1}}@keyframes ok-oink{0%{transform:scale(1)}18%{transform:scale(.7) rotate(-8deg)}45%{transform:scale(1.3) rotate(6deg)}70%{transform:scale(.95) rotate(-2deg)}to{transform:scale(1)}}:root.ok-theming::view-transition-old(root),:root.ok-theming::view-transition-new(root){animation:none;mix-blend-mode:normal}:root.ok-theming::view-transition-old(root){z-index:0;animation:ok-vt-hold .6s linear both}:root.ok-theming::view-transition-new(root){z-index:1;clip-path:circle(0px at 50% 0%)}@keyframes ok-vt-hold{0%{opacity:1}to{opacity:1}}:root.ok-theming *,:root.ok-theming *:before,:root.ok-theming *:after{transition:none!important}:root.ok-theming::view-transition{pointer-events:none}
2
+ :root{color-scheme:light;--ok-ink: #1B1C22;--ok-pink: #FF6B8E;--ok-paper: #F4F4F6;--ok-bg-light: #F9F9FB;--ok-bg-dark: #1B1A18;--ok-bg: var(--ok-bg-light);--ok-surface: #FDFDFE;--ok-card: #FFFFFF;--ok-raised: #FFFFFF;--ok-well: #ECECEF;--ok-well-2: #E0E0E5;--ok-well-hi: #F6F6F8;--ok-fill: #ECECEF;--ok-fill-hover: #E0E0E5;--ok-scrollbar: color-mix(in srgb, var(--ok-text-3) 55%, var(--ok-bg));--ok-scrollbar-hover: color-mix(in srgb, var(--ok-text-3) 85%, var(--ok-bg));--ok-hover: rgb(27 28 34 / .055);--ok-pop: #FFFFFF;--ok-thumb: #FFFFFF;--ok-line: rgb(27 28 34 / .07);--ok-line-2: rgb(27 28 34 / .14);--ok-hi: rgb(255 255 255 / .9);--ok-scrim: rgb(17 18 22 / .38);--ok-text: #1B1C22;--ok-text-2: #5F606A;--ok-text-3: #989AA4;--ok-inverse: #1B1C22;--ok-inverse-hover: #2D2E36;--ok-on-inverse: #F4F4F6;--ok-accent: #FF6B8E;--ok-accent-deep: #D42E62;--ok-on-accent: #1B1C22;--ok-success: #2FBF71;--ok-success-text: #17794D;--ok-warning: #F5A524;--ok-warning-text: #96600A;--ok-danger: #F04452;--ok-danger-text: #C7283A;--ok-info: #3B82F6;--ok-info-text: #1D5FD1;--ok-font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;--ok-font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;--ok-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--ok-corner: round;--ok-rk: 1;--ok-r-1: calc(8px * var(--ok-rk));--ok-r-2: calc(12px * var(--ok-rk));--ok-r-3: calc(16px * var(--ok-rk));--ok-r-4: calc(24px * var(--ok-rk));--ok-r-5: calc(32px * var(--ok-rk));--ok-r-6: calc(44px * var(--ok-rk));--ok-r-full: 999px;--ok-s-1: 4px;--ok-s-2: 8px;--ok-s-3: 12px;--ok-s-4: 16px;--ok-s-5: 20px;--ok-s-6: 24px;--ok-s-8: 32px;--ok-s-10: 40px;--ok-s-12: 48px;--ok-s-16: 64px;--ok-h-sm: 32px;--ok-h-md: 40px;--ok-h-lg: 48px;--ok-fs-display: 56px;--ok-fs-h1: 40px;--ok-fs-h2: 28px;--ok-fs-h3: 20px;--ok-fs-h4: 17px;--ok-h-item: 36px;--ok-h-item-sub: 30px;--ok-ms: 1;--ok-dur-1: calc(90ms * var(--ok-ms));--ok-dur-2: calc(.15s * var(--ok-ms));--ok-dur-3: calc(.24s * var(--ok-ms));--ok-dur-4: calc(.36s * var(--ok-ms));--ok-dur-5: calc(.52s * var(--ok-ms));--ok-dur-6: calc(.8s * var(--ok-ms));--ok-ease-out: cubic-bezier(.22, 1, .36, 1);--ok-ease-in: cubic-bezier(.55, 0, 1, .45);--ok-ease-in-out: cubic-bezier(.65, 0, .35, 1);--ok-ease-standard: cubic-bezier(.2, 0, 0, 1);--ok-spring-soft: cubic-bezier(.22, 1, .36, 1);--ok-spring: cubic-bezier(.3, 1.3, .5, 1);--ok-spring-snappy: cubic-bezier(.3, 1.25, .45, 1);--ok-spring-bouncy: cubic-bezier(.3, 1.7, .5, 1);--ok-spring-wobbly: cubic-bezier(.3, 2.3, .5, 1);--ok-spring-soft-dur: calc(587ms * var(--ok-ms));--ok-spring-dur: calc(454ms * var(--ok-ms));--ok-spring-snappy-dur: calc(325ms * var(--ok-ms));--ok-spring-bouncy-dur: calc(542ms * var(--ok-ms));--ok-spring-wobbly-dur: calc(1104ms * var(--ok-ms));--ok-float-in-dur: calc(303ms * var(--ok-ms));--ok-float-in-ease: var(--ok-spring-soft);--ok-float-fade-dur: calc(.1s * var(--ok-ms));--ok-float-out-dur: calc(.16s * var(--ok-ms));--ok-float-out-ease: var(--ok-ease-in)}@supports (corner-shape: squircle){:root{--ok-corner: superellipse(1.75);--ok-rk: 1.45}}:root[data-ok-corner-fallback]{--ok-corner: superellipse(1.75);--ok-rk: 1.45}@supports (transition-timing-function: linear(0,1)){:root{--ok-spring-soft: linear(0, .015, .055, .109, .173, .24, .309, .377, .441, .502, .558, .61, .657, .699, .737, .771, .801, .827, .85, .871, .888, .904, .917, .929, .939, .948, .955, .962, .967, .972, .976, .98, .983, .985, .988, .989, .991, .992, .994, .995, .995, 1);--ok-spring: linear(0, .023, .083, .166, .262, .363, .463, .558, .645, .722, .79, .847, .894, .933, .963, .986, 1.003, 1.016, 1.023, 1.028, 1.03, 1.03, 1.029, 1.027, 1.024, 1.021, 1.018, 1.015, 1.012, 1.01, 1.007, 1.006, 1);--ok-spring-snappy: linear(0, .044, .15, .284, .426, .561, .68, .78, .86, .92, .965, .995, 1.014, 1.024, 1.029, 1.03, 1.027, 1.024, 1.02, 1.016, 1.012, 1.008, 1.006, 1);--ok-spring-bouncy: linear(0, .028, .101, .206, .33, .462, .592, .715, .825, .92, .997, 1.058, 1.101, 1.129, 1.144, 1.148, 1.143, 1.131, 1.116, 1.097, 1.078, 1.058, 1.04, 1.024, 1.01, .999, .991, .984, .981, .979, .978, .979, .981, .983, .986, .989, .992, .994, 1);--ok-spring-wobbly: linear(0, .044, .162, .329, .522, .72, .904, 1.063, 1.186, 1.271, 1.316, 1.326, 1.307, 1.264, 1.208, 1.144, 1.079, 1.02, .971, .933, .908, .895, .894, .902, .917, .936, .957, .978, .997, 1.012, 1.024, 1.031, 1.035, 1.034, 1.031, 1.026, 1.02, 1.013, 1.006, 1, .995, .992, .989, .989, .989, .99, .992, .994, 1)}}:root[data-theme=dark]{color-scheme:dark;--ok-bg: var(--ok-bg-dark);--ok-surface: #232220;--ok-card: #2A2927;--ok-raised: #3E3C38;--ok-well: #181716;--ok-well-2: #383632;--ok-well-hi: #2E2D2A;--ok-fill: #33322E;--ok-fill-hover: #413F3A;--ok-hover: rgb(255 255 255 / .055);--ok-pop: #312F2C;--ok-thumb: #EEEEF0;--ok-line: rgb(255 255 255 / .07);--ok-line-2: rgb(255 255 255 / .15);--ok-hi: rgb(255 255 255 / .05);--ok-scrim: rgb(0 0 0 / .56);--ok-text: #F4F4F6;--ok-text-2: #AEACA8;--ok-text-3: #7A7875;--ok-inverse: #EEEEF0;--ok-inverse-hover: #F9F9F9;--ok-on-inverse: #1B1C22;--ok-success-text: #5FD99A;--ok-warning-text: #FFC35C;--ok-danger-text: #FF7C87;--ok-info-text: #7FB0FF}[data-accent=pink]{--ok-accent: #FF6B8E;--ok-accent-deep: #D42E62;--ok-on-accent: #1B1C22}[data-accent=orange]{--ok-accent: #FF7A2F;--ok-accent-deep: #C2470A;--ok-on-accent: #1B1C22}[data-accent=amber]{--ok-accent: #FFBE3B;--ok-accent-deep: #96600A;--ok-on-accent: #1B1C22}[data-accent=blue]{--ok-accent: #2E7BFF;--ok-accent-deep: #1D5FD1;--ok-on-accent: #FFFFFF}[data-accent=violet]{--ok-accent: #C77DFF;--ok-accent-deep: #8B36D6;--ok-on-accent: #1B1C22}:root,[data-accent]{--ok-accent-hover: color-mix(in srgb, var(--ok-accent) 88%, #1B1C22);--ok-accent-soft: color-mix(in srgb, var(--ok-accent) 16%, #FFFFFF);--ok-accent-ring: color-mix(in srgb, var(--ok-accent) 36%, #FFFFFF);--ok-accent-text: var(--ok-accent-deep);--ok-accent-tint: color-mix(in srgb, var(--ok-accent) 26%, #FFFFFF);--ok-accent-tint-2: color-mix(in srgb, var(--ok-accent) 40%, #FFFFFF);--ok-accent-fill: color-mix(in srgb, var(--ok-accent) 70%, #FFFFFF);--ok-accent-fill-hover: color-mix(in srgb, var(--ok-accent) 86%, #FFFFFF);--ok-success-soft: color-mix(in srgb, var(--ok-success) 16%, #FFFFFF);--ok-warning-soft: color-mix(in srgb, var(--ok-warning) 18%, #FFFFFF);--ok-danger-soft: color-mix(in srgb, var(--ok-danger) 14%, #FFFFFF);--ok-info-soft: color-mix(in srgb, var(--ok-info) 14%, #FFFFFF);--ok-danger-soft-2: color-mix(in srgb, var(--ok-danger) 24%, #FFFFFF)}:root[data-theme=dark],:root[data-theme=dark] [data-accent]{--ok-accent-hover: color-mix(in srgb, var(--ok-accent) 86%, #FFFFFF);--ok-accent-text: color-mix(in srgb, var(--ok-accent) 78%, #FFFFFF);--ok-accent-tint: color-mix(in srgb, var(--ok-accent) 34%, #2A2927);--ok-accent-tint-2: color-mix(in srgb, var(--ok-accent) 48%, #2A2927);--ok-accent-fill-hover: color-mix(in srgb, var(--ok-accent) 56%, #FFFFFF);--ok-accent-soft: color-mix(in srgb, var(--ok-accent) 16%, #2A2927);--ok-accent-ring: color-mix(in srgb, var(--ok-accent) 36%, #2A2927);--ok-success-soft: color-mix(in srgb, var(--ok-success) 16%, #2A2927);--ok-warning-soft: color-mix(in srgb, var(--ok-warning) 18%, #2A2927);--ok-danger-soft: color-mix(in srgb, var(--ok-danger) 14%, #2A2927);--ok-info-soft: color-mix(in srgb, var(--ok-info) 14%, #2A2927);--ok-danger-soft-2: color-mix(in srgb, var(--ok-danger) 24%, #2A2927)}:root[data-theme=dark][data-accent=custom],:root[data-theme=dark] [data-accent=custom]{--ok-accent-text: var(--ok-accent-light, color-mix(in srgb, var(--ok-accent) 78%, #FFFFFF))}[data-accent]{--ok-logo-snout: var(--ok-accent)}:root[data-accent=custom],[data-accent=custom]{--ok-logo-snout: var(--ok-logo-snout-light, var(--ok-accent))}:root[data-theme=dark][data-accent=custom],:root[data-theme=dark] [data-accent=custom]{--ok-logo-snout: var(--ok-logo-snout-dark, var(--ok-accent))}[data-accent=blue]{--ok-accent-fill: var(--ok-accent);--ok-accent-fill-hover: var(--ok-accent-hover)}:root[data-theme=dark][data-accent=blue],:root[data-theme=dark] [data-accent=blue]{--ok-accent-fill-hover: var(--ok-accent-hover)}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]){--ok-ms: 0 !important}}:root[data-motion=reduced]{--ok-ms: 0 !important}*,*:before,*:after{box-sizing:border-box}.ok-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ok-icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ok-icon--fill{fill:currentColor;stroke:none}@property --ok-shape{syntax: "*"; inherits: false; initial-value: round;}@property --ok-se-clip{syntax: "*"; inherits: false;}@property --ok-se-paint{syntax: "*"; inherits: false;}@property --ok-se-before-clip{syntax: "*"; inherits: false;}@property --ok-se-before-paint{syntax: "*"; inherits: false;}@property --ok-se-after-clip{syntax: "*"; inherits: false;}@property --ok-se-after-paint{syntax: "*"; inherits: false;}[data-ok-se=on]{border-radius:0!important}[data-ok-se]{clip-path:var(--ok-se-clip)!important;border-image:var(--ok-se-paint)!important}[data-ok-se-before=on]:before,[data-ok-se-after=on]:after{border-radius:0!important}[data-ok-se-before]:before{--ok-se-before-clip: inherit;--ok-se-before-paint: inherit;clip-path:var(--ok-se-before-clip)!important;border-image:var(--ok-se-before-paint)!important}[data-ok-se-after]:after{--ok-se-after-clip: inherit;--ok-se-after-paint: inherit;clip-path:var(--ok-se-after-clip)!important;border-image:var(--ok-se-after-paint)!important}.ok-focusable{outline:2px solid transparent;outline-offset:5px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ok-focusable:focus-visible{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out),outline-color var(--ok-dur-2)}.ok-t-display{font:700 var(--ok-fs-display)/1.06 var(--ok-font-display);letter-spacing:-.025em}.ok-t-h1{font:700 var(--ok-fs-h1)/1.15 var(--ok-font-display);letter-spacing:-.02em}.ok-t-h2{font:700 var(--ok-fs-h2)/1.25 var(--ok-font-display);letter-spacing:-.015em}.ok-t-h3{font:600 var(--ok-fs-h3)/1.35 var(--ok-font);letter-spacing:-.01em}@media (max-width: 519.98px){:root{--ok-fs-display: 38px;--ok-fs-h1: 30px;--ok-fs-h2: 24px;--ok-fs-h3: 18px;--ok-fs-h4: 16px}}.ok-t-body-l{font:450 17px/1.6 var(--ok-font)}.ok-t-body{font:450 15px/1.6 var(--ok-font)}.ok-t-label{font:600 15px/1.3 var(--ok-font)}.ok-t-caption{font:500 13px/1.4 var(--ok-font)}.ok-t-micro{font:700 11px/1.3 var(--ok-font);letter-spacing:.08em;text-transform:uppercase}.ok-t-mono{font:500 13px/1.5 var(--ok-font-mono)}@media (pointer: coarse){:root{--ok-h-sm: 36px;--ok-h-md: 44px;--ok-h-lg: 52px}.ok-input input{font-size:16px}}[data-touch]{--ok-h-sm: 36px;--ok-h-md: 44px;--ok-h-lg: 52px}@media (pointer: coarse){:root{--ok-h-item: 44px;--ok-h-item-sub: 44px}}@media (max-width: 519.98px){:root{--ok-h-item: 44px;--ok-h-item-sub: 44px}}[data-touch]{--ok-h-item: 44px;--ok-h-item-sub: 44px}[data-touch] .ok-input input{font-size:16px}@property --ok-sb{syntax: "<color>"; inherits: true; initial-value: transparent;}.ok-scroll{overflow:auto}.ok-scroll,.ok-table{--ok-sb: var(--ok-scrollbar)}@media (hover: hover){.ok-scroll,.ok-table{--ok-sb: transparent;transition:--ok-sb var(--ok-dur-2) var(--ok-ease-out)}.ok-scroll:hover,.ok-scroll:focus-visible,.ok-table:hover,.ok-table:focus-visible{--ok-sb: var(--ok-scrollbar)}}.ok-scroll:focus-visible,.ok-table:focus-visible{outline:2px solid var(--ok-accent);outline-offset:2px}@media (hover: hover){.ok-scroll::-webkit-scrollbar,.ok-table::-webkit-scrollbar{width:10px;height:10px}.ok-scroll::-webkit-scrollbar-track,.ok-table::-webkit-scrollbar-track,.ok-scroll::-webkit-scrollbar-corner,.ok-table::-webkit-scrollbar-corner{background:transparent}.ok-scroll::-webkit-scrollbar-track:vertical,.ok-table::-webkit-scrollbar-track:vertical{margin:10px 0}.ok-scroll::-webkit-scrollbar-track:horizontal,.ok-table::-webkit-scrollbar-track:horizontal{margin:0 10px}.ok-scroll::-webkit-scrollbar-thumb,.ok-table::-webkit-scrollbar-thumb{min-width:28px;min-height:28px;border:2px solid transparent;border-radius:999px;background-clip:content-box;background-color:var(--ok-sb)}.ok-scroll::-webkit-scrollbar-thumb:hover,.ok-scroll::-webkit-scrollbar-thumb:active,.ok-table::-webkit-scrollbar-thumb:hover,.ok-table::-webkit-scrollbar-thumb:active{border-width:1px;background-color:var(--ok-scrollbar-hover)}}@supports not selector(::-webkit-scrollbar){.ok-scroll,.ok-table{scrollbar-width:thin;scrollbar-color:var(--ok-sb) transparent}}.ok-particle{position:fixed;z-index:600;left:0;top:0;border-radius:50%;corner-shape:round;--ok-shape: round;pointer-events:none}@keyframes ok-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ok-pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}@keyframes ok-draw{to{stroke-dashoffset:0}}@keyframes ok-spin{to{transform:rotate(360deg)}}@keyframes ok-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}35%{transform:translate(6px)}55%{transform:translate(-4px)}75%{transform:translate(2px)}}@keyframes ok-bump{0%{transform:scale(1)}30%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes ok-ping{0%{transform:scale(1);opacity:.7}80%,to{transform:scale(3.2);opacity:0}}@keyframes ok-breathe{0%,to{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 3px var(--ok-accent-soft)}50%{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 7px var(--ok-accent-soft)}}@keyframes ok-shimmer{0%{background-position:100% 0}to{background-position:-50% 0}}@keyframes ok-indeterminate{0%{left:-40%;width:30%}50%{width:55%}to{left:100%;width:30%}}@keyframes ok-tail-draw{0%{stroke-dashoffset:1.05}45%,55%{stroke-dashoffset:0}to{stroke-dashoffset:-1.05}}@keyframes ok-tail-wag{0%,to{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}@keyframes ok-dot-bounce{0%,60%,to{transform:translateY(0) scale(1);opacity:.45}30%{transform:translateY(-7px) scale(.92,1.1);opacity:1}}@keyframes ok-oink{0%{transform:scale(1)}18%{transform:scale(.7) rotate(-8deg)}45%{transform:scale(1.3) rotate(6deg)}70%{transform:scale(.95) rotate(-2deg)}to{transform:scale(1)}}:root.ok-theming::view-transition-old(root),:root.ok-theming::view-transition-new(root){animation:none;mix-blend-mode:normal}:root.ok-theming::view-transition-old(root){z-index:0;animation:ok-vt-hold .6s linear both}:root.ok-theming::view-transition-new(root){z-index:1;clip-path:circle(0px at 50% 0%)}@keyframes ok-vt-hold{0%{opacity:1}to{opacity:1}}:root.ok-theming *,:root.ok-theming *:before,:root.ok-theming *:after{transition:none!important}:root.ok-theming::view-transition{pointer-events:none}
package/dist/styles/breadcrumb.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/breadcrumb.css · 先引入 base */
2
- .ok-breadcrumb{min-width:0;font:500 14px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0;margin:0;padding:0;list-style:none}.ok-breadcrumb__item{display:flex;align-items:center;gap:2px;min-width:0}.ok-breadcrumb__sep{display:grid;place-items:center;flex:none;color:var(--ok-text-3)}.ok-breadcrumb__sep .ok-icon{width:14px;height:14px}.ok-breadcrumb__link,.ok-breadcrumb__text,.ok-breadcrumb__current{display:inline-flex;align-items:center;min-width:0;max-width:24ch;min-height:28px;padding:0 6px;border-radius:var(--ok-r-1);corner-shape:var(--ok-corner);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-breadcrumb__link{margin:0;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-breadcrumb__link:hover{color:var(--ok-text);background:var(--ok-hover)}}@media (pointer: coarse){.ok-breadcrumb__link,.ok-breadcrumb__text,.ok-breadcrumb__current{min-height:44px}}.ok-breadcrumb__current{font-weight:600;color:var(--ok-text)}.ok-breadcrumb__more .ok-icon{width:18px;height:18px}.ok-breadcrumb__more{display:none}.ok-breadcrumb[data-collapse=always] .ok-breadcrumb__more{display:flex}.ok-breadcrumb[data-collapse=always] [data-middle]{display:none}@media (max-width: 519.98px){.ok-breadcrumb[data-collapse=narrow] .ok-breadcrumb__more{display:flex}.ok-breadcrumb[data-collapse=narrow] [data-middle]{display:none}}
2
+ .ok-breadcrumb{min-width:0;font:500 14px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0;margin:0;padding:0;list-style:none}.ok-breadcrumb__item{display:flex;align-items:center;gap:2px;min-width:0}.ok-breadcrumb__sep{display:grid;place-items:center;flex:none;color:var(--ok-text-3)}.ok-breadcrumb__sep .ok-icon{width:14px;height:14px}.ok-breadcrumb__link,.ok-breadcrumb__text,.ok-breadcrumb__current{display:inline-flex;align-items:center;min-width:0;max-width:24ch;min-height:28px;padding:0 6px;border-radius:var(--ok-r-1);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-breadcrumb__link{margin:0;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-breadcrumb__link:hover{color:var(--ok-text);background:var(--ok-hover)}}@media (pointer: coarse){.ok-breadcrumb__link,.ok-breadcrumb__text,.ok-breadcrumb__current{min-height:44px}}.ok-breadcrumb__current{font-weight:600;color:var(--ok-text)}.ok-breadcrumb__more .ok-icon{width:18px;height:18px}.ok-breadcrumb__more{display:none}.ok-breadcrumb[data-collapse=always] .ok-breadcrumb__more{display:flex}.ok-breadcrumb[data-collapse=always] [data-middle]{display:none}@media (max-width: 519.98px){.ok-breadcrumb[data-collapse=narrow] .ok-breadcrumb__more{display:flex}.ok-breadcrumb[data-collapse=narrow] [data-middle]{display:none}}
package/dist/styles/button.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/button.css · 先引入 base */
2
- .ok-btn{--_h: var(--ok-h-md);--_bg: var(--ok-fill);--_bg-hover: var(--ok-fill-hover);--_fg: var(--ok-text);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--_h);min-width:var(--_h);padding:0 calc(var(--_h) * .48);border:0;border-radius:var(--ok-r-full);corner-shape:round;margin:0;background:var(--_bg);color:var(--_fg);font:600 15px/1 var(--ok-font);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}@media (hover: hover){.ok-btn:hover{background:var(--_bg-hover)}}.ok-btn:active{transform:scale(.955);transition:transform var(--ok-dur-1) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}.ok-btn .ok-icon{width:18px;height:18px}.ok-btn--primary{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn--accent{--_bg: var(--ok-accent-fill);--_bg-hover: var(--ok-accent-fill-hover);--_fg: var(--ok-on-accent)}.ok-btn--ghost{--_bg: transparent;--_bg-hover: var(--ok-fill)}.ok-btn--outline{--_bg: transparent;--_bg-hover: var(--ok-fill);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-btn--danger{--_bg: var(--ok-danger-soft);--_fg: var(--ok-danger-text);--_bg-hover: var(--ok-danger-soft-2)}.ok-btn--sm{--_h: var(--ok-h-sm);font-size:13px;gap:6px}.ok-btn--sm .ok-icon{width:16px;height:16px}.ok-btn--lg{--_h: var(--ok-h-lg);font-size:16px}.ok-btn--icon{padding:0;width:var(--_h)}.ok-btn--block{display:flex;width:100%}.ok-btn:disabled,.ok-btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;background:var(--_bg);transform:none}.ok-btn__label{display:inline-flex;align-items:center;gap:inherit;transition:transform var(--ok-dur-3) var(--ok-ease-out),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn__status{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.ok-btn__status>*{grid-area:1 / 1;opacity:0;transform:translateY(14px) scale(.5);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2) var(--ok-ease-in)}.ok-btn__status .ok-tail{width:20px;height:20px;color:currentColor}.ok-btn__check{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-btn__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn__cross{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.ok-btn__cross path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn[data-state=loading],.ok-btn[data-state=success]{pointer-events:none}.ok-btn[data-state=loading] .ok-btn__label,.ok-btn[data-state=success] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=loading] .ok-tail,.ok-btn[data-state=success] .ok-btn__check{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=success] .ok-btn__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-4) var(--ok-ease-out) calc(80ms * var(--ok-ms))}.ok-btn[data-state=error]{animation:ok-shake var(--ok-dur-5) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=error] .ok-btn__cross{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__cross path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(60ms * var(--ok-ms))}.ok-btn[data-state=error]:not(.ok-btn--primary,.ok-btn--accent,.ok-btn--danger) .ok-btn__cross{color:var(--ok-danger-text)}.ok-btn__status .ok-tail{overflow:visible;flex:none;transform-origin:20% 20%;animation:ok-tail-wag 1.5s var(--ok-ease-in-out) infinite}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([fill]){fill:none}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke]){stroke:currentColor}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke-width]){stroke-width:5.5}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-linecap:round;stroke-linejoin:round}.ok-btn__status .ok-tail [pathLength="1"]{stroke-dasharray:1 1.2;animation:ok-tail-draw 1.5s var(--ok-ease-in-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-btn__status .ok-tail{animation:none}}:root[data-motion=reduced] .ok-btn__status .ok-tail{animation:none}.ok-btn:disabled,.ok-btn[aria-disabled=true]{--_bg-hover: var(--_bg)}.ok-btn{max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-btn[aria-pressed=true]{--_bg: var(--ok-well-2);--_bg-hover: var(--ok-well-2);--_fg: var(--ok-text)}.ok-btn--primary[aria-pressed=true]{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2);min-width:0}.ok-btn-group--vertical{flex-direction:column;align-items:stretch}.ok-btn-group--block{display:flex}.ok-btn-group--block>.ok-btn{flex:1}.ok-btn-group--attached{flex-wrap:nowrap;gap:2px}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:first-child){border-start-start-radius:calc(6px * var(--ok-rk));border-end-start-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:last-child){border-start-end-radius:calc(6px * var(--ok-rk));border-end-end-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn{border-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:first-child{border-start-start-radius:calc(20px * var(--ok-rk));border-start-end-radius:calc(20px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:last-child{border-end-start-radius:calc(20px * var(--ok-rk));border-end-end-radius:calc(20px * var(--ok-rk))}:where(.ok-btn){outline:2px solid transparent;outline-offset:5px}:where(.ok-btn):focus-visible{outline-color:var(--ok-accent);outline-offset:2px}
2
+ .ok-btn{--_h: var(--ok-h-md);--_bg: var(--ok-fill);--_bg-hover: var(--ok-fill-hover);--_fg: var(--ok-text);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--_h);min-width:var(--_h);padding:0 calc(var(--_h) * .48);border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;margin:0;background:var(--_bg);color:var(--_fg);font:600 15px/1 var(--ok-font);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}@media (hover: hover){.ok-btn:hover{background:var(--_bg-hover)}}.ok-btn:active{transform:scale(.955);transition:transform var(--ok-dur-1) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}.ok-btn .ok-icon{width:18px;height:18px}.ok-btn--primary{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn--accent{--_bg: var(--ok-accent-fill);--_bg-hover: var(--ok-accent-fill-hover);--_fg: var(--ok-on-accent)}.ok-btn--ghost{--_bg: transparent;--_bg-hover: var(--ok-fill)}.ok-btn--outline{--_bg: transparent;--_bg-hover: var(--ok-fill);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-btn--danger{--_bg: var(--ok-danger-soft);--_fg: var(--ok-danger-text);--_bg-hover: var(--ok-danger-soft-2)}.ok-btn--sm{--_h: var(--ok-h-sm);font-size:13px;gap:6px}.ok-btn--sm .ok-icon{width:16px;height:16px}.ok-btn--lg{--_h: var(--ok-h-lg);font-size:16px}.ok-btn--icon{padding:0;width:var(--_h)}.ok-btn--block{display:flex;width:100%}.ok-btn:disabled,.ok-btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;background:var(--_bg);transform:none}.ok-btn__label{display:inline-flex;align-items:center;gap:inherit;transition:transform var(--ok-dur-3) var(--ok-ease-out),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn__status{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.ok-btn__status>*{grid-area:1 / 1;opacity:0;transform:translateY(14px) scale(.5);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2) var(--ok-ease-in)}.ok-btn__status .ok-tail{width:20px;height:20px;color:currentColor}.ok-btn__check{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-btn__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn__cross{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.ok-btn__cross path{stroke-dasharray:1;stroke-dashoffset:1}.ok-btn[data-state=loading],.ok-btn[data-state=success]{pointer-events:none}.ok-btn[data-state=loading] .ok-btn__label,.ok-btn[data-state=success] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=loading] .ok-tail,.ok-btn[data-state=success] .ok-btn__check{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=success] .ok-btn__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-4) var(--ok-ease-out) calc(80ms * var(--ok-ms))}.ok-btn[data-state=error]{animation:ok-shake var(--ok-dur-5) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__label{opacity:0;transform:translateY(-14px) scale(.9)}.ok-btn[data-state=error] .ok-btn__cross{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-btn[data-state=error] .ok-btn__cross path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(60ms * var(--ok-ms))}.ok-btn[data-state=error]:not(.ok-btn--primary,.ok-btn--accent,.ok-btn--danger) .ok-btn__cross{color:var(--ok-danger-text)}.ok-btn__status .ok-tail{overflow:visible;flex:none;transform-origin:20% 20%;animation:ok-tail-wag 1.5s var(--ok-ease-in-out) infinite}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([fill]){fill:none}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke]){stroke:currentColor}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke-width]){stroke-width:5.5}.ok-btn__status .ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-linecap:round;stroke-linejoin:round}.ok-btn__status .ok-tail [pathLength="1"]{stroke-dasharray:1 1.2;animation:ok-tail-draw 1.5s var(--ok-ease-in-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-btn__status .ok-tail{animation:none}}:root[data-motion=reduced] .ok-btn__status .ok-tail{animation:none}.ok-btn:disabled,.ok-btn[aria-disabled=true]{--_bg-hover: var(--_bg)}.ok-btn{max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-btn[aria-pressed=true]{--_bg: var(--ok-well-2);--_bg-hover: var(--ok-well-2);--_fg: var(--ok-text)}.ok-btn--primary[aria-pressed=true]{--_bg: var(--ok-inverse);--_bg-hover: var(--ok-inverse-hover);--_fg: var(--ok-on-inverse)}.ok-btn-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2);min-width:0}.ok-btn-group--vertical{flex-direction:column;align-items:stretch}.ok-btn-group--block{display:flex}.ok-btn-group--block>.ok-btn{flex:1}.ok-btn-group--attached{flex-wrap:nowrap;gap:2px}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:first-child){border-start-start-radius:calc(6px * var(--ok-rk));border-end-start-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached:not(.ok-btn-group--vertical)>.ok-btn:not(:last-child){border-start-end-radius:calc(6px * var(--ok-rk));border-end-end-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn{border-radius:calc(6px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:first-child{border-start-start-radius:calc(20px * var(--ok-rk));border-start-end-radius:calc(20px * var(--ok-rk))}.ok-btn-group--attached.ok-btn-group--vertical>.ok-btn:last-child{border-end-start-radius:calc(20px * var(--ok-rk));border-end-end-radius:calc(20px * var(--ok-rk))}:where(.ok-btn){outline:2px solid transparent;outline-offset:5px}:where(.ok-btn):focus-visible{outline-color:var(--ok-accent);outline-offset:2px}
package/dist/styles/calendar.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/calendar.css · 先引入 base、button、popup、popover、input */
2
- .ok-calendar{--ok-cal-cell: calc(var(--ok-h-sm) + 4px);display:inline-grid;gap:8px;padding:4px;width:max-content;max-width:100%;justify-self:start;font:500 14px/1 var(--ok-font);color:var(--ok-text)}.ok-calendar__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ok-calendar__title{flex:1;min-width:0;text-align:center;font:600 14px/1.3 var(--ok-font)}.ok-calendar__grid{border-collapse:collapse;border-spacing:0;table-layout:fixed}.ok-calendar__grid th{width:var(--ok-cal-cell);height:28px;padding:0;font:600 12px/1 var(--ok-font);color:var(--ok-text-3);text-align:center}.ok-calendar__grid td{padding:0}.ok-calendar__day{position:relative;display:grid;place-items:center;width:var(--ok-cal-cell);height:var(--ok-cal-cell);padding:0;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:none;font:500 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text);cursor:pointer;transition:background-color var(--ok-dur-1) var(--ok-ease-out),color var(--ok-dur-1) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-calendar__day:focus-visible{z-index:1}@media (hover: hover){.ok-calendar__day:hover:not([aria-disabled=true]):not([data-selected]){background:var(--ok-hover)}}.ok-calendar__day:active:not([aria-disabled=true]){transform:scale(.9);transition-duration:var(--ok-dur-1)}.ok-calendar__day[data-outside]{color:var(--ok-text-3)}.ok-calendar__day[data-today]{font-weight:700}.ok-calendar__day[data-today]:after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;corner-shape:round;background:var(--ok-accent)}.ok-calendar__day[aria-disabled=true]{color:var(--ok-text-3);text-decoration:line-through;cursor:not-allowed}.ok-calendar__day[data-selected]{background:var(--ok-accent);color:var(--ok-on-accent);font-weight:600}.ok-calendar__day[data-selected][data-today]:after{background:currentColor}.ok-calendar__grid td[data-range=in],.ok-calendar__grid td[data-range=start],.ok-calendar__grid td[data-range=end]{background:var(--ok-accent-soft)}.ok-calendar__grid td[data-range=start]{border-radius:var(--ok-r-full) 0 0 var(--ok-r-full)}.ok-calendar__grid td[data-range=end]{border-radius:0 var(--ok-r-full) var(--ok-r-full) 0}.ok-calendar__grid td[data-range=in] .ok-calendar__day[data-selected]{background:none;color:var(--ok-text);font-weight:500}.ok-calendar__grid td[data-range=start] .ok-calendar__day:not([data-selected]),.ok-calendar__grid td[data-range=end] .ok-calendar__day:not([data-selected]){background:var(--ok-accent-tint)}.ok-datepicker{min-width:0;padding-right:6px}.ok-datepicker[data-size=sm],.ok-daterange[data-size=sm]{height:var(--ok-h-sm);padding-left:12px}.ok-datepicker[data-size=sm] input{font-size:14px}.ok-datepicker[data-invalid],.ok-daterange[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-datepicker[data-disabled] input{color:var(--ok-text-3);cursor:not-allowed}.ok-datepicker__btn{display:grid;place-items:center;flex:none;width:calc(var(--ok-h-md) - 12px);height:calc(var(--ok-h-md) - 12px);padding:0;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:none;color:var(--ok-text-2);cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2)}.ok-datepicker[data-size=sm] .ok-datepicker__btn{width:calc(var(--ok-h-sm) - 8px);height:calc(var(--ok-h-sm) - 8px)}.ok-datepicker__btn .ok-icon{width:18px;height:18px}@media (hover: hover){.ok-datepicker__btn:hover:not(:disabled){background:var(--ok-hover);color:var(--ok-text)}}.ok-datepicker__btn:disabled{color:var(--ok-text-3);cursor:not-allowed}.ok-daterange{justify-content:space-between;min-width:0;max-width:100%;margin:0;border:0;font:500 15px/1 var(--ok-font);color:var(--ok-text);text-align:left;cursor:pointer}.ok-daterange>.ok-icon{width:18px;height:18px;color:var(--ok-text-2)}.ok-daterange__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;font-variant-numeric:tabular-nums}.ok-daterange__value[data-placeholder]{color:var(--ok-text-3)}.ok-daterange:disabled{color:var(--ok-text-3);cursor:not-allowed}
2
+ .ok-calendar{--ok-cal-cell: calc(var(--ok-h-sm) + 4px);display:inline-grid;gap:8px;padding:4px;width:max-content;max-width:100%;justify-self:start;font:500 14px/1 var(--ok-font);color:var(--ok-text)}.ok-calendar__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ok-calendar__title{flex:1;min-width:0;text-align:center;font:600 14px/1.3 var(--ok-font)}.ok-calendar__grid{border-collapse:collapse;border-spacing:0;table-layout:fixed}.ok-calendar__grid th{width:var(--ok-cal-cell);height:28px;padding:0;font:600 12px/1 var(--ok-font);color:var(--ok-text-3);text-align:center}.ok-calendar__grid td{padding:0}.ok-calendar__day{position:relative;display:grid;place-items:center;width:var(--ok-cal-cell);height:var(--ok-cal-cell);padding:0;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:none;font:500 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text);cursor:pointer;transition:background-color var(--ok-dur-1) var(--ok-ease-out),color var(--ok-dur-1) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-calendar__day:focus-visible{z-index:1}@media (hover: hover){.ok-calendar__day:hover:not([aria-disabled=true]):not([data-selected]){background:var(--ok-hover)}}.ok-calendar__day:active:not([aria-disabled=true]){transform:scale(.9);transition-duration:var(--ok-dur-1)}.ok-calendar__day[data-outside]{color:var(--ok-text-3)}.ok-calendar__day[data-today]{font-weight:700}.ok-calendar__day[data-today]:after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-accent)}.ok-calendar__day[aria-disabled=true]{color:var(--ok-text-3);text-decoration:line-through;cursor:not-allowed}.ok-calendar__day[data-selected]{background:var(--ok-accent);color:var(--ok-on-accent);font-weight:600}.ok-calendar__day[data-selected][data-today]:after{background:currentColor}.ok-calendar__grid td[data-range=in],.ok-calendar__grid td[data-range=start],.ok-calendar__grid td[data-range=end]{background:var(--ok-accent-soft)}.ok-calendar__grid td[data-range=start]{border-radius:var(--ok-r-full) 0 0 var(--ok-r-full)}.ok-calendar__grid td[data-range=end]{border-radius:0 var(--ok-r-full) var(--ok-r-full) 0}.ok-calendar__grid td[data-range=in] .ok-calendar__day[data-selected]{background:none;color:var(--ok-text);font-weight:500}.ok-calendar__grid td[data-range=start] .ok-calendar__day:not([data-selected]),.ok-calendar__grid td[data-range=end] .ok-calendar__day:not([data-selected]){background:var(--ok-accent-tint)}.ok-datepicker{min-width:0;padding-right:6px}.ok-datepicker[data-size=sm],.ok-daterange[data-size=sm]{height:var(--ok-h-sm);padding-left:12px}.ok-datepicker[data-size=sm] input{font-size:14px}.ok-datepicker[data-invalid],.ok-daterange[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-datepicker[data-disabled] input{color:var(--ok-text-3);cursor:not-allowed}.ok-datepicker__btn{display:grid;place-items:center;flex:none;width:calc(var(--ok-h-md) - 12px);height:calc(var(--ok-h-md) - 12px);padding:0;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:none;color:var(--ok-text-2);cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2)}.ok-datepicker[data-size=sm] .ok-datepicker__btn{width:calc(var(--ok-h-sm) - 8px);height:calc(var(--ok-h-sm) - 8px)}.ok-datepicker__btn .ok-icon{width:18px;height:18px}@media (hover: hover){.ok-datepicker__btn:hover:not(:disabled){background:var(--ok-hover);color:var(--ok-text)}}.ok-datepicker__btn:disabled{color:var(--ok-text-3);cursor:not-allowed}.ok-daterange{justify-content:space-between;min-width:0;max-width:100%;margin:0;border:0;font:500 15px/1 var(--ok-font);color:var(--ok-text);text-align:left;cursor:pointer}.ok-daterange>.ok-icon{width:18px;height:18px;color:var(--ok-text-2)}.ok-daterange__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4;font-variant-numeric:tabular-nums}.ok-daterange__value[data-placeholder]{color:var(--ok-text-3)}.ok-daterange:disabled{color:var(--ok-text-3);cursor:not-allowed}
package/dist/styles/card.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/card.css · 先引入 base、image */
2
- .ok-card{--_p: var(--ok-s-5);--_r: var(--ok-r-nested, var(--ok-r-4));display:block;min-width:0;margin:0;padding:var(--_p);border:0;border-radius:var(--_r);corner-shape:var(--ok-corner);background:var(--ok-card);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);--ok-avatar-ring: var(--ok-card)}.ok-card--sm{--_p: var(--ok-s-4);--_r: var(--ok-r-nested, calc(20px * var(--ok-rk)))}.ok-card--lg{--_p: var(--ok-s-6);--_r: var(--ok-r-nested, var(--ok-r-5))}.ok-card{--_card-nest: max(calc(4px * var(--ok-rk)), calc(var(--_r) - var(--_p) * var(--ok-rk)))}.ok-card>:not(.ok-card,.ok-panel){--ok-r-nested: var(--_card-nest)}a.ok-card,button.ok-card{width:100%;font:inherit;text-align:start;text-decoration:none}.ok-card--interactive,.ok-card:has(.ok-card__link){position:relative;cursor:pointer;transition:transform var(--ok-spring-dur) var(--ok-spring),box-shadow var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:hover,.ok-card:has(.ok-card__link):hover{box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}}.ok-card--interactive:active,.ok-card:has(.ok-card__link:active){transform:scale(.985);transition-duration:var(--ok-dur-1),var(--ok-dur-2);transition-timing-function:var(--ok-ease-out)}.ok-card--chev{display:flex;align-items:center;gap:var(--ok-s-4)}.ok-card__main{display:block;flex:1;min-width:0}.ok-card__chev{flex:none;color:var(--ok-text-3);transition:transform var(--ok-spring-dur) var(--ok-spring),color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:hover .ok-card__chev,.ok-card:has(.ok-card__link):hover .ok-card__chev{color:var(--ok-text)}}.ok-card--interactive:disabled,.ok-card--interactive[aria-disabled=true]{cursor:not-allowed;opacity:.5;transform:none;box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-card--interactive:disabled .ok-card__chev,.ok-card--interactive[aria-disabled=true] .ok-card__chev{transform:none;color:var(--ok-text-3)}.ok-card__link{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;text-decoration:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ok-card__link:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--_r);corner-shape:var(--ok-corner);outline:2px solid transparent;outline-offset:5px}.ok-card__link:focus-visible:after{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-card:has(.ok-card__link) :is(a,button,input,select,textarea,label,summary):not(.ok-card__link):not(.ok-check input,.ok-radio input,.ok-switch input,.ok-filedrop__input):not([inert] *,[aria-hidden=true] *){position:relative;z-index:1}.ok-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ok-s-3);min-width:0}.ok-card__heading{display:grid;gap:2px;min-width:0;flex:1}.ok-card__title{margin:0;font:600 17px/1.35 var(--ok-font);letter-spacing:-.005em;color:var(--ok-text);overflow-wrap:anywhere}.ok-card__desc{margin:0;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-card__actions{display:flex;align-items:center;gap:var(--ok-s-2);flex:none}.ok-card__body{min-width:0;font:450 15px/1.6 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-card__header+.ok-card__body{margin-top:var(--ok-s-3)}.ok-card__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2);margin-top:var(--ok-s-4)}.ok-card__footer[data-align=end]{justify-content:flex-end}.ok-card__footer[data-align=between]{justify-content:space-between}.ok-card>.ok-card__media:first-child{max-width:none;margin:calc(-1 * var(--_p)) calc(-1 * var(--_p)) var(--_p);border-radius:var(--_r) var(--_r) 0 0;corner-shape:var(--ok-corner)}.ok-card>.ok-card__media:only-child{margin-bottom:calc(-1 * var(--_p));border-radius:var(--_r)}.ok-card>.ok-card__media:not(:first-child){border-radius:var(--_card-nest);margin-block:var(--ok-s-4)}.ok-card>.ok-card__media:not(:first-child):last-child{margin-bottom:0}.ok-card:has(>.ok-card__media:first-child){--_ring: var(--ok-line);position:relative;isolation:isolate}.ok-card.ok-card:has(>.ok-card__media:first-child){box-shadow:none}.ok-card:has(>.ok-card__media:first-child):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;border-radius:inherit;corner-shape:inherit;box-shadow:inset 0 0 0 1px var(--_ring),inset 0 1.5px 0 var(--ok-hi);transition:box-shadow var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:has(>.ok-card__media:first-child):hover,.ok-card:has(.ok-card__link):has(>.ok-card__media:first-child):hover{--_ring: var(--ok-line-2)}}.ok-card--interactive:has(>.ok-card__media:first-child):is(:disabled,[aria-disabled=true]){--_ring: var(--ok-line)}.ok-card:has(>.ok-card__media--start:first-child){container-type:inline-size;min-height:160px;--_mw: calc((100cqi + 2 * var(--_p)) * var(--ok-card-media-share, .4))}@container (min-width: 480px){.ok-card>.ok-card__media--start:first-child{position:absolute;inset-block:0;inset-inline-start:0;width:var(--_mw);height:100%;margin:0;border-radius:0;border-start-start-radius:var(--_r);border-end-start-radius:var(--_r)}.ok-card>.ok-card__media--start:first-child~*{margin-inline-start:var(--_mw)}}
2
+ .ok-card{--_p: var(--ok-s-5);--_r: var(--ok-r-nested, var(--ok-r-4));display:block;min-width:0;margin:0;padding:var(--_p);border:0;border-radius:var(--_r);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-card);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);--ok-avatar-ring: var(--ok-card)}.ok-card--sm{--_p: var(--ok-s-4);--_r: var(--ok-r-nested, calc(20px * var(--ok-rk)))}.ok-card--lg{--_p: var(--ok-s-6);--_r: var(--ok-r-nested, var(--ok-r-5))}.ok-card{--_card-nest: max(calc(4px * var(--ok-rk)), calc(var(--_r) - var(--_p) * var(--ok-rk)))}.ok-card>:not(.ok-card,.ok-panel){--ok-r-nested: var(--_card-nest)}a.ok-card,button.ok-card{width:100%;font:inherit;text-align:start;text-decoration:none}.ok-card--interactive,.ok-card:has(.ok-card__link){position:relative;cursor:pointer;transition:transform var(--ok-spring-dur) var(--ok-spring),box-shadow var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:hover,.ok-card:has(.ok-card__link):hover{box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}}.ok-card--interactive:active,.ok-card:has(.ok-card__link:active){transform:scale(.985);transition-duration:var(--ok-dur-1),var(--ok-dur-2);transition-timing-function:var(--ok-ease-out)}.ok-card--chev{display:flex;align-items:center;gap:var(--ok-s-4)}.ok-card__main{display:block;flex:1;min-width:0}.ok-card__chev{flex:none;color:var(--ok-text-3);transition:transform var(--ok-spring-dur) var(--ok-spring),color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:hover .ok-card__chev,.ok-card:has(.ok-card__link):hover .ok-card__chev{color:var(--ok-text)}}.ok-card--interactive:disabled,.ok-card--interactive[aria-disabled=true]{cursor:not-allowed;opacity:.5;transform:none;box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-card--interactive:disabled .ok-card__chev,.ok-card--interactive[aria-disabled=true] .ok-card__chev{transform:none;color:var(--ok-text-3)}.ok-card__link{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;text-decoration:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ok-card__link:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--_r);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);outline:2px solid transparent;outline-offset:5px}.ok-card__link:focus-visible:after{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-card:has(.ok-card__link) :is(a,button,input,select,textarea,label,summary):not(.ok-card__link):not(.ok-check input,.ok-radio input,.ok-switch input,.ok-filedrop__input):not([inert] *,[aria-hidden=true] *){position:relative;z-index:1}.ok-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ok-s-3);min-width:0}.ok-card__heading{display:grid;gap:2px;min-width:0;flex:1}.ok-card__title{margin:0;font:600 17px/1.35 var(--ok-font);letter-spacing:-.005em;color:var(--ok-text);overflow-wrap:anywhere}.ok-card__desc{margin:0;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-card__actions{display:flex;align-items:center;gap:var(--ok-s-2);flex:none}.ok-card__body{min-width:0;font:450 15px/1.6 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-card__header+.ok-card__body{margin-top:var(--ok-s-3)}.ok-card__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2);margin-top:var(--ok-s-4)}.ok-card__footer[data-align=end]{justify-content:flex-end}.ok-card__footer[data-align=between]{justify-content:space-between}.ok-card>.ok-card__media:first-child{max-width:none;margin:calc(-1 * var(--_p)) calc(-1 * var(--_p)) var(--_p);border-radius:var(--_r) var(--_r) 0 0;corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner)}.ok-card>.ok-card__media:only-child{margin-bottom:calc(-1 * var(--_p));border-radius:var(--_r)}.ok-card>.ok-card__media:not(:first-child){border-radius:var(--_card-nest);margin-block:var(--ok-s-4)}.ok-card>.ok-card__media:not(:first-child):last-child{margin-bottom:0}.ok-card:has(>.ok-card__media:first-child){--_ring: var(--ok-line);position:relative;isolation:isolate}.ok-card.ok-card:has(>.ok-card__media:first-child){box-shadow:none}.ok-card:has(>.ok-card__media:first-child):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;box-shadow:inset 0 0 0 1px var(--_ring),inset 0 1.5px 0 var(--ok-hi);transition:box-shadow var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-card--interactive:has(>.ok-card__media:first-child):hover,.ok-card:has(.ok-card__link):has(>.ok-card__media:first-child):hover{--_ring: var(--ok-line-2)}}.ok-card--interactive:has(>.ok-card__media:first-child):is(:disabled,[aria-disabled=true]){--_ring: var(--ok-line)}.ok-card:has(>.ok-card__media--start:first-child){container-type:inline-size;min-height:160px;--_mw: calc((100cqi + 2 * var(--_p)) * var(--ok-card-media-share, .4))}@container (min-width: 480px){.ok-card>.ok-card__media--start:first-child{position:absolute;inset-block:0;inset-inline-start:0;width:var(--_mw);height:100%;margin:0;border-radius:0;border-start-start-radius:var(--_r);border-end-start-radius:var(--_r)}.ok-card>.ok-card__media--start:first-child~*{margin-inline-start:var(--_mw)}}
package/dist/styles/checkbox.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/checkbox.css · 先引入 base */
2
- .ok-check{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 15px/1.4 var(--ok-font);color:var(--ok-text);cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-check input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}.ok-check__box{position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-line-2);outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-check__box{border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner)}@media (hover: hover){.ok-check:hover .ok-check__box{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}}.ok-check:active .ok-check__box{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1),var(--ok-dur-3);transition-timing-function:var(--ok-ease-out)}.ok-check__box svg{width:16px;height:16px;fill:none;stroke:var(--ok-on-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-check__box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1) var(--ok-ease-in)}.ok-check input:checked+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check input:checked+.ok-check__box path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(50ms * var(--ok-ms))}.ok-check input:focus-visible+.ok-check__box{outline-color:var(--ok-accent);outline-offset:2px}.ok-check{min-width:0;touch-action:manipulation}.ok-check__box svg{grid-area:1 / 1}.ok-check input:checked+.ok-check__box path.ok-check__dash{stroke-dashoffset:1}.ok-check input:indeterminate+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check input:indeterminate+.ok-check__box path.ok-check__tick{stroke-dashoffset:1}.ok-check input:indeterminate+.ok-check__box path.ok-check__dash{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(50ms * var(--ok-ms))}.ok-check[data-invalid] .ok-check__box{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-check__text{display:grid;gap:2px;min-width:0}.ok-check__desc{font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-check:has(input:disabled){cursor:not-allowed;color:var(--ok-text-3)}.ok-check input:disabled{cursor:not-allowed}.ok-check input:disabled+.ok-check__box{transform:none;background:var(--ok-well);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-check input:disabled:checked+.ok-check__box,.ok-check input:disabled:indeterminate+.ok-check__box{opacity:.5;background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check[data-described]{align-items:flex-start}.ok-check[data-described] input{top:0;margin-top:0}@media (pointer: coarse){.ok-check{min-height:44px}.ok-check input{width:100%;height:100%;top:0;margin:0}}[data-touch] .ok-check{min-height:44px}[data-touch] .ok-check input{width:100%;height:100%;top:0;margin:0}.ok-check-group{display:flex;flex-direction:column;gap:var(--ok-s-3);min-width:0}.ok-check-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--ok-s-3) var(--ok-s-5)}
2
+ .ok-check{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 15px/1.4 var(--ok-font);color:var(--ok-text);cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-check input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}.ok-check__box{position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-line-2);outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-check__box{border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner)}@media (hover: hover){.ok-check:hover .ok-check__box{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}}.ok-check:active .ok-check__box{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1),var(--ok-dur-3);transition-timing-function:var(--ok-ease-out)}.ok-check__box svg{width:16px;height:16px;fill:none;stroke:var(--ok-on-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-check__box path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1) var(--ok-ease-in)}.ok-check input:checked+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check input:checked+.ok-check__box path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(50ms * var(--ok-ms))}.ok-check input:focus-visible+.ok-check__box{outline-color:var(--ok-accent);outline-offset:2px}.ok-check{min-width:0;touch-action:manipulation}.ok-check__box svg{grid-area:1 / 1}.ok-check input:checked+.ok-check__box path.ok-check__dash{stroke-dashoffset:1}.ok-check input:indeterminate+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check input:indeterminate+.ok-check__box path.ok-check__tick{stroke-dashoffset:1}.ok-check input:indeterminate+.ok-check__box path.ok-check__dash{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(50ms * var(--ok-ms))}.ok-check[data-invalid] .ok-check__box{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-check__text{display:grid;gap:2px;min-width:0}.ok-check__desc{font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-check:has(input:disabled){cursor:not-allowed;color:var(--ok-text-3)}.ok-check input:disabled{cursor:not-allowed}.ok-check input:disabled+.ok-check__box{transform:none;background:var(--ok-well);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-check input:disabled:checked+.ok-check__box,.ok-check input:disabled:indeterminate+.ok-check__box{opacity:.5;background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-check[data-described]{align-items:flex-start}.ok-check[data-described] input{top:0;margin-top:0}@media (pointer: coarse){.ok-check{min-height:44px}.ok-check input{width:100%;height:100%;top:0;margin:0}}[data-touch] .ok-check{min-height:44px}[data-touch] .ok-check input{width:100%;height:100%;top:0;margin:0}.ok-check-group{display:flex;flex-direction:column;gap:var(--ok-s-3);min-width:0}.ok-check-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--ok-s-3) var(--ok-s-5)}
package/dist/styles/chip.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/chip.css · 先引入 base */
2
- .ok-chips{display:flex;flex-wrap:wrap;gap:8px}.ok-chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-fill);color:var(--ok-text-2);font:600 13px/1 var(--ok-font);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-chip:hover{background:var(--ok-fill-hover);color:var(--ok-text)}}.ok-chip:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1)}.ok-chip__check{display:inline-grid;width:0;margin-right:0;opacity:0;overflow:hidden;transition:width var(--ok-spring-dur) var(--ok-spring),margin var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2)}.ok-chip__check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-chip__check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1)}.ok-chip[aria-pressed=true]{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-chip[aria-pressed=true] .ok-chip__check{width:14px;margin-right:6px;opacity:1}.ok-chip[aria-pressed=true] .ok-chip__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(80ms * var(--ok-ms))}.ok-chip__remove{display:grid;place-items:center;width:18px;height:18px;margin:0 -6px 0 6px;padding:0;border:0;border-radius:50%;corner-shape:round;background:transparent;color:inherit;cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-chip__remove:hover{background:var(--ok-line-2)}}.ok-chip__remove .ok-icon{width:12px;height:12px;stroke-width:2.4}.ok-chip{max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-chip__text{min-width:0;overflow:hidden;text-overflow:ellipsis}.ok-chip .ok-icon{width:14px;height:14px}.ok-chip__lead{display:inline-grid;margin-right:6px}span.ok-chip{cursor:default}@media (hover: hover){span.ok-chip:hover{background:var(--ok-fill);color:var(--ok-text-2)}}span.ok-chip:active{transform:none}.ok-chip:disabled,.ok-chip[aria-disabled=true]{opacity:.42;cursor:not-allowed;transform:none}.ok-chip__remove:disabled{cursor:not-allowed}.ok-chip,.ok-chip__remove{position:relative}@media (pointer: coarse){.ok-chip{height:36px}.ok-chip__remove{width:24px;height:24px}button.ok-chip:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.ok-chip__remove:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}}[data-touch] .ok-chip{height:36px}[data-touch] .ok-chip__remove{width:24px;height:24px}[data-touch] button.ok-chip:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}[data-touch] .ok-chip__remove:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}
2
+ .ok-chips{display:flex;flex-wrap:wrap;gap:8px}.ok-chip{display:inline-flex;align-items:center;height:32px;padding:0 13px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text-2);font:600 13px/1 var(--ok-font);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-chip:hover{background:var(--ok-fill-hover);color:var(--ok-text)}}.ok-chip:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1)}.ok-chip__check{display:inline-grid;width:0;margin-right:0;opacity:0;overflow:hidden;transition:width var(--ok-spring-dur) var(--ok-spring),margin var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2)}.ok-chip__check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-chip__check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1)}.ok-chip[aria-pressed=true]{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-chip[aria-pressed=true] .ok-chip__check{width:14px;margin-right:6px;opacity:1}.ok-chip[aria-pressed=true] .ok-chip__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(80ms * var(--ok-ms))}.ok-chip__remove{display:grid;place-items:center;width:18px;height:18px;margin:0 -6px 0 6px;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:transparent;color:inherit;cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-chip__remove:hover{background:var(--ok-line-2)}}.ok-chip__remove .ok-icon{width:12px;height:12px;stroke-width:2.4}.ok-chip{max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-chip__text{min-width:0;overflow:hidden;text-overflow:ellipsis}.ok-chip .ok-icon{width:14px;height:14px}.ok-chip__lead{display:inline-grid;margin-right:6px}span.ok-chip{cursor:default}@media (hover: hover){span.ok-chip:hover{background:var(--ok-fill);color:var(--ok-text-2)}}span.ok-chip:active{transform:none}.ok-chip:disabled,.ok-chip[aria-disabled=true]{opacity:.42;cursor:not-allowed;transform:none}.ok-chip__remove:disabled{cursor:not-allowed}.ok-chip,.ok-chip__remove{position:relative}@media (pointer: coarse){.ok-chip{height:36px}.ok-chip__remove{width:24px;height:24px}button.ok-chip:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.ok-chip__remove:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}}[data-touch] .ok-chip{height:36px}[data-touch] .ok-chip__remove{width:24px;height:24px}[data-touch] button.ok-chip:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}[data-touch] .ok-chip__remove:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}
package/dist/styles/code.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/code.css · 先引入 base、button */
2
- .ok-code{padding:.12em .4em;border-radius:calc(6px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-fill);font:500 .88em/1.5 var(--ok-font-mono);color:var(--ok-text);overflow-wrap:anywhere}.ok-codeblock{--_r: var(--ok-r-nested, calc(20px * var(--ok-rk)));--_p: var(--ok-s-4);position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--_r);corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text)}.ok-codeblock__head{display:flex;align-items:center;gap:var(--ok-s-2);min-width:0;min-height:calc(var(--ok-h-sm) + 16px);padding:8px 8px 0 var(--_p);font:600 12px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-codeblock__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ok-text)}.ok-codeblock__lang{flex:none;letter-spacing:.04em;text-transform:uppercase}.ok-codeblock__copy{flex:none;margin-left:auto}.ok-codeblock__copy[data-state=copied]{color:var(--ok-success-text)}.ok-codeblock__copy[data-state=failed]{color:var(--ok-danger-text)}.ok-codeblock:not([data-head]) .ok-codeblock__head{position:absolute;z-index:1;top:0;right:0;padding:8px}.ok-codeblock:not([data-head]) .ok-codeblock__copy{background:var(--ok-well)}.ok-codeblock__pre{flex:1;min-width:0;margin:0;padding:var(--_p);border-radius:inherit;corner-shape:inherit;font:500 13px/1.6 var(--ok-font-mono);-moz-tab-size:2;tab-size:2;white-space:pre;-webkit-text-size-adjust:100%}.ok-codeblock[data-head] .ok-codeblock__pre{padding-top:var(--ok-s-2)}.ok-codeblock__pre.ok-scroll:focus-visible{outline-offset:-2px}.ok-codeblock__pre[data-wrap]{white-space:pre-wrap;overflow-wrap:anywhere}.ok-codeblock__pre code{font:inherit}.ok-codeblock{max-width:100%}
2
+ .ok-code{padding:.12em .4em;border-radius:calc(6px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-fill);font:500 .88em/1.5 var(--ok-font-mono);color:var(--ok-text);overflow-wrap:anywhere}.ok-codeblock{--_r: var(--ok-r-nested, calc(20px * var(--ok-rk)));--_p: var(--ok-s-4);position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--_r);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text)}.ok-codeblock__head{display:flex;align-items:center;gap:var(--ok-s-2);min-width:0;min-height:calc(var(--ok-h-sm) + 16px);padding:8px 8px 0 var(--_p);font:600 12px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-codeblock__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ok-text)}.ok-codeblock__lang{flex:none;letter-spacing:.04em;text-transform:uppercase}.ok-codeblock__copy{flex:none;margin-left:auto}.ok-codeblock__copy[data-state=copied]{color:var(--ok-success-text)}.ok-codeblock__copy[data-state=failed]{color:var(--ok-danger-text)}.ok-codeblock:not([data-head]) .ok-codeblock__head{position:absolute;z-index:1;top:0;right:0;padding:8px}.ok-codeblock:not([data-head]) .ok-codeblock__copy{background:var(--ok-well)}.ok-codeblock__pre{flex:1;min-width:0;margin:0;padding:var(--_p);border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;font:500 13px/1.6 var(--ok-font-mono);-moz-tab-size:2;tab-size:2;white-space:pre;-webkit-text-size-adjust:100%}.ok-codeblock[data-head] .ok-codeblock__pre{padding-top:var(--ok-s-2)}.ok-codeblock__pre.ok-scroll:focus-visible{outline-offset:-2px}.ok-codeblock__pre[data-wrap]{white-space:pre-wrap;overflow-wrap:anywhere}.ok-codeblock__pre code{font:inherit}.ok-codeblock{max-width:100%}
package/dist/styles/color-picker.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/color-picker.css · 先引入 base、button、input、color-swatches */
2
- .ok-color-picker{--h: 0;--c: #ff6b8e;--_ring: #fff;--_ring-line: rgb(27 28 34 / .22);display:flex;flex-direction:column;gap:12px;width:240px;max-width:100%;min-width:0}.ok-color-picker__area{--s: 1;--v: 1;position:relative;flex:none;width:100%;aspect-ratio:3 / 2;border-radius:var(--ok-r-nested, var(--ok-r-2));corner-shape:var(--ok-corner);background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,hsl(var(--h) 100% 50%));box-shadow:inset 0 0 0 1px var(--ok-line);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}.ok-color-picker__thumb{position:absolute;left:calc(var(--s) * 100%);top:calc((1 - var(--v)) * 100%);width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid var(--_ring);border-radius:50%;corner-shape:round;background:var(--c);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);pointer-events:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__area[data-active] .ok-color-picker__thumb{transform:scale(1.18)}.ok-color-picker__hue{--tw: 22px;--tk: 12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;flex:none;width:100%;height:var(--tw);margin:0;padding:0;border-radius:var(--ok-r-full);corner-shape:round;background:transparent;cursor:pointer}.ok-color-picker__hue::-webkit-slider-runnable-track{height:var(--tk);border-radius:var(--ok-r-full);corner-shape:round;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center / calc(100% - var(--tw)) 100% no-repeat,red;box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-color-picker__hue::-moz-range-track{height:var(--tk);border-radius:var(--ok-r-full);background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center / calc(100% - var(--tw)) 100% no-repeat,red;box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-color-picker__hue::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:var(--tw);height:var(--tw);margin-top:calc((var(--tk) - var(--tw)) / 2);border:3px solid var(--_ring);border-radius:50%;background:hsl(var(--h) 100% 50%);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__hue::-moz-range-thumb{box-sizing:border-box;width:var(--tw);height:var(--tw);border:3px solid var(--_ring);border-radius:50%;background:hsl(var(--h) 100% 50%);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__hue:active::-webkit-slider-thumb{transform:scale(1.18)}.ok-color-picker__hue:active::-moz-range-thumb{transform:scale(1.18)}@media (pointer: coarse){.ok-color-picker__hue{height:44px;margin-block:-11px}}[data-touch] .ok-color-picker__hue{height:44px;margin-block:-11px}.ok-color-picker__row{display:flex;align-items:center;gap:8px;min-width:0}.ok-color-picker__hex{flex:1 1 auto}.ok-color-picker__hex input{font-family:var(--ok-font-mono);font-variant-numeric:tabular-nums}.ok-color-picker__chip{display:block;flex:none;width:16px;height:16px;margin-left:calc((var(--_ih) - 16px) / 2 - var(--_ipx));border-radius:50%;corner-shape:round;background:var(--c);box-shadow:inset 0 0 0 1px var(--ok-line-2)}.ok-color-picker[data-disabled]{opacity:.5}.ok-color-picker[data-disabled] :is(.ok-input,.ok-swatch,.ok-btn){opacity:1}.ok-color-picker[data-disabled] .ok-color-picker__area,.ok-color-picker__hue:disabled{cursor:not-allowed}@media (hover: hover){.ok-color-picker__area:not([data-active]):not([aria-disabled=true]):hover .ok-color-picker__thumb{transform:scale(1.05)}.ok-color-picker__hue:not(:disabled):not(:active):hover::-webkit-slider-thumb{transform:scale(1.05)}.ok-color-picker__hue:not(:disabled):not(:active):hover::-moz-range-thumb{transform:scale(1.05)}}
2
+ .ok-color-picker{--h: 0;--c: #ff6b8e;--_ring: #fff;--_ring-line: rgb(27 28 34 / .22);display:flex;flex-direction:column;gap:12px;width:240px;max-width:100%;min-width:0}.ok-color-picker__area{--s: 1;--v: 1;position:relative;flex:none;width:100%;aspect-ratio:3 / 2;border-radius:var(--ok-r-nested, var(--ok-r-2));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,hsl(var(--h) 100% 50%));box-shadow:inset 0 0 0 1px var(--ok-line);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}.ok-color-picker__thumb{position:absolute;left:calc(var(--s) * 100%);top:calc((1 - var(--v)) * 100%);width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid var(--_ring);border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--c);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);pointer-events:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__area[data-active] .ok-color-picker__thumb{transform:scale(1.18)}.ok-color-picker__hue{--tw: 22px;--tk: 12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;flex:none;width:100%;height:var(--tw);margin:0;padding:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:transparent;cursor:pointer}.ok-color-picker__hue::-webkit-slider-runnable-track{height:var(--tk);border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center / calc(100% - var(--tw)) 100% no-repeat,red;box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-color-picker__hue::-moz-range-track{height:var(--tk);border-radius:var(--ok-r-full);background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red) center / calc(100% - var(--tw)) 100% no-repeat,red;box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-color-picker__hue::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:var(--tw);height:var(--tw);margin-top:calc((var(--tk) - var(--tw)) / 2);border:3px solid var(--_ring);border-radius:50%;background:hsl(var(--h) 100% 50%);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__hue::-moz-range-thumb{box-sizing:border-box;width:var(--tw);height:var(--tw);border:3px solid var(--_ring);border-radius:50%;background:hsl(var(--h) 100% 50%);box-shadow:0 0 0 1px var(--_ring-line),inset 0 0 0 1px var(--_ring-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-color-picker__hue:active::-webkit-slider-thumb{transform:scale(1.18)}.ok-color-picker__hue:active::-moz-range-thumb{transform:scale(1.18)}@media (pointer: coarse){.ok-color-picker__hue{height:44px;margin-block:-11px}}[data-touch] .ok-color-picker__hue{height:44px;margin-block:-11px}.ok-color-picker__row{display:flex;align-items:center;gap:8px;min-width:0}.ok-color-picker__hex{flex:1 1 auto}.ok-color-picker__hex input{font-family:var(--ok-font-mono);font-variant-numeric:tabular-nums}.ok-color-picker__chip{display:block;flex:none;width:16px;height:16px;margin-left:calc((var(--_ih) - 16px) / 2 - var(--_ipx));border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--c);box-shadow:inset 0 0 0 1px var(--ok-line-2)}.ok-color-picker[data-disabled]{opacity:.5}.ok-color-picker[data-disabled] :is(.ok-input,.ok-swatch,.ok-btn){opacity:1}.ok-color-picker[data-disabled] .ok-color-picker__area,.ok-color-picker__hue:disabled{cursor:not-allowed}@media (hover: hover){.ok-color-picker__area:not([data-active]):not([aria-disabled=true]):hover .ok-color-picker__thumb{transform:scale(1.05)}.ok-color-picker__hue:not(:disabled):not(:active):hover::-webkit-slider-thumb{transform:scale(1.05)}.ok-color-picker__hue:not(:disabled):not(:active):hover::-moz-range-thumb{transform:scale(1.05)}}
package/dist/styles/color-swatches.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/color-swatches.css · 先引入 base */
2
- .ok-swatches{display:inline-flex;align-items:center;gap:10px}.ok-swatch{--c: var(--ok-accent);position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-swatch:after{content:"";width:10px;height:10px;border-radius:50%;corner-shape:round;background:#fff;transform:scale(0);transition:transform var(--ok-dur-1) var(--ok-ease-in)}.ok-swatch:active{transform:scale(.88);transition-duration:var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-swatch[aria-checked=true]:after{transform:scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-swatches--sm{gap:8px}.ok-swatches--sm .ok-swatch{width:22px;height:22px}.ok-swatches--sm .ok-swatch:after{width:8px;height:8px}.ok-swatches{flex-wrap:wrap}.ok-swatch{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-swatch:disabled{opacity:.42;cursor:not-allowed;transform:none}.ok-swatches--lg .ok-swatch{width:38px;height:38px}.ok-swatches--lg .ok-swatch:after{width:12px;height:12px}.ok-swatch{--ok-swatch-hit: -7px}.ok-swatches--sm .ok-swatch{--ok-swatch-hit: -11px}.ok-swatches--lg .ok-swatch{--ok-swatch-hit: -3px}@media (pointer: coarse){.ok-swatch:before{content:"";position:absolute;inset:var(--ok-swatch-hit)}.ok-swatches{gap:14px}.ok-swatches--sm{gap:22px}}[data-touch] .ok-swatch:before{content:"";position:absolute;inset:var(--ok-swatch-hit)}[data-touch] .ok-swatches{gap:14px}[data-touch] .ok-swatches--sm{gap:22px}@media (hover: hover){.ok-swatch:hover{transform:scale(1.14)}}
2
+ .ok-swatches{display:inline-flex;align-items:center;gap:10px}.ok-swatch{--c: var(--ok-accent);position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-swatch:after{content:"";width:10px;height:10px;border-radius:50%;corner-shape:round;--ok-shape: round;background:#fff;transform:scale(0);transition:transform var(--ok-dur-1) var(--ok-ease-in)}.ok-swatch:active{transform:scale(.88);transition-duration:var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-swatch[aria-checked=true]:after{transform:scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-swatches--sm{gap:8px}.ok-swatches--sm .ok-swatch{width:22px;height:22px}.ok-swatches--sm .ok-swatch:after{width:8px;height:8px}.ok-swatches{flex-wrap:wrap}.ok-swatch{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-swatch:disabled{opacity:.42;cursor:not-allowed;transform:none}.ok-swatches--lg .ok-swatch{width:38px;height:38px}.ok-swatches--lg .ok-swatch:after{width:12px;height:12px}.ok-swatch{--ok-swatch-hit: -7px}.ok-swatches--sm .ok-swatch{--ok-swatch-hit: -11px}.ok-swatches--lg .ok-swatch{--ok-swatch-hit: -3px}@media (pointer: coarse){.ok-swatch:before{content:"";position:absolute;inset:var(--ok-swatch-hit)}.ok-swatches{gap:14px}.ok-swatches--sm{gap:22px}}[data-touch] .ok-swatch:before{content:"";position:absolute;inset:var(--ok-swatch-hit)}[data-touch] .ok-swatches{gap:14px}[data-touch] .ok-swatches--sm{gap:22px}@media (hover: hover){.ok-swatch:hover{transform:scale(1.14)}}
package/dist/styles/command-palette.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/command-palette.css · 先引入 base、button、floating-card、kbd */
2
- .ok-float[data-placement=top]:not([data-stretch])>.ok-float__card.ok-cmdk{--_drop: clamp(0px, 10vh, 96px);width:min(var(--ok-cmdk-width, 560px),100%);margin-top:var(--_drop);max-height:min(calc(100% - var(--_drop)),520px);overflow:hidden;--_fr: var(--ok-r-4);border-radius:var(--_fr);--_pad: var(--ok-s-3)}@media (max-width: 519px){.ok-float[data-placement=top]:not([data-stretch])>.ok-float__card.ok-cmdk{--_drop: 0px}}.ok-cmdk__search{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--ok-s-5);box-shadow:inset 0 -1px 0 var(--ok-line)}.ok-cmdk__search-icon{color:var(--ok-text-3);transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-cmdk__search:focus-within .ok-cmdk__search-icon{color:var(--ok-accent-text)}.ok-cmdk__input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--ok-text);font:500 16px/1.4 var(--ok-font);caret-color:var(--ok-accent)}.ok-cmdk__input::placeholder{color:var(--ok-text-3)}.ok-cmdk__esc{flex:none;color:var(--ok-text-2)}@media (pointer: coarse){.ok-cmdk__esc{display:none}}.ok-cmdk__list{position:relative;flex:1 1 auto;min-height:0;padding:var(--_pad);overscroll-behavior:contain;scroll-padding:var(--_pad)}.ok-cmdk__list[hidden]{display:none}.ok-cmdk__hl{position:absolute;left:var(--_pad);right:var(--_pad);top:0;height:max(var(--ok-h-md),var(--ok-h-item));border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-hover);opacity:0;pointer-events:none;transform:translateY(var(--y, 0));transition:transform var(--ok-dur-1) var(--ok-ease-out),opacity var(--ok-dur-1) var(--ok-ease-out),height var(--ok-dur-1) var(--ok-ease-out)}.ok-cmdk__list[data-hl]>.ok-cmdk__hl{opacity:1}.ok-cmdk__group+.ok-cmdk__group{margin-top:var(--ok-s-2)}.ok-cmdk__group-label{padding:8px 10px 6px;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3)}.ok-cmdk__item{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:max(var(--ok-h-md),var(--ok-h-item));padding:6px 10px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);font:500 14px/1.3 var(--ok-font);color:var(--ok-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-cmdk__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed}.ok-cmdk__item-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--ok-text-2)}.ok-cmdk__item-icon .ok-icon{width:18px;height:18px}.ok-cmdk__item[aria-disabled=true] .ok-cmdk__item-icon{color:inherit}.ok-cmdk__item-text{flex:1;display:flex;align-items:baseline;gap:10px;min-width:0}.ok-cmdk__item-label{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-cmdk__item-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ok-text-2)}.ok-cmdk__item-keys{flex:none;display:inline-flex;gap:4px;margin-left:auto}.ok-cmdk__empty:not([data-empty]){display:contents}.ok-cmdk__empty[data-empty]{padding:var(--ok-s-8) var(--ok-s-5);text-align:center;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2)}.ok-cmdk__footer{flex:none;display:flex;align-items:center;gap:var(--ok-s-4);min-width:0;padding:var(--ok-s-3) var(--ok-s-5);box-shadow:inset 0 1px 0 var(--ok-line);font:500 12px/1.3 var(--ok-font);color:var(--ok-text-2)}
2
+ .ok-float[data-placement=top]:not([data-stretch])>.ok-float__card.ok-cmdk{--_drop: clamp(0px, 10vh, 96px);width:min(var(--ok-cmdk-width, 560px),100%);margin-top:var(--_drop);max-height:min(calc(100% - var(--_drop)),520px);overflow:hidden;--_fr: var(--ok-r-4);border-radius:var(--_fr);--_pad: var(--ok-s-3)}@media (max-width: 519px){.ok-float[data-placement=top]:not([data-stretch])>.ok-float__card.ok-cmdk{--_drop: 0px}}.ok-cmdk__search{flex:none;display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--ok-s-5);box-shadow:inset 0 -1px 0 var(--ok-line)}.ok-cmdk__search-icon{color:var(--ok-text-3);transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-cmdk__search:focus-within .ok-cmdk__search-icon{color:var(--ok-accent-text)}.ok-cmdk__input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--ok-text);font:500 16px/1.4 var(--ok-font);caret-color:var(--ok-accent)}.ok-cmdk__input::placeholder{color:var(--ok-text-3)}.ok-cmdk__esc{flex:none;color:var(--ok-text-2)}@media (pointer: coarse){.ok-cmdk__esc{display:none}}.ok-cmdk__list{position:relative;flex:1 1 auto;min-height:0;padding:var(--_pad);overscroll-behavior:contain;scroll-padding:var(--_pad)}.ok-cmdk__list[hidden]{display:none}.ok-cmdk__hl{position:absolute;left:var(--_pad);right:var(--_pad);top:0;height:max(var(--ok-h-md),var(--ok-h-item));border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-hover);opacity:0;pointer-events:none;transform:translateY(var(--y, 0));transition:transform var(--ok-dur-1) var(--ok-ease-out),opacity var(--ok-dur-1) var(--ok-ease-out),height var(--ok-dur-1) var(--ok-ease-out)}.ok-cmdk__list[data-hl]>.ok-cmdk__hl{opacity:1}.ok-cmdk__group+.ok-cmdk__group{margin-top:var(--ok-s-2)}.ok-cmdk__group-label{padding:8px 10px 6px;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3)}.ok-cmdk__item{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:max(var(--ok-h-md),var(--ok-h-item));padding:6px 10px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);font:500 14px/1.3 var(--ok-font);color:var(--ok-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-cmdk__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed}.ok-cmdk__item-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--ok-text-2)}.ok-cmdk__item-icon .ok-icon{width:18px;height:18px}.ok-cmdk__item[aria-disabled=true] .ok-cmdk__item-icon{color:inherit}.ok-cmdk__item-text{flex:1;display:flex;align-items:baseline;gap:10px;min-width:0}.ok-cmdk__item-label{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-cmdk__item-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ok-text-2)}.ok-cmdk__item-keys{flex:none;display:inline-flex;gap:4px;margin-left:auto}.ok-cmdk__empty:not([data-empty]){display:contents}.ok-cmdk__empty[data-empty]{padding:var(--ok-s-8) var(--ok-s-5);text-align:center;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2)}.ok-cmdk__footer{flex:none;display:flex;align-items:center;gap:var(--ok-s-4);min-width:0;padding:var(--ok-s-3) var(--ok-s-5);box-shadow:inset 0 1px 0 var(--ok-line);font:500 12px/1.3 var(--ok-font);color:var(--ok-text-2)}
package/dist/styles/count.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/count.css · 先引入 base、roll */
2
- .ok-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-accent);color:var(--ok-on-accent);font:700 12px/1 var(--ok-font);font-variant-numeric:tabular-nums;vertical-align:middle}.ok-count[data-tone=danger]{background:var(--ok-danger);color:#1b1c22}.ok-count[data-tone=neutral]{background:var(--ok-inverse);color:var(--ok-on-inverse)}.ok-count.is-bump{animation:ok-bump var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}
2
+ .ok-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-accent);color:var(--ok-on-accent);font:700 12px/1 var(--ok-font);font-variant-numeric:tabular-nums;vertical-align:middle}.ok-count[data-tone=danger]{background:var(--ok-danger);color:#1b1c22}.ok-count[data-tone=neutral]{background:var(--ok-inverse);color:var(--ok-on-inverse)}.ok-count.is-bump{animation:ok-bump var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}
package/dist/styles/dialog.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/dialog.css · 先引入 base、button、floating-card */
2
- .ok-float__card.ok-dialog__panel{display:flex;flex-direction:column;gap:var(--ok-s-3);padding:var(--ok-s-6)}.ok-float__card.ok-dialog__panel>*,.ok-dialog__form>*{flex:none}.ok-float__card.ok-dialog__panel:has(.ok-dialog__body){overflow:hidden}.ok-dialog__form{display:contents}.ok-dialog__head{display:flex;align-items:center;gap:12px;min-width:0}.ok-dialog__panel--center{text-align:center}.ok-dialog__panel--center .ok-dialog__head{justify-content:center}.ok-dialog__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-dialog__icon--neutral{background:var(--ok-fill);color:var(--ok-text)}.ok-dialog__icon--success{background:var(--ok-success-soft);color:var(--ok-success-text)}.ok-dialog__icon--warning{background:var(--ok-warning-soft);color:var(--ok-warning-text)}.ok-dialog__icon--danger{background:var(--ok-danger-soft);color:var(--ok-danger-text)}.ok-dialog__icon--info{background:var(--ok-info-soft);color:var(--ok-info-text)}.ok-dialog__title{flex:1;min-width:0;margin:0;font:700 var(--ok-fs-h3)/1.3 var(--ok-font-display);letter-spacing:-.01em;overflow-wrap:anywhere}.ok-dialog__panel--center .ok-dialog__title{flex:0 1 auto}.ok-dialog__close{flex:none;align-self:flex-start;margin:-3px -6px -3px 0;color:var(--ok-text-2)}.ok-dialog__desc{margin:0;font:450 15px/1.6 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-float__card.ok-dialog__panel .ok-dialog__body{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;margin:-4px calc(var(--ok-s-6) * -1);padding:4px var(--ok-s-6)}.ok-dialog__actions{display:flex;gap:10px;margin-top:var(--ok-s-3);min-width:0}.ok-dialog__actions>*{flex:1;min-width:0}.ok-float__card.ok-dialog__panel:focus-visible{outline:none}
2
+ .ok-float__card.ok-dialog__panel{display:flex;flex-direction:column;gap:var(--ok-s-3);padding:var(--ok-s-6)}.ok-float__card.ok-dialog__panel>*,.ok-dialog__form>*{flex:none}.ok-float__card.ok-dialog__panel:has(.ok-dialog__body){overflow:hidden}.ok-dialog__form{display:contents}.ok-dialog__head{display:flex;align-items:center;gap:12px;min-width:0}.ok-dialog__panel--center{text-align:center}.ok-dialog__panel--center .ok-dialog__head{justify-content:center}.ok-dialog__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-dialog__icon--neutral{background:var(--ok-fill);color:var(--ok-text)}.ok-dialog__icon--success{background:var(--ok-success-soft);color:var(--ok-success-text)}.ok-dialog__icon--warning{background:var(--ok-warning-soft);color:var(--ok-warning-text)}.ok-dialog__icon--danger{background:var(--ok-danger-soft);color:var(--ok-danger-text)}.ok-dialog__icon--info{background:var(--ok-info-soft);color:var(--ok-info-text)}.ok-dialog__title{flex:1;min-width:0;margin:0;font:700 var(--ok-fs-h3)/1.3 var(--ok-font-display);letter-spacing:-.01em;overflow-wrap:anywhere}.ok-dialog__panel--center .ok-dialog__title{flex:0 1 auto}.ok-dialog__close{flex:none;align-self:flex-start;margin:-3px -6px -3px 0;color:var(--ok-text-2)}.ok-dialog__desc{margin:0;font:450 15px/1.6 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-float__card.ok-dialog__panel .ok-dialog__body{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;margin:-4px calc(var(--ok-s-6) * -1);padding:4px var(--ok-s-6)}.ok-dialog__actions{display:flex;gap:10px;margin-top:var(--ok-s-3);min-width:0}.ok-dialog__actions>*{flex:1;min-width:0}.ok-float__card.ok-dialog__panel:focus-visible{outline:none}
package/dist/styles/empty-state.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/empty-state.css · 先引入 base */
2
- .ok-empty{--_m: 56px;display:flex;flex-direction:column;align-items:center;gap:var(--ok-s-2);min-width:0;padding:var(--ok-s-8) var(--ok-s-5);text-align:center;color:var(--ok-text-2)}.ok-empty--sm{--_m: 44px;padding:var(--ok-s-5) var(--ok-s-4)}.ok-empty--lg{--_m: 72px;padding:var(--ok-s-12) var(--ok-s-6);gap:var(--ok-s-3)}.ok-empty__media{display:grid;place-items:center;min-width:var(--_m);min-height:var(--_m);margin-bottom:var(--ok-s-2);border-radius:50%;corner-shape:round;background:var(--ok-fill);color:var(--ok-text-2)}.ok-empty__media>.ok-icon{width:calc(var(--_m) * .43);height:calc(var(--_m) * .43)}.ok-empty__media:has(>:is(img,svg:not(.ok-icon))){border-radius:0;background:none}.ok-empty__media>:is(img,svg:not(.ok-icon)){max-width:100%;height:auto}.ok-empty__title{margin:0;font:600 17px/1.35 var(--ok-font);letter-spacing:-.005em;color:var(--ok-text);overflow-wrap:anywhere}.ok-empty--sm .ok-empty__title{font-size:15px}.ok-empty--lg .ok-empty__title{font:600 var(--ok-fs-h3)/1.35 var(--ok-font);letter-spacing:-.01em}.ok-empty__desc{margin:0;max-width:44ch;font:450 14px/1.55 var(--ok-font);overflow-wrap:anywhere}.ok-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ok-s-2);margin-top:var(--ok-s-3)}
2
+ .ok-empty{--_m: 56px;display:flex;flex-direction:column;align-items:center;gap:var(--ok-s-2);min-width:0;padding:var(--ok-s-8) var(--ok-s-5);text-align:center;color:var(--ok-text-2)}.ok-empty--sm{--_m: 44px;padding:var(--ok-s-5) var(--ok-s-4)}.ok-empty--lg{--_m: 72px;padding:var(--ok-s-12) var(--ok-s-6);gap:var(--ok-s-3)}.ok-empty__media{display:grid;place-items:center;min-width:var(--_m);min-height:var(--_m);margin-bottom:var(--ok-s-2);border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text-2)}.ok-empty__media>.ok-icon{width:calc(var(--_m) * .43);height:calc(var(--_m) * .43)}.ok-empty__media:has(>:is(img,svg:not(.ok-icon))){border-radius:0;background:none}.ok-empty__media>:is(img,svg:not(.ok-icon)){max-width:100%;height:auto}.ok-empty__title{margin:0;font:600 17px/1.35 var(--ok-font);letter-spacing:-.005em;color:var(--ok-text);overflow-wrap:anywhere}.ok-empty--sm .ok-empty__title{font-size:15px}.ok-empty--lg .ok-empty__title{font:600 var(--ok-fs-h3)/1.35 var(--ok-font);letter-spacing:-.01em}.ok-empty__desc{margin:0;max-width:44ch;font:450 14px/1.55 var(--ok-font);overflow-wrap:anywhere}.ok-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ok-s-2);margin-top:var(--ok-s-3)}
package/dist/styles/file-drop.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/file-drop.css · 先引入 base */
2
- .ok-filedrop{position:relative;display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-filedrop__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.ok-filedrop__input::file-selector-button{cursor:pointer}.ok-filedrop__body{display:grid;justify-items:center;gap:6px;padding:var(--ok-s-6);text-align:center;border-radius:var(--ok-r-4);corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px transparent;outline:2px solid transparent;outline-offset:5px;font:500 13px/1.4 var(--ok-font);transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-filedrop__icon{width:28px;height:28px;color:var(--ok-text-3);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}.ok-filedrop__title{font:600 15px/1.3 var(--ok-font);color:var(--ok-text)}.ok-filedrop__hint{color:var(--ok-text-2)}.ok-filedrop__status{color:var(--ok-text);font-weight:600;overflow-wrap:anywhere}.ok-filedrop__status:empty{display:none}@media (hover: hover){.ok-filedrop:hover .ok-filedrop__body{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}.ok-filedrop__input:focus-visible+.ok-filedrop__body{outline-color:var(--ok-accent);outline-offset:2px}.ok-filedrop[data-dragging] .ok-filedrop__body{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent);transform:scale(1.01)}.ok-filedrop[data-dragging] .ok-filedrop__icon{color:var(--ok-accent-text);transform:translateY(-3px) scale(1.1)}.ok-filedrop[data-invalid] .ok-filedrop__body{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-filedrop[data-disabled],.ok-filedrop[data-disabled] .ok-filedrop__input{cursor:not-allowed}.ok-filedrop[data-disabled] .ok-filedrop__body{opacity:.5;background:var(--ok-well)}
2
+ .ok-filedrop{position:relative;display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-filedrop__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.ok-filedrop__input::file-selector-button{cursor:pointer}.ok-filedrop__body{display:grid;justify-items:center;gap:6px;padding:var(--ok-s-6);text-align:center;border-radius:var(--ok-r-4);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px transparent;outline:2px solid transparent;outline-offset:5px;font:500 13px/1.4 var(--ok-font);transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-filedrop__icon{width:28px;height:28px;color:var(--ok-text-3);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}.ok-filedrop__title{font:600 15px/1.3 var(--ok-font);color:var(--ok-text)}.ok-filedrop__hint{color:var(--ok-text-2)}.ok-filedrop__status{color:var(--ok-text);font-weight:600;overflow-wrap:anywhere}.ok-filedrop__status:empty{display:none}@media (hover: hover){.ok-filedrop:hover .ok-filedrop__body{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}.ok-filedrop__input:focus-visible+.ok-filedrop__body{outline-color:var(--ok-accent);outline-offset:2px}.ok-filedrop[data-dragging] .ok-filedrop__body{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent);transform:scale(1.01)}.ok-filedrop[data-dragging] .ok-filedrop__icon{color:var(--ok-accent-text);transform:translateY(-3px) scale(1.1)}.ok-filedrop[data-invalid] .ok-filedrop__body{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-filedrop[data-disabled],.ok-filedrop[data-disabled] .ok-filedrop__input{cursor:not-allowed}.ok-filedrop[data-disabled] .ok-filedrop__body{opacity:.5;background:var(--ok-well)}
package/dist/styles/fill-meter.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/fill-meter.css · 先引入 base */
2
- .ok-meter{--v: .5;position:relative;isolation:isolate;overflow:hidden;flex:none;width:190px;height:var(--ok-h-md);border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-well);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-meter__fill{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--ok-accent-tint);transform-origin:0 50%;transform:scaleX(var(--v));transition:transform var(--ok-spring-dur) var(--ok-spring),background-color var(--ok-dur-3)}.ok-meter__value{position:absolute;inset:0 auto 0 16px;display:flex;align-items:center;font:600 15px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-meter.is-active{transform:scale(1.03,1.08)}.ok-meter.is-active .ok-meter__fill{background:var(--ok-accent-tint-2)}.ok-meter.is-tracking .ok-meter__fill{transition:background-color var(--ok-dur-3)}:where(.ok-meter){outline:2px solid transparent;outline-offset:5px;-webkit-tap-highlight-color:transparent}:where(.ok-meter):focus-visible{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out),outline-color var(--ok-dur-2)}
2
+ .ok-meter{--v: .5;position:relative;isolation:isolate;overflow:hidden;flex:none;width:190px;height:var(--ok-h-md);border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-meter__fill{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--ok-accent-tint);transform-origin:0 50%;transform:scaleX(var(--v));transition:transform var(--ok-spring-dur) var(--ok-spring),background-color var(--ok-dur-3)}.ok-meter__value{position:absolute;inset:0 auto 0 16px;display:flex;align-items:center;font:600 15px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-meter.is-active{transform:scale(1.03,1.08)}.ok-meter.is-active .ok-meter__fill{background:var(--ok-accent-tint-2)}.ok-meter.is-tracking .ok-meter__fill{transition:background-color var(--ok-dur-3)}:where(.ok-meter){outline:2px solid transparent;outline-offset:5px;-webkit-tap-highlight-color:transparent}:where(.ok-meter):focus-visible{outline-color:var(--ok-accent);outline-offset:2px;transition:outline-offset var(--ok-dur-3) var(--ok-ease-out),outline-color var(--ok-dur-2)}
package/dist/styles/floating-card.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/floating-card.css · 先引入 base、button */
2
- .ok-float{--_gap: var(--ok-float-gap, 12px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;padding:max(var(--_gap),env(safe-area-inset-top,0px)) max(var(--_gap),env(safe-area-inset-right,0px)) max(var(--_gap),env(safe-area-inset-bottom,0px)) max(var(--_gap),env(safe-area-inset-left,0px));pointer-events:none;overflow:hidden}.ok-float--contained{position:absolute;z-index:5}@media (max-width: 519px){.ok-float{--_gap: var(--ok-float-gap, 8px)}}.ok-float__scrim{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background-color var(--ok-float-out-dur) var(--ok-float-out-ease),opacity var(--ok-float-out-dur) var(--ok-float-out-ease),backdrop-filter var(--ok-float-out-dur) var(--ok-float-out-ease),-webkit-backdrop-filter var(--ok-float-out-dur) var(--ok-float-out-ease)}.ok-float[data-state=open]>.ok-float__scrim{background:var(--ok-scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color var(--ok-float-out-dur) var(--ok-ease-out),opacity var(--ok-float-out-dur) var(--ok-ease-out),backdrop-filter var(--ok-float-out-dur) var(--ok-ease-out),-webkit-backdrop-filter var(--ok-float-out-dur) var(--ok-ease-out)}.ok-float__card{position:relative;pointer-events:auto;display:flex;flex-direction:column;min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:var(--_fr);corner-shape:var(--ok-corner);background:var(--ok-surface);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi);outline:none;opacity:0;transform:var(--_from);transition:opacity var(--ok-float-out-dur) var(--ok-float-out-ease),transform var(--ok-float-out-dur) var(--ok-float-out-ease)}.ok-float[data-state=open]>.ok-float__card{opacity:1;transform:none;transition:opacity var(--ok-float-fade-dur) var(--ok-ease-out),transform var(--ok-float-in-dur) var(--ok-float-in-ease)}.ok-float[data-placement=center]{place-items:center}.ok-float[data-placement=center]>.ok-float__card{--_from: scale(.92);width:min(var(--ok-float-size, 400px),100%)}.ok-float[data-placement=left]{justify-items:start}.ok-float[data-placement=right]{justify-items:end}.ok-float:is([data-placement=left],[data-placement=right])>.ok-float__card{width:min(var(--ok-float-size, 360px),100%)}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch]){align-items:center}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch])[data-align=start]{align-items:start}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch])[data-align=end]{align-items:end}.ok-float[data-placement=left]>.ok-float__card{--_from: translateX(calc(-100% - var(--_gap)))}.ok-float[data-placement=right]>.ok-float__card{--_from: translateX(calc(100% + var(--_gap)))}.ok-float[data-placement=top]{align-items:start}.ok-float[data-placement=bottom]{align-items:end}.ok-float:is([data-placement=top],[data-placement=bottom])>.ok-float__card{height:var(--ok-float-size, auto);width:100%}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch]){justify-items:center}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])>.ok-float__card{width:min(560px,100%)}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])[data-align=start]{justify-items:start}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])[data-align=end]{justify-items:end}.ok-float[data-size=auto]:is([data-placement=center],[data-placement=left],[data-placement=right])>.ok-float__card{width:auto}.ok-float[data-size=auto]:is([data-placement=top],[data-placement=bottom])>.ok-float__card{height:auto}.ok-float[data-placement=top]>.ok-float__card{--_from: translateY(calc(-100% - var(--_gap)))}.ok-float[data-placement=bottom]>.ok-float__card{--_from: translateY(calc(100% + var(--_gap)))}.ok-float[data-zoom]>.ok-float__card{--_from: scale(.6);transform-origin:var(--_ox, 50%) var(--_oy, 50%)}@media (max-width: 519.98px){.ok-float[data-placement],.ok-float[data-placement]:not([data-stretch])[data-align]{justify-items:center}.ok-float[data-placement]>.ok-float__card,.ok-float[data-placement]:not([data-stretch])>.ok-float__card,.ok-float[data-placement][data-size=auto]>.ok-float__card{width:100%}.ok-float[data-placement=left]:not([data-zoom])>.ok-float__card{--_from: translateX(-32%)}.ok-float[data-placement=right]:not([data-zoom])>.ok-float__card{--_from: translateX(32%)}.ok-float[data-placement=top]:not([data-zoom])>.ok-float__card{--_from: translateY(-32%)}.ok-float[data-placement=bottom]:not([data-zoom])>.ok-float__card{--_from: translateY(32%)}}.ok-float__card[data-draggable] [data-ok-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.ok-float__card[data-dragging]{-webkit-user-select:none;user-select:none}.ok-float__grip{flex:none;display:grid;place-items:center;height:24px;padding-top:3px}.ok-float__grip>span{width:36px;height:5px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-line-2);transition:background-color var(--ok-dur-2) var(--ok-ease-out),width var(--ok-spring-dur) var(--ok-spring)}.ok-float__card[data-draggable] .ok-float__grip{cursor:grab}.ok-float__card[data-dragging] .ok-float__grip{cursor:grabbing}.ok-float__card[data-dragging] .ok-float__grip>span{width:44px;background:var(--ok-text-3)}@media (hover: hover){.ok-float__card[data-draggable] .ok-float__grip:hover>span{background:var(--ok-text-3)}}.ok-float__card{--_pad: var(--ok-float-pad, var(--ok-s-6))}.ok-float__card{--_fr: var(--ok-r-5);--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--_fr) - var(--_pad) * var(--ok-rk)))}.ok-float__header{flex:none;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding:var(--_pad) var(--_pad) 0}.ok-float__header:last-child{padding-bottom:var(--_pad)}.ok-float__heading{flex:1;display:grid;gap:var(--ok-s-1);min-width:0;align-self:center}.ok-float__title{margin:0;font:700 var(--ok-fs-h3)/1.3 var(--ok-font-display);letter-spacing:-.01em;overflow-wrap:anywhere}.ok-float__desc{margin:0;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-float__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-float__close{flex:none;margin:-3px -6px -3px 0;color:var(--ok-text-2)}.ok-float__card:has(>.ok-float__body){overflow:hidden}.ok-float__body{flex:1 1 auto;min-width:0;min-height:0;padding:var(--ok-s-3) var(--_pad);overflow:auto;overscroll-behavior:contain}.ok-float__body:first-child{padding-top:var(--_pad)}.ok-float__body:last-child{padding-bottom:var(--_pad)}.ok-float__body--flush,.ok-float__body--flush:first-child,.ok-float__body--flush:last-child{padding:0}.ok-float__header+.ok-float__body--flush{margin-top:var(--ok-s-3)}.ok-float__footer{flex:none;margin-top:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;min-width:0;padding:var(--ok-s-3) var(--_pad) var(--_pad)}.ok-float__footer:first-child{padding-top:var(--_pad)}.ok-float__footer[data-align=start]{justify-content:flex-start}.ok-float__footer[data-align=between]{justify-content:space-between}.ok-float__footer[data-align=stretch]>*{flex:1}.ok-float__grip+.ok-float__header,.ok-float__grip+.ok-float__body,.ok-float__grip+.ok-float__footer{padding-top:var(--ok-s-2)}.ok-panel-float .ok-float__title{font:600 17px/1.35 var(--ok-font)}.ok-float__card[data-swipe]{touch-action:pan-y}.ok-float__close--auto{position:absolute;z-index:2;top:var(--ok-s-3);right:var(--ok-s-3);margin:0}
2
+ .ok-float{--_gap: var(--ok-float-gap, 12px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;padding:max(var(--_gap),env(safe-area-inset-top,0px)) max(var(--_gap),env(safe-area-inset-right,0px)) max(var(--_gap),env(safe-area-inset-bottom,0px)) max(var(--_gap),env(safe-area-inset-left,0px));pointer-events:none;overflow:hidden}.ok-float--contained{position:absolute;z-index:5}@media (max-width: 519px){.ok-float{--_gap: var(--ok-float-gap, 8px)}}.ok-float__scrim{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background-color var(--ok-float-out-dur) var(--ok-float-out-ease),opacity var(--ok-float-out-dur) var(--ok-float-out-ease),backdrop-filter var(--ok-float-out-dur) var(--ok-float-out-ease),-webkit-backdrop-filter var(--ok-float-out-dur) var(--ok-float-out-ease)}.ok-float[data-state=open]>.ok-float__scrim{background:var(--ok-scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color var(--ok-float-out-dur) var(--ok-ease-out),opacity var(--ok-float-out-dur) var(--ok-ease-out),backdrop-filter var(--ok-float-out-dur) var(--ok-ease-out),-webkit-backdrop-filter var(--ok-float-out-dur) var(--ok-ease-out)}.ok-float__card{position:relative;pointer-events:auto;display:flex;flex-direction:column;min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:var(--_fr);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-surface);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi);outline:none;opacity:0;transform:var(--_from);transition:opacity var(--ok-float-out-dur) var(--ok-float-out-ease),transform var(--ok-float-out-dur) var(--ok-float-out-ease)}.ok-float[data-state=open]>.ok-float__card{opacity:1;transform:none;transition:opacity var(--ok-float-fade-dur) var(--ok-ease-out),transform var(--ok-float-in-dur) var(--ok-float-in-ease)}.ok-float[data-placement=center]{place-items:center}.ok-float[data-placement=center]>.ok-float__card{--_from: scale(.92);width:min(var(--ok-float-size, 400px),100%)}.ok-float[data-placement=left]{justify-items:start}.ok-float[data-placement=right]{justify-items:end}.ok-float:is([data-placement=left],[data-placement=right])>.ok-float__card{width:min(var(--ok-float-size, 360px),100%)}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch]){align-items:center}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch])[data-align=start]{align-items:start}.ok-float:is([data-placement=left],[data-placement=right]):not([data-stretch])[data-align=end]{align-items:end}.ok-float[data-placement=left]>.ok-float__card{--_from: translateX(calc(-100% - var(--_gap)))}.ok-float[data-placement=right]>.ok-float__card{--_from: translateX(calc(100% + var(--_gap)))}.ok-float[data-placement=top]{align-items:start}.ok-float[data-placement=bottom]{align-items:end}.ok-float:is([data-placement=top],[data-placement=bottom])>.ok-float__card{height:var(--ok-float-size, auto);width:100%}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch]){justify-items:center}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])>.ok-float__card{width:min(560px,100%)}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])[data-align=start]{justify-items:start}.ok-float:is([data-placement=top],[data-placement=bottom]):not([data-stretch])[data-align=end]{justify-items:end}.ok-float[data-size=auto]:is([data-placement=center],[data-placement=left],[data-placement=right])>.ok-float__card{width:auto}.ok-float[data-size=auto]:is([data-placement=top],[data-placement=bottom])>.ok-float__card{height:auto}.ok-float[data-placement=top]>.ok-float__card{--_from: translateY(calc(-100% - var(--_gap)))}.ok-float[data-placement=bottom]>.ok-float__card{--_from: translateY(calc(100% + var(--_gap)))}.ok-float[data-zoom]>.ok-float__card{--_from: scale(.6);transform-origin:var(--_ox, 50%) var(--_oy, 50%)}@media (max-width: 519.98px){.ok-float[data-placement],.ok-float[data-placement]:not([data-stretch])[data-align]{justify-items:center}.ok-float[data-placement]>.ok-float__card,.ok-float[data-placement]:not([data-stretch])>.ok-float__card,.ok-float[data-placement][data-size=auto]>.ok-float__card{width:100%}.ok-float[data-placement=left]:not([data-zoom])>.ok-float__card{--_from: translateX(-32%)}.ok-float[data-placement=right]:not([data-zoom])>.ok-float__card{--_from: translateX(32%)}.ok-float[data-placement=top]:not([data-zoom])>.ok-float__card{--_from: translateY(-32%)}.ok-float[data-placement=bottom]:not([data-zoom])>.ok-float__card{--_from: translateY(32%)}}.ok-float__card[data-draggable] [data-ok-drag-handle]{touch-action:none;-webkit-user-select:none;user-select:none}.ok-float__card[data-dragging]{-webkit-user-select:none;user-select:none}.ok-float__grip{flex:none;display:grid;place-items:center;height:24px;padding-top:3px}.ok-float__grip>span{width:36px;height:5px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-line-2);transition:background-color var(--ok-dur-2) var(--ok-ease-out),width var(--ok-spring-dur) var(--ok-spring)}.ok-float__card[data-draggable] .ok-float__grip{cursor:grab}.ok-float__card[data-dragging] .ok-float__grip{cursor:grabbing}.ok-float__card[data-dragging] .ok-float__grip>span{width:44px;background:var(--ok-text-3)}@media (hover: hover){.ok-float__card[data-draggable] .ok-float__grip:hover>span{background:var(--ok-text-3)}}.ok-float__card{--_pad: var(--ok-float-pad, var(--ok-s-6))}.ok-float__card{--_fr: var(--ok-r-5);--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--_fr) - var(--_pad) * var(--ok-rk)))}.ok-float__header{flex:none;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding:var(--_pad) var(--_pad) 0}.ok-float__header:last-child{padding-bottom:var(--_pad)}.ok-float__heading{flex:1;display:grid;gap:var(--ok-s-1);min-width:0;align-self:center}.ok-float__title{margin:0;font:700 var(--ok-fs-h3)/1.3 var(--ok-font-display);letter-spacing:-.01em;overflow-wrap:anywhere}.ok-float__desc{margin:0;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-float__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-float__close{flex:none;margin:-3px -6px -3px 0;color:var(--ok-text-2)}.ok-float__card:has(>.ok-float__body){overflow:hidden}.ok-float__body{flex:1 1 auto;min-width:0;min-height:0;padding:var(--ok-s-3) var(--_pad);overflow:auto;overscroll-behavior:contain}.ok-float__body:first-child{padding-top:var(--_pad)}.ok-float__body:last-child{padding-bottom:var(--_pad)}.ok-float__body--flush,.ok-float__body--flush:first-child,.ok-float__body--flush:last-child{padding:0}.ok-float__header+.ok-float__body--flush{margin-top:var(--ok-s-3)}.ok-float__footer{flex:none;margin-top:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;min-width:0;padding:var(--ok-s-3) var(--_pad) var(--_pad)}.ok-float__footer:first-child{padding-top:var(--_pad)}.ok-float__footer[data-align=start]{justify-content:flex-start}.ok-float__footer[data-align=between]{justify-content:space-between}.ok-float__footer[data-align=stretch]>*{flex:1}.ok-float__grip+.ok-float__header,.ok-float__grip+.ok-float__body,.ok-float__grip+.ok-float__footer{padding-top:var(--ok-s-2)}.ok-panel-float .ok-float__title{font:600 17px/1.35 var(--ok-font)}.ok-float__card[data-swipe]{touch-action:pan-y}.ok-float__close--auto{position:absolute;z-index:2;top:var(--ok-s-3);right:var(--ok-s-3);margin:0}
package/dist/styles/group.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/group.css · 先引入 base */
2
- .ok-group{--_inset: var(--ok-s-5);--_row: var(--ok-s-3);display:block;min-width:0;margin:0;padding-inline:0;list-style:none;padding-block:calc(var(--_inset) - var(--_row));border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);background:var(--ok-card);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ok-s-4);min-width:0;min-height:56px;padding:var(--_row, var(--ok-s-3)) var(--_inset, var(--ok-s-5));font:500 16px/1.3 var(--ok-font);color:var(--ok-text);transition:min-height var(--ok-spring-soft-dur) var(--ok-spring-soft),padding var(--ok-spring-soft-dur) var(--ok-spring-soft)}a.ok-row,button.ok-row{width:100%;margin:0;border:0;background:none;text-align:start;text-decoration:none}.ok-row+.ok-row,.ok-row.has-divider{border-top:1px solid var(--ok-line)}.ok-row__leading{display:grid;place-items:center;flex:none;color:var(--ok-text-2)}.ok-row__text{display:grid;gap:2px;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}.ok-row__desc{font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-row__value{flex:0 1 auto;min-width:0;margin-left:auto;font:450 15px/1.3 var(--ok-font);color:var(--ok-text-2);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-row--stack{flex-direction:column;align-items:stretch;gap:var(--ok-s-3)}.ok-row__control{display:flex;align-items:center;justify-content:flex-end;gap:var(--ok-s-2);min-width:0}.ok-row__control>.ok-slider{min-width:0}.ok-row--fill>.ok-row__text,.ok-row:not(.ok-row--stack):has(>.ok-slider)>.ok-row__text{flex:0 1 auto}.ok-row--fill>.ok-row__control,.ok-row:not(.ok-row--stack)>.ok-slider{flex:1 1 0;min-width:var(--ok-row-control-min, 50%)}.ok-row--fixed>.ok-row__control{flex:0 1 var(--_cw);min-width:min(var(--_cw),var(--ok-row-control-min, 50%))}.ok-row--stack>.ok-row__control{justify-content:flex-start}.ok-row.ok-row--wrap{flex-wrap:wrap;row-gap:var(--ok-s-3)}.ok-row.ok-row--wrap>.ok-row__text{flex:1 1 auto}.ok-row.ok-row--wrap>:is(.ok-row__control,.ok-slider){flex:1 1 var(--ok-row-wrap-at, 12rem);min-width:0}.ok-row--link{cursor:pointer;border-radius:inherit;corner-shape:inherit}.ok-row--link.ok-focusable:focus-visible{outline-offset:-3px}.ok-row--link .ok-row__chev{flex:none;color:var(--ok-text-3);transition:transform var(--ok-spring-dur) var(--ok-spring),color var(--ok-dur-2)}.ok-row--link .ok-row__value+.ok-row__chev{margin-left:calc(var(--ok-s-2) - var(--ok-s-4))}@media (hover: hover){.ok-row--link:hover .ok-row__chev{color:var(--ok-text)}}.ok-row--link:disabled,.ok-row--link[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ok-row--link:disabled .ok-row__chev,.ok-row--link[aria-disabled=true] .ok-row__chev{transform:none;color:var(--ok-text-3)}.ok-group--compact{--_inset: var(--ok-s-4);--_row: var(--ok-s-2)}.ok-group--compact .ok-row{min-height:48px}.ok-collapse{display:grid;grid-template-rows:1fr;min-width:0;transition:grid-template-rows var(--ok-spring-soft-dur) var(--ok-spring-soft),opacity var(--ok-dur-3) var(--ok-ease-out)}.ok-collapse>*{min-height:0;overflow:hidden}.ok-collapse.is-collapsed,.ok-collapse[data-state=closed]{grid-template-rows:0fr;opacity:0;pointer-events:none}
2
+ .ok-group{--_inset: var(--ok-s-5);--_row: var(--ok-s-3);display:block;min-width:0;margin:0;padding-inline:0;list-style:none;padding-block:calc(var(--_inset) - var(--_row));border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-card);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ok-s-4);min-width:0;min-height:56px;padding:var(--_row, var(--ok-s-3)) var(--_inset, var(--ok-s-5));font:500 16px/1.3 var(--ok-font);color:var(--ok-text);transition:min-height var(--ok-spring-soft-dur) var(--ok-spring-soft),padding var(--ok-spring-soft-dur) var(--ok-spring-soft)}a.ok-row,button.ok-row{width:100%;margin:0;border:0;background:none;text-align:start;text-decoration:none}.ok-row+.ok-row,.ok-row.has-divider{border-top:1px solid var(--ok-line)}.ok-row__leading{display:grid;place-items:center;flex:none;color:var(--ok-text-2)}.ok-row__text{display:grid;gap:2px;min-width:0;flex:1 1 auto;overflow-wrap:anywhere}.ok-row__desc{font:450 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-row__value{flex:0 1 auto;min-width:0;margin-left:auto;font:450 15px/1.3 var(--ok-font);color:var(--ok-text-2);text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-row--stack{flex-direction:column;align-items:stretch;gap:var(--ok-s-3)}.ok-row__control{display:flex;align-items:center;justify-content:flex-end;gap:var(--ok-s-2);min-width:0}.ok-row__control>.ok-slider{min-width:0}.ok-row--fill>.ok-row__text,.ok-row:not(.ok-row--stack):has(>.ok-slider)>.ok-row__text{flex:0 1 auto}.ok-row--fill>.ok-row__control,.ok-row:not(.ok-row--stack)>.ok-slider{flex:1 1 0;min-width:var(--ok-row-control-min, 50%)}.ok-row--fixed>.ok-row__control{flex:0 1 var(--_cw);min-width:min(var(--_cw),var(--ok-row-control-min, 50%))}.ok-row--stack>.ok-row__control{justify-content:flex-start}.ok-row.ok-row--wrap{flex-wrap:wrap;row-gap:var(--ok-s-3)}.ok-row.ok-row--wrap>.ok-row__text{flex:1 1 auto}.ok-row.ok-row--wrap>:is(.ok-row__control,.ok-slider){flex:1 1 var(--ok-row-wrap-at, 12rem);min-width:0}.ok-row--link{cursor:pointer;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit}.ok-row--link.ok-focusable:focus-visible{outline-offset:-3px}.ok-row--link .ok-row__chev{flex:none;color:var(--ok-text-3);transition:transform var(--ok-spring-dur) var(--ok-spring),color var(--ok-dur-2)}.ok-row--link .ok-row__value+.ok-row__chev{margin-left:calc(var(--ok-s-2) - var(--ok-s-4))}@media (hover: hover){.ok-row--link:hover .ok-row__chev{color:var(--ok-text)}}.ok-row--link:disabled,.ok-row--link[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ok-row--link:disabled .ok-row__chev,.ok-row--link[aria-disabled=true] .ok-row__chev{transform:none;color:var(--ok-text-3)}.ok-group--compact{--_inset: var(--ok-s-4);--_row: var(--ok-s-2)}.ok-group--compact .ok-row{min-height:48px}.ok-collapse{display:grid;grid-template-rows:1fr;min-width:0;transition:grid-template-rows var(--ok-spring-soft-dur) var(--ok-spring-soft),opacity var(--ok-dur-3) var(--ok-ease-out)}.ok-collapse>*{min-height:0;overflow:hidden}.ok-collapse.is-collapsed,.ok-collapse[data-state=closed]{grid-template-rows:0fr;opacity:0;pointer-events:none}
package/dist/styles/hotkey.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/hotkey.css · 先引入 base、kbd */
2
- .ok-hotkey{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:180px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-raised);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line);font:600 14px/1 var(--ok-font);cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow var(--ok-dur-3) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-hotkey:active{transform:scale(.97);transition-duration:var(--ok-dur-3),var(--ok-dur-1)}.ok-hotkey__hint{color:var(--ok-text-3);font-weight:500}.ok-hotkey.is-recording{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 4px var(--ok-accent-soft);animation:ok-breathe 1.6s var(--ok-ease-in-out) infinite}.ok-hotkey.is-recording,.ok-hotkey.is-pointer{outline-color:transparent}.ok-hotkey.is-recording .ok-hotkey__hint{color:var(--ok-accent-text)}.ok-hotkey{max-width:100%}.ok-hotkey[data-recording]{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 4px var(--ok-accent-soft);animation:ok-breathe 1.6s var(--ok-ease-in-out) infinite}.ok-hotkey[data-recording],.ok-hotkey[data-pointer]{outline-color:transparent}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) :is(.ok-hotkey.is-recording,.ok-hotkey[data-recording]){animation:none}}:root[data-motion=reduced] :is(.ok-hotkey.is-recording,.ok-hotkey[data-recording]){animation:none}.ok-hotkey[data-recording] .ok-hotkey__hint{color:var(--ok-accent-text)}.ok-hotkey[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}.ok-hotkey--sm{height:var(--ok-h-sm);min-width:140px;font-size:13px}.ok-hotkey--lg{height:var(--ok-h-lg)}
2
+ .ok-hotkey{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:180px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-raised);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line);font:600 14px/1 var(--ok-font);cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow var(--ok-dur-3) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-hotkey:active{transform:scale(.97);transition-duration:var(--ok-dur-3),var(--ok-dur-1)}.ok-hotkey__hint{color:var(--ok-text-3);font-weight:500}.ok-hotkey.is-recording{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 4px var(--ok-accent-soft);animation:ok-breathe 1.6s var(--ok-ease-in-out) infinite}.ok-hotkey.is-recording,.ok-hotkey.is-pointer{outline-color:transparent}.ok-hotkey.is-recording .ok-hotkey__hint{color:var(--ok-accent-text)}.ok-hotkey{max-width:100%}.ok-hotkey[data-recording]{box-shadow:inset 0 0 0 1.5px var(--ok-accent),0 0 0 4px var(--ok-accent-soft);animation:ok-breathe 1.6s var(--ok-ease-in-out) infinite}.ok-hotkey[data-recording],.ok-hotkey[data-pointer]{outline-color:transparent}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) :is(.ok-hotkey.is-recording,.ok-hotkey[data-recording]){animation:none}}:root[data-motion=reduced] :is(.ok-hotkey.is-recording,.ok-hotkey[data-recording]){animation:none}.ok-hotkey[data-recording] .ok-hotkey__hint{color:var(--ok-accent-text)}.ok-hotkey[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}.ok-hotkey--sm{height:var(--ok-h-sm);min-width:140px;font-size:13px}.ok-hotkey--lg{height:var(--ok-h-lg)}
package/dist/styles/image.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/image.css · 先引入 base */
2
- .ok-image{--_ir: var(--ok-r-nested, var(--ok-r-3));position:relative;display:block;min-width:0;max-width:100%;overflow:hidden;isolation:isolate;border-radius:var(--_ir);corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3)}.ok-image[data-radius="0"]{--_ir: 0px}.ok-image[data-radius="1"]{--_ir: var(--ok-r-1)}.ok-image[data-radius="2"]{--_ir: var(--ok-r-2)}.ok-image[data-radius="4"]{--_ir: var(--ok-r-4)}.ok-image[data-radius="5"]{--_ir: var(--ok-r-5)}.ok-image[data-radius="6"]{--_ir: var(--ok-r-6)}.ok-image[data-radius=full]{--_ir: var(--ok-r-full);corner-shape:round}.ok-image:not([data-ratio]):is([data-status=loading],[data-status=error],[data-status=empty]){min-height:96px}.ok-image__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--ok-dur-3) var(--ok-ease-out)}.ok-image[data-fit=contain] .ok-image__img{object-fit:contain}.ok-image[data-status=loaded] .ok-image__img{opacity:1}.ok-image[data-ratio]>:is(.ok-image__img,.ok-image__content){position:absolute;top:0;right:0;bottom:0;left:0}.ok-image[data-status=loading][data-placeholder=skeleton]{background:linear-gradient(100deg,var(--ok-well) 30%,var(--ok-well-hi) 50%,var(--ok-well) 70%) 0 0 / 300% 100%;animation:ok-shimmer 1.6s linear infinite}.ok-image__fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--ok-text-3)}.ok-image__icon{width:clamp(20px,18%,40px);height:auto;aspect-ratio:1}.ok-image__content{display:block;width:100%;height:100%}.ok-image__content>:is(svg,img,canvas,video){display:block;width:100%;height:100%}.ok-image[data-fit=cover] .ok-image__content>:is(img,video){object-fit:cover}.ok-image[data-fit=contain] .ok-image__content>:is(img,video){object-fit:contain}.ok-image__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:block}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-image[data-status=loading]{animation:none}}:root[data-motion=reduced] .ok-image[data-status=loading]{animation:none}
2
+ .ok-image{--_ir: var(--ok-r-nested, var(--ok-r-3));position:relative;display:block;min-width:0;max-width:100%;overflow:hidden;isolation:isolate;border-radius:var(--_ir);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3)}.ok-image[data-radius="0"]{--_ir: 0px}.ok-image[data-radius="1"]{--_ir: var(--ok-r-1)}.ok-image[data-radius="2"]{--_ir: var(--ok-r-2)}.ok-image[data-radius="4"]{--_ir: var(--ok-r-4)}.ok-image[data-radius="5"]{--_ir: var(--ok-r-5)}.ok-image[data-radius="6"]{--_ir: var(--ok-r-6)}.ok-image[data-radius=full]{--_ir: var(--ok-r-full);corner-shape:round;--ok-shape: round}.ok-image:not([data-ratio]):is([data-status=loading],[data-status=error],[data-status=empty]){min-height:96px}.ok-image__img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--ok-dur-3) var(--ok-ease-out)}.ok-image[data-fit=contain] .ok-image__img{object-fit:contain}.ok-image[data-status=loaded] .ok-image__img{opacity:1}.ok-image[data-ratio]>:is(.ok-image__img,.ok-image__content){position:absolute;top:0;right:0;bottom:0;left:0}.ok-image[data-status=loading][data-placeholder=skeleton]{background:linear-gradient(100deg,var(--ok-well) 30%,var(--ok-well-hi) 50%,var(--ok-well) 70%) 0 0 / 300% 100%;animation:ok-shimmer 1.6s linear infinite}.ok-image__fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--ok-text-3)}.ok-image__icon{width:clamp(20px,18%,40px);height:auto;aspect-ratio:1}.ok-image__content{display:block;width:100%;height:100%}.ok-image__content>:is(svg,img,canvas,video){display:block;width:100%;height:100%}.ok-image[data-fit=cover] .ok-image__content>:is(img,video){object-fit:cover}.ok-image[data-fit=contain] .ok-image__content>:is(img,video){object-fit:contain}.ok-image__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:block}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-image[data-status=loading]{animation:none}}:root[data-motion=reduced] .ok-image[data-status=loading]{animation:none}
package/dist/styles/input.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/input.css · 先引入 base */
2
- .ok-input{display:flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3);box-shadow:inset 0 0 0 1.5px transparent;cursor:text;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-2)}@media (hover: hover){.ok-input:hover{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-input:hover:not(:focus-within){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-input:focus-within{background:var(--ok-raised);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-input input{all:unset;flex:1;min-width:0;height:100%;font:500 15px/1 var(--ok-font);color:var(--ok-text)}.ok-input input::placeholder{color:var(--ok-text-3)}.ok-input input::-webkit-search-cancel-button{display:none}.ok-input--pill{border-radius:var(--ok-r-full);corner-shape:round;padding:0 16px}.ok-input--lg{height:var(--ok-h-lg);padding:0 18px;gap:10px}.ok-input--lg input{font-size:16px}.ok-input__icon{width:18px;height:18px;flex:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}.ok-input:focus-within .ok-input__icon{color:var(--ok-accent-text);transform:scale(1.1)}.ok-input__clear{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;corner-shape:round;background:var(--ok-text-3);color:var(--ok-raised);cursor:pointer;opacity:0;transform:scale(0) rotate(-90deg);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear .ok-icon{width:12px;height:12px;stroke-width:2.4}@media (hover: hover){.ok-input__clear:hover{background:var(--ok-text-2)}}.ok-input.has-value .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input{min-width:0}.ok-input[data-has-value] .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear:disabled{pointer-events:none}.ok-input--sm{height:var(--ok-h-sm);padding:0 12px;gap:6px;border-radius:calc(11px * var(--ok-rk))}.ok-input--sm input{font-size:13px}.ok-input--sm.ok-input--pill{border-radius:var(--ok-r-full)}.ok-input--inline{display:inline-flex;vertical-align:middle}.ok-input__affix{display:inline-flex;align-items:center;flex:none;gap:6px;font:500 14px/1 var(--ok-font);color:inherit;white-space:nowrap}.ok-input__affix .ok-icon{width:18px;height:18px}.ok-input__toggle{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-right:-6px;padding:0;border:0;border-radius:50%;corner-shape:round;background:transparent;color:var(--ok-text-2);cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out)}.ok-input__toggle .ok-icon{width:18px;height:18px}.ok-input{--_ih: var(--ok-h-md);--_ipx: 14px}.ok-input--pill{--_ipx: 16px}.ok-input--lg{--_ih: var(--ok-h-lg);--_ipx: 18px}.ok-input--sm{--_ih: var(--ok-h-sm);--_ipx: 12px}.ok-input>.ok-input__clear:last-child{margin-right:calc((var(--_ih) - 20px) / 2 - var(--_ipx))}.ok-input>.ok-input__toggle:last-child{margin-right:calc((var(--_ih) - 28px) / 2 - var(--_ipx))}@media (hover: hover){.ok-input__toggle:hover{background:var(--ok-hover);color:var(--ok-text)}}.ok-input[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-input[data-disabled]{opacity:.5;cursor:not-allowed}.ok-input[data-disabled] input{cursor:not-allowed}@media (hover: hover){.ok-input[data-disabled]:hover{background:var(--ok-well)}}@media (pointer: coarse){.ok-input--sm input{font-size:16px}}[data-touch] .ok-input--sm input{font-size:16px}
2
+ .ok-input{display:flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 14px;border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text-3);box-shadow:inset 0 0 0 1.5px transparent;cursor:text;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-2)}@media (hover: hover){.ok-input:hover{background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-input:hover:not(:focus-within){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-input:focus-within{background:var(--ok-raised);color:var(--ok-text-2);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-input input{all:unset;flex:1;min-width:0;height:100%;font:500 15px/1 var(--ok-font);color:var(--ok-text)}.ok-input input::placeholder{color:var(--ok-text-3)}.ok-input input::-webkit-search-cancel-button{display:none}.ok-input--pill{border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;padding:0 16px}.ok-input--lg{height:var(--ok-h-lg);padding:0 18px;gap:10px}.ok-input--lg input{font-size:16px}.ok-input__icon{width:18px;height:18px;flex:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),color var(--ok-dur-2)}.ok-input:focus-within .ok-input__icon{color:var(--ok-accent-text);transform:scale(1.1)}.ok-input__clear{display:grid;place-items:center;flex:none;width:20px;height:20px;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-text-3);color:var(--ok-raised);cursor:pointer;opacity:0;transform:scale(0) rotate(-90deg);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear .ok-icon{width:12px;height:12px;stroke-width:2.4}@media (hover: hover){.ok-input__clear:hover{background:var(--ok-text-2)}}.ok-input.has-value .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input{min-width:0}.ok-input[data-has-value] .ok-input__clear{opacity:1;transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2),background-color var(--ok-dur-2)}.ok-input__clear:disabled{pointer-events:none}.ok-input--sm{height:var(--ok-h-sm);padding:0 12px;gap:6px;border-radius:calc(11px * var(--ok-rk))}.ok-input--sm input{font-size:13px}.ok-input--sm.ok-input--pill{border-radius:var(--ok-r-full)}.ok-input--inline{display:inline-flex;vertical-align:middle}.ok-input__affix{display:inline-flex;align-items:center;flex:none;gap:6px;font:500 14px/1 var(--ok-font);color:inherit;white-space:nowrap}.ok-input__affix .ok-icon{width:18px;height:18px}.ok-input__toggle{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-right:-6px;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:transparent;color:var(--ok-text-2);cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out)}.ok-input__toggle .ok-icon{width:18px;height:18px}.ok-input{--_ih: var(--ok-h-md);--_ipx: 14px}.ok-input--pill{--_ipx: 16px}.ok-input--lg{--_ih: var(--ok-h-lg);--_ipx: 18px}.ok-input--sm{--_ih: var(--ok-h-sm);--_ipx: 12px}.ok-input>.ok-input__clear:last-child{margin-right:calc((var(--_ih) - 20px) / 2 - var(--_ipx))}.ok-input>.ok-input__toggle:last-child{margin-right:calc((var(--_ih) - 28px) / 2 - var(--_ipx))}@media (hover: hover){.ok-input__toggle:hover{background:var(--ok-hover);color:var(--ok-text)}}.ok-input[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-input[data-disabled]{opacity:.5;cursor:not-allowed}.ok-input[data-disabled] input{cursor:not-allowed}@media (hover: hover){.ok-input[data-disabled]:hover{background:var(--ok-well)}}@media (pointer: coarse){.ok-input--sm input{font-size:16px}}[data-touch] .ok-input--sm input{font-size:16px}
package/dist/styles/kbd.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/kbd.css · 先引入 base */
2
- .ok-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 -1.5px 0 var(--ok-line-2);font:600 13px/1 var(--ok-font)}.ok-kbd--sm{min-width:20px;height:20px;padding:0 5px;font-size:11px}.ok-kbd--lg{min-width:28px;height:28px;padding:0 9px;font-size:14px}
2
+ .ok-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-well);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 -1.5px 0 var(--ok-line-2);font:600 13px/1 var(--ok-font)}.ok-kbd--sm{min-width:20px;height:20px;padding:0 5px;font-size:11px}.ok-kbd--lg{min-width:28px;height:28px;padding:0 9px;font-size:14px}
package/dist/styles/list.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/list.css · 先引入 base */
2
- .ok-list{--_gap: var(--ok-s-3);display:grid;min-width:0;margin:0;padding:0;list-style:none;counter-reset:ok-list;font:450 15px/1.5 var(--ok-font);color:var(--ok-text)}.ok-list--sm{--_gap: var(--ok-s-2);font-size:14px}.ok-list--lg{--_gap: var(--ok-s-4)}.ok-list__item{display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-block:calc(var(--_gap) / 2);counter-increment:ok-list}.ok-list[data-divided]>.ok-list__item{padding-block:var(--_gap)}.ok-list[data-divided]>.ok-list__item+.ok-list__item{border-top:1px solid var(--ok-line)}.ok-list>.ok-list__item:first-child{padding-top:0}.ok-list>.ok-list__item:last-child{padding-bottom:0}.ok-list__content{display:grid;gap:2px;flex:1;min-width:0;overflow-wrap:anywhere}.ok-list__title{font-weight:600;color:var(--ok-text)}.ok-list__desc{font:450 13px/1.45 var(--ok-font);color:var(--ok-text-2)}.ok-list__leading{display:grid;place-items:center;flex:none;min-height:1.5em;color:var(--ok-text-2)}.ok-list__trailing{display:flex;align-items:center;gap:var(--ok-s-2);flex:none;min-height:1.5em;font:450 13px/1.45 var(--ok-font);color:var(--ok-text-2)}.ok-list[data-marker=bullet]>.ok-list__item:before{content:"";flex:none;width:6px;height:6px;margin:calc(.75em - 3px) 3px 0;border-radius:50%;corner-shape:round;background:var(--ok-text-3)}.ok-list[data-marker=number]>.ok-list__item:before{content:counter(ok-list) ".";flex:none;min-width:1.5em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ok-text-2)}
2
+ .ok-list{--_gap: var(--ok-s-3);display:grid;min-width:0;margin:0;padding:0;list-style:none;counter-reset:ok-list;font:450 15px/1.5 var(--ok-font);color:var(--ok-text)}.ok-list--sm{--_gap: var(--ok-s-2);font-size:14px}.ok-list--lg{--_gap: var(--ok-s-4)}.ok-list__item{display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-block:calc(var(--_gap) / 2);counter-increment:ok-list}.ok-list[data-divided]>.ok-list__item{padding-block:var(--_gap)}.ok-list[data-divided]>.ok-list__item+.ok-list__item{border-top:1px solid var(--ok-line)}.ok-list>.ok-list__item:first-child{padding-top:0}.ok-list>.ok-list__item:last-child{padding-bottom:0}.ok-list__content{display:grid;gap:2px;flex:1;min-width:0;overflow-wrap:anywhere}.ok-list__title{font-weight:600;color:var(--ok-text)}.ok-list__desc{font:450 13px/1.45 var(--ok-font);color:var(--ok-text-2)}.ok-list__leading{display:grid;place-items:center;flex:none;min-height:1.5em;color:var(--ok-text-2)}.ok-list__trailing{display:flex;align-items:center;gap:var(--ok-s-2);flex:none;min-height:1.5em;font:450 13px/1.45 var(--ok-font);color:var(--ok-text-2)}.ok-list[data-marker=bullet]>.ok-list__item:before{content:"";flex:none;width:6px;height:6px;margin:calc(.75em - 3px) 3px 0;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-text-3)}.ok-list[data-marker=number]>.ok-list__item:before{content:counter(ok-list) ".";flex:none;min-width:1.5em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ok-text-2)}