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/styles/menu.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/menu.css · 先引入 base、popup */
2
- .ok-popup--menu{--ok-popup-cap-h: 560px;width:max-content}.ok-menu{position:relative;flex:1 1 auto;min-width:0;min-height:0;padding:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;outline:none}.ok-menu[hidden]{display:none}.ok-menu--static{width:max-content;max-width:100%;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-pop);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-menu__hl{position:absolute;left:6px;right:6px;top:0;height: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),background-color var(--ok-dur-1) var(--ok-ease-out)}.ok-menu[data-hl]>.ok-menu__hl{opacity:1}.ok-menu__hl[data-tone=success]{background:var(--ok-success-soft)}.ok-menu__hl[data-tone=warning]{background:var(--ok-warning-soft)}.ok-menu__hl[data-tone=danger]{background:var(--ok-danger-soft)}.ok-menu__hl[data-tone=info]{background:var(--ok-info-soft)}.ok-menu__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ok-h-item);padding:0 10px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:none;font:500 14px/1 var(--ok-font);color:var(--ok-text);text-align:left;white-space:nowrap;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.ok-menu__item:focus-visible{outline-color:var(--ok-accent)}.ok-menu__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed}.ok-menu__item[aria-disabled=true] .ok-icon{color:var(--ok-text-3)}.ok-menu__label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.ok-menu__item[aria-selected=true],.ok-menu[data-measuring] .ok-menu__item{font-weight:600}.ok-menu__item .ok-icon{width:17px;height:17px;color:var(--ok-text-2)}.ok-menu__item--success,.ok-menu__item--success .ok-icon{color:var(--ok-success-text)}.ok-menu__item--warning,.ok-menu__item--warning .ok-icon{color:var(--ok-warning-text)}.ok-menu__item--danger,.ok-menu__item--danger .ok-icon{color:var(--ok-danger-text)}.ok-menu__item--info,.ok-menu__item--info .ok-icon{color:var(--ok-info-text)}.ok-menu__meta{margin-left:auto;padding-left:20px;font:500 12px/1 var(--ok-font);color:var(--ok-text-3)}.ok-menu__check{flex:none;width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--ok-text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-menu__meta+.ok-menu__check{margin-left:10px}.ok-menu__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-menu__item[aria-selected=true] .ok-menu__check path,.ok-menu__item[aria-checked=true] .ok-menu__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out)}.ok-menu[data-check=instant] .ok-menu__item .ok-menu__check path{transition:none}.ok-menu__item .ok-menu__chevron{width:14px;height:14px;margin-left:auto;color:var(--ok-text-3)}.ok-menu__meta+.ok-menu__chevron{margin-left:10px}.ok-menu__sep{height:1px;margin:6px 10px;background:var(--ok-line)}.ok-menu__heading{padding:8px 10px 4px;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3);white-space:nowrap}.ok-menu__empty{padding:14px 16px;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2);text-align:center}.ok-menu__empty+.ok-menu:not([hidden]){padding-top:0}.ok-context-area{-webkit-touch-callout:none}.ok-menu:has(.ok-menu__item[data-icon]) .ok-menu__item:not([data-icon]){padding-left:37px}
2
+ .ok-popup--menu{--ok-popup-cap-h: 560px;width:max-content}.ok-menu{position:relative;flex:1 1 auto;min-width:0;min-height:0;padding:6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;outline:none}.ok-menu[hidden]{display:none}.ok-menu--static{width:max-content;max-width:100%;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-pop);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}.ok-menu__hl{position:absolute;left:6px;right:6px;top:0;height: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),background-color var(--ok-dur-1) var(--ok-ease-out)}.ok-menu[data-hl]>.ok-menu__hl{opacity:1}.ok-menu__hl[data-tone=success]{background:var(--ok-success-soft)}.ok-menu__hl[data-tone=warning]{background:var(--ok-warning-soft)}.ok-menu__hl[data-tone=danger]{background:var(--ok-danger-soft)}.ok-menu__hl[data-tone=info]{background:var(--ok-info-soft)}.ok-menu__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ok-h-item);padding:0 10px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:500 14px/1 var(--ok-font);color:var(--ok-text);text-align:left;white-space:nowrap;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.ok-menu__item:focus-visible{outline-color:var(--ok-accent)}.ok-menu__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed}.ok-menu__item[aria-disabled=true] .ok-icon{color:var(--ok-text-3)}.ok-menu__label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.ok-menu__item[aria-selected=true],.ok-menu[data-measuring] .ok-menu__item{font-weight:600}.ok-menu__item .ok-icon{width:17px;height:17px;color:var(--ok-text-2)}.ok-menu__item--success,.ok-menu__item--success .ok-icon{color:var(--ok-success-text)}.ok-menu__item--warning,.ok-menu__item--warning .ok-icon{color:var(--ok-warning-text)}.ok-menu__item--danger,.ok-menu__item--danger .ok-icon{color:var(--ok-danger-text)}.ok-menu__item--info,.ok-menu__item--info .ok-icon{color:var(--ok-info-text)}.ok-menu__meta{margin-left:auto;padding-left:20px;font:500 12px/1 var(--ok-font);color:var(--ok-text-3)}.ok-menu__check{flex:none;width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--ok-text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-menu__meta+.ok-menu__check{margin-left:10px}.ok-menu__check path{stroke-dasharray:1;stroke-dashoffset:1}.ok-menu__item[aria-selected=true] .ok-menu__check path,.ok-menu__item[aria-checked=true] .ok-menu__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out)}.ok-menu[data-check=instant] .ok-menu__item .ok-menu__check path{transition:none}.ok-menu__item .ok-menu__chevron{width:14px;height:14px;margin-left:auto;color:var(--ok-text-3)}.ok-menu__meta+.ok-menu__chevron{margin-left:10px}.ok-menu__sep{height:1px;margin:6px 10px;background:var(--ok-line)}.ok-menu__heading{padding:8px 10px 4px;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3);white-space:nowrap}.ok-menu__empty{padding:14px 16px;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2);text-align:center}.ok-menu__empty+.ok-menu:not([hidden]){padding-top:0}.ok-context-area{-webkit-touch-callout:none}.ok-menu:has(.ok-menu__item[data-icon]) .ok-menu__item:not([data-icon]){padding-left:37px}
package/dist/styles/nav.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/nav.css · 先引入 base */
2
- .ok-nav{position:relative;isolation:isolate;display:grid;gap:2px;min-width:0}.ok-nav__pill{position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--h, var(--ok-h-item));transform:translateY(var(--y, 0));border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);opacity:0;pointer-events:none;transition:transform var(--ok-spring-dur) var(--ok-spring),height var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2)}.ok-nav:not([data-ready]) .ok-nav__pill{transition:none}.ok-nav[data-ready] .ok-nav__pill{opacity:1}.ok-nav__item{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-width:0;height:var(--ok-h-item);padding:0 12px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);background:none;font:500 14px/1 var(--ok-font);color:var(--ok-text-2);text-align:left;text-decoration:none;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-dur) var(--ok-spring)}@media (hover: hover){.ok-nav__item:hover{color:var(--ok-text)}}.ok-nav__item[aria-current]:not([aria-current=false]){color:var(--ok-text);font-weight:600}.ok-nav__item--sub{height:var(--ok-h-item-sub);padding-left:26px;font-size:13px}.ok-nav__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed;transform:none}.ok-nav__icon{display:inline-grid;place-items:center;flex:none;width:20px;height:20px}.ok-nav__icon .ok-icon{width:18px;height:18px}.ok-nav__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.ok-nav__badge{display:inline-flex;align-items:center;flex:none;margin-left:auto;font-weight:600;font-size:12px;color:var(--ok-text-3)}.ok-nav__group{display:grid;gap:2px;min-width:0}.ok-nav__group+.ok-nav__group,.ok-nav__item+.ok-nav__group{margin-top:var(--ok-s-3)}.ok-nav__group-label{display:flex;align-items:center;height:28px;padding:0 12px;min-width:0;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3)}.ok-nav__group-label>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-nav[data-collapsed] .ok-nav__item{position:relative;justify-content:center;gap:0;padding:0}.ok-nav[data-collapsed] .ok-nav__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}.ok-nav[data-collapsed] .ok-nav__item:not(:has(.ok-nav__icon)) .ok-nav__label{position:static;width:1.2em;height:auto;margin:0;clip-path:none;text-overflow:clip;text-align:center}.ok-nav[data-collapsed] .ok-nav__badge{display:none}.ok-nav[data-collapsed] .ok-nav__item[data-has-badge]:after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;corner-shape:round;background:var(--ok-accent)}.ok-nav[data-collapsed] .ok-nav__group-label{height:13px;padding:0 8px}.ok-nav[data-collapsed] .ok-nav__group-label:before{content:"";flex:1;height:1px;background:var(--ok-line)}.ok-nav[data-collapsed] .ok-nav__group-label>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
2
+ .ok-nav{position:relative;isolation:isolate;display:grid;gap:2px;min-width:0}.ok-nav__pill{position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--h, var(--ok-h-item));transform:translateY(var(--y, 0));border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);opacity:0;pointer-events:none;transition:transform var(--ok-spring-dur) var(--ok-spring),height var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2)}.ok-nav:not([data-ready]) .ok-nav__pill{transition:none}.ok-nav[data-ready] .ok-nav__pill{opacity:1}.ok-nav__item{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-width:0;height:var(--ok-h-item);padding:0 12px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:500 14px/1 var(--ok-font);color:var(--ok-text-2);text-align:left;text-decoration:none;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-dur) var(--ok-spring)}@media (hover: hover){.ok-nav__item:hover{color:var(--ok-text)}}.ok-nav__item[aria-current]:not([aria-current=false]){color:var(--ok-text);font-weight:600}.ok-nav__item--sub{height:var(--ok-h-item-sub);padding-left:26px;font-size:13px}.ok-nav__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed;transform:none}.ok-nav__icon{display:inline-grid;place-items:center;flex:none;width:20px;height:20px}.ok-nav__icon .ok-icon{width:18px;height:18px}.ok-nav__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.ok-nav__badge{display:inline-flex;align-items:center;flex:none;margin-left:auto;font-weight:600;font-size:12px;color:var(--ok-text-3)}.ok-nav__group{display:grid;gap:2px;min-width:0}.ok-nav__group+.ok-nav__group,.ok-nav__item+.ok-nav__group{margin-top:var(--ok-s-3)}.ok-nav__group-label{display:flex;align-items:center;height:28px;padding:0 12px;min-width:0;font:600 12px/1.3 var(--ok-font);color:var(--ok-text-3)}.ok-nav__group-label>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-nav[data-collapsed] .ok-nav__item{position:relative;justify-content:center;gap:0;padding:0}.ok-nav[data-collapsed] .ok-nav__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}.ok-nav[data-collapsed] .ok-nav__item:not(:has(.ok-nav__icon)) .ok-nav__label{position:static;width:1.2em;height:auto;margin:0;clip-path:none;text-overflow:clip;text-align:center}.ok-nav[data-collapsed] .ok-nav__badge{display:none}.ok-nav[data-collapsed] .ok-nav__item[data-has-badge]:after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-accent)}.ok-nav[data-collapsed] .ok-nav__group-label{height:13px;padding:0 8px}.ok-nav[data-collapsed] .ok-nav__group-label:before{content:"";flex:1;height:1px;background:var(--ok-line)}.ok-nav[data-collapsed] .ok-nav__group-label>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
package/dist/styles/number-input.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/number-input.css · 先引入 base */
2
- .ok-stepper{display:inline-flex;align-items:center;gap:2px;height:var(--ok-h-md);padding:3px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-well)}.ok-stepper__btn{display:grid;place-items:center;width:calc(var(--ok-h-md) - 6px);height:calc(var(--ok-h-md) - 6px);padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;background:var(--ok-raised);color:var(--ok-text);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2)}.ok-stepper__btn:active{transform:scale(.84);transition-duration:var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-stepper__btn[aria-disabled=true]{opacity:.4}.ok-stepper__btn .ok-icon{width:16px;height:16px;stroke-width:2.2}.ok-stepper__value{position:relative;display:grid;place-items:center;min-width:46px;height:calc(var(--ok-h-md) - 6px);overflow:hidden;font:600 15px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-stepper__value>span{grid-area:1 / 1}.ok-roll{position:relative;display:inline-grid;overflow:hidden;vertical-align:bottom}.ok-roll>span{grid-area:1 / 1}.ok-stepper{box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow var(--ok-dur-3) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}.ok-stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-stepper[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-stepper__btn{flex:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.ok-stepper__btn[aria-disabled=true]{cursor:not-allowed}.ok-stepper__btn[aria-disabled=true]:active{transform:none}input.ok-stepper__value{display:block;width:46px;min-width:46px;padding:0;margin:0;border:0;outline:0;background:none;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:text}@supports (field-sizing: content){input.ok-stepper__value{field-sizing:content;width:auto;max-width:12ch;padding:0 4px}}.ok-stepper--sm{height:var(--ok-h-sm)}.ok-stepper--sm .ok-stepper__btn{width:calc(var(--ok-h-sm) - 6px);height:calc(var(--ok-h-sm) - 6px)}.ok-stepper--sm .ok-stepper__value{height:calc(var(--ok-h-sm) - 6px);font-size:13px}.ok-stepper--lg{height:var(--ok-h-lg)}.ok-stepper--lg .ok-stepper__btn{width:calc(var(--ok-h-lg) - 6px);height:calc(var(--ok-h-lg) - 6px)}.ok-stepper--lg .ok-stepper__value{height:calc(var(--ok-h-lg) - 6px);font-size:16px}.ok-stepper[data-disabled]{opacity:.5;cursor:not-allowed}.ok-stepper[data-disabled] .ok-stepper__btn,.ok-stepper[data-disabled] input{cursor:not-allowed}@media (pointer: coarse){input.ok-stepper__value{font-size:16px}}[data-touch] input.ok-stepper__value{font-size:16px}
2
+ .ok-stepper{display:inline-flex;align-items:center;gap:2px;height:var(--ok-h-md);padding:3px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well)}.ok-stepper__btn{display:grid;place-items:center;width:calc(var(--ok-h-md) - 6px);height:calc(var(--ok-h-md) - 6px);padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-raised);color:var(--ok-text);cursor:pointer;box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2)}.ok-stepper__btn:active{transform:scale(.84);transition-duration:var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-stepper__btn[aria-disabled=true]{opacity:.4}.ok-stepper__btn .ok-icon{width:16px;height:16px;stroke-width:2.2}.ok-stepper__value{position:relative;display:grid;place-items:center;min-width:46px;height:calc(var(--ok-h-md) - 6px);overflow:hidden;font:600 15px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-stepper__value>span{grid-area:1 / 1}.ok-roll{position:relative;display:inline-grid;overflow:hidden;vertical-align:bottom}.ok-roll>span{grid-area:1 / 1}.ok-stepper{box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow var(--ok-dur-3) var(--ok-ease-out),background-color var(--ok-dur-2) var(--ok-ease-out)}.ok-stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-stepper[data-invalid]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-stepper__btn{flex:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.ok-stepper__btn[aria-disabled=true]{cursor:not-allowed}.ok-stepper__btn[aria-disabled=true]:active{transform:none}input.ok-stepper__value{display:block;width:46px;min-width:46px;padding:0;margin:0;border:0;outline:0;background:none;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:text}@supports (field-sizing: content){input.ok-stepper__value{field-sizing:content;width:auto;max-width:12ch;padding:0 4px}}.ok-stepper--sm{height:var(--ok-h-sm)}.ok-stepper--sm .ok-stepper__btn{width:calc(var(--ok-h-sm) - 6px);height:calc(var(--ok-h-sm) - 6px)}.ok-stepper--sm .ok-stepper__value{height:calc(var(--ok-h-sm) - 6px);font-size:13px}.ok-stepper--lg{height:var(--ok-h-lg)}.ok-stepper--lg .ok-stepper__btn{width:calc(var(--ok-h-lg) - 6px);height:calc(var(--ok-h-lg) - 6px)}.ok-stepper--lg .ok-stepper__value{height:calc(var(--ok-h-lg) - 6px);font-size:16px}.ok-stepper[data-disabled]{opacity:.5;cursor:not-allowed}.ok-stepper[data-disabled] .ok-stepper__btn,.ok-stepper[data-disabled] input{cursor:not-allowed}@media (pointer: coarse){input.ok-stepper__value{font-size:16px}}[data-touch] input.ok-stepper__value{font-size:16px}
package/dist/styles/option-card.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/option-card.css · 先引入 base */
2
- .ok-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:16px}.ok-option{position:relative;display:grid;gap:8px;padding:8px;margin:0;border:0;text-align:left;border-radius:calc(20px * 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 15px/1 var(--ok-font);cursor:pointer;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),box-shadow var(--ok-dur-2) var(--ok-ease-out)}.ok-option:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;corner-shape:inherit;pointer-events:none;box-shadow:0 0 0 4px var(--ok-well),0 0 0 5px var(--ok-line-2);opacity:0;transform:scale(.94);transition:opacity var(--ok-dur-2) var(--ok-ease-in),transform var(--ok-dur-2) var(--ok-ease-in)}@media (hover: hover){.ok-option:hover{box-shadow:inset 0 0 0 1px var(--ok-line-2)}}.ok-option:active{transform:scale(.97);transition-duration:var(--ok-dur-1),var(--ok-dur-2);transition-timing-function:var(--ok-ease-out)}.ok-option[aria-checked=true]{box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-option[aria-checked=true]:after{opacity:1;transform:none;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-option__art{position:relative;display:block;height:68px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);overflow:hidden;background:var(--ok-well);box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-option__art i{position:absolute;height:4px;border-radius:4px;background:var(--ok-line-2);transform-origin:0 50%;transition:transform var(--ok-spring-dur) var(--ok-spring)}.ok-option__art b{position:absolute;background:var(--ok-raised)}.ok-option:not([aria-checked=true]) .ok-option__art i{transform:scaleX(.72)}.ok-option__art i:nth-of-type(2){transition-delay:calc(30ms * var(--ok-ms))}.ok-option__art i:nth-of-type(3){transition-delay:calc(60ms * var(--ok-ms))}.ok-option__art i:nth-of-type(4){transition-delay:calc(90ms * var(--ok-ms))}.ok-option__art i:nth-of-type(5){transition-delay:calc(.12s * var(--ok-ms))}.ok-option__foot{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 4px 0 6px}.ok-option__check{display:grid;place-items:center;width:22px;height:22px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-accent);transform:scale(0) rotate(-30deg);transition:transform var(--ok-dur-2) var(--ok-ease-in)}.ok-option__check svg{width:16px;height:16px;fill:none;stroke:var(--ok-on-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-option__check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1)}.ok-option[aria-checked=true] .ok-option__check{transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-option[aria-checked=true] .ok-option__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(.12s * var(--ok-ms))}.ok-options{min-width:0}.ok-option{min-width:0;align-content:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-option__foot{gap:8px;min-width:0}.ok-option__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-option__desc{padding:0 6px 4px;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-option:disabled{opacity:.42;cursor:not-allowed;transform:none}@media (hover: hover){.ok-option:disabled:hover{box-shadow:inset 0 0 0 1px var(--ok-line)}}.ok-option__art{height:var(--ok-option-art-h, 68px);min-width:0;isolation:isolate;border-radius:max(calc(4px * var(--ok-rk)),calc(20px * var(--ok-rk) - 8px * var(--ok-rk)))}.ok-option__art>:where(svg,img,video,canvas){display:block;width:100%;height:100%}.ok-option__art>:where(img,video){object-fit:cover}
2
+ .ok-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:16px}.ok-option{position:relative;display:grid;gap:8px;padding:8px;margin:0;border:0;text-align:left;border-radius:calc(20px * 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 15px/1 var(--ok-font);cursor:pointer;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),box-shadow var(--ok-dur-2) var(--ok-ease-out)}.ok-option:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;pointer-events:none;box-shadow:0 0 0 4px var(--ok-well),0 0 0 5px var(--ok-line-2);opacity:0;transform:scale(.94);transition:opacity var(--ok-dur-2) var(--ok-ease-in),transform var(--ok-dur-2) var(--ok-ease-in)}@media (hover: hover){.ok-option:hover{box-shadow:inset 0 0 0 1px var(--ok-line-2)}}.ok-option:active{transform:scale(.97);transition-duration:var(--ok-dur-1),var(--ok-dur-2);transition-timing-function:var(--ok-ease-out)}.ok-option[aria-checked=true]{box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-option[aria-checked=true]:after{opacity:1;transform:none;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-option__art{position:relative;display:block;height:68px;border-radius:calc(12px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);overflow:hidden;background:var(--ok-well);box-shadow:inset 0 0 0 1px var(--ok-line)}.ok-option__art i{position:absolute;height:4px;border-radius:4px;background:var(--ok-line-2);transform-origin:0 50%;transition:transform var(--ok-spring-dur) var(--ok-spring)}.ok-option__art b{position:absolute;background:var(--ok-raised)}.ok-option:not([aria-checked=true]) .ok-option__art i{transform:scaleX(.72)}.ok-option__art i:nth-of-type(2){transition-delay:calc(30ms * var(--ok-ms))}.ok-option__art i:nth-of-type(3){transition-delay:calc(60ms * var(--ok-ms))}.ok-option__art i:nth-of-type(4){transition-delay:calc(90ms * var(--ok-ms))}.ok-option__art i:nth-of-type(5){transition-delay:calc(.12s * var(--ok-ms))}.ok-option__foot{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 4px 0 6px}.ok-option__check{display:grid;place-items:center;width:22px;height:22px;border-radius:calc(7px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-accent);transform:scale(0) rotate(-30deg);transition:transform var(--ok-dur-2) var(--ok-ease-in)}.ok-option__check svg{width:16px;height:16px;fill:none;stroke:var(--ok-on-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.ok-option__check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--ok-dur-1)}.ok-option[aria-checked=true] .ok-option__check{transform:none;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-option[aria-checked=true] .ok-option__check path{stroke-dashoffset:0;transition:stroke-dashoffset var(--ok-dur-3) var(--ok-ease-out) calc(.12s * var(--ok-ms))}.ok-options{min-width:0}.ok-option{min-width:0;align-content:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-option__foot{gap:8px;min-width:0}.ok-option__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ok-option__desc{padding:0 6px 4px;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-option:disabled{opacity:.42;cursor:not-allowed;transform:none}@media (hover: hover){.ok-option:disabled:hover{box-shadow:inset 0 0 0 1px var(--ok-line)}}.ok-option__art{height:var(--ok-option-art-h, 68px);min-width:0;isolation:isolate;border-radius:max(calc(4px * var(--ok-rk)),calc(20px * var(--ok-rk) - 8px * var(--ok-rk)))}.ok-option__art>:where(svg,img,video,canvas){display:block;width:100%;height:100%}.ok-option__art>:where(img,video){object-fit:cover}
package/dist/styles/pagination.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/pagination.css · 先引入 base */
2
- .ok-pagination{--_h: var(--ok-h-md);position:relative;min-width:0;font:600 14px/1 var(--ok-font);color:var(--ok-text-2)}.ok-pagination--sm{--_h: var(--ok-h-sm);font-size:13px}.ok-pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}.ok-pagination__btn{display:grid;place-items:center;min-width:var(--_h);height:var(--_h);padding:0 8px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:none;font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;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)}.ok-pagination__btn .ok-icon{width:18px;height:18px}@media (hover: hover){.ok-pagination__btn:not(:disabled):hover{background:var(--ok-fill);color:var(--ok-text)}}.ok-pagination__btn:not(:disabled):active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1)}.ok-pagination__btn[aria-current=page]{background:var(--ok-inverse);color:var(--ok-on-inverse)}@media (hover: hover){.ok-pagination__btn[aria-current=page]:not(:disabled):hover{background:var(--ok-inverse-hover);color:var(--ok-on-inverse)}}.ok-pagination__btn:disabled{cursor:not-allowed;opacity:.4}.ok-pagination__gap{display:grid;place-items:center;min-width:24px;height:var(--_h);color:var(--ok-text-3);-webkit-user-select:none;user-select:none}.ok-pagination__status{min-width:64px;padding:0 8px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-pagination__page,.ok-pagination__gap{display:none}.ok-pagination__list{justify-content:space-between}@media (min-width: 520px){.ok-pagination__page{display:block}.ok-pagination__gap{display:grid}.ok-pagination__status{display:none}.ok-pagination__list{justify-content:flex-start}}
2
+ .ok-pagination{--_h: var(--ok-h-md);position:relative;min-width:0;font:600 14px/1 var(--ok-font);color:var(--ok-text-2)}.ok-pagination--sm{--_h: var(--ok-h-sm);font-size:13px}.ok-pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none}.ok-pagination__btn{display:grid;place-items:center;min-width:var(--_h);height:var(--_h);padding:0 8px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:none;font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;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)}.ok-pagination__btn .ok-icon{width:18px;height:18px}@media (hover: hover){.ok-pagination__btn:not(:disabled):hover{background:var(--ok-fill);color:var(--ok-text)}}.ok-pagination__btn:not(:disabled):active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-2),var(--ok-dur-1)}.ok-pagination__btn[aria-current=page]{background:var(--ok-inverse);color:var(--ok-on-inverse)}@media (hover: hover){.ok-pagination__btn[aria-current=page]:not(:disabled):hover{background:var(--ok-inverse-hover);color:var(--ok-on-inverse)}}.ok-pagination__btn:disabled{cursor:not-allowed;opacity:.4}.ok-pagination__gap{display:grid;place-items:center;min-width:24px;height:var(--_h);color:var(--ok-text-3);-webkit-user-select:none;user-select:none}.ok-pagination__status{min-width:64px;padding:0 8px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ok-text)}.ok-pagination__page,.ok-pagination__gap{display:none}.ok-pagination__list{justify-content:space-between}@media (min-width: 520px){.ok-pagination__page{display:block}.ok-pagination__gap{display:grid}.ok-pagination__status{display:none}.ok-pagination__list{justify-content:flex-start}}
package/dist/styles/pin-input.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/pin-input.css · 先引入 base */
2
- .ok-pin{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}.ok-pin__cell{flex:1 1 var(--ok-h-lg);width:var(--ok-h-lg);min-width:0;max-width:var(--ok-h-lg);height:var(--ok-h-lg);margin:0;padding:0;border:0;outline:0;border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text);text-align:center;caret-color:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent;font:600 20px/1 var(--ok-font);font-variant-numeric:tabular-nums;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)}@media (hover: hover){.ok-pin__cell:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}.ok-pin__cell::selection{background:transparent;color:inherit}.ok-pin__cell:focus{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent);transform:scale(1.04)}.ok-pin[data-invalid] .ok-pin__cell{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-pin__cell:disabled{opacity:.5;cursor:not-allowed}.ok-pin--sm .ok-pin__cell{flex-basis:var(--ok-h-md);width:var(--ok-h-md);max-width:var(--ok-h-md);height:var(--ok-h-md);font-size:16px;border-radius:calc(12px * var(--ok-rk))}.ok-pin--sm{gap:6px}
2
+ .ok-pin{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}.ok-pin__cell{flex:1 1 var(--ok-h-lg);width:var(--ok-h-lg);min-width:0;max-width:var(--ok-h-lg);height:var(--ok-h-lg);margin:0;padding:0;border:0;outline:0;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);text-align:center;caret-color:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent;font:600 20px/1 var(--ok-font);font-variant-numeric:tabular-nums;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)}@media (hover: hover){.ok-pin__cell:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}.ok-pin__cell::selection{background:transparent;color:inherit}.ok-pin__cell:focus{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent);transform:scale(1.04)}.ok-pin[data-invalid] .ok-pin__cell{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-pin__cell:disabled{opacity:.5;cursor:not-allowed}.ok-pin--sm .ok-pin__cell{flex-basis:var(--ok-h-md);width:var(--ok-h-md);max-width:var(--ok-h-md);height:var(--ok-h-md);font-size:16px;border-radius:calc(12px * var(--ok-rk))}.ok-pin--sm{gap:6px}
package/dist/styles/popup.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/popup.css · 先引入 base */
2
- .ok-popup{position:fixed;z-index:90;left:0;top:0;box-sizing:border-box;max-width:var(--ok-popup-avail-w, calc(100vw - 16px) );max-height:min(var(--ok-popup-cap-h, 100vh),var(--ok-popup-avail-h, 100vh));opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--ok-dur-1) var(--ok-ease-in),transform var(--ok-dur-1) var(--ok-ease-in)}.ok-popup[data-side=top]{transform:translateY(6px)}.ok-popup[data-state=open]{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-dur-2) var(--ok-ease-out)}.ok-popup:focus{outline:none}.ok-popup--surface{display:flex;flex-direction:column;overflow:hidden;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-pop);color:var(--ok-text);font:500 14px/1.5 var(--ok-font)}.ok-popup--surface:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;border-radius:inherit;corner-shape:var(--ok-corner);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}
2
+ .ok-popup{position:fixed;z-index:90;left:0;top:0;box-sizing:border-box;max-width:var(--ok-popup-avail-w, calc(100vw - 16px) );max-height:min(var(--ok-popup-cap-h, 100vh),var(--ok-popup-avail-h, 100vh));opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--ok-dur-1) var(--ok-ease-in),transform var(--ok-dur-1) var(--ok-ease-in)}.ok-popup[data-side=top]{transform:translateY(6px)}.ok-popup[data-state=open]{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-dur-2) var(--ok-ease-out)}.ok-popup:focus{outline:none}.ok-popup--surface{display:flex;flex-direction:column;overflow:hidden;border-radius:calc(18px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-pop);color:var(--ok-text);font:500 14px/1.5 var(--ok-font)}.ok-popup--surface:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;border-radius:inherit;corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi)}
package/dist/styles/primitives.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/primitives.css · 先引入 base、responsive */
2
- .ok-box[data-radius]{border-radius:var(--ok-box-r);corner-shape:var(--ok-corner)}.ok-box[data-radius=full]{corner-shape:round}.ok-box[data-surface]{background:var(--ok-box-bg);color:var(--ok-text)}.ok-box:is([data-border],[data-highlight]){--_box-line: transparent;--_box-hi: transparent;box-shadow:inset 0 0 0 1px var(--_box-line),inset 0 1.5px 0 var(--_box-hi)}.ok-box[data-border=line]{--_box-line: var(--ok-line)}.ok-box[data-border=strong]{--_box-line: var(--ok-line-2)}.ok-box[data-highlight]{--_box-hi: var(--ok-hi)}.ok-stack{display:flex;flex-direction:column;gap:var(--_l-gap, var(--ok-s-4));align-items:var(--_l-align, stretch);justify-content:var(--_l-justify, flex-start)}.ok-stack>*{min-width:0}.ok-stack>.ok-divider{flex:none;align-self:stretch}.ok-inline{display:flex;flex-wrap:wrap;gap:var(--_l-rgap, var(--_l-gap, var(--ok-s-2))) var(--_l-gap, var(--ok-s-2));align-items:var(--_l-align, center);justify-content:var(--_l-justify, flex-start)}.ok-inline[data-nowrap]{flex-wrap:nowrap}.ok-inline>*{min-width:0}.ok-grid{display:grid;grid-template-columns:repeat(var(--_l-cols, 1),minmax(0,1fr));gap:var(--_l-rgap, var(--_l-gap, var(--ok-s-4))) var(--_l-gap, var(--ok-s-4));align-items:var(--_l-align, stretch);justify-items:var(--_l-justify, stretch)}.ok-grid[data-auto]{grid-template-columns:repeat(auto-fill,minmax(min(var(--ok-grid-min),100%),1fr))}.ok-grid>*{min-width:0}.ok-grid__item{grid-column:var(--_l-span, auto)}.ok-container{--_gutter: var(--ok-s-4);--_max: 960px;box-sizing:border-box;width:100%;min-width:0;max-width:calc(var(--_max) + 2 * var(--_gutter));margin-inline:auto;padding-left:max(var(--_gutter),env(safe-area-inset-left,0px));padding-right:max(var(--_gutter),env(safe-area-inset-right,0px))}@media (min-width: 520px){.ok-container{--_gutter: var(--ok-s-5)}}@media (min-width: 768px){.ok-container{--_gutter: var(--ok-s-6)}}@media (min-width: 1024px){.ok-container{--_gutter: var(--ok-s-8)}}.ok-container[data-size=sm]{--_max: 560px}.ok-container[data-size=md]{--_max: 720px}.ok-container[data-size=lg]{--_max: 960px}.ok-container[data-size=xl]{--_max: 1200px}.ok-container[data-size=full]{max-width:none}.ok-container[data-gutter=false]{--_gutter: 0px;padding-left:0;padding-right:0}.ok-container[data-center=false]{margin-inline:0}.ok-center{display:grid;place-items:center}.ok-center[data-inline]{display:inline-grid}.ok-center[data-axis=horizontal]{place-items:start center}.ok-center[data-axis=vertical]{place-items:center start}.ok-center>*{min-width:0;max-width:100%}.ok-spacer{flex:1 1 0%;align-self:stretch;min-width:0;min-height:0;pointer-events:none}.ok-divider{flex:none;height:1px;min-width:0;border:0;margin:0;background:var(--ok-line)}.ok-divider[data-orientation=vertical]{width:1px;height:auto;min-height:1em;align-self:stretch}.ok-divider--label{display:flex;align-items:center;gap:var(--ok-s-3);height:auto;background:none;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-divider--label:before,.ok-divider--label:after{content:"";flex:1 1 0%;min-width:var(--ok-s-4);height:1px;background:var(--ok-line)}.ok-divider--label[data-label-align=start]:before,.ok-divider--label[data-label-align=end]:after{display:none}.ok-divider__label{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}.ok-aspect{position:relative;min-width:0;overflow:hidden}.ok-aspect>:where(img,video,iframe,picture,canvas,embed,object){display:block;width:100%;height:100%;border:0;object-fit:cover}.ok-aspect>picture>img{display:block;width:100%;height:100%;object-fit:cover}.ok-sticky{position:sticky;z-index:2;min-width:0}.ok-scroll-area{box-sizing:border-box;min-width:0;min-height:0;max-width:100%;max-height:100%}.ok-scroll-area[data-direction=vertical]{overflow-x:hidden;overflow-y:auto}.ok-scroll-area[data-direction=horizontal]{overflow-x:auto;overflow-y:hidden}.ok-scroll-area[data-direction=both]{overflow:auto}.ok-scroll-area:focus-visible{outline-offset:-2px}
2
+ .ok-box[data-radius]{border-radius:var(--ok-box-r);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner)}.ok-box[data-radius=full]{corner-shape:round;--ok-shape: round}.ok-box[data-surface]{background:var(--ok-box-bg);color:var(--ok-text)}.ok-box:is([data-border],[data-highlight]){--_box-line: transparent;--_box-hi: transparent;box-shadow:inset 0 0 0 1px var(--_box-line),inset 0 1.5px 0 var(--_box-hi)}.ok-box[data-border=line]{--_box-line: var(--ok-line)}.ok-box[data-border=strong]{--_box-line: var(--ok-line-2)}.ok-box[data-highlight]{--_box-hi: var(--ok-hi)}.ok-stack{display:flex;flex-direction:column;gap:var(--_l-gap, var(--ok-s-4));align-items:var(--_l-align, stretch);justify-content:var(--_l-justify, flex-start)}.ok-stack>*{min-width:0}.ok-stack>.ok-divider{flex:none;align-self:stretch}.ok-inline{display:flex;flex-wrap:wrap;gap:var(--_l-rgap, var(--_l-gap, var(--ok-s-2))) var(--_l-gap, var(--ok-s-2));align-items:var(--_l-align, center);justify-content:var(--_l-justify, flex-start)}.ok-inline[data-nowrap]{flex-wrap:nowrap}.ok-inline>*{min-width:0}.ok-grid{display:grid;grid-template-columns:repeat(var(--_l-cols, 1),minmax(0,1fr));gap:var(--_l-rgap, var(--_l-gap, var(--ok-s-4))) var(--_l-gap, var(--ok-s-4));align-items:var(--_l-align, stretch);justify-items:var(--_l-justify, stretch)}.ok-grid[data-auto]{grid-template-columns:repeat(auto-fill,minmax(min(var(--ok-grid-min),100%),1fr))}.ok-grid>*{min-width:0}.ok-grid__item{grid-column:var(--_l-span, auto)}.ok-container{--_gutter: var(--ok-s-4);--_max: 960px;box-sizing:border-box;width:100%;min-width:0;max-width:calc(var(--_max) + 2 * var(--_gutter));margin-inline:auto;padding-left:max(var(--_gutter),env(safe-area-inset-left,0px));padding-right:max(var(--_gutter),env(safe-area-inset-right,0px))}@media (min-width: 520px){.ok-container{--_gutter: var(--ok-s-5)}}@media (min-width: 768px){.ok-container{--_gutter: var(--ok-s-6)}}@media (min-width: 1024px){.ok-container{--_gutter: var(--ok-s-8)}}.ok-container[data-size=sm]{--_max: 560px}.ok-container[data-size=md]{--_max: 720px}.ok-container[data-size=lg]{--_max: 960px}.ok-container[data-size=xl]{--_max: 1200px}.ok-container[data-size=full]{max-width:none}.ok-container[data-gutter=false]{--_gutter: 0px;padding-left:0;padding-right:0}.ok-container[data-center=false]{margin-inline:0}.ok-center{display:grid;place-items:center}.ok-center[data-inline]{display:inline-grid}.ok-center[data-axis=horizontal]{place-items:start center}.ok-center[data-axis=vertical]{place-items:center start}.ok-center>*{min-width:0;max-width:100%}.ok-spacer{flex:1 1 0%;align-self:stretch;min-width:0;min-height:0;pointer-events:none}.ok-divider{flex:none;height:1px;min-width:0;border:0;margin:0;background:var(--ok-line)}.ok-divider[data-orientation=vertical]{width:1px;height:auto;min-height:1em;align-self:stretch}.ok-divider--label{display:flex;align-items:center;gap:var(--ok-s-3);height:auto;background:none;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-divider--label:before,.ok-divider--label:after{content:"";flex:1 1 0%;min-width:var(--ok-s-4);height:1px;background:var(--ok-line)}.ok-divider--label[data-label-align=start]:before,.ok-divider--label[data-label-align=end]:after{display:none}.ok-divider__label{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}.ok-aspect{position:relative;min-width:0;overflow:hidden}.ok-aspect>:where(img,video,iframe,picture,canvas,embed,object){display:block;width:100%;height:100%;border:0;object-fit:cover}.ok-aspect>picture>img{display:block;width:100%;height:100%;object-fit:cover}.ok-sticky{position:sticky;z-index:2;min-width:0}.ok-scroll-area{box-sizing:border-box;min-width:0;min-height:0;max-width:100%;max-height:100%}.ok-scroll-area[data-direction=vertical]{overflow-x:hidden;overflow-y:auto}.ok-scroll-area[data-direction=horizontal]{overflow-x:auto;overflow-y:hidden}.ok-scroll-area[data-direction=both]{overflow:auto}.ok-scroll-area:focus-visible{outline-offset:-2px}
package/dist/styles/progress.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/progress.css · 先引入 base、roll */
2
- .ok-progress{--v: 0;--_c: var(--ok-accent);position:relative;height:8px;min-width:0;border-radius:8px;background:var(--ok-well-2);overflow:hidden}.ok-progress--sm{height:4px}.ok-progress--lg{height:12px;border-radius:12px}.ok-progress[data-tone=success]{--_c: var(--ok-success)}.ok-progress[data-tone=warning]{--_c: var(--ok-warning)}.ok-progress[data-tone=danger]{--_c: var(--ok-danger)}.ok-progress[data-tone=info]{--_c: var(--ok-info)}.ok-progress__bar{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;corner-shape:inherit;background:var(--_c);transform:translate(calc((var(--v) - 1) * 100%));transition:transform var(--ok-spring-soft-dur) var(--ok-spring-soft),background-color var(--ok-dur-3)}.ok-progress.is-done .ok-progress__bar,.ok-progress[data-done] .ok-progress__bar{background:var(--ok-success)}.ok-progress--indeterminate .ok-progress__bar{width:38%;transform:none;animation:ok-indeterminate 1.5s var(--ok-ease-in-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-progress--indeterminate .ok-progress__bar{left:0;width:100%;animation:ok-progress-pulse 1.6s var(--ok-ease-in-out) infinite}}:root[data-motion=reduced] .ok-progress--indeterminate .ok-progress__bar{left:0;width:100%;animation:ok-progress-pulse 1.6s var(--ok-ease-in-out) infinite}@keyframes ok-progress-pulse{0%,to{opacity:.35}50%{opacity:1}}.ok-ring{--v: 0;--size: 64px;position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);flex:none}.ok-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:6;stroke-linecap:round}.ok-ring__track{stroke:var(--ok-well-2)}.ok-ring__bar{stroke:var(--ok-accent);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v) * 100);transition:stroke-dashoffset var(--ok-spring-soft-dur) var(--ok-spring-soft),stroke var(--ok-dur-3)}.ok-ring.is-done .ok-ring__bar,.ok-ring[data-done] .ok-ring__bar{stroke:var(--ok-success)}.ok-ring__label{font:700 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}
2
+ .ok-progress{--v: 0;--_c: var(--ok-accent);position:relative;height:8px;min-width:0;border-radius:8px;background:var(--ok-well-2);overflow:hidden}.ok-progress--sm{height:4px}.ok-progress--lg{height:12px;border-radius:12px}.ok-progress[data-tone=success]{--_c: var(--ok-success)}.ok-progress[data-tone=warning]{--_c: var(--ok-warning)}.ok-progress[data-tone=danger]{--_c: var(--ok-danger)}.ok-progress[data-tone=info]{--_c: var(--ok-info)}.ok-progress__bar{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--_c);transform:translate(calc((var(--v) - 1) * 100%));transition:transform var(--ok-spring-soft-dur) var(--ok-spring-soft),background-color var(--ok-dur-3)}.ok-progress.is-done .ok-progress__bar,.ok-progress[data-done] .ok-progress__bar{background:var(--ok-success)}.ok-progress--indeterminate .ok-progress__bar{width:38%;transform:none;animation:ok-indeterminate 1.5s var(--ok-ease-in-out) infinite}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-progress--indeterminate .ok-progress__bar{left:0;width:100%;animation:ok-progress-pulse 1.6s var(--ok-ease-in-out) infinite}}:root[data-motion=reduced] .ok-progress--indeterminate .ok-progress__bar{left:0;width:100%;animation:ok-progress-pulse 1.6s var(--ok-ease-in-out) infinite}@keyframes ok-progress-pulse{0%,to{opacity:.35}50%{opacity:1}}.ok-ring{--v: 0;--size: 64px;position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);flex:none}.ok-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:6;stroke-linecap:round}.ok-ring__track{stroke:var(--ok-well-2)}.ok-ring__bar{stroke:var(--ok-accent);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v) * 100);transition:stroke-dashoffset var(--ok-spring-soft-dur) var(--ok-spring-soft),stroke var(--ok-dur-3)}.ok-ring.is-done .ok-ring__bar,.ok-ring[data-done] .ok-ring__bar{stroke:var(--ok-success)}.ok-ring__label{font:700 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text)}
package/dist/styles/radio.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/radio.css · 先引入 base */
2
- .ok-radio{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-radio input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}.ok-radio__dot{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-radio__dot{border-radius:50%;corner-shape:round}@media (hover: hover){.ok-radio:hover .ok-radio__dot{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}}.ok-radio:active .ok-radio__dot{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-radio input:checked+.ok-radio__dot{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-radio__dot:after{content:"";width:8px;height:8px;border-radius:50%;corner-shape:round;background:var(--ok-on-accent);transform:scale(0);transition:transform var(--ok-dur-1) var(--ok-ease-in)}.ok-radio input:checked+.ok-radio__dot:after{transform:scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-radio input:focus-visible+.ok-radio__dot{outline-color:var(--ok-accent);outline-offset:2px}.ok-radio{min-width:0;touch-action:manipulation}.ok-radio__text{display:grid;gap:2px;min-width:0}.ok-radio__desc{font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-radio:has(input:disabled){cursor:not-allowed;color:var(--ok-text-3)}.ok-radio input:disabled{cursor:not-allowed}.ok-radio input:disabled+.ok-radio__dot{transform:none;background:var(--ok-well);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-radio input:disabled:checked+.ok-radio__dot{opacity:.5;background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-radio[data-described]{align-items:flex-start}.ok-radio[data-described] input{top:0;margin-top:0}.ok-radio-group[data-invalid] .ok-radio__dot{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}@media (pointer: coarse){.ok-radio{min-height:44px}.ok-radio input{width:100%;height:100%;top:0;margin:0}}[data-touch] .ok-radio{min-height:44px}[data-touch] .ok-radio input{width:100%;height:100%;top:0;margin:0}.ok-radio-group{display:flex;flex-direction:column;gap:var(--ok-s-3);min-width:0}.ok-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--ok-s-3) var(--ok-s-5)}
2
+ .ok-radio{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-radio input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}.ok-radio__dot{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-radio__dot{border-radius:50%;corner-shape:round;--ok-shape: round}@media (hover: hover){.ok-radio:hover .ok-radio__dot{box-shadow:inset 0 0 0 1.5px var(--ok-accent)}}.ok-radio:active .ok-radio__dot{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-radio input:checked+.ok-radio__dot{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-radio__dot:after{content:"";width:8px;height:8px;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-on-accent);transform:scale(0);transition:transform var(--ok-dur-1) var(--ok-ease-in)}.ok-radio input:checked+.ok-radio__dot:after{transform:scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-radio input:focus-visible+.ok-radio__dot{outline-color:var(--ok-accent);outline-offset:2px}.ok-radio{min-width:0;touch-action:manipulation}.ok-radio__text{display:grid;gap:2px;min-width:0}.ok-radio__desc{font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-radio:has(input:disabled){cursor:not-allowed;color:var(--ok-text-3)}.ok-radio input:disabled{cursor:not-allowed}.ok-radio input:disabled+.ok-radio__dot{transform:none;background:var(--ok-well);box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-radio input:disabled:checked+.ok-radio__dot{opacity:.5;background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-radio[data-described]{align-items:flex-start}.ok-radio[data-described] input{top:0;margin-top:0}.ok-radio-group[data-invalid] .ok-radio__dot{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}@media (pointer: coarse){.ok-radio{min-height:44px}.ok-radio input{width:100%;height:100%;top:0;margin:0}}[data-touch] .ok-radio{min-height:44px}[data-touch] .ok-radio input{width:100%;height:100%;top:0;margin:0}.ok-radio-group{display:flex;flex-direction:column;gap:var(--ok-s-3);min-width:0}.ok-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--ok-s-3) var(--ok-s-5)}
package/dist/styles/rating.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/rating.css · 先引入 base */
2
- .ok-rating{display:inline-flex;align-items:center;gap:2px}.ok-rating{flex-wrap:wrap;max-width:100%}.ok-rating__star{display:grid;place-items:center;width:32px;height:32px;padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;background:none;color:var(--ok-well-2);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-rating__star svg{width:24px;height:24px;fill:currentColor;stroke:none}.ok-rating__star[data-on]{color:var(--ok-accent)}.ok-rating__star:active{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-rating--sm .ok-rating__star{width:24px;height:24px}.ok-rating--sm .ok-rating__star svg{width:18px;height:18px}.ok-rating--lg .ok-rating__star{width:40px;height:40px}.ok-rating--lg .ok-rating__star svg{width:30px;height:30px}.ok-rating[aria-disabled=true]{opacity:.5}.ok-rating[aria-disabled=true] .ok-rating__star{cursor:not-allowed;transform:none}.ok-rating[data-readonly] .ok-rating__star{cursor:default;transform:none}.ok-rating__star{position:relative}.ok-rating__star svg{grid-area:1 / 1}.ok-rating__star svg.ok-rating__fill{color:var(--ok-accent);clip-path:inset(0 var(--ok-rating-cut, 100%) 0 0)}@media (pointer: coarse){.ok-rating:not([data-readonly]) .ok-rating__star{width:44px;height:44px}.ok-rating--sm:not([data-readonly]) .ok-rating__star{width:36px;height:36px}.ok-rating--sm:not([data-readonly]) .ok-rating__star:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}}[data-touch] .ok-rating:not([data-readonly]) .ok-rating__star{width:44px;height:44px}[data-touch] .ok-rating--sm:not([data-readonly]) .ok-rating__star{width:36px;height:36px}[data-touch] .ok-rating--sm:not([data-readonly]) .ok-rating__star:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}@media (hover: hover){.ok-rating:not([aria-disabled=true]):not([data-readonly]) .ok-rating__star:hover{transform:scale(1.14)}}
2
+ .ok-rating{display:inline-flex;align-items:center;gap:2px}.ok-rating{flex-wrap:wrap;max-width:100%}.ok-rating__star{display:grid;place-items:center;width:32px;height:32px;padding:0;margin:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:none;color:var(--ok-well-2);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-rating__star svg{width:24px;height:24px;fill:currentColor;stroke:none}.ok-rating__star[data-on]{color:var(--ok-accent)}.ok-rating__star:active{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-1);transition-timing-function:var(--ok-ease-out)}.ok-rating--sm .ok-rating__star{width:24px;height:24px}.ok-rating--sm .ok-rating__star svg{width:18px;height:18px}.ok-rating--lg .ok-rating__star{width:40px;height:40px}.ok-rating--lg .ok-rating__star svg{width:30px;height:30px}.ok-rating[aria-disabled=true]{opacity:.5}.ok-rating[aria-disabled=true] .ok-rating__star{cursor:not-allowed;transform:none}.ok-rating[data-readonly] .ok-rating__star{cursor:default;transform:none}.ok-rating__star{position:relative}.ok-rating__star svg{grid-area:1 / 1}.ok-rating__star svg.ok-rating__fill{color:var(--ok-accent);clip-path:inset(0 var(--ok-rating-cut, 100%) 0 0)}@media (pointer: coarse){.ok-rating:not([data-readonly]) .ok-rating__star{width:44px;height:44px}.ok-rating--sm:not([data-readonly]) .ok-rating__star{width:36px;height:36px}.ok-rating--sm:not([data-readonly]) .ok-rating__star:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}}[data-touch] .ok-rating:not([data-readonly]) .ok-rating__star{width:44px;height:44px}[data-touch] .ok-rating--sm:not([data-readonly]) .ok-rating__star{width:36px;height:36px}[data-touch] .ok-rating--sm:not([data-readonly]) .ok-rating__star:before{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}@media (hover: hover){.ok-rating:not([aria-disabled=true]):not([data-readonly]) .ok-rating__star:hover{transform:scale(1.14)}}
package/dist/styles/reaction.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/reaction.css · 先引入 base、roll */
2
- .ok-react{display:inline-flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 16px 0 12px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-fill);color:var(--ok-text-2);font:600 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ok-dur-3),color var(--ok-dur-3),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-react:active{transform:scale(.92);transition-duration:var(--ok-dur-3),var(--ok-dur-3),var(--ok-dur-1)}.ok-react__icon{display:grid;width:24px;height:24px}.ok-react__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;transition:fill var(--ok-dur-3)}.ok-react__icon .nostril{fill:currentColor;stroke:none}.ok-react[aria-pressed=true]{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-react[aria-pressed=true] .ok-react__icon{animation:ok-oink var(--ok-dur-6) var(--ok-ease-out)}.ok-react[aria-pressed=true] .ok-react__icon svg{fill:var(--ok-accent-ring)}.ok-react:disabled{cursor:not-allowed;opacity:.5;transform:none}.ok-react[data-icon-only]{padding:0;width:var(--ok-h-md);justify-content:center}.ok-particle{position:fixed;z-index:600;left:0;top:0;border-radius:50%;corner-shape:round;pointer-events:none}
2
+ .ok-react{display:inline-flex;align-items:center;gap:8px;height:var(--ok-h-md);padding:0 16px 0 12px;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 14px/1 var(--ok-font);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--ok-dur-3),color var(--ok-dur-3),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-react:active{transform:scale(.92);transition-duration:var(--ok-dur-3),var(--ok-dur-3),var(--ok-dur-1)}.ok-react__icon{display:grid;width:24px;height:24px}.ok-react__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;transition:fill var(--ok-dur-3)}.ok-react__icon .nostril{fill:currentColor;stroke:none}.ok-react[aria-pressed=true]{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-react[aria-pressed=true] .ok-react__icon{animation:ok-oink var(--ok-dur-6) var(--ok-ease-out)}.ok-react[aria-pressed=true] .ok-react__icon svg{fill:var(--ok-accent-ring)}.ok-react:disabled{cursor:not-allowed;opacity:.5;transform:none}.ok-react[data-icon-only]{padding:0;width:var(--ok-h-md);justify-content:center}.ok-particle{position:fixed;z-index:600;left:0;top:0;border-radius:50%;corner-shape:round;--ok-shape: round;pointer-events:none}
package/dist/styles/segmented.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/segmented.css · 先引入 base */
2
- .ok-seg{position:relative;isolation:isolate;display:inline-flex;padding:3px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-well)}.ok-seg__thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-seg:not(.is-ready):not([data-ready]) .ok-seg__thumb{transition:none}.ok-seg__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;height:calc(var(--ok-h-md) - 6px);padding:0 16px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;background:none;font:600 14px/1 var(--ok-font);color:var(--ok-text-2);white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-seg__item:hover{color:var(--ok-text)}}.ok-seg__item:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-seg__item[aria-checked=true]{color:var(--ok-text)}.ok-seg__item .ok-icon{width:16px;height:16px}.ok-seg--sm .ok-seg__item{height:calc(var(--ok-h-sm) - 6px);padding:0 12px;font-size:13px}.ok-seg--block{display:flex}.ok-seg{max-width:100%;min-width:0}.ok-seg--block .ok-seg__item{min-width:0}.ok-seg__item{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-seg__item>span{overflow:hidden;text-overflow:ellipsis}.ok-seg__item:disabled,.ok-seg__item[aria-disabled=true]{opacity:.42;cursor:not-allowed;transform:none;color:var(--ok-text-2)}.ok-seg--lg .ok-seg__item{height:calc(var(--ok-h-lg) - 6px);padding:0 20px;font-size:15px}.ok-seg{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ok-seg::-webkit-scrollbar{display:none}.ok-seg:not(.ok-seg--block) .ok-seg__item{min-width:max-content}@media (prefers-reduced-motion: no-preference){:root:not([data-motion=reduced]) .ok-seg[data-ready]{scroll-behavior:smooth}}:root[data-motion=full] .ok-seg[data-ready]{scroll-behavior:smooth}.ok-seg__item.ok-focusable:focus-visible{outline-offset:1px}
2
+ .ok-seg{position:relative;isolation:isolate;display:inline-flex;padding:3px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well)}.ok-seg__thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-seg:not(.is-ready):not([data-ready]) .ok-seg__thumb{transition:none}.ok-seg__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;height:calc(var(--ok-h-md) - 6px);padding:0 16px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:none;font:600 14px/1 var(--ok-font);color:var(--ok-text-2);white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-seg__item:hover{color:var(--ok-text)}}.ok-seg__item:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-seg__item[aria-checked=true]{color:var(--ok-text)}.ok-seg__item .ok-icon{width:16px;height:16px}.ok-seg--sm .ok-seg__item{height:calc(var(--ok-h-sm) - 6px);padding:0 12px;font-size:13px}.ok-seg--block{display:flex}.ok-seg{max-width:100%;min-width:0}.ok-seg--block .ok-seg__item{min-width:0}.ok-seg__item{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-seg__item>span{overflow:hidden;text-overflow:ellipsis}.ok-seg__item:disabled,.ok-seg__item[aria-disabled=true]{opacity:.42;cursor:not-allowed;transform:none;color:var(--ok-text-2)}.ok-seg--lg .ok-seg__item{height:calc(var(--ok-h-lg) - 6px);padding:0 20px;font-size:15px}.ok-seg{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ok-seg::-webkit-scrollbar{display:none}.ok-seg:not(.ok-seg--block) .ok-seg__item{min-width:max-content}@media (prefers-reduced-motion: no-preference){:root:not([data-motion=reduced]) .ok-seg[data-ready]{scroll-behavior:smooth}}:root[data-motion=full] .ok-seg[data-ready]{scroll-behavior:smooth}.ok-seg__item.ok-focusable:focus-visible{outline-offset:1px}
package/dist/styles/select.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/select.css · 先引入 base、popup、menu */
2
- .ok-select{--ok-select-min: 168px;position:relative;display:inline-flex;flex-direction:column;min-width:0;max-width:100%}.ok-select:after{content:"";flex:none;width:var(--ok-select-min);max-width:100%;height:0}.ok-select--block{display:flex;width:100%}.ok-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;min-width:0;max-width:100%;height:var(--ok-h-md);padding:0 12px 0 16px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-fill);color:var(--ok-text);font:600 14px/1 var(--ok-font);cursor:pointer;transition:background-color var(--ok-dur-2),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-select__trigger:hover:not(:disabled){background:var(--ok-fill-hover)}}.ok-select__trigger:active:not(:disabled){transform:scale(.97);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-select__trigger>.ok-icon{flex:none;width:16px;height:16px;color:var(--ok-text-3)}.ok-select__trigger:disabled{color:var(--ok-text-3);cursor:not-allowed}.ok-select__trigger[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-select__value{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ok-select__value[data-placeholder]{color:var(--ok-text-3);font-weight:500}.ok-select[data-size=sm]{--ok-select-min: 128px}.ok-select[data-size=sm] .ok-select__trigger{height:var(--ok-h-sm);padding:0 10px 0 12px;gap:8px;font-size:13px}.ok-select[data-size=lg] .ok-select__trigger{height:var(--ok-h-lg);padding:0 16px 0 20px;font-size:15px}.ok-select__chips{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.ok-select__chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-raised);font:600 12px/1.3 var(--ok-font);color:var(--ok-text)}.ok-select__chip--more{flex:none;color:var(--ok-text-2)}
2
+ .ok-select{--ok-select-min: 168px;position:relative;display:inline-flex;flex-direction:column;min-width:0;max-width:100%}.ok-select:after{content:"";flex:none;width:var(--ok-select-min);max-width:100%;height:0}.ok-select--block{display:flex;width:100%}.ok-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;min-width:0;max-width:100%;height:var(--ok-h-md);padding:0 12px 0 16px;margin:0;border:0;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text);font:600 14px/1 var(--ok-font);cursor:pointer;transition:background-color var(--ok-dur-2),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-select__trigger:hover:not(:disabled){background:var(--ok-fill-hover)}}.ok-select__trigger:active:not(:disabled){transform:scale(.97);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-select__trigger>.ok-icon{flex:none;width:16px;height:16px;color:var(--ok-text-3)}.ok-select__trigger:disabled{color:var(--ok-text-3);cursor:not-allowed}.ok-select__trigger[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-select__value{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ok-select__value[data-placeholder]{color:var(--ok-text-3);font-weight:500}.ok-select[data-size=sm]{--ok-select-min: 128px}.ok-select[data-size=sm] .ok-select__trigger{height:var(--ok-h-sm);padding:0 10px 0 12px;gap:8px;font-size:13px}.ok-select[data-size=lg] .ok-select__trigger{height:var(--ok-h-lg);padding:0 16px 0 20px;font-size:15px}.ok-select__chips{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.ok-select__chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-raised);font:600 12px/1.3 var(--ok-font);color:var(--ok-text)}.ok-select__chip--more{flex:none;color:var(--ok-text-2)}
package/dist/styles/skeleton.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/skeleton.css · 先引入 base */
2
- .ok-skel{display:block;height:12px;max-width:100%;border-radius:8px;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-skel--circle{width:40px;height:40px;border-radius:50%;corner-shape:round;flex:none}.ok-skel--rect{height:96px;border-radius:var(--ok-r-2);corner-shape:var(--ok-corner)}.ok-skel-lines{display:grid;gap:10px;min-width:0}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-skel{animation:none}}:root[data-motion=reduced] .ok-skel{animation:none}
2
+ .ok-skel{display:block;height:12px;max-width:100%;border-radius:8px;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-skel--circle{width:40px;height:40px;border-radius:50%;corner-shape:round;--ok-shape: round;flex:none}.ok-skel--rect{height:96px;border-radius:var(--ok-r-2);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner)}.ok-skel-lines{display:grid;gap:10px;min-width:0}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-skel{animation:none}}:root[data-motion=reduced] .ok-skel{animation:none}
package/dist/styles/slider.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/slider.css · 先引入 base */
2
- .ok-slider{--v: .5;--tw: 42px;--th: 28px;position:relative;display:flex;align-items:center;flex:1 1 auto;height:32px;min-height:32px;max-height:32px;min-width:120px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--ok-r-full);corner-shape:round}.ok-slider__track{position:absolute;left:0;right:0;height:6px;border-radius:6px;background:var(--ok-well-2);overflow:hidden}.ok-slider__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;corner-shape:inherit;background:var(--ok-accent);width:calc(var(--v) * (100% - var(--tw)) + var(--tw) / 2);transition:width var(--ok-spring-dur) var(--ok-spring)}.ok-slider__ticks{position:absolute;left:calc(var(--tw) / 2);right:calc(var(--tw) / 2);height:6px;pointer-events:none}.ok-slider__ticks i{position:absolute;top:1.5px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;corner-shape:round;background:color-mix(in srgb,var(--ok-text-3) 55%,var(--ok-well-2))}.ok-slider__thumb{position:absolute;left:calc(var(--v) * (100% - var(--tw)));width:var(--tw);height:var(--th);border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-thumb);box-shadow:inset 0 0 0 1px var(--ok-line-2);transition:left var(--ok-spring-dur) var(--ok-spring),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-slider.is-active .ok-slider__thumb{transform:scale(1.12,1.06)}.ok-slider.is-tracking .ok-slider__thumb{transition-property:transform}.ok-slider.is-tracking .ok-slider__fill{transition:none}.ok-slider__bubble{position:absolute;left:50%;bottom:calc(100% + 10px);padding:5px 9px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-inverse);color:var(--ok-on-inverse);font:600 12px/1 var(--ok-font);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transform-origin:50% 130%;transform:translate(-50%) scale(.4);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2) var(--ok-ease-in)}.ok-slider[data-ticks] .ok-slider__bubble{display:none}.ok-slider.is-active .ok-slider__bubble,.ok-slider:focus-visible .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider:not(.ok-slider--range)[data-active] .ok-slider__thumb{transform:scale(1.12,1.06)}.ok-slider[data-tracking] .ok-slider__thumb{transition-property:transform}.ok-slider[data-tracking] .ok-slider__fill{transition:none}.ok-slider:not(.ok-slider--range)[data-active] .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ok-slider[aria-disabled=true] .ok-slider__thumb{transform:none}.ok-slider--range{--a: 0;--b: 1}.ok-slider--range .ok-slider__fill{inset:0 auto 0 calc(var(--a) * (100% - var(--tw)) + var(--tw) / 2);width:calc((var(--b) - var(--a)) * (100% - var(--tw)));transition:width var(--ok-spring-dur) var(--ok-spring),left var(--ok-spring-dur) var(--ok-spring)}.ok-slider--range .ok-slider__thumb[data-index="0"]{left:calc(var(--a) * (100% - var(--tw)))}.ok-slider--range .ok-slider__thumb[data-index="1"]{left:calc(var(--b) * (100% - var(--tw)))}.ok-slider--range .ok-slider__thumb[data-active]{transform:scale(1.12,1.06);z-index:1}.ok-slider--range .ok-slider__thumb:focus-visible{z-index:1}.ok-slider--range .ok-slider__thumb[data-active] .ok-slider__bubble,.ok-slider--range .ok-slider__thumb:focus-visible .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider--range[data-disabled]{cursor:not-allowed;opacity:.5}@media (hover: hover){.ok-slider:not([data-active]):hover .ok-slider__thumb:not([data-active]){transform:scale(1.05)}}
2
+ .ok-slider{--v: .5;--tw: 42px;--th: 28px;position:relative;display:flex;align-items:center;flex:1 1 auto;height:32px;min-height:32px;max-height:32px;min-width:120px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round}.ok-slider__track{position:absolute;left:0;right:0;height:6px;border-radius:6px;background:var(--ok-well-2);overflow:hidden}.ok-slider__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--ok-accent);width:calc(var(--v) * (100% - var(--tw)) + var(--tw) / 2);transition:width var(--ok-spring-dur) var(--ok-spring)}.ok-slider__ticks{position:absolute;left:calc(var(--tw) / 2);right:calc(var(--tw) / 2);height:6px;pointer-events:none}.ok-slider__ticks i{position:absolute;top:1.5px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;corner-shape:round;--ok-shape: round;background:color-mix(in srgb,var(--ok-text-3) 55%,var(--ok-well-2))}.ok-slider__thumb{position:absolute;left:calc(var(--v) * (100% - var(--tw)));width:var(--tw);height:var(--th);border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-thumb);box-shadow:inset 0 0 0 1px var(--ok-line-2);transition:left var(--ok-spring-dur) var(--ok-spring),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-slider.is-active .ok-slider__thumb{transform:scale(1.12,1.06)}.ok-slider.is-tracking .ok-slider__thumb{transition-property:transform}.ok-slider.is-tracking .ok-slider__fill{transition:none}.ok-slider__bubble{position:absolute;left:50%;bottom:calc(100% + 10px);padding:5px 9px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-inverse);color:var(--ok-on-inverse);font:600 12px/1 var(--ok-font);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transform-origin:50% 130%;transform:translate(-50%) scale(.4);transition:transform var(--ok-dur-2) var(--ok-ease-in),opacity var(--ok-dur-2) var(--ok-ease-in)}.ok-slider[data-ticks] .ok-slider__bubble{display:none}.ok-slider.is-active .ok-slider__bubble,.ok-slider:focus-visible .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider:not(.ok-slider--range)[data-active] .ok-slider__thumb{transform:scale(1.12,1.06)}.ok-slider[data-tracking] .ok-slider__thumb{transition-property:transform}.ok-slider[data-tracking] .ok-slider__fill{transition:none}.ok-slider:not(.ok-slider--range)[data-active] .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider[aria-disabled=true]{cursor:not-allowed;opacity:.5}.ok-slider[aria-disabled=true] .ok-slider__thumb{transform:none}.ok-slider--range{--a: 0;--b: 1}.ok-slider--range .ok-slider__fill{inset:0 auto 0 calc(var(--a) * (100% - var(--tw)) + var(--tw) / 2);width:calc((var(--b) - var(--a)) * (100% - var(--tw)));transition:width var(--ok-spring-dur) var(--ok-spring),left var(--ok-spring-dur) var(--ok-spring)}.ok-slider--range .ok-slider__thumb[data-index="0"]{left:calc(var(--a) * (100% - var(--tw)))}.ok-slider--range .ok-slider__thumb[data-index="1"]{left:calc(var(--b) * (100% - var(--tw)))}.ok-slider--range .ok-slider__thumb[data-active]{transform:scale(1.12,1.06);z-index:1}.ok-slider--range .ok-slider__thumb:focus-visible{z-index:1}.ok-slider--range .ok-slider__thumb[data-active] .ok-slider__bubble,.ok-slider--range .ok-slider__thumb:focus-visible .ok-slider__bubble{opacity:1;transform:translate(-50%) scale(1);transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-slider--range[data-disabled]{cursor:not-allowed;opacity:.5}@media (hover: hover){.ok-slider:not([data-active]):hover .ok-slider__thumb:not([data-active]){transform:scale(1.05)}}
package/dist/styles/spinner.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/spinner.css · 先引入 base */
2
- .ok-loader{--size: 28px;position:relative;display:inline-grid;place-items:center;flex:none;vertical-align:middle}.ok-tail{width:var(--size, 28px);height:var(--size, 28px);overflow:visible;color:var(--ok-accent);flex:none;animation:ok-tail-wag 1.5s var(--ok-ease-in-out) infinite;transform-origin:20% 20%}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([fill]){fill:none}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke]){stroke:currentColor}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke-width]){stroke-width:5.5}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-linecap:round;stroke-linejoin:round}.ok-tail [pathLength="1"]{stroke-dasharray:1 1.2;animation:ok-tail-draw 1.5s var(--ok-ease-in-out) infinite}.ok-spinner{display:block;width:calc(var(--size, 28px) * .8);height:calc(var(--size, 28px) * .8);border-radius:50%;corner-shape:round;border:2.5px solid var(--ok-well-2);border-top-color:var(--ok-accent);animation:ok-spin .8s linear infinite;flex:none}.ok-dots{position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--ok-accent);vertical-align:middle}.ok-dots i{width:8px;height:8px;border-radius:50%;corner-shape:round;background:currentColor;animation:ok-dot-bounce 1s var(--ok-ease-in-out) infinite}.ok-dots i:nth-child(2){animation-delay:.12s}.ok-dots i:nth-child(3){animation-delay:.24s}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-tail{animation:none}:root:not([data-motion=full]) .ok-dots i{animation-name:ok-dots-fade}:root:not([data-motion=full]) .ok-spinner{animation:ok-dots-fade 1.2s var(--ok-ease-in-out) infinite}}:root[data-motion=reduced] .ok-tail{animation:none}:root[data-motion=reduced] .ok-dots i{animation-name:ok-dots-fade}:root[data-motion=reduced] .ok-spinner{animation:ok-dots-fade 1.2s var(--ok-ease-in-out) infinite}@keyframes ok-dots-fade{0%,60%,to{opacity:.45}30%{opacity:1}}
2
+ .ok-loader{--size: 28px;position:relative;display:inline-grid;place-items:center;flex:none;vertical-align:middle}.ok-tail{width:var(--size, 28px);height:var(--size, 28px);overflow:visible;color:var(--ok-accent);flex:none;animation:ok-tail-wag 1.5s var(--ok-ease-in-out) infinite;transform-origin:20% 20%}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([fill]){fill:none}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke]){stroke:currentColor}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect):not([stroke-width]){stroke-width:5.5}.ok-tail :is(path,circle,ellipse,line,polyline,polygon,rect){stroke-linecap:round;stroke-linejoin:round}.ok-tail [pathLength="1"]{stroke-dasharray:1 1.2;animation:ok-tail-draw 1.5s var(--ok-ease-in-out) infinite}.ok-spinner{display:block;width:calc(var(--size, 28px) * .8);height:calc(var(--size, 28px) * .8);border-radius:50%;corner-shape:round;--ok-shape: round;border:2.5px solid var(--ok-well-2);border-top-color:var(--ok-accent);animation:ok-spin .8s linear infinite;flex:none}.ok-dots{position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--ok-accent);vertical-align:middle}.ok-dots i{width:8px;height:8px;border-radius:50%;corner-shape:round;--ok-shape: round;background:currentColor;animation:ok-dot-bounce 1s var(--ok-ease-in-out) infinite}.ok-dots i:nth-child(2){animation-delay:.12s}.ok-dots i:nth-child(3){animation-delay:.24s}@media (prefers-reduced-motion: reduce){:root:not([data-motion=full]) .ok-tail{animation:none}:root:not([data-motion=full]) .ok-dots i{animation-name:ok-dots-fade}:root:not([data-motion=full]) .ok-spinner{animation:ok-dots-fade 1.2s var(--ok-ease-in-out) infinite}}:root[data-motion=reduced] .ok-tail{animation:none}:root[data-motion=reduced] .ok-dots i{animation-name:ok-dots-fade}:root[data-motion=reduced] .ok-spinner{animation:ok-dots-fade 1.2s var(--ok-ease-in-out) infinite}@keyframes ok-dots-fade{0%,60%,to{opacity:.45}30%{opacity:1}}
package/dist/styles/split-pane.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/split-pane.css · 先引入 base */
2
- .ok-split{--_sep: 12px;box-sizing:border-box;min-width:0;min-height:0;width:100%;height:100%;container-type:inline-size}@media (pointer: coarse){.ok-split{--_sep: 20px}}.ok-split__track{display:flex;width:100%;height:100%;min-width:0;min-height:0}.ok-split[data-orientation=vertical]>.ok-split__track{flex-direction:column}.ok-split__pane{box-sizing:border-box;min-width:0;min-height:0;overflow:auto}.ok-split__pane--first{flex:0 0 calc(var(--ok-split-size, 50) * 1% - var(--_sep) / 2)}.ok-split__pane--second{flex:1 1 0%}.ok-split__sep{position:relative;flex:0 0 var(--_sep);align-self:stretch;display:grid;place-items:center;border-radius:var(--ok-r-full);corner-shape:round;cursor:col-resize;touch-action:none;user-select:none;-webkit-user-select:none}.ok-split[data-orientation=vertical]>.ok-split__track>.ok-split__sep{cursor:row-resize}.ok-split__sep:after{content:"";width:4px;height:32px;max-height:60%;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),transform var(--ok-spring-dur) var(--ok-spring)}.ok-split[data-orientation=vertical]>.ok-split__track>.ok-split__sep:after{width:32px;max-width:60%;height:4px;max-height:none}@media (hover: hover){.ok-split__sep:hover:after{background:var(--ok-text-3)}}.ok-split__sep:focus-visible{outline-offset:-2px}.ok-split__sep:focus-visible:after,.ok-split[data-dragging] .ok-split__sep:after{background:var(--ok-text-2);transform:scaleY(1.25)}.ok-split[data-orientation=vertical] .ok-split__sep:focus-visible:after,.ok-split[data-orientation=vertical][data-dragging] .ok-split__sep:after{transform:scaleX(1.25)}.ok-split[data-dragging] .ok-split__pane{user-select:none;-webkit-user-select:none;pointer-events:none}.ok-split[data-stacked=true]>.ok-split__track{flex-direction:column}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__sep:after{display:none}@container (max-width: 519.98px){.ok-split[data-stack-below=sm]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 767.98px){.ok-split[data-stack-below=md]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 1023.98px){.ok-split[data-stack-below=lg]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 1279.98px){.ok-split[data-stack-below=xl]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__sep:after{display:none}}
2
+ .ok-split{--_sep: 12px;box-sizing:border-box;min-width:0;min-height:0;width:100%;height:100%;container-type:inline-size}@media (pointer: coarse){.ok-split{--_sep: 20px}}.ok-split__track{display:flex;width:100%;height:100%;min-width:0;min-height:0}.ok-split[data-orientation=vertical]>.ok-split__track{flex-direction:column}.ok-split__pane{box-sizing:border-box;min-width:0;min-height:0;overflow:auto}.ok-split__pane--first{flex:0 0 calc(var(--ok-split-size, 50) * 1% - var(--_sep) / 2)}.ok-split__pane--second{flex:1 1 0%}.ok-split__sep{position:relative;flex:0 0 var(--_sep);align-self:stretch;display:grid;place-items:center;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;cursor:col-resize;touch-action:none;user-select:none;-webkit-user-select:none}.ok-split[data-orientation=vertical]>.ok-split__track>.ok-split__sep{cursor:row-resize}.ok-split__sep:after{content:"";width:4px;height:32px;max-height:60%;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),transform var(--ok-spring-dur) var(--ok-spring)}.ok-split[data-orientation=vertical]>.ok-split__track>.ok-split__sep:after{width:32px;max-width:60%;height:4px;max-height:none}@media (hover: hover){.ok-split__sep:hover:after{background:var(--ok-text-3)}}.ok-split__sep:focus-visible{outline-offset:-2px}.ok-split__sep:focus-visible:after,.ok-split[data-dragging] .ok-split__sep:after{background:var(--ok-text-2);transform:scaleY(1.25)}.ok-split[data-orientation=vertical] .ok-split__sep:focus-visible:after,.ok-split[data-orientation=vertical][data-dragging] .ok-split__sep:after{transform:scaleX(1.25)}.ok-split[data-dragging] .ok-split__pane{user-select:none;-webkit-user-select:none;pointer-events:none}.ok-split[data-stacked=true]>.ok-split__track{flex-direction:column}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stacked=true]>.ok-split__track>.ok-split__sep:after{display:none}@container (max-width: 519.98px){.ok-split[data-stack-below=sm]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=sm]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 767.98px){.ok-split[data-stack-below=md]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=md]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 1023.98px){.ok-split[data-stack-below=lg]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=lg]>.ok-split__track>.ok-split__sep:after{display:none}}@container (max-width: 1279.98px){.ok-split[data-stack-below=xl]>.ok-split__track{flex-direction:column}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__pane{flex:0 0 auto;width:auto;height:auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__pane--second{flex:1 1 auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__sep{flex-basis:1px;width:auto;height:1px;margin:var(--ok-s-3) 0;background:var(--ok-line);cursor:auto;pointer-events:none;touch-action:auto}.ok-split[data-stack-below=xl]>.ok-split__track>.ok-split__sep:after{display:none}}
package/dist/styles/stat.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/stat.css · 先引入 base、image、card */
2
- .ok-stat{display:grid;grid-template-rows:auto auto;grid-auto-rows:1fr;gap:var(--ok-s-2);min-width:0;align-content:start}.ok-grid>.ok-stat{align-self:stretch}.ok-stat__label{display:flex;align-items:center;gap:6px;min-width:0;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-stat__icon{display:grid;place-items:center;flex:none}.ok-stat__icon .ok-icon{width:16px;height:16px}.ok-stat__value{min-width:0;font:700 clamp(24px,6vw,28px)/1.2 var(--ok-font-display);letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--ok-text);overflow-wrap:anywhere}.ok-stat__foot{align-self:end;display:flex;flex-wrap:wrap;align-items:center;min-width:0;gap:4px var(--ok-s-2);font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-stat__delta{position:relative;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 8px 0 5px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-fill);color:var(--ok-text-2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.ok-stat__delta .ok-icon{width:14px;height:14px;stroke-width:2.2}.ok-stat__delta[data-mood=good]{background:var(--ok-success-soft);color:var(--ok-success-text)}.ok-stat__delta[data-mood=bad]{background:var(--ok-danger-soft);color:var(--ok-danger-text)}
2
+ .ok-stat{display:grid;grid-template-rows:auto auto;grid-auto-rows:1fr;gap:var(--ok-s-2);min-width:0;align-content:start}.ok-grid>.ok-stat{align-self:stretch}.ok-stat__label{display:flex;align-items:center;gap:6px;min-width:0;font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-stat__icon{display:grid;place-items:center;flex:none}.ok-stat__icon .ok-icon{width:16px;height:16px}.ok-stat__value{min-width:0;font:700 clamp(24px,6vw,28px)/1.2 var(--ok-font-display);letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--ok-text);overflow-wrap:anywhere}.ok-stat__foot{align-self:end;display:flex;flex-wrap:wrap;align-items:center;min-width:0;gap:4px var(--ok-s-2);font:500 13px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-stat__delta{position:relative;display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 8px 0 5px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text-2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.ok-stat__delta .ok-icon{width:14px;height:14px;stroke-width:2.2}.ok-stat__delta[data-mood=good]{background:var(--ok-success-soft);color:var(--ok-success-text)}.ok-stat__delta[data-mood=bad]{background:var(--ok-danger-soft);color:var(--ok-danger-text)}
package/dist/styles/steps.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/steps.css · 先引入 base */
2
- .ok-steps{--_m: 28px;display:grid;min-width:0;margin:0;padding:0;list-style:none;font:450 14px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-steps__item{position:relative;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-bottom:var(--ok-s-5)}.ok-steps__item:last-child{padding-bottom:0}.ok-steps__item:not(:last-child):after{content:"";position:absolute;left:calc(var(--_m) / 2 - 1px);top:calc(var(--_m) + 4px);bottom:4px;width:2px;border-radius:2px;background:var(--ok-well-2);transition:background-color var(--ok-dur-3) var(--ok-ease-out)}.ok-steps__item[data-state=complete]:not(:last-child):after{background:var(--ok-accent)}.ok-steps__marker{display:grid;place-items:center;flex:none;width:var(--_m);height:var(--_m);border-radius:50%;corner-shape:round;background:var(--ok-fill);color:var(--ok-text-2);font:700 13px/1 var(--ok-font);font-variant-numeric:tabular-nums;transition:background-color var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-3) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out)}.ok-steps__marker .ok-icon{width:16px;height:16px;stroke-width:2.4}.ok-steps__item[data-state=complete] .ok-steps__marker{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-steps__item[data-state=current] .ok-steps__marker{background:var(--ok-accent);color:var(--ok-on-accent);box-shadow:0 0 0 4px var(--ok-accent-soft)}.ok-steps__item[data-error] .ok-steps__marker{background:var(--ok-danger);color:#fff;box-shadow:0 0 0 4px var(--ok-danger-soft)}.ok-steps__text{display:grid;gap:2px;min-width:0;padding-top:calc((var(--_m) - 1.4em) / 2);overflow-wrap:anywhere}.ok-steps__title{font-weight:600;color:var(--ok-text-2)}.ok-steps__item[data-state=complete] .ok-steps__title,.ok-steps__item[data-state=current] .ok-steps__title{color:var(--ok-text)}.ok-steps__item[data-error] .ok-steps__title{color:var(--ok-danger-text)}.ok-steps__desc{font-size:13px;color:var(--ok-text-2)}@media (min-width: 520px){.ok-steps[data-orientation=horizontal]{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.ok-steps[data-orientation=horizontal] .ok-steps__item{flex-direction:column;align-items:center;gap:var(--ok-s-2);padding:0 var(--ok-s-2);text-align:center}.ok-steps[data-orientation=horizontal] .ok-steps__item:not(:last-child):after{left:calc(50% + var(--_m) / 2 + 8px);right:auto;top:calc(var(--_m) / 2 - 1px);bottom:auto;width:calc(100% - var(--_m) - 16px);height:2px}.ok-steps[data-orientation=horizontal] .ok-steps__text{padding-top:0;justify-items:center}}
2
+ .ok-steps{--_m: 28px;display:grid;min-width:0;margin:0;padding:0;list-style:none;font:450 14px/1.4 var(--ok-font);color:var(--ok-text-2)}.ok-steps__item{position:relative;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-bottom:var(--ok-s-5)}.ok-steps__item:last-child{padding-bottom:0}.ok-steps__item:not(:last-child):after{content:"";position:absolute;left:calc(var(--_m) / 2 - 1px);top:calc(var(--_m) + 4px);bottom:4px;width:2px;border-radius:2px;background:var(--ok-well-2);transition:background-color var(--ok-dur-3) var(--ok-ease-out)}.ok-steps__item[data-state=complete]:not(:last-child):after{background:var(--ok-accent)}.ok-steps__marker{display:grid;place-items:center;flex:none;width:var(--_m);height:var(--_m);border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--ok-fill);color:var(--ok-text-2);font:700 13px/1 var(--ok-font);font-variant-numeric:tabular-nums;transition:background-color var(--ok-dur-3) var(--ok-ease-out),color var(--ok-dur-3) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out)}.ok-steps__marker .ok-icon{width:16px;height:16px;stroke-width:2.4}.ok-steps__item[data-state=complete] .ok-steps__marker{background:var(--ok-accent-soft);color:var(--ok-accent-text)}.ok-steps__item[data-state=current] .ok-steps__marker{background:var(--ok-accent);color:var(--ok-on-accent);box-shadow:0 0 0 4px var(--ok-accent-soft)}.ok-steps__item[data-error] .ok-steps__marker{background:var(--ok-danger);color:#fff;box-shadow:0 0 0 4px var(--ok-danger-soft)}.ok-steps__text{display:grid;gap:2px;min-width:0;padding-top:calc((var(--_m) - 1.4em) / 2);overflow-wrap:anywhere}.ok-steps__title{font-weight:600;color:var(--ok-text-2)}.ok-steps__item[data-state=complete] .ok-steps__title,.ok-steps__item[data-state=current] .ok-steps__title{color:var(--ok-text)}.ok-steps__item[data-error] .ok-steps__title{color:var(--ok-danger-text)}.ok-steps__desc{font-size:13px;color:var(--ok-text-2)}@media (min-width: 520px){.ok-steps[data-orientation=horizontal]{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.ok-steps[data-orientation=horizontal] .ok-steps__item{flex-direction:column;align-items:center;gap:var(--ok-s-2);padding:0 var(--ok-s-2);text-align:center}.ok-steps[data-orientation=horizontal] .ok-steps__item:not(:last-child):after{left:calc(50% + var(--_m) / 2 + 8px);right:auto;top:calc(var(--_m) / 2 - 1px);bottom:auto;width:calc(100% - var(--_m) - 16px);height:2px}.ok-steps[data-orientation=horizontal] .ok-steps__text{padding-top:0;justify-items:center}}
package/dist/styles/surface.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/surface.css · 先引入 base */
2
- .ok-panel{--_r: var(--ok-r-6);--_p: var(--ok-s-4);display:flex;flex-direction:column;gap:var(--_p);min-width:0;padding:var(--_p);border-radius:var(--_r);corner-shape:var(--ok-corner);--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--_r) - var(--_p) * var(--ok-rk)));background:var(--ok-surface);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-panel--sm{--_r: var(--ok-r-5);--_p: var(--ok-s-3)}.ok-panel--lg{--_p: var(--ok-s-5)}
2
+ .ok-panel{--_r: var(--ok-r-6);--_p: var(--ok-s-4);display:flex;flex-direction:column;gap:var(--_p);min-width:0;padding:var(--_p);border-radius:var(--_r);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);--ok-r-nested: max(calc(4px * var(--ok-rk)), calc(var(--_r) - var(--_p) * var(--ok-rk)));background:var(--ok-surface);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi)}.ok-panel--sm{--_r: var(--ok-r-5);--_p: var(--ok-s-3)}.ok-panel--lg{--_p: var(--ok-s-5)}
package/dist/styles/switch.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/switch.css · 先引入 base */
2
- .ok-switch{position:relative;display:inline-flex;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-switch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}.ok-switch__track{position:relative;display:block;width:54px;height:32px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-well-2);outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-3) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-switch__thumb{position:absolute;top:3px;left:3px;width:32px;height:26px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-thumb);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-dur-2) var(--ok-ease-out)}.ok-switch input:checked+.ok-switch__track{background:var(--ok-accent)}.ok-switch input:checked+.ok-switch__track .ok-switch__thumb{transform:translate(16px)}.ok-switch:active input:not(:disabled)+.ok-switch__track .ok-switch__thumb{width:38px}.ok-switch:active input:checked:not(:disabled)+.ok-switch__track .ok-switch__thumb{transform:translate(10px)}.ok-switch input:focus-visible+.ok-switch__track{outline-color:var(--ok-accent);outline-offset:2px}.ok-switch input:disabled{cursor:not-allowed}.ok-switch input:disabled+.ok-switch__track{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-switch input:disabled+.ok-switch__track .ok-switch__thumb{background:var(--ok-well-2)}.ok-switch input:disabled:checked+.ok-switch__track{background:var(--ok-accent-tint);box-shadow:none}.ok-switch input:disabled:checked+.ok-switch__track .ok-switch__thumb{background:var(--ok-raised)}.ok-switch{align-items:center;gap:10px;touch-action:manipulation}.ok-switch__label{font:500 15px/1.4 var(--ok-font);color:var(--ok-text)}.ok-switch:has(input:disabled){cursor:not-allowed}.ok-switch:has(input:disabled) .ok-switch__label{color:var(--ok-text-3)}.ok-switch__label{min-width:0}.ok-switch__track{flex:none}.ok-switch[data-label-position=start] .ok-switch__label{flex:1 1 auto}
2
+ .ok-switch{position:relative;display:inline-flex;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ok-switch input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}.ok-switch__track{position:relative;display:block;width:54px;height:32px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well-2);outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-3) var(--ok-ease-out),outline-offset var(--ok-dur-3) var(--ok-ease-out)}.ok-switch__thumb{position:absolute;top:3px;left:3px;width:32px;height:26px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-thumb);transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-dur-2) var(--ok-ease-out)}.ok-switch input:checked+.ok-switch__track{background:var(--ok-accent)}.ok-switch input:checked+.ok-switch__track .ok-switch__thumb{transform:translate(16px)}.ok-switch:active input:not(:disabled)+.ok-switch__track .ok-switch__thumb{width:38px}.ok-switch:active input:checked:not(:disabled)+.ok-switch__track .ok-switch__thumb{transform:translate(10px)}.ok-switch input:focus-visible+.ok-switch__track{outline-color:var(--ok-accent);outline-offset:2px}.ok-switch input:disabled{cursor:not-allowed}.ok-switch input:disabled+.ok-switch__track{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ok-line-2)}.ok-switch input:disabled+.ok-switch__track .ok-switch__thumb{background:var(--ok-well-2)}.ok-switch input:disabled:checked+.ok-switch__track{background:var(--ok-accent-tint);box-shadow:none}.ok-switch input:disabled:checked+.ok-switch__track .ok-switch__thumb{background:var(--ok-raised)}.ok-switch{align-items:center;gap:10px;touch-action:manipulation}.ok-switch__label{font:500 15px/1.4 var(--ok-font);color:var(--ok-text)}.ok-switch:has(input:disabled){cursor:not-allowed}.ok-switch:has(input:disabled) .ok-switch__label{color:var(--ok-text-3)}.ok-switch__label{min-width:0}.ok-switch__track{flex:none}.ok-switch[data-label-position=start] .ok-switch__label{flex:1 1 auto}
package/dist/styles/tab-bar.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/tab-bar.css · 先引入 base */
2
- .ok-tabbar{--_pad: var(--ok-s-4);position:fixed;z-index:20;box-sizing:border-box;left:calc(max(var(--_pad),env(safe-area-inset-left,0px)) + var(--ok-tabbar-inset-start, 0px));right:calc(max(var(--_pad),env(safe-area-inset-right,0px)) + var(--ok-tabbar-inset-end, 0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;align-items:center;gap:10px;min-width:0}.ok-tabbar[data-position=absolute]{position:absolute;z-index:4}.ok-tabbar[data-position=static]{position:static}.ok-tabbar__list{position:relative;isolation:isolate;display:flex;flex:1 1 0%;min-width:0;padding:4px;border-radius:var(--ok-r-full);corner-shape:round;background:var(--ok-well);box-shadow:inset 0 0 0 1px var(--ok-line-2)}.ok-tabbar__thumb{position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);opacity:0;transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-tabbar__list:not([data-ready]) .ok-tabbar__thumb{transition:none}.ok-tabbar__list[data-ready] .ok-tabbar__thumb{opacity:1}.ok-tabbar__item{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0%;min-width:0;height:calc(var(--ok-h-lg) - 8px);padding:0 12px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;background:none;font:600 15px/1 var(--ok-font);color:var(--ok-text-2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-tabbar__item:hover{color:var(--ok-text)}}.ok-tabbar__item:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-tabbar__item[aria-current=page]{color:var(--ok-text)}.ok-tabbar__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed;transform:none}.ok-tabbar__icon{display:inline-grid;place-items:center;flex:none}.ok-tabbar__icon .ok-icon{width:18px;height:18px}.ok-tabbar__label{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.ok-tabbar__badge{display:inline-flex;flex:none;font-size:12px}.ok-tabbar__action{display:flex;flex:none}.ok-tabbar[data-position=static]{padding-inline:var(--ok-tabbar-inset-start, 0px) var(--ok-tabbar-inset-end, 0px)}.ok-tabbar[data-layout=stacked] .ok-tabbar__list{border-radius:calc(26px * var(--ok-rk, 1));corner-shape:var(--ok-corner)}.ok-tabbar[data-layout=stacked] :is(.ok-tabbar__thumb,.ok-tabbar__item){border-radius:calc(22px * var(--ok-rk, 1))}.ok-tabbar[data-layout=stacked] .ok-tabbar__item{flex:1 1 auto;flex-direction:column;gap:3px;min-width:44px;height:auto;min-height:52px;padding:6px 8px;font-size:11px;letter-spacing:.01em}.ok-tabbar[data-layout=stacked] .ok-tabbar__icon .ok-icon{width:20px;height:20px}.ok-tabbar[data-layout=stacked] .ok-tabbar__label{max-width:100%}.ok-tabbar[data-layout=stacked] .ok-tabbar__badge{position:absolute;top:3px;left:calc(50% + 5px)}
2
+ .ok-tabbar{--_pad: var(--ok-s-4);position:fixed;z-index:20;box-sizing:border-box;left:calc(max(var(--_pad),env(safe-area-inset-left,0px)) + var(--ok-tabbar-inset-start, 0px));right:calc(max(var(--_pad),env(safe-area-inset-right,0px)) + var(--ok-tabbar-inset-end, 0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;align-items:center;gap:10px;min-width:0}.ok-tabbar[data-position=absolute]{position:absolute;z-index:4}.ok-tabbar[data-position=static]{position:static}.ok-tabbar__list{position:relative;isolation:isolate;display:flex;flex:1 1 0%;min-width:0;padding:4px;border-radius:var(--ok-r-full);corner-shape:round;--ok-shape: round;background:var(--ok-well);box-shadow:inset 0 0 0 1px var(--ok-line-2)}.ok-tabbar__thumb{position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:var(--ok-raised);box-shadow:inset 0 0 0 1px var(--ok-line);opacity:0;transition:transform var(--ok-spring-dur) var(--ok-spring),width var(--ok-spring-dur) var(--ok-spring)}.ok-tabbar__list:not([data-ready]) .ok-tabbar__thumb{transition:none}.ok-tabbar__list[data-ready] .ok-tabbar__thumb{opacity:1}.ok-tabbar__item{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0%;min-width:0;height:calc(var(--ok-h-lg) - 8px);padding:0 12px;margin:0;border:0;border-radius:inherit;corner-shape:inherit;--ok-shape: inherit;background:none;font:600 15px/1 var(--ok-font);color:var(--ok-text-2);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (hover: hover){.ok-tabbar__item:hover{color:var(--ok-text)}}.ok-tabbar__item:active{transform:scale(.93);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}.ok-tabbar__item[aria-current=page]{color:var(--ok-text)}.ok-tabbar__item[aria-disabled=true]{color:var(--ok-text-3);cursor:not-allowed;transform:none}.ok-tabbar__icon{display:inline-grid;place-items:center;flex:none}.ok-tabbar__icon .ok-icon{width:18px;height:18px}.ok-tabbar__label{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.ok-tabbar__badge{display:inline-flex;flex:none;font-size:12px}.ok-tabbar__action{display:flex;flex:none}.ok-tabbar[data-position=static]{padding-inline:var(--ok-tabbar-inset-start, 0px) var(--ok-tabbar-inset-end, 0px)}.ok-tabbar[data-layout=stacked] .ok-tabbar__list{border-radius:calc(26px * var(--ok-rk, 1));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner)}.ok-tabbar[data-layout=stacked] :is(.ok-tabbar__thumb,.ok-tabbar__item){border-radius:calc(22px * var(--ok-rk, 1))}.ok-tabbar[data-layout=stacked] .ok-tabbar__item{flex:1 1 auto;flex-direction:column;gap:3px;min-width:44px;height:auto;min-height:52px;padding:6px 8px;font-size:11px;letter-spacing:.01em}.ok-tabbar[data-layout=stacked] .ok-tabbar__icon .ok-icon{width:20px;height:20px}.ok-tabbar[data-layout=stacked] .ok-tabbar__label{max-width:100%}.ok-tabbar[data-layout=stacked] .ok-tabbar__badge{position:absolute;top:3px;left:calc(50% + 5px)}
package/dist/styles/table.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/table.css · 先引入 base、checkbox、pagination */
2
- .ok-table{position:relative;min-width:0;border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);background:var(--ok-card);color:var(--ok-text-2);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);overflow-x:auto;overflow-y:hidden;--_inset: var(--ok-s-5);--_row: var(--ok-s-3);padding-block:calc(var(--_inset) - var(--_row))}.ok-table table{position:relative;isolation:isolate;width:100%;border-collapse:collapse;font:450 14px/1.5 var(--ok-font)}.ok-table th{padding:var(--_row) var(--_inset);text-align:left;font:600 12px/1.3 var(--ok-font);letter-spacing:.04em;color:var(--ok-text-3);white-space:nowrap}.ok-table td{padding:var(--_row) var(--_inset);border-top:1px solid var(--ok-line);white-space:nowrap}.ok-table .ok-table__primary{font-weight:600;color:var(--ok-text)}.ok-table .is-num{text-align:right;font-variant-numeric:tabular-nums}.ok-table .ok-table__cell--start{text-align:start}.ok-table .ok-table__cell--center{text-align:center}.ok-table .ok-table__cell--end{text-align:end}.ok-table__caption{caption-side:top;padding:var(--_row) var(--_inset);text-align:start;font:600 15px/1.3 var(--ok-font);color:var(--ok-text)}.ok-table table:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--hl-h, 0px);transform:translateY(var(--hl-y, 0px));background:var(--ok-hover);opacity:0;pointer-events:none;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-table table[data-hl]:before{opacity:1}.ok-table table[data-no-anim]:before,.ok-table table[data-jumping]:before{transition:none}@media (hover: hover){.ok-table:not([data-ready]) tbody tr:not([data-empty]):hover{background:var(--ok-hover)}}.ok-table__sort{display:inline-flex;align-items:center;gap:4px;margin:-6px -8px;padding:6px 8px;border:0;border-radius:calc(8px * var(--ok-rk));corner-shape:var(--ok-corner);background:none;font:inherit;letter-spacing:inherit;color:inherit;white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-table .is-num .ok-table__sort{flex-direction:row-reverse}.ok-table__sort-icon{width:14px;height:14px;stroke-width:2.2;opacity:0;transition:transform var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-table__sort[data-dir]{color:var(--ok-text)}.ok-table__sort[data-dir] .ok-table__sort-icon{opacity:1}.ok-table__sort[data-dir=desc] .ok-table__sort-icon{transform:rotate(180deg)}.ok-table__sort:not([data-dir]) .ok-table__sort-icon{color:var(--ok-text-3)}.ok-table__sort:focus-visible .ok-table__sort-icon{opacity:1}.ok-table__sort[data-dir]:focus-visible .ok-table__sort-icon{opacity:1}@media (hover: hover){.ok-table__sort:hover{color:var(--ok-text-2)}.ok-table__sort[data-dir]:hover{color:var(--ok-text)}.ok-table__sort:not([data-dir]):hover .ok-table__sort-icon{opacity:1}}@media (pointer: coarse){.ok-table__sort{min-height:44px;margin-block:-16px}}.ok-table .ok-table__select{width:1px;padding-right:0}.ok-table .ok-table__select .ok-check{display:flex}.ok-table tbody tr[data-selected]{background:var(--ok-hover)}.ok-table .ok-check input:indeterminate+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-table .ok-check input:indeterminate+.ok-check__box svg{display:none}.ok-table .ok-check input:indeterminate+.ok-check__box:after{content:"";width:10px;height:2.4px;border-radius:2px;background:var(--ok-on-accent)}.ok-table:not(.ok-table--scroll) tbody tr[data-selected]:last-child td{box-shadow:0 calc(var(--_inset) - var(--_row)) 0 var(--ok-hover)}.ok-table tbody tr[data-action]{position:relative}.ok-table__row-action{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-table__row-action.ok-focusable:focus-visible{outline-offset:-2px;border-radius:calc(8px * var(--ok-rk))}.ok-table tbody tr[data-action] :is(a,button,input,select,textarea,label,summary):not(.ok-table__row-action):not(.ok-check input,.ok-radio input,.ok-switch input){position:relative;z-index:1}.ok-table-paged{display:grid;gap:var(--ok-s-3);min-width:0}.ok-table__pagination{justify-self:end;max-width:100%}.ok-table[data-responsive]{container:ok-table / inline-size}@container ok-table (max-width: 519.98px){.ok-table [data-hide-below=sm]{display:none}}@container ok-table (max-width: 767.98px){.ok-table [data-hide-below=md]{display:none}}@container ok-table (max-width: 1023.98px){.ok-table [data-hide-below=lg]{display:none}}@container ok-table (max-width: 1279.98px){.ok-table [data-hide-below=xl]{display:none}}@supports not (container-type: inline-size){@media (max-width: 519.98px){.ok-table [data-hide-below=sm]{display:none}}@media (max-width: 767.98px){.ok-table [data-hide-below=md]{display:none}}@media (max-width: 1023.98px){.ok-table [data-hide-below=lg]{display:none}}@media (max-width: 1279.98px){.ok-table [data-hide-below=xl]{display:none}}}.ok-table td.ok-table__empty{padding:var(--ok-s-8) var(--_inset);text-align:center;white-space:normal;font-weight:450;color:var(--ok-text-2)}.ok-table--scroll{overflow:auto;max-height:var(--ok-table-h, 320px);border:1px solid var(--ok-line);box-shadow:none;padding-block:0}.ok-table--scroll thead th{padding-top:var(--_inset)}.ok-table--scroll tbody tr:last-child td{padding-bottom:var(--_inset)}.ok-table--scroll thead th{position:sticky;top:0;z-index:1;background:var(--ok-card);box-shadow:inset 0 -1px 0 var(--ok-line),inset 0 1px 0 var(--ok-hi)}.ok-table--scroll tbody tr:first-child td{border-top:0}@media (max-width: 519.98px){.ok-table--stack{overflow:visible;max-height:none;padding-block:0;border:0;border-radius:0;background:none;box-shadow:none}.ok-table--stack table,.ok-table--stack thead,.ok-table--stack tbody,.ok-table--stack tr,.ok-table--stack td,.ok-table--stack caption{display:block}.ok-table--stack table:before{display:none}.ok-table--stack caption{padding-inline:0}.ok-table--stack thead tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2) var(--ok-s-4)}.ok-table--stack thead th{position:static;display:block;padding:0 0 var(--ok-s-3);background:none;box-shadow:none}.ok-table--stack thead th:not([aria-sort]):not(.ok-table__select){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}.ok-table--stack .ok-table__sort{margin:0;padding:0}.ok-table--stack tbody{display:grid;gap:var(--ok-s-2)}.ok-table--stack tbody tr{--_inset: var(--ok-s-4);--_row: 10px;padding-block:calc(var(--_inset) - var(--_row));border-radius:calc(20px * var(--ok-rk));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-table--stack tbody tr[data-selected]{box-shadow:inset 0 0 0 1.5px var(--ok-accent),inset 0 1.5px 0 var(--ok-hi)}.ok-table--stack tbody tr:hover{background:var(--ok-card)}.ok-table--stack tbody tr[data-selected]:last-child td{box-shadow:none}.ok-table--stack .ok-table__row-action.ok-focusable:focus-visible{border-radius:inherit}.ok-table--stack tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ok-s-4);width:auto;padding:var(--_row) var(--_inset);white-space:normal;text-align:end}.ok-table--stack tbody td:first-child,.ok-table--stack tbody tr:first-child td:first-child{border-top:0}.ok-table--stack tbody tr:first-child td:not(:first-child){border-top:1px solid var(--ok-line)}.ok-table--stack tbody tr:last-child td{padding-bottom:var(--_row)}.ok-table--stack tbody td:before{content:attr(data-label);flex:none;max-width:45%;font:600 12px/1.5 var(--ok-font);letter-spacing:.04em;color:var(--ok-text-3);text-align:start}.ok-table--stack .ok-table__value{min-width:0;overflow-wrap:anywhere}.ok-table--stack .ok-table__select{width:auto}.ok-table--stack tbody td.ok-table__select{align-items:center;padding-right:var(--_inset)}.ok-table--stack tbody td.ok-table__empty{display:block;text-align:center}.ok-table--stack tbody td.ok-table__empty:before{content:none}}@media (hover: none){.ok-table__sort:not([data-dir]) .ok-table__sort-icon{opacity:1}}
2
+ .ok-table{position:relative;min-width:0;border-radius:var(--ok-r-nested, var(--ok-r-4));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-card);color:var(--ok-text-2);box-shadow:inset 0 0 0 1px var(--ok-line),inset 0 1.5px 0 var(--ok-hi);overflow-x:auto;overflow-y:hidden;--_inset: var(--ok-s-5);--_row: var(--ok-s-3);padding-block:calc(var(--_inset) - var(--_row))}.ok-table table{position:relative;isolation:isolate;width:100%;border-collapse:collapse;font:450 14px/1.5 var(--ok-font)}.ok-table th{padding:var(--_row) var(--_inset);text-align:left;font:600 12px/1.3 var(--ok-font);letter-spacing:.04em;color:var(--ok-text-3);white-space:nowrap}.ok-table td{padding:var(--_row) var(--_inset);border-top:1px solid var(--ok-line);white-space:nowrap}.ok-table .ok-table__primary{font-weight:600;color:var(--ok-text)}.ok-table .is-num{text-align:right;font-variant-numeric:tabular-nums}.ok-table .ok-table__cell--start{text-align:start}.ok-table .ok-table__cell--center{text-align:center}.ok-table .ok-table__cell--end{text-align:end}.ok-table__caption{caption-side:top;padding:var(--_row) var(--_inset);text-align:start;font:600 15px/1.3 var(--ok-font);color:var(--ok-text)}.ok-table table:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--hl-h, 0px);transform:translateY(var(--hl-y, 0px));background:var(--ok-hover);opacity:0;pointer-events:none;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-table table[data-hl]:before{opacity:1}.ok-table table[data-no-anim]:before,.ok-table table[data-jumping]:before{transition:none}@media (hover: hover){.ok-table:not([data-ready]) tbody tr:not([data-empty]):hover{background:var(--ok-hover)}}.ok-table__sort{display:inline-flex;align-items:center;gap:4px;margin:-6px -8px;padding:6px 8px;border:0;border-radius:calc(8px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:inherit;letter-spacing:inherit;color:inherit;white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-table .is-num .ok-table__sort{flex-direction:row-reverse}.ok-table__sort-icon{width:14px;height:14px;stroke-width:2.2;opacity:0;transition:transform var(--ok-spring-dur) var(--ok-spring),opacity var(--ok-dur-2) var(--ok-ease-out)}.ok-table__sort[data-dir]{color:var(--ok-text)}.ok-table__sort[data-dir] .ok-table__sort-icon{opacity:1}.ok-table__sort[data-dir=desc] .ok-table__sort-icon{transform:rotate(180deg)}.ok-table__sort:not([data-dir]) .ok-table__sort-icon{color:var(--ok-text-3)}.ok-table__sort:focus-visible .ok-table__sort-icon{opacity:1}.ok-table__sort[data-dir]:focus-visible .ok-table__sort-icon{opacity:1}@media (hover: hover){.ok-table__sort:hover{color:var(--ok-text-2)}.ok-table__sort[data-dir]:hover{color:var(--ok-text)}.ok-table__sort:not([data-dir]):hover .ok-table__sort-icon{opacity:1}}@media (pointer: coarse){.ok-table__sort{min-height:44px;margin-block:-16px}}.ok-table .ok-table__select{width:1px;padding-right:0}.ok-table .ok-table__select .ok-check{display:flex}.ok-table tbody tr[data-selected]{background:var(--ok-hover)}.ok-table .ok-check input:indeterminate+.ok-check__box{background:var(--ok-accent);box-shadow:inset 0 0 0 1.5px transparent}.ok-table .ok-check input:indeterminate+.ok-check__box svg{display:none}.ok-table .ok-check input:indeterminate+.ok-check__box:after{content:"";width:10px;height:2.4px;border-radius:2px;background:var(--ok-on-accent)}.ok-table:not(.ok-table--scroll) tbody tr[data-selected]:last-child td{box-shadow:0 calc(var(--_inset) - var(--_row)) 0 var(--ok-hover)}.ok-table tbody tr[data-action]{position:relative}.ok-table__row-action{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ok-table__row-action.ok-focusable:focus-visible{outline-offset:-2px;border-radius:calc(8px * var(--ok-rk))}.ok-table tbody tr[data-action] :is(a,button,input,select,textarea,label,summary):not(.ok-table__row-action):not(.ok-check input,.ok-radio input,.ok-switch input){position:relative;z-index:1}.ok-table-paged{display:grid;gap:var(--ok-s-3);min-width:0}.ok-table__pagination{justify-self:end;max-width:100%}.ok-table[data-responsive]{container:ok-table / inline-size}@container ok-table (max-width: 519.98px){.ok-table [data-hide-below=sm]{display:none}}@container ok-table (max-width: 767.98px){.ok-table [data-hide-below=md]{display:none}}@container ok-table (max-width: 1023.98px){.ok-table [data-hide-below=lg]{display:none}}@container ok-table (max-width: 1279.98px){.ok-table [data-hide-below=xl]{display:none}}@supports not (container-type: inline-size){@media (max-width: 519.98px){.ok-table [data-hide-below=sm]{display:none}}@media (max-width: 767.98px){.ok-table [data-hide-below=md]{display:none}}@media (max-width: 1023.98px){.ok-table [data-hide-below=lg]{display:none}}@media (max-width: 1279.98px){.ok-table [data-hide-below=xl]{display:none}}}.ok-table td.ok-table__empty{padding:var(--ok-s-8) var(--_inset);text-align:center;white-space:normal;font-weight:450;color:var(--ok-text-2)}.ok-table--scroll{overflow:auto;max-height:var(--ok-table-h, 320px);border:1px solid var(--ok-line);box-shadow:none;padding-block:0}.ok-table--scroll thead th{padding-top:var(--_inset)}.ok-table--scroll tbody tr:last-child td{padding-bottom:var(--_inset)}.ok-table--scroll thead th{position:sticky;top:0;z-index:1;background:var(--ok-card);box-shadow:inset 0 -1px 0 var(--ok-line),inset 0 1px 0 var(--ok-hi)}.ok-table--scroll tbody tr:first-child td{border-top:0}@media (max-width: 519.98px){.ok-table--stack{overflow:visible;max-height:none;padding-block:0;border:0;border-radius:0;background:none;box-shadow:none}.ok-table--stack table,.ok-table--stack thead,.ok-table--stack tbody,.ok-table--stack tr,.ok-table--stack td,.ok-table--stack caption{display:block}.ok-table--stack table:before{display:none}.ok-table--stack caption{padding-inline:0}.ok-table--stack thead tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ok-s-2) var(--ok-s-4)}.ok-table--stack thead th{position:static;display:block;padding:0 0 var(--ok-s-3);background:none;box-shadow:none}.ok-table--stack thead th:not([aria-sort]):not(.ok-table__select){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)}.ok-table--stack .ok-table__sort{margin:0;padding:0}.ok-table--stack tbody{display:grid;gap:var(--ok-s-2)}.ok-table--stack tbody tr{--_inset: var(--ok-s-4);--_row: 10px;padding-block:calc(var(--_inset) - var(--_row));border-radius:calc(20px * var(--ok-rk));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-table--stack tbody tr[data-selected]{box-shadow:inset 0 0 0 1.5px var(--ok-accent),inset 0 1.5px 0 var(--ok-hi)}.ok-table--stack tbody tr:hover{background:var(--ok-card)}.ok-table--stack tbody tr[data-selected]:last-child td{box-shadow:none}.ok-table--stack .ok-table__row-action.ok-focusable:focus-visible{border-radius:inherit}.ok-table--stack tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ok-s-4);width:auto;padding:var(--_row) var(--_inset);white-space:normal;text-align:end}.ok-table--stack tbody td:first-child,.ok-table--stack tbody tr:first-child td:first-child{border-top:0}.ok-table--stack tbody tr:first-child td:not(:first-child){border-top:1px solid var(--ok-line)}.ok-table--stack tbody tr:last-child td{padding-bottom:var(--_row)}.ok-table--stack tbody td:before{content:attr(data-label);flex:none;max-width:45%;font:600 12px/1.5 var(--ok-font);letter-spacing:.04em;color:var(--ok-text-3);text-align:start}.ok-table--stack .ok-table__value{min-width:0;overflow-wrap:anywhere}.ok-table--stack .ok-table__select{width:auto}.ok-table--stack tbody td.ok-table__select{align-items:center;padding-right:var(--_inset)}.ok-table--stack tbody td.ok-table__empty{display:block;text-align:center}.ok-table--stack tbody td.ok-table__empty:before{content:none}}@media (hover: none){.ok-table__sort:not([data-dir]) .ok-table__sort-icon{opacity:1}}
package/dist/styles/tabs.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/tabs.css · 先引入 base */
2
- .ok-tabs{min-width:0}.ok-tabs__list{position:relative;display:flex;gap:4px;min-width:0;box-shadow:inset 0 -1px 0 var(--ok-line);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.ok-tabs__list::-webkit-scrollbar{display:none}.ok-tabs__tab{flex:none;height:44px;padding:0 14px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk)) calc(12px * var(--ok-rk)) 0 0;corner-shape:var(--ok-corner);background:none;font:600 15px/1 var(--ok-font);color:var(--ok-text-3);white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-tabs__tab.ok-focusable:focus-visible{outline-offset:-3px}@media (hover: hover){.ok-tabs__tab:not(:disabled):hover{color:var(--ok-text-2)}}.ok-tabs__tab[aria-selected=true]{color:var(--ok-text)}.ok-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ok-tabs__ink{position:absolute;left:0;bottom:0;height:3px;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:3px 3px 0 0;background:var(--ok-accent);pointer-events:none}.ok-tabs__panels{display:grid;min-width:0;padding-top:var(--ok-s-5)}.ok-tabs__panel{grid-area:1 / 1;min-width:0;visibility:hidden;opacity:0;outline:2px solid transparent;outline-offset:2px;border-radius:var(--ok-r-1)}.ok-tabs__panel:focus-visible{outline-color:var(--ok-accent)}.ok-tabs__panel[data-state=active]{visibility:visible;opacity:1}.ok-tabs__panel[data-leaving]{visibility:visible}
2
+ .ok-tabs{min-width:0}.ok-tabs__list{position:relative;display:flex;gap:4px;min-width:0;box-shadow:inset 0 -1px 0 var(--ok-line);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.ok-tabs__list::-webkit-scrollbar{display:none}.ok-tabs__tab{flex:none;height:44px;padding:0 14px;margin:0;border:0;border-radius:calc(12px * var(--ok-rk)) calc(12px * var(--ok-rk)) 0 0;corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:none;font:600 15px/1 var(--ok-font);color:var(--ok-text-3);white-space:nowrap;cursor:pointer;transition:color var(--ok-dur-2) var(--ok-ease-out)}.ok-tabs__tab.ok-focusable:focus-visible{outline-offset:-3px}@media (hover: hover){.ok-tabs__tab:not(:disabled):hover{color:var(--ok-text-2)}}.ok-tabs__tab[aria-selected=true]{color:var(--ok-text)}.ok-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.ok-tabs__ink{position:absolute;left:0;bottom:0;height:3px;width:var(--w, 0);transform:translate(var(--x, 0));border-radius:3px 3px 0 0;background:var(--ok-accent);pointer-events:none}.ok-tabs__panels{display:grid;min-width:0;padding-top:var(--ok-s-5)}.ok-tabs__panel{grid-area:1 / 1;min-width:0;visibility:hidden;opacity:0;outline:2px solid transparent;outline-offset:2px;border-radius:var(--ok-r-1)}.ok-tabs__panel:focus-visible{outline-color:var(--ok-accent)}.ok-tabs__panel[data-state=active]{visibility:visible;opacity:1}.ok-tabs__panel[data-leaving]{visibility:visible}
package/dist/styles/tag.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/tag.css · 先引入 base */
2
- .ok-tag{--_c: var(--ok-text-2);--_s: var(--ok-fill);display:inline-flex;align-items:center;gap:6px;height:28px;max-width:100%;padding:0 10px;border-radius:var(--ok-r-1);corner-shape:var(--ok-corner);background:var(--_s);color:var(--_c);font:600 13px/1 var(--ok-font);white-space:nowrap;vertical-align:middle}.ok-tag--sm{height:24px;padding:0 8px;gap:4px;font-size:12px}.ok-tag[data-tone=accent]{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft)}.ok-tag[data-tone=success]{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-tag[data-tone=warning]{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-tag[data-tone=danger]{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-tag[data-tone=info]{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-tag__icon{display:grid;place-items:center;flex:none}.ok-tag__icon .ok-icon{width:14px;height:14px}.ok-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ok-tag__remove{position:relative;display:grid;place-items:center;flex:none;width:18px;height:18px;margin:0 -4px 0 0;padding:0;border:0;border-radius:50%;corner-shape:round;background:none;color:inherit;cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (pointer: coarse){.ok-tag__remove:before{content:"";position:absolute;top:-13px;right:-13px;bottom:-13px;left:-13px}}.ok-tag__remove .ok-icon{width:12px;height:12px;stroke-width:2.4}@media (hover: hover){.ok-tag__remove:hover{background:var(--ok-line-2)}}.ok-tag__remove:active{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}
2
+ .ok-tag{--_c: var(--ok-text-2);--_s: var(--ok-fill);display:inline-flex;align-items:center;gap:6px;height:28px;max-width:100%;padding:0 10px;border-radius:var(--ok-r-1);corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--_s);color:var(--_c);font:600 13px/1 var(--ok-font);white-space:nowrap;vertical-align:middle}.ok-tag--sm{height:24px;padding:0 8px;gap:4px;font-size:12px}.ok-tag[data-tone=accent]{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft)}.ok-tag[data-tone=success]{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-tag[data-tone=warning]{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-tag[data-tone=danger]{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-tag[data-tone=info]{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-tag__icon{display:grid;place-items:center;flex:none}.ok-tag__icon .ok-icon{width:14px;height:14px}.ok-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ok-tag__remove{position:relative;display:grid;place-items:center;flex:none;width:18px;height:18px;margin:0 -4px 0 0;padding:0;border:0;border-radius:50%;corner-shape:round;--ok-shape: round;background:none;color:inherit;cursor:pointer;transition:background-color var(--ok-dur-2) var(--ok-ease-out),transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}@media (pointer: coarse){.ok-tag__remove:before{content:"";position:absolute;top:-13px;right:-13px;bottom:-13px;left:-13px}}.ok-tag__remove .ok-icon{width:12px;height:12px;stroke-width:2.4}@media (hover: hover){.ok-tag__remove:hover{background:var(--ok-line-2)}}.ok-tag__remove:active{transform:scale(.84);transition-duration:var(--ok-dur-2),var(--ok-dur-1)}
package/dist/styles/textarea.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/textarea.css · 先引入 base */
2
- .ok-textarea{--_min-rows: 3;--_max-rows: 999;--_lh: 1.5em;--_pad: 10px;display:block;width:100%;min-width:0;margin:0;border:0;padding:var(--_pad) 14px;min-height:calc(var(--_min-rows) * var(--_lh) + var(--_pad) * 2);max-height:calc(var(--_max-rows) * var(--_lh) + var(--_pad) * 2);border-radius:calc(14px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-well);color:var(--ok-text);box-shadow:inset 0 0 0 1.5px transparent;font:500 15px/1.5 var(--ok-font);outline:0;resize:none;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out)}.ok-textarea[data-autogrow]{field-sizing:content}.ok-textarea[data-resize=vertical]{resize:vertical}.ok-textarea::placeholder{color:var(--ok-text-3)}@media (hover: hover){.ok-textarea:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-textarea:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-textarea:focus{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-textarea[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-textarea:disabled{opacity:.5;cursor:not-allowed}@media (pointer: coarse){.ok-textarea{font-size:16px}}[data-touch] .ok-textarea{font-size:16px}.ok-textarea:focus-visible{outline:0}
2
+ .ok-textarea{--_min-rows: 3;--_max-rows: 999;--_lh: 1.5em;--_pad: 10px;display:block;width:100%;min-width:0;margin:0;border:0;padding:var(--_pad) 14px;min-height:calc(var(--_min-rows) * var(--_lh) + var(--_pad) * 2);max-height:calc(var(--_max-rows) * var(--_lh) + var(--_pad) * 2);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);box-shadow:inset 0 0 0 1.5px transparent;font:500 15px/1.5 var(--ok-font);outline:0;resize:none;transition:background-color var(--ok-dur-2) var(--ok-ease-out),box-shadow var(--ok-dur-3) var(--ok-ease-out)}.ok-textarea[data-autogrow]{field-sizing:content}.ok-textarea[data-resize=vertical]{resize:vertical}.ok-textarea::placeholder{color:var(--ok-text-3)}@media (hover: hover){.ok-textarea:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 70%,var(--ok-well-2))}}@media (hover: hover){:root[data-theme=dark] .ok-textarea:hover:not(:focus):not(:disabled){background:color-mix(in srgb,var(--ok-well) 88%,var(--ok-well-2))}}.ok-textarea:focus{background:var(--ok-raised);box-shadow:inset 0 0 0 1.5px var(--ok-accent)}.ok-textarea[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--ok-danger)}.ok-textarea:disabled{opacity:.5;cursor:not-allowed}@media (pointer: coarse){.ok-textarea{font-size:16px}}[data-touch] .ok-textarea{font-size:16px}.ok-textarea:focus-visible{outline:0}
package/dist/styles/timeline.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/timeline.css · 先引入 base */
2
- .ok-timeline{--_m: 24px;display:grid;min-width:0;margin:0;padding:0;list-style:none;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2)}.ok-timeline__item{--_c: var(--ok-text-3);--_s: var(--ok-fill);position:relative;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-bottom:var(--ok-s-5)}.ok-timeline__item:last-child{padding-bottom:0}.ok-timeline__item:not(:last-child):after{content:"";position:absolute;left:calc(var(--_m) / 2 - .5px);top:calc(var(--_m) + 2px);bottom:2px;width:1px;background:var(--ok-line-2)}.ok-timeline__item[data-tone=accent]{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft)}.ok-timeline__item[data-tone=success]{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-timeline__item[data-tone=warning]{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-timeline__item[data-tone=danger]{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-timeline__item[data-tone=info]{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-timeline__marker{display:grid;place-items:center;flex:none;width:var(--_m);height:var(--_m);border-radius:50%;corner-shape:round;color:var(--_c)}.ok-timeline__marker:not([data-icon]):before{content:"";width:9px;height:9px;border-radius:50%;corner-shape:round;background:currentColor;box-shadow:0 0 0 4px var(--_s)}.ok-timeline__marker[data-icon]{background:var(--_s)}.ok-timeline__marker .ok-icon{width:14px;height:14px;stroke-width:2.2}.ok-timeline__content{display:grid;gap:2px;flex:1;min-width:0;padding-top:calc((var(--_m) - 1.5em) / 2);overflow-wrap:anywhere}.ok-timeline__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--ok-s-3)}.ok-timeline__title{font-weight:600;color:var(--ok-text)}.ok-timeline__time{font:500 13px/1.5 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text-2)}
2
+ .ok-timeline{--_m: 24px;display:grid;min-width:0;margin:0;padding:0;list-style:none;font:450 14px/1.5 var(--ok-font);color:var(--ok-text-2)}.ok-timeline__item{--_c: var(--ok-text-3);--_s: var(--ok-fill);position:relative;display:flex;align-items:flex-start;gap:var(--ok-s-3);min-width:0;padding-bottom:var(--ok-s-5)}.ok-timeline__item:last-child{padding-bottom:0}.ok-timeline__item:not(:last-child):after{content:"";position:absolute;left:calc(var(--_m) / 2 - .5px);top:calc(var(--_m) + 2px);bottom:2px;width:1px;background:var(--ok-line-2)}.ok-timeline__item[data-tone=accent]{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft)}.ok-timeline__item[data-tone=success]{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-timeline__item[data-tone=warning]{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-timeline__item[data-tone=danger]{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-timeline__item[data-tone=info]{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-timeline__marker{display:grid;place-items:center;flex:none;width:var(--_m);height:var(--_m);border-radius:50%;corner-shape:round;--ok-shape: round;color:var(--_c)}.ok-timeline__marker:not([data-icon]):before{content:"";width:9px;height:9px;border-radius:50%;corner-shape:round;--ok-shape: round;background:currentColor;box-shadow:0 0 0 4px var(--_s)}.ok-timeline__marker[data-icon]{background:var(--_s)}.ok-timeline__marker .ok-icon{width:14px;height:14px;stroke-width:2.2}.ok-timeline__content{display:grid;gap:2px;flex:1;min-width:0;padding-top:calc((var(--_m) - 1.5em) / 2);overflow-wrap:anywhere}.ok-timeline__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--ok-s-3)}.ok-timeline__title{font-weight:600;color:var(--ok-text)}.ok-timeline__time{font:500 13px/1.5 var(--ok-font);font-variant-numeric:tabular-nums;color:var(--ok-text-2)}
package/dist/styles/toast.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/toast.css · 先引入 base、button */
2
- .ok-toasts{--_off: var(--ok-toast-offset, 20px);position:fixed;z-index:500;display:flex;flex-direction:column;gap:10px;pointer-events:none;top:max(var(--ok-toast-top, var(--_off)),env(safe-area-inset-top,0px));right:max(var(--_off),env(safe-area-inset-right,0px));align-items:flex-end}.ok-toasts:empty{display:none}.ok-toasts[data-position$=left]{right:auto;left:max(var(--_off),env(safe-area-inset-left,0px));align-items:flex-start}.ok-toasts[data-position$=center]{right:0;left:0;align-items:center}.ok-toasts[data-position^=bottom]{top:auto;bottom:max(var(--ok-toast-bottom, var(--_off)),env(safe-area-inset-bottom,0px));flex-direction:column-reverse}@media (max-width: 519.98px){.ok-toasts,.ok-toasts[data-position]{--_off: var(--ok-toast-offset, 12px);left:max(var(--_off),env(safe-area-inset-left,0px));right:max(var(--_off),env(safe-area-inset-right,0px));align-items:stretch}.ok-toasts:not([data-position^=bottom]){top:max(var(--ok-toast-top, var(--_off)),calc(env(safe-area-inset-top,0px) + 8px))}.ok-toasts[data-position^=bottom]{bottom:max(var(--ok-toast-bottom, var(--_off)),calc(env(safe-area-inset-bottom,0px) + 8px))}.ok-toasts .ok-toast{width:auto}}.ok-toast{position:relative;overflow:hidden;pointer-events:auto;display:flex;align-items:center;gap:12px;width:min(360px,calc(100vw - 32px));padding:var(--ok-s-4);border-radius:calc(20px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-pop);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi);cursor:pointer;touch-action:manipulation}.ok-toast[data-leaving]{pointer-events:none}.ok-toast__icon{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;corner-shape:round;background:var(--_s);color:var(--_c);animation:ok-pop var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy) calc(.12s * var(--ok-ms)) both}.ok-toast__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.ok-toast__glyph path{stroke-dasharray:1;stroke-dashoffset:1;animation:ok-draw var(--ok-dur-4) var(--ok-ease-out) calc(.26s * var(--ok-ms)) forwards}.ok-toast__glyph path+path{animation-delay:calc(.36s * var(--ok-ms))}.ok-toast--success .ok-toast__icon{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-toast--warning .ok-toast__icon{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-toast--danger .ok-toast__icon{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-toast--info .ok-toast__icon{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-toast__body{flex:1;display:grid;gap:2px;min-width:0}.ok-toast__title{font:600 14px/1.45 var(--ok-font);overflow-wrap:anywhere}.ok-toast__desc{font:450 13px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-toast__desc:empty{display:none}.ok-toast__action{flex:none}.ok-toast__close{flex:none;margin-right:-4px;color:var(--ok-text-2)}.ok-toast__action+.ok-toast__close{margin-left:-6px}@media (pointer: coarse){.ok-toast .ok-toast__action,.ok-toast .ok-toast__close{--_h: var(--ok-h-item)}}@media (max-width: 519.98px){.ok-toast .ok-toast__action,.ok-toast .ok-toast__close{--_h: var(--ok-h-item)}}[data-touch] .ok-toast .ok-toast__action,[data-touch] .ok-toast .ok-toast__close{--_h: var(--ok-h-item)}
2
+ .ok-toasts{--_off: var(--ok-toast-offset, 20px);position:fixed;z-index:500;display:flex;flex-direction:column;gap:10px;pointer-events:none;top:max(var(--ok-toast-top, var(--_off)),env(safe-area-inset-top,0px));right:max(var(--_off),env(safe-area-inset-right,0px));align-items:flex-end}.ok-toasts:empty{display:none}.ok-toasts[data-position$=left]{right:auto;left:max(var(--_off),env(safe-area-inset-left,0px));align-items:flex-start}.ok-toasts[data-position$=center]{right:0;left:0;align-items:center}.ok-toasts[data-position^=bottom]{top:auto;bottom:max(var(--ok-toast-bottom, var(--_off)),env(safe-area-inset-bottom,0px));flex-direction:column-reverse}@media (max-width: 519.98px){.ok-toasts,.ok-toasts[data-position]{--_off: var(--ok-toast-offset, 12px);left:max(var(--_off),env(safe-area-inset-left,0px));right:max(var(--_off),env(safe-area-inset-right,0px));align-items:stretch}.ok-toasts:not([data-position^=bottom]){top:max(var(--ok-toast-top, var(--_off)),calc(env(safe-area-inset-top,0px) + 8px))}.ok-toasts[data-position^=bottom]{bottom:max(var(--ok-toast-bottom, var(--_off)),calc(env(safe-area-inset-bottom,0px) + 8px))}.ok-toasts .ok-toast{width:auto}}.ok-toast{position:relative;overflow:hidden;pointer-events:auto;display:flex;align-items:center;gap:12px;width:min(360px,calc(100vw - 32px));padding:var(--ok-s-4);border-radius:calc(20px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-pop);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok-line-2),inset 0 1.5px 0 var(--ok-hi);cursor:pointer;touch-action:manipulation}.ok-toast[data-leaving]{pointer-events:none}.ok-toast__icon{--_c: var(--ok-accent-text);--_s: var(--ok-accent-soft);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;corner-shape:round;--ok-shape: round;background:var(--_s);color:var(--_c);animation:ok-pop var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy) calc(.12s * var(--ok-ms)) both}.ok-toast__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.ok-toast__glyph path{stroke-dasharray:1;stroke-dashoffset:1;animation:ok-draw var(--ok-dur-4) var(--ok-ease-out) calc(.26s * var(--ok-ms)) forwards}.ok-toast__glyph path+path{animation-delay:calc(.36s * var(--ok-ms))}.ok-toast--success .ok-toast__icon{--_c: var(--ok-success-text);--_s: var(--ok-success-soft)}.ok-toast--warning .ok-toast__icon{--_c: var(--ok-warning-text);--_s: var(--ok-warning-soft)}.ok-toast--danger .ok-toast__icon{--_c: var(--ok-danger-text);--_s: var(--ok-danger-soft)}.ok-toast--info .ok-toast__icon{--_c: var(--ok-info-text);--_s: var(--ok-info-soft)}.ok-toast__body{flex:1;display:grid;gap:2px;min-width:0}.ok-toast__title{font:600 14px/1.45 var(--ok-font);overflow-wrap:anywhere}.ok-toast__desc{font:450 13px/1.5 var(--ok-font);color:var(--ok-text-2);overflow-wrap:anywhere}.ok-toast__desc:empty{display:none}.ok-toast__action{flex:none}.ok-toast__close{flex:none;margin-right:-4px;color:var(--ok-text-2)}.ok-toast__action+.ok-toast__close{margin-left:-6px}@media (pointer: coarse){.ok-toast .ok-toast__action,.ok-toast .ok-toast__close{--_h: var(--ok-h-item)}}@media (max-width: 519.98px){.ok-toast .ok-toast__action,.ok-toast .ok-toast__close{--_h: var(--ok-h-item)}}[data-touch] .ok-toast .ok-toast__action,[data-touch] .ok-toast .ok-toast__close{--_h: var(--ok-h-item)}
package/dist/styles/tooltip.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/tooltip.css · 先引入 base */
2
- .ok-tip{position:fixed;z-index:400;left:0;top:0;display:flex;align-items:center;gap:8px;max-width:var(--ok-popup-avail-w, calc(100vw - 16px) );padding:7px 10px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);background:var(--ok-inverse);color:var(--ok-on-inverse);font:500 12.5px/1.2 var(--ok-font);white-space:nowrap;pointer-events:none;user-select:text;-webkit-user-select:text;opacity:0;translate:0 6px;scale:.86;transform-origin:50% 100%;transition:opacity var(--ok-dur-2) var(--ok-ease-in),translate var(--ok-dur-2) var(--ok-ease-in),scale var(--ok-dur-2) var(--ok-ease-in)}@media (max-width: 519.98px){.ok-tip{white-space:normal}}.ok-tip:before{content:"";position:absolute;top:100%;left:calc(var(--bl, 0px) * -1);right:calc(var(--br, 0px) * -1);height:8px}.ok-tip[data-side=bottom]{translate:0 -6px;transform-origin:50% 0}.ok-tip[data-side=bottom]:before{top:auto;bottom:100%}.ok-tip[data-side=left]{translate:6px 0;transform-origin:100% 50%}.ok-tip[data-side=right]{translate:-6px 0;transform-origin:0 50%}.ok-tip[data-side=left]:before,.ok-tip[data-side=right]:before{top:0;bottom:0;height:auto;left:auto;right:auto;width:8px}.ok-tip[data-side=left]:before{left:100%}.ok-tip[data-side=right]:before{right:100%}.ok-tip[data-state=open]{pointer-events:auto;opacity:1;translate:0 0;scale:1;transition:opacity var(--ok-dur-2) var(--ok-ease-out),translate var(--ok-spring-dur) var(--ok-spring),scale var(--ok-spring-dur) var(--ok-spring)}.ok-tip[data-warm]{opacity:1;translate:0 0;scale:1;transition:none;pointer-events:auto}.ok-tip[data-instant]{transition:none}.ok-tip kbd{font:600 11px/1 var(--ok-font);color:color-mix(in srgb,var(--ok-on-inverse) 60%,var(--ok-inverse))}
2
+ .ok-tip{position:fixed;z-index:400;left:0;top:0;display:flex;align-items:center;gap:8px;max-width:var(--ok-popup-avail-w, calc(100vw - 16px) );padding:7px 10px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);background:var(--ok-inverse);color:var(--ok-on-inverse);font:500 12.5px/1.2 var(--ok-font);white-space:nowrap;pointer-events:none;user-select:text;-webkit-user-select:text;opacity:0;translate:0 6px;scale:.86;transform-origin:50% 100%;transition:opacity var(--ok-dur-2) var(--ok-ease-in),translate var(--ok-dur-2) var(--ok-ease-in),scale var(--ok-dur-2) var(--ok-ease-in)}@media (max-width: 519.98px){.ok-tip{white-space:normal}}.ok-tip:before{content:"";position:absolute;top:100%;left:calc(var(--bl, 0px) * -1);right:calc(var(--br, 0px) * -1);height:8px}.ok-tip[data-side=bottom]{translate:0 -6px;transform-origin:50% 0}.ok-tip[data-side=bottom]:before{top:auto;bottom:100%}.ok-tip[data-side=left]{translate:6px 0;transform-origin:100% 50%}.ok-tip[data-side=right]{translate:-6px 0;transform-origin:0 50%}.ok-tip[data-side=left]:before,.ok-tip[data-side=right]:before{top:0;bottom:0;height:auto;left:auto;right:auto;width:8px}.ok-tip[data-side=left]:before{left:100%}.ok-tip[data-side=right]:before{right:100%}.ok-tip[data-state=open]{pointer-events:auto;opacity:1;translate:0 0;scale:1;transition:opacity var(--ok-dur-2) var(--ok-ease-out),translate var(--ok-spring-dur) var(--ok-spring),scale var(--ok-spring-dur) var(--ok-spring)}.ok-tip[data-warm]{opacity:1;translate:0 0;scale:1;transition:none;pointer-events:auto}.ok-tip[data-instant]{transition:none}.ok-tip[data-interactive=false]{pointer-events:none;user-select:none;-webkit-user-select:none}.ok-tip kbd{font:600 11px/1 var(--ok-font);color:color-mix(in srgb,var(--ok-on-inverse) 60%,var(--ok-inverse))}
package/dist/styles/tree.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /* oink-ui/styles/tree.css · 先引入 base */
2
- .ok-tree,.ok-tree__group{display:grid;gap:2px;min-width:0;margin:0;padding:0;list-style:none}.ok-tree{--_indent: 20px;font:500 14px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-tree__group{margin-top:2px;padding-left:var(--_indent);animation:ok-rise var(--ok-dur-3) var(--ok-ease-out)}.ok-tree__item{min-width:0;outline:none;-webkit-tap-highlight-color:transparent}.ok-tree__row{display:flex;align-items:center;gap:6px;min-width:0;min-height:var(--ok-h-item);padding:0 10px 0 4px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);cursor:pointer;touch-action:manipulation;outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-tree__item:not([aria-disabled=true])>.ok-tree__row:hover{background:var(--ok-hover);color:var(--ok-text)}}.ok-tree__item:focus-visible>.ok-tree__row{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-tree__item[aria-selected=true]>.ok-tree__row{background:var(--ok-fill);color:var(--ok-text);font-weight:600}@media (hover: hover){.ok-tree__item[aria-selected=true]:not([aria-disabled=true])>.ok-tree__row:hover{background:var(--ok-fill-hover)}}.ok-tree__item[aria-disabled=true]>.ok-tree__row{cursor:not-allowed;opacity:.5}.ok-tree__chev{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--ok-text-3)}.ok-tree__chev .ok-icon{width:14px;height:14px;stroke-width:2.2;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-tree__item[aria-expanded=true]>.ok-tree__row .ok-tree__chev .ok-icon{transform:rotate(90deg)}.ok-tree__icon{display:grid;place-items:center;flex:none}.ok-tree__icon .ok-icon{width:16px;height:16px}.ok-tree__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
2
+ .ok-tree,.ok-tree__group{display:grid;gap:2px;min-width:0;margin:0;padding:0;list-style:none}.ok-tree{--_indent: 20px;font:500 14px/1.3 var(--ok-font);color:var(--ok-text-2)}.ok-tree__group{margin-top:2px;padding-left:var(--_indent);animation:ok-rise var(--ok-dur-3) var(--ok-ease-out)}.ok-tree__item{min-width:0;outline:none;-webkit-tap-highlight-color:transparent}.ok-tree__row{display:flex;align-items:center;gap:6px;min-width:0;min-height:var(--ok-h-item);padding:0 10px 0 4px;border-radius:calc(10px * var(--ok-rk));corner-shape:var(--ok-corner);--ok-shape: var(--ok-corner);cursor:pointer;touch-action:manipulation;outline:2px solid transparent;outline-offset:5px;transition:background-color var(--ok-dur-2) var(--ok-ease-out),color var(--ok-dur-2) var(--ok-ease-out)}@media (hover: hover){.ok-tree__item:not([aria-disabled=true])>.ok-tree__row:hover{background:var(--ok-hover);color:var(--ok-text)}}.ok-tree__item:focus-visible>.ok-tree__row{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-tree__item[aria-selected=true]>.ok-tree__row{background:var(--ok-fill);color:var(--ok-text);font-weight:600}@media (hover: hover){.ok-tree__item[aria-selected=true]:not([aria-disabled=true])>.ok-tree__row:hover{background:var(--ok-fill-hover)}}.ok-tree__item[aria-disabled=true]>.ok-tree__row{cursor:not-allowed;opacity:.5}.ok-tree__chev{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--ok-text-3)}.ok-tree__chev .ok-icon{width:14px;height:14px;stroke-width:2.2;transition:transform var(--ok-spring-bouncy-dur) var(--ok-spring-bouncy)}.ok-tree__item[aria-expanded=true]>.ok-tree__row .ok-tree__chev .ok-icon{transform:rotate(90deg)}.ok-tree__icon{display:grid;place-items:center;flex:none}.ok-tree__icon .ok-icon{width:16px;height:16px}.ok-tree__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oink-ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "A soft, flat, quiet React component library — responsive, accessible, with light and dark themes.",
5
5
  "keywords": [
6
6
  "react",