@vielzeug/refine 3.2.0 → 3.3.0

package/dist/content/stepper/step.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"step.css.js","names":[],"sources":["../../../src/content/stepper/step.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n    display: flex;\n    flex: 1 1 0%;\n    min-width: 0;\n  }\n\n  .step {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n  }\n\n  /* Horizontal (default) layout centers the indicator above the label in each equal-width\n     column (see `.control`/`.content` below) so the indicator sits at a predictable, constant\n     horizontal position — the midpoint of its own step — regardless of label length. The full\n     line between two indicators is drawn as *two* halves — this step's own `.connector-leading`\n     (its own left edge to its own indicator) and `.connector-trailing` (its own indicator to its\n     own right edge) — each confined entirely inside this step's own box. Reaching a single\n     connector backward into the previous step's box (an earlier attempt) doesn't work: `ore-step`\n     is its own custom element/shadow root, so a later sibling's positioned content always paints\n     in front of an earlier sibling's regardless of internal stacking, and `.control`'s own hover\n     background only covers its own box — so the part of the line sitting outside it looked like\n     a stray line poking out next to the hover highlight instead of being part of it. */\n  .connector {\n    position: absolute;\n    top: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: calc(50% - var(--step-indicator-size) / 2);\n    height: var(--stepper-connector-size, 2px);\n    background: var(--stepper-connector-color, var(--color-contrast-200));\n    border-radius: var(--rounded-full);\n    transform: translateY(-50%);\n    transition: background var(--transition-fast);\n  }\n\n  .connector-leading {\n    left: 0;\n  }\n\n  .connector-trailing {\n    right: 0;\n  }\n\n  /* No preceding/following step to connect to. */\n  :host(:first-of-type) .connector-leading {\n    display: none;\n  }\n\n  :host(:last-of-type) .connector-trailing {\n    display: none;\n  }\n\n  .control {\n    all: unset;\n\n    /* Declared after `all: unset` (which resets `position` back to `static`), not before it.\n       Puts `.control` in the same paint order as `.connector` (also positioned) instead of\n       `.connector` — being absolutely positioned — automatically painting above all of this\n       *static*, normal-flow content regardless of DOM order. `.control` comes after\n       `.connector` in the markup, so with both positioned it (and the opaque indicator inside\n       it) now correctly paints over the connector line instead of the line cutting across\n       every indicator. */\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--step-gap);\n    align-items: center;\n    width: 100%;\n    min-width: 0;\n    padding: var(--size-1);\n    font-family: inherit;\n    cursor: default;\n    border-radius: var(--rounded-lg);\n  }\n\n  button.control {\n    min-height: var(--_touch-target, auto);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n  }\n\n  button.control:focus-visible {\n    outline: var(--border-2) solid var(--_theme-base, var(--color-contrast-500));\n    outline-offset: var(--border-2);\n  }\n\n  button.control[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .indicator {\n    /* Without this, the `border` below adds on top of `width`/`height` instead of being\n       included in them, rendering the indicator ~2 * border-width larger per axis than\n       `--step-indicator-size` — every connector position calc using that variable to line up\n       with the indicator's true center/edge (especially the vertical connector's horizontal\n       `left`, which has no flexbox centering to fall back on) would then be off by that much. */\n    box-sizing: border-box;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--step-indicator-size);\n    height: var(--step-indicator-size);\n    font-size: var(--step-font-size);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    background: var(--color-contrast-100);\n    border: var(--border-2) solid var(--color-contrast-200);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast),\n      border-color var(--transition-fast);\n  }\n\n  .icon-slot[hidden] {\n    display: none;\n  }\n\n  .number {\n    line-height: 1;\n  }\n\n  .content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    text-align: center;\n  }\n\n  .label {\n    display: flex;\n    gap: var(--size-1);\n    align-items: baseline;\n    justify-content: center;\n    min-width: 0;\n    max-width: 100%;\n    font-size: var(--step-font-size);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-700);\n  }\n\n  .label-text {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .optional-hint {\n    flex: 0 0 auto;\n    font-size: var(--text-xs);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  .description {\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n  }\n\n  .description[hidden] {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n}\n\n@layer refine.states {\n  :host([current]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-base, var(--color-contrast-800));\n    border-color: var(--_theme-base, var(--color-contrast-800));\n  }\n\n  :host([current]) .label {\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n  }\n\n  :host([completed]) .indicator {\n    color: var(--_theme-contrast, var(--color-canvas));\n    background: var(--_theme-focus, var(--color-contrast-600));\n    border-color: var(--_theme-focus, var(--color-contrast-600));\n  }\n\n  /* A completed step colors both the segment leading into it and the one trailing out of it\n     (progress has fully passed through); the current step only colors the leading segment\n     (progress has arrived, but not yet moved past it into the next step). */\n  :host([completed]) .connector,\n  :host([current]) .connector-leading {\n    background: var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([error]) .indicator {\n    color: var(--color-canvas);\n    background: var(--color-error);\n    border-color: var(--color-error);\n  }\n\n  :host([error]) .label {\n    color: var(--color-error);\n  }\n\n  :host([disabled]) .label,\n  :host([disabled]) .description {\n    color: var(--color-contrast-400);\n  }\n\n  :host([disabled]) .indicator {\n    opacity: 0.6;\n  }\n}\n\n@layer refine.sizes {\n  :host([size='sm']) {\n    --step-indicator-size: var(--size-6);\n    --step-font-size: var(--text-xs);\n    --step-gap: var(--size-1-5);\n  }\n\n  :host(:not([size])),\n  :host([size='md']) {\n    --step-indicator-size: var(--size-8);\n    --step-font-size: var(--text-sm);\n    --step-gap: var(--size-2);\n  }\n\n  :host([size='lg']) {\n    --step-indicator-size: var(--size-10);\n    --step-font-size: var(--text-base);\n    --step-gap: var(--size-2-5);\n  }\n\n  @media (pointer: coarse) {\n    :host(:not([size])),\n    :host([size='sm']),\n    :host([size='md']) {\n      --step-indicator-size: var(--size-9);\n      --step-font-size: var(--text-sm);\n    }\n  }\n}\n\n@layer refine.orientation {\n  /* Vertical (mobile-friendly) layout: back to the inline icon-beside-label arrangement (more\n     compact for narrow/mobile widths), with `padding-block-start` reserving room for a\n     top-to-bottom connector into this step's own indicator instead of the horizontal\n     center-to-center line above. */\n  :host([orientation='vertical']) {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    align-items: flex-start;\n    padding-block-start: var(--stepper-gap, var(--size-4));\n  }\n\n  :host([orientation='vertical']:first-of-type) .step {\n    padding-block-start: 0;\n  }\n\n  :host([orientation='vertical']) .control {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  :host([orientation='vertical']) .content {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  :host([orientation='vertical']) .label {\n    justify-content: flex-start;\n  }\n\n  /* Same two-halves idea as horizontal, rotated: `.connector-leading` runs from this step's own\n     top edge down into its indicator (through the `padding-block-start` gap reserved above).\n     `.connector-trailing` runs from the *bottom* of this step's indicator down to this step's\n     own bottom edge — using `top`+`bottom` (no fixed `height`) so it stretches to whatever this\n     step's content actually needs, instead of a fixed length that only reached as far as the\n     padding gap. A step with a longer description is taller, and its trailing segment grows\n     with it — the next step's leading segment then only has to bridge the fixed padding gap,\n     so the two halves always meet exactly at the boundary between the two steps regardless of\n     how much content either one has. */\n  :host([orientation='vertical']) .connector-leading {\n    top: 0;\n    left: calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: calc(var(--stepper-gap, var(--size-4)) + var(--size-1));\n    transform: translateX(-50%);\n  }\n\n  :host([orientation='vertical']) .connector-trailing {\n    inset: calc(var(--stepper-gap, var(--size-4)) + var(--size-1) + var(--step-indicator-size)) auto 0\n      calc(var(--size-1) + var(--step-indicator-size) / 2);\n    width: var(--stepper-connector-size, 2px);\n    height: auto;\n    transform: translateX(-50%);\n  }\n\n  /* The first step's `padding-block-start` is reset to 0 above (no incoming line to make room\n     for) — `.connector-trailing`'s `top` has to drop the same gap term here, or it starts\n     lower than the indicator's true bottom edge and its `bottom: 0` counterpart can compute a\n     negative (clamped to 0) height, hiding the segment entirely. */\n  :host([orientation='vertical']:first-of-type) .connector-trailing {\n    top: calc(var(--size-1) + var(--step-indicator-size));\n  }\n}\n\n@media (forced-colors: active) {\n  .indicator {\n    border: 1px solid ButtonText;\n  }\n\n  :host([current]) .indicator,\n  :host([completed]) .indicator {\n    border: 1px solid Highlight;\n  }\n}\n"],"mappings":""}

package/dist/counter.cjs

@@ -0,0 +1,91 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./core/spinner.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./inputs/counter/counter.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=400,l=120,u=`ore-counter`;(0,o.define)(u,{props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,hint:o.prop.string(),label:o.prop.string(),"large-step":o.prop.json(void 0),max:o.prop.json(void 0),min:o.prop.number(0),"quick-steps":o.prop.bool(!1),readonly:o.prop.bool(!1),step:o.prop.number(1),value:o.prop.number(0)},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),i=(0,o.createId)(`counter-label`),a=(0,o.createId)(`counter-hint`),c=(0,s.signal)(Number(e.value.value)||0);(0,s.watch)(e.value,e=>{let t=Number(e);Number.isFinite(t)&&t!==c.value&&(c.value=t)});let l=(0,s.computed)(()=>!!e.disabled.value),u=(0,s.computed)(()=>!!e.readonly.value),d=(0,s.computed)(()=>!l.value&&!u.value),f=(0,s.computed)(()=>!!e.hint.value),p=(0,s.signal)(!1),m=null,h=r.createSpinnerControl({commit:e=>{if(e==null)return;let r=e-c.value;r!==0&&(c.value=e,t.setAttribute(`value`,String(e)),n(`change`,{delta:r,value:e}),m&&clearTimeout(m),p.value=!1,p.value=!0,m=setTimeout(()=>{p.value=!1,m=null},200))},disabled:l,largeStep:e[`large-step`],max:e.max,min:e.min,parse:()=>c.value,readonly:u,step:e.step}),g=()=>Number(e.step.value)||1,_=()=>Number(e[`large-step`].value)||g()*10,v=(0,s.computed)(()=>!!e[`quick-steps`].value),y=null,b=null,x=!1,S=()=>{y&&clearTimeout(y),b&&clearInterval(b),y=null,b=null},C=(e,t)=>{d.value&&t.button===0&&(S(),x=!1,y=setTimeout(()=>{x=!0,h.incrementBy(e(),t),b=setInterval(()=>{let n=e();if(n>0&&h.atMax()||n<0&&h.atMin()){S();return}h.incrementBy(n,t)},120)},400))},w=(e,t)=>{if(x){x=!1;return}h.incrementBy(e(),t)},T=e=>()=>e*g(),E=e=>()=>e*_(),D=e=>()=>`${e>0?`+`:`−`}${_()}`;(0,o.onCleanup)(()=>{S(),m&&clearTimeout(m)}),(0,o.bind)({attr:{"data-bump":()=>p.value?``:null,size:e.size}});let O=(0,s.computed)(()=>f.value?a:null);return o.html`
+      <div class="counter" part="counter" role="group" aria-labelledby="${i}">
+        <div class="header" part="header">
+          <slot name="icon"></slot>
+          <span class="label" part="label" id="${i}">${()=>e.label.value??``}</span>
+        </div>
+        <div class="controls" part="controls" @keydown="${e=>h.handleKeydown(e)}">
+          <button
+            class="btn btn-large"
+            part="decrement-large-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${()=>`Decrease ${e.label.value??``} by ${_()}`.trim()}"
+            ?hidden="${()=>u.value||!v.value}"
+            ?disabled="${()=>!d.value||h.atMin()}"
+            @pointerdown="${e=>C(E(-1),e)}"
+            @pointerup="${S}"
+            @pointercancel="${S}"
+            @pointerleave="${S}"
+            @click="${e=>w(E(-1),e)}">
+            ${D(-1)}
+          </button>
+          <button
+            class="btn"
+            part="decrement-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${()=>`Decrease ${e.label.value??``}`.trim()}"
+            ?hidden="${u}"
+            ?disabled="${()=>!d.value||h.atMin()}"
+            @pointerdown="${e=>C(T(-1),e)}"
+            @pointerup="${S}"
+            @pointercancel="${S}"
+            @pointerleave="${S}"
+            @click="${e=>w(T(-1),e)}">
+            <ore-icon name="minus" size="var(--_icon-size)" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+          <output
+            class="value"
+            part="value"
+            role="spinbutton"
+            aria-live="polite"
+            aria-labelledby="${i}"
+            aria-describedby="${O}"
+            aria-valuenow="${()=>String(c.value)}"
+            aria-valuemin="${()=>e.min.value==null?null:String(e.min.value)}"
+            aria-valuemax="${()=>e.max.value==null?null:String(e.max.value)}"
+            aria-readonly="${()=>u.value?`true`:null}"
+            aria-disabled="${()=>l.value?`true`:null}"
+            tabindex="${()=>l.value?`-1`:`0`}">
+            ${()=>String(c.value)}
+          </output>
+          <button
+            class="btn"
+            part="increment-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${()=>`Increase ${e.label.value??``}`.trim()}"
+            ?hidden="${u}"
+            ?disabled="${()=>!d.value||h.atMax()}"
+            @pointerdown="${e=>C(T(1),e)}"
+            @pointerup="${S}"
+            @pointercancel="${S}"
+            @pointerleave="${S}"
+            @click="${e=>w(T(1),e)}">
+            <ore-icon name="plus" size="var(--_icon-size)" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+          <button
+            class="btn btn-large"
+            part="increment-large-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${()=>`Increase ${e.label.value??``} by ${_()}`.trim()}"
+            ?hidden="${()=>u.value||!v.value}"
+            ?disabled="${()=>!d.value||h.atMax()}"
+            @pointerdown="${e=>C(E(1),e)}"
+            @pointerup="${S}"
+            @pointercancel="${S}"
+            @pointerleave="${S}"
+            @click="${e=>w(E(1),e)}">
+            ${D(1)}
+          </button>
+        </div>
+        <slot name="hint">
+          <span class="hint" part="hint" id="${a}" ?hidden="${()=>!f.value}">
+            ${()=>e.hint.value??``}
+          </span>
+        </slot>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[n.colorThemeMixin,t.disabledStateMixin,e.coarsePointerMixin,e.reducedMotionMixin,a.default]}),exports.COUNTER_HOLD_DELAY_MS=c,exports.COUNTER_HOLD_REPEAT_MS=l,exports.COUNTER_TAG=u;
+//# sourceMappingURL=counter.cjs.map

package/dist/counter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.cjs","names":[],"sources":["../src/inputs/counter/counter.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, onCleanup, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './counter.css?inline';\n\nexport type OreCounterChangeDetail = {\n  /** Difference between the new and the previous value */\n  delta: number;\n  /** New value after clamping */\n  value: number;\n};\n\nexport type OreCounterEvents = {\n  change: OreCounterChangeDetail;\n};\n\n/** Counter props */\nexport type OreCounterProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** One-line timing or usage hint rendered under the controls */\n  hint?: string;\n  /** Visible label; also names the control for assistive technology */\n  label?: string;\n  /** Step for Page Up/Down (default: 10 × step) */\n  'large-step'?: number;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value (default: 0) */\n  min?: number;\n  /** Render an outer pair of −/+ buttons that move by `large-step` */\n  'quick-steps'?: boolean;\n  /** Show the value without controls */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Increment/decrement step (default: 1) */\n  step?: number;\n  /** Current value */\n  value?: number;\n};\n\n/** Hold delay before auto-repeat starts, then the repeat interval. */\nexport const COUNTER_HOLD_DELAY_MS = 400;\nexport const COUNTER_HOLD_REPEAT_MS = 120;\n\n/**\n * A large-target tally control for counting things at a glance: `−` / value / `+` with an\n * optional icon, label and hint. Designed for touch and arm's-length use (tabletop trackers,\n * inventories, scoreboards) rather than typed form entry — use `ore-number-input` for that.\n *\n * Holding any button auto-repeats. The value is announced through a live region and is\n * keyboard-operable as a spinbutton (Arrow keys, Home/End, Page Up/Down). Set `quick-steps` to add an\n * outer pair of buttons that move by `large-step`, for values that change in chunks (damage, scores).\n *\n * @element ore-counter\n *\n * @attr {number} value - Current value (default: 0)\n * @attr {number} min - Minimum value (default: 0)\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down and the quick-step buttons (default: 10 × step)\n * @attr {boolean} quick-steps - Adds an outer −/+ pair that moves by `large-step`\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Shows the value without the −/+ buttons\n * @attr {string} label - Visible label and accessible name\n * @attr {string} hint - One-line hint under the controls\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n *\n * @fires change - Fired after every accepted change. detail: { value: number, delta: number }\n *\n * @slot icon - Leading icon or token artwork shown before the label\n * @slot hint - Custom hint content (replaces the `hint` attribute)\n *\n * @cssprop --counter-value-size - Font size of the value\n * @cssprop --counter-button-size - Width/height of the −/+ buttons\n * @cssprop --counter-gap - Gap between the buttons and the value\n * @cssprop --counter-bg - Background of the control\n * @cssprop --counter-border-color - Border color of the control\n * @cssprop --counter-radius - Border radius of the control\n * @cssprop --counter-icon-size - Size of the slotted icon\n *\n * @part counter - Root container.\n * @part header - Icon and label row.\n * @part label - Label element.\n * @part controls - Buttons and value row.\n * @part decrement-large-btn - Quick-step decrement button (`quick-steps` only).\n * @part decrement-btn - Decrement button.\n * @part value - Value output.\n * @part increment-btn - Increment button.\n * @part increment-large-btn - Quick-step increment button (`quick-steps` only).\n * @part hint - Hint element.\n *\n * @example\n * ```html\n * <ore-counter label=\"Stamina\" value=\"3\" hint=\"Pay for actions\">\n *   <ore-icon slot=\"icon\" name=\"zap\"></ore-icon>\n * </ore-counter>\n * <ore-counter label=\"Score\" value=\"10\" min=\"0\" max=\"99\" size=\"lg\" color=\"primary\"></ore-counter>\n * <ore-counter label=\"Damage\" value=\"12\" large-step=\"5\" quick-steps></ore-counter>\n * ```\n */\nexport const COUNTER_TAG = 'ore-counter' as const;\ndefine<OreCounterProps>(COUNTER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    hint: prop.string(),\n    label: prop.string(),\n    'large-step': prop.json(undefined as number | undefined),\n    max: prop.json(undefined as number | undefined),\n    min: prop.number(0),\n    'quick-steps': prop.bool(false),\n    readonly: prop.bool(false),\n    step: prop.number(1),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCounterEvents>();\n    const labelId = createId('counter-label');\n    const hintId = createId('counter-hint');\n\n    const current = signal(Number(props.value.value) || 0);\n\n    watch(props.value, (next) => {\n      const parsed = Number(next);\n\n      if (Number.isFinite(parsed) && parsed !== current.value) current.value = parsed;\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n    const isInteractive = computed(() => !isDisabled.value && !isReadonly.value);\n    const hasHint = computed(() => Boolean(props.hint.value));\n\n    // Toggled briefly on every change so the CSS bump animation restarts.\n    const bumped = signal(false);\n    let bumpTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const commit = (next: number | null): void => {\n      if (next == null) return;\n\n      const delta = next - current.value;\n\n      if (delta === 0) return;\n\n      current.value = next;\n      el.setAttribute('value', String(next));\n      emit('change', { delta, value: next });\n\n      if (bumpTimer) clearTimeout(bumpTimer);\n      bumped.value = false;\n      bumped.value = true;\n      bumpTimer = setTimeout(() => {\n        bumped.value = false;\n        bumpTimer = null;\n      }, 200);\n    };\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: () => current.value,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    const stepSize = (): number => Number(props.step.value) || 1;\n    const largeStepSize = (): number => Number(props['large-step'].value) || stepSize() * 10;\n    const hasQuickSteps = computed(() => Boolean(props['quick-steps'].value));\n\n    // ── Press-and-hold auto-repeat ──────────────────────────────────────────\n    let holdTimer: ReturnType<typeof setTimeout> | null = null;\n    let repeatTimer: ReturnType<typeof setInterval> | null = null;\n    let repeated = false;\n\n    const stopHold = (): void => {\n      if (holdTimer) clearTimeout(holdTimer);\n      if (repeatTimer) clearInterval(repeatTimer);\n      holdTimer = null;\n      repeatTimer = null;\n    };\n\n    const startHold = (amount: () => number, e: PointerEvent): void => {\n      if (!isInteractive.value || e.button !== 0) return;\n\n      stopHold();\n      repeated = false;\n      holdTimer = setTimeout(() => {\n        repeated = true;\n        spinner.incrementBy(amount(), e);\n        repeatTimer = setInterval(() => {\n          const direction = amount();\n\n          if ((direction > 0 && spinner.atMax()) || (direction < 0 && spinner.atMin())) {\n            stopHold();\n\n            return;\n          }\n\n          spinner.incrementBy(direction, e);\n        }, COUNTER_HOLD_REPEAT_MS);\n      }, COUNTER_HOLD_DELAY_MS);\n    };\n\n    // The click that ends a long-press must not add one more step on top of the repeats.\n    const handleClick = (amount: () => number, e: Event): void => {\n      if (repeated) {\n        repeated = false;\n\n        return;\n      }\n\n      spinner.incrementBy(amount(), e);\n    };\n\n    const small = (direction: 1 | -1) => (): number => direction * stepSize();\n    const large = (direction: 1 | -1) => (): number => direction * largeStepSize();\n    const quickLabel = (direction: 1 | -1) => (): string => `${direction > 0 ? '+' : '−'}${largeStepSize()}`;\n\n    onCleanup(() => {\n      stopHold();\n      if (bumpTimer) clearTimeout(bumpTimer);\n    });\n\n    bind({\n      attr: {\n        'data-bump': () => (bumped.value ? '' : null),\n        size: props.size,\n      },\n    });\n\n    const describedBy = computed(() => (hasHint.value ? hintId : null));\n\n    return html`\n      <div class=\"counter\" part=\"counter\" role=\"group\" aria-labelledby=\"${labelId}\">\n        <div class=\"header\" part=\"header\">\n          <slot name=\"icon\"></slot>\n          <span class=\"label\" part=\"label\" id=\"${labelId}\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div class=\"controls\" part=\"controls\" @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n          <button\n            class=\"btn btn-large\"\n            part=\"decrement-large-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Decrease ${props.label.value ?? ''} by ${largeStepSize()}`.trim()}\"\n            ?hidden=\"${() => isReadonly.value || !hasQuickSteps.value}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMin()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(large(-1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(large(-1), e)}\">\n            ${quickLabel(-1)}\n          </button>\n          <button\n            class=\"btn\"\n            part=\"decrement-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Decrease ${props.label.value ?? ''}`.trim()}\"\n            ?hidden=\"${isReadonly}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMin()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(small(-1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(small(-1), e)}\">\n            <ore-icon name=\"minus\" size=\"var(--_icon-size)\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <output\n            class=\"value\"\n            part=\"value\"\n            role=\"spinbutton\"\n            aria-live=\"polite\"\n            aria-labelledby=\"${labelId}\"\n            aria-describedby=\"${describedBy}\"\n            aria-valuenow=\"${() => String(current.value)}\"\n            aria-valuemin=\"${() => (props.min.value != null ? String(props.min.value) : null)}\"\n            aria-valuemax=\"${() => (props.max.value != null ? String(props.max.value) : null)}\"\n            aria-readonly=\"${() => (isReadonly.value ? 'true' : null)}\"\n            aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\">\n            ${() => String(current.value)}\n          </output>\n          <button\n            class=\"btn\"\n            part=\"increment-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Increase ${props.label.value ?? ''}`.trim()}\"\n            ?hidden=\"${isReadonly}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMax()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(small(1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(small(1), e)}\">\n            <ore-icon name=\"plus\" size=\"var(--_icon-size)\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <button\n            class=\"btn btn-large\"\n            part=\"increment-large-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Increase ${props.label.value ?? ''} by ${largeStepSize()}`.trim()}\"\n            ?hidden=\"${() => isReadonly.value || !hasQuickSteps.value}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMax()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(large(1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(large(1), e)}\">\n            ${quickLabel(1)}\n          </button>\n        </div>\n        <slot name=\"hint\">\n          <span class=\"hint\" part=\"hint\" id=\"${hintId}\" ?hidden=\"${() => !hasHint.value}\">\n            ${() => props.hint.value ?? ''}\n          </span>\n        </slot>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, disabledStateMixin, coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/counter.js

@@ -0,0 +1,180 @@
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r } from "./styles/mixins/theme.css.js";
+import { createSpinnerControl as i } from "./core/spinner.js";
+import { disablableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
+import c from "./inputs/counter/counter.css.js";
+import { bind as l, createId as u, define as d, getHost as f, html as p, onCleanup as m, prop as h, useEmit as g } from "@vielzeug/ore";
+import { computed as _, signal as v, watch as y } from "@vielzeug/ripple";
+//#region src/inputs/counter/counter.ts
+var b = 400, x = 120, S = "ore-counter";
+d(S, {
+	props: {
+		...s,
+		...o,
+		...a,
+		hint: h.string(),
+		label: h.string(),
+		"large-step": h.json(void 0),
+		max: h.json(void 0),
+		min: h.number(0),
+		"quick-steps": h.bool(!1),
+		readonly: h.bool(!1),
+		step: h.number(1),
+		value: h.number(0)
+	},
+	setup(e) {
+		let t = f(), n = g(), r = u("counter-label"), a = u("counter-hint"), o = v(Number(e.value.value) || 0);
+		y(e.value, (e) => {
+			let t = Number(e);
+			Number.isFinite(t) && t !== o.value && (o.value = t);
+		});
+		let s = _(() => !!e.disabled.value), c = _(() => !!e.readonly.value), d = _(() => !s.value && !c.value), h = _(() => !!e.hint.value), b = v(!1), x = null, S = i({
+			commit: (e) => {
+				if (e == null) return;
+				let r = e - o.value;
+				r !== 0 && (o.value = e, t.setAttribute("value", String(e)), n("change", {
+					delta: r,
+					value: e
+				}), x && clearTimeout(x), b.value = !1, b.value = !0, x = setTimeout(() => {
+					b.value = !1, x = null;
+				}, 200));
+			},
+			disabled: s,
+			largeStep: e["large-step"],
+			max: e.max,
+			min: e.min,
+			parse: () => o.value,
+			readonly: c,
+			step: e.step
+		}), C = () => Number(e.step.value) || 1, w = () => Number(e["large-step"].value) || C() * 10, T = _(() => !!e["quick-steps"].value), E = null, D = null, O = !1, k = () => {
+			E && clearTimeout(E), D && clearInterval(D), E = null, D = null;
+		}, A = (e, t) => {
+			d.value && t.button === 0 && (k(), O = !1, E = setTimeout(() => {
+				O = !0, S.incrementBy(e(), t), D = setInterval(() => {
+					let n = e();
+					if (n > 0 && S.atMax() || n < 0 && S.atMin()) {
+						k();
+						return;
+					}
+					S.incrementBy(n, t);
+				}, 120);
+			}, 400));
+		}, j = (e, t) => {
+			if (O) {
+				O = !1;
+				return;
+			}
+			S.incrementBy(e(), t);
+		}, M = (e) => () => e * C(), N = (e) => () => e * w(), P = (e) => () => `${e > 0 ? "+" : "−"}${w()}`;
+		m(() => {
+			k(), x && clearTimeout(x);
+		}), l({ attr: {
+			"data-bump": () => b.value ? "" : null,
+			size: e.size
+		} });
+		let F = _(() => h.value ? a : null);
+		return p`
+      <div class="counter" part="counter" role="group" aria-labelledby="${r}">
+        <div class="header" part="header">
+          <slot name="icon"></slot>
+          <span class="label" part="label" id="${r}">${() => e.label.value ?? ""}</span>
+        </div>
+        <div class="controls" part="controls" @keydown="${(e) => S.handleKeydown(e)}">
+          <button
+            class="btn btn-large"
+            part="decrement-large-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${() => `Decrease ${e.label.value ?? ""} by ${w()}`.trim()}"
+            ?hidden="${() => c.value || !T.value}"
+            ?disabled="${() => !d.value || S.atMin()}"
+            @pointerdown="${(e) => A(N(-1), e)}"
+            @pointerup="${k}"
+            @pointercancel="${k}"
+            @pointerleave="${k}"
+            @click="${(e) => j(N(-1), e)}">
+            ${P(-1)}
+          </button>
+          <button
+            class="btn"
+            part="decrement-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${() => `Decrease ${e.label.value ?? ""}`.trim()}"
+            ?hidden="${c}"
+            ?disabled="${() => !d.value || S.atMin()}"
+            @pointerdown="${(e) => A(M(-1), e)}"
+            @pointerup="${k}"
+            @pointercancel="${k}"
+            @pointerleave="${k}"
+            @click="${(e) => j(M(-1), e)}">
+            <ore-icon name="minus" size="var(--_icon-size)" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+          <output
+            class="value"
+            part="value"
+            role="spinbutton"
+            aria-live="polite"
+            aria-labelledby="${r}"
+            aria-describedby="${F}"
+            aria-valuenow="${() => String(o.value)}"
+            aria-valuemin="${() => e.min.value == null ? null : String(e.min.value)}"
+            aria-valuemax="${() => e.max.value == null ? null : String(e.max.value)}"
+            aria-readonly="${() => c.value ? "true" : null}"
+            aria-disabled="${() => s.value ? "true" : null}"
+            tabindex="${() => s.value ? "-1" : "0"}">
+            ${() => String(o.value)}
+          </output>
+          <button
+            class="btn"
+            part="increment-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${() => `Increase ${e.label.value ?? ""}`.trim()}"
+            ?hidden="${c}"
+            ?disabled="${() => !d.value || S.atMax()}"
+            @pointerdown="${(e) => A(M(1), e)}"
+            @pointerup="${k}"
+            @pointercancel="${k}"
+            @pointerleave="${k}"
+            @click="${(e) => j(M(1), e)}">
+            <ore-icon name="plus" size="var(--_icon-size)" stroke-width="2.5" aria-hidden="true"></ore-icon>
+          </button>
+          <button
+            class="btn btn-large"
+            part="increment-large-btn"
+            type="button"
+            tabindex="-1"
+            aria-label="${() => `Increase ${e.label.value ?? ""} by ${w()}`.trim()}"
+            ?hidden="${() => c.value || !T.value}"
+            ?disabled="${() => !d.value || S.atMax()}"
+            @pointerdown="${(e) => A(N(1), e)}"
+            @pointerup="${k}"
+            @pointercancel="${k}"
+            @pointerleave="${k}"
+            @click="${(e) => j(N(1), e)}">
+            ${P(1)}
+          </button>
+        </div>
+        <slot name="hint">
+          <span class="hint" part="hint" id="${a}" ?hidden="${() => !h.value}">
+            ${() => e.hint.value ?? ""}
+          </span>
+        </slot>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		r,
+		n,
+		e,
+		t,
+		c
+	]
+});
+//#endregion
+export { b as COUNTER_HOLD_DELAY_MS, x as COUNTER_HOLD_REPEAT_MS, S as COUNTER_TAG };
+
+//# sourceMappingURL=counter.js.map

package/dist/counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.js","names":[],"sources":["../src/inputs/counter/counter.ts"],"sourcesContent":["import { bind, createId, define, getHost, html, onCleanup, prop, useEmit } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\nimport { createSpinnerControl } from '../../core';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, reducedMotionMixin } from '../../styles';\nimport componentStyles from './counter.css?inline';\n\nexport type OreCounterChangeDetail = {\n  /** Difference between the new and the previous value */\n  delta: number;\n  /** New value after clamping */\n  value: number;\n};\n\nexport type OreCounterEvents = {\n  change: OreCounterChangeDetail;\n};\n\n/** Counter props */\nexport type OreCounterProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** One-line timing or usage hint rendered under the controls */\n  hint?: string;\n  /** Visible label; also names the control for assistive technology */\n  label?: string;\n  /** Step for Page Up/Down (default: 10 × step) */\n  'large-step'?: number;\n  /** Maximum allowed value */\n  max?: number;\n  /** Minimum allowed value (default: 0) */\n  min?: number;\n  /** Render an outer pair of −/+ buttons that move by `large-step` */\n  'quick-steps'?: boolean;\n  /** Show the value without controls */\n  readonly?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n  /** Increment/decrement step (default: 1) */\n  step?: number;\n  /** Current value */\n  value?: number;\n};\n\n/** Hold delay before auto-repeat starts, then the repeat interval. */\nexport const COUNTER_HOLD_DELAY_MS = 400;\nexport const COUNTER_HOLD_REPEAT_MS = 120;\n\n/**\n * A large-target tally control for counting things at a glance: `−` / value / `+` with an\n * optional icon, label and hint. Designed for touch and arm's-length use (tabletop trackers,\n * inventories, scoreboards) rather than typed form entry — use `ore-number-input` for that.\n *\n * Holding any button auto-repeats. The value is announced through a live region and is\n * keyboard-operable as a spinbutton (Arrow keys, Home/End, Page Up/Down). Set `quick-steps` to add an\n * outer pair of buttons that move by `large-step`, for values that change in chunks (damage, scores).\n *\n * @element ore-counter\n *\n * @attr {number} value - Current value (default: 0)\n * @attr {number} min - Minimum value (default: 0)\n * @attr {number} max - Maximum value\n * @attr {number} step - Increment/decrement step (default: 1)\n * @attr {number} large-step - Step for Page Up/Down and the quick-step buttons (default: 10 × step)\n * @attr {boolean} quick-steps - Adds an outer −/+ pair that moves by `large-step`\n * @attr {boolean} disabled - Disables the control\n * @attr {boolean} readonly - Shows the value without the −/+ buttons\n * @attr {string} label - Visible label and accessible name\n * @attr {string} hint - One-line hint under the controls\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n *\n * @fires change - Fired after every accepted change. detail: { value: number, delta: number }\n *\n * @slot icon - Leading icon or token artwork shown before the label\n * @slot hint - Custom hint content (replaces the `hint` attribute)\n *\n * @cssprop --counter-value-size - Font size of the value\n * @cssprop --counter-button-size - Width/height of the −/+ buttons\n * @cssprop --counter-gap - Gap between the buttons and the value\n * @cssprop --counter-bg - Background of the control\n * @cssprop --counter-border-color - Border color of the control\n * @cssprop --counter-radius - Border radius of the control\n * @cssprop --counter-icon-size - Size of the slotted icon\n *\n * @part counter - Root container.\n * @part header - Icon and label row.\n * @part label - Label element.\n * @part controls - Buttons and value row.\n * @part decrement-large-btn - Quick-step decrement button (`quick-steps` only).\n * @part decrement-btn - Decrement button.\n * @part value - Value output.\n * @part increment-btn - Increment button.\n * @part increment-large-btn - Quick-step increment button (`quick-steps` only).\n * @part hint - Hint element.\n *\n * @example\n * ```html\n * <ore-counter label=\"Stamina\" value=\"3\" hint=\"Pay for actions\">\n *   <ore-icon slot=\"icon\" name=\"zap\"></ore-icon>\n * </ore-counter>\n * <ore-counter label=\"Score\" value=\"10\" min=\"0\" max=\"99\" size=\"lg\" color=\"primary\"></ore-counter>\n * <ore-counter label=\"Damage\" value=\"12\" large-step=\"5\" quick-steps></ore-counter>\n * ```\n */\nexport const COUNTER_TAG = 'ore-counter' as const;\ndefine<OreCounterProps>(COUNTER_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    hint: prop.string(),\n    label: prop.string(),\n    'large-step': prop.json(undefined as number | undefined),\n    max: prop.json(undefined as number | undefined),\n    min: prop.number(0),\n    'quick-steps': prop.bool(false),\n    readonly: prop.bool(false),\n    step: prop.number(1),\n    value: prop.number(0),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCounterEvents>();\n    const labelId = createId('counter-label');\n    const hintId = createId('counter-hint');\n\n    const current = signal(Number(props.value.value) || 0);\n\n    watch(props.value, (next) => {\n      const parsed = Number(next);\n\n      if (Number.isFinite(parsed) && parsed !== current.value) current.value = parsed;\n    });\n\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isReadonly = computed(() => Boolean(props.readonly.value));\n    const isInteractive = computed(() => !isDisabled.value && !isReadonly.value);\n    const hasHint = computed(() => Boolean(props.hint.value));\n\n    // Toggled briefly on every change so the CSS bump animation restarts.\n    const bumped = signal(false);\n    let bumpTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const commit = (next: number | null): void => {\n      if (next == null) return;\n\n      const delta = next - current.value;\n\n      if (delta === 0) return;\n\n      current.value = next;\n      el.setAttribute('value', String(next));\n      emit('change', { delta, value: next });\n\n      if (bumpTimer) clearTimeout(bumpTimer);\n      bumped.value = false;\n      bumped.value = true;\n      bumpTimer = setTimeout(() => {\n        bumped.value = false;\n        bumpTimer = null;\n      }, 200);\n    };\n\n    const spinner = createSpinnerControl({\n      commit,\n      disabled: isDisabled,\n      largeStep: props['large-step'],\n      max: props.max,\n      min: props.min,\n      parse: () => current.value,\n      readonly: isReadonly,\n      step: props.step,\n    });\n\n    const stepSize = (): number => Number(props.step.value) || 1;\n    const largeStepSize = (): number => Number(props['large-step'].value) || stepSize() * 10;\n    const hasQuickSteps = computed(() => Boolean(props['quick-steps'].value));\n\n    // ── Press-and-hold auto-repeat ──────────────────────────────────────────\n    let holdTimer: ReturnType<typeof setTimeout> | null = null;\n    let repeatTimer: ReturnType<typeof setInterval> | null = null;\n    let repeated = false;\n\n    const stopHold = (): void => {\n      if (holdTimer) clearTimeout(holdTimer);\n      if (repeatTimer) clearInterval(repeatTimer);\n      holdTimer = null;\n      repeatTimer = null;\n    };\n\n    const startHold = (amount: () => number, e: PointerEvent): void => {\n      if (!isInteractive.value || e.button !== 0) return;\n\n      stopHold();\n      repeated = false;\n      holdTimer = setTimeout(() => {\n        repeated = true;\n        spinner.incrementBy(amount(), e);\n        repeatTimer = setInterval(() => {\n          const direction = amount();\n\n          if ((direction > 0 && spinner.atMax()) || (direction < 0 && spinner.atMin())) {\n            stopHold();\n\n            return;\n          }\n\n          spinner.incrementBy(direction, e);\n        }, COUNTER_HOLD_REPEAT_MS);\n      }, COUNTER_HOLD_DELAY_MS);\n    };\n\n    // The click that ends a long-press must not add one more step on top of the repeats.\n    const handleClick = (amount: () => number, e: Event): void => {\n      if (repeated) {\n        repeated = false;\n\n        return;\n      }\n\n      spinner.incrementBy(amount(), e);\n    };\n\n    const small = (direction: 1 | -1) => (): number => direction * stepSize();\n    const large = (direction: 1 | -1) => (): number => direction * largeStepSize();\n    const quickLabel = (direction: 1 | -1) => (): string => `${direction > 0 ? '+' : '−'}${largeStepSize()}`;\n\n    onCleanup(() => {\n      stopHold();\n      if (bumpTimer) clearTimeout(bumpTimer);\n    });\n\n    bind({\n      attr: {\n        'data-bump': () => (bumped.value ? '' : null),\n        size: props.size,\n      },\n    });\n\n    const describedBy = computed(() => (hasHint.value ? hintId : null));\n\n    return html`\n      <div class=\"counter\" part=\"counter\" role=\"group\" aria-labelledby=\"${labelId}\">\n        <div class=\"header\" part=\"header\">\n          <slot name=\"icon\"></slot>\n          <span class=\"label\" part=\"label\" id=\"${labelId}\">${() => props.label.value ?? ''}</span>\n        </div>\n        <div class=\"controls\" part=\"controls\" @keydown=\"${(e: KeyboardEvent) => spinner.handleKeydown(e)}\">\n          <button\n            class=\"btn btn-large\"\n            part=\"decrement-large-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Decrease ${props.label.value ?? ''} by ${largeStepSize()}`.trim()}\"\n            ?hidden=\"${() => isReadonly.value || !hasQuickSteps.value}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMin()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(large(-1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(large(-1), e)}\">\n            ${quickLabel(-1)}\n          </button>\n          <button\n            class=\"btn\"\n            part=\"decrement-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Decrease ${props.label.value ?? ''}`.trim()}\"\n            ?hidden=\"${isReadonly}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMin()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(small(-1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(small(-1), e)}\">\n            <ore-icon name=\"minus\" size=\"var(--_icon-size)\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <output\n            class=\"value\"\n            part=\"value\"\n            role=\"spinbutton\"\n            aria-live=\"polite\"\n            aria-labelledby=\"${labelId}\"\n            aria-describedby=\"${describedBy}\"\n            aria-valuenow=\"${() => String(current.value)}\"\n            aria-valuemin=\"${() => (props.min.value != null ? String(props.min.value) : null)}\"\n            aria-valuemax=\"${() => (props.max.value != null ? String(props.max.value) : null)}\"\n            aria-readonly=\"${() => (isReadonly.value ? 'true' : null)}\"\n            aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\">\n            ${() => String(current.value)}\n          </output>\n          <button\n            class=\"btn\"\n            part=\"increment-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Increase ${props.label.value ?? ''}`.trim()}\"\n            ?hidden=\"${isReadonly}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMax()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(small(1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(small(1), e)}\">\n            <ore-icon name=\"plus\" size=\"var(--_icon-size)\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <button\n            class=\"btn btn-large\"\n            part=\"increment-large-btn\"\n            type=\"button\"\n            tabindex=\"-1\"\n            aria-label=\"${() => `Increase ${props.label.value ?? ''} by ${largeStepSize()}`.trim()}\"\n            ?hidden=\"${() => isReadonly.value || !hasQuickSteps.value}\"\n            ?disabled=\"${() => !isInteractive.value || spinner.atMax()}\"\n            @pointerdown=\"${(e: PointerEvent) => startHold(large(1), e)}\"\n            @pointerup=\"${stopHold}\"\n            @pointercancel=\"${stopHold}\"\n            @pointerleave=\"${stopHold}\"\n            @click=\"${(e: Event) => handleClick(large(1), e)}\">\n            ${quickLabel(1)}\n          </button>\n        </div>\n        <slot name=\"hint\">\n          <span class=\"hint\" part=\"hint\" id=\"${hintId}\" ?hidden=\"${() => !hasHint.value}\">\n            ${() => props.hint.value ?? ''}\n          </span>\n        </slot>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, disabledStateMixin, coarsePointerMixin, reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}