WRNexusJS/examples/component-showcase/app/pages/components/input-number.wrn

// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page InputNumberDetail {
  layout = "showcase"
  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
  state playground_name = ctx.url.searchParams.get("pg_name") ?? "default-quantity"
  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "1")
  state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
  state playground_max = ctx.url.searchParams.get("pg_max") ?? "99"
  state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
  state playground_precision = ctx.url.searchParams.get("pg_precision") ?? "auto"
  state playground_label = ctx.url.searchParams.get("pg_label") ?? ""
  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
  state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
  state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
  state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
  state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
  state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
  state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "decimal"
  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
  state playground_inputDisabled = (ctx.url.searchParams.get("pg_inputDisabled") ?? "false") === "true"
  state playground_buttonsDisabled = (ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false") === "true"
  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
  state playground_allowInput = (ctx.url.searchParams.get("pg_allowInput") ?? "true") === "true"
  state playground_keyboard = (ctx.url.searchParams.get("pg_keyboard") ?? "true") === "true"
  state playground_wheel = (ctx.url.searchParams.get("pg_wheel") ?? "false") === "true"
  state playground_clamp = (ctx.url.searchParams.get("pg_clamp") ?? "true") === "true"
  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
  state playground_showButtons = (ctx.url.searchParams.get("pg_showButtons") ?? "true") === "true"
  state playground_showValidationMessage = (ctx.url.searchParams.get("pg_showValidationMessage") ?? "true") === "true"
  state playground_decrementLabel = ctx.url.searchParams.get("pg_decrementLabel") ?? "Decrease value"
  state playground_incrementLabel = ctx.url.searchParams.get("pg_incrementLabel") ?? "Increase value"
  state playground_controlsLabel = ctx.url.searchParams.get("pg_controlsLabel") ?? "Quantity controls"
  state playground_requiredMessage = ctx.url.searchParams.get("pg_requiredMessage") ?? "A value is required."
  state playground_minMessage = ctx.url.searchParams.get("pg_minMessage") ?? "Value is below the minimum."
  state playground_maxMessage = ctx.url.searchParams.get("pg_maxMessage") ?? "Value is above the maximum."
  seo {
    title = "Input Number"
    description = "Theme-aware, responsive input number component."
  }
  view {
    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/advanced-forms">Advanced Forms</a><span aria-hidden="true">/</span><span>Input Number</span>
    </nav>
    <header class="detail-hero">
      <div class="detail-hero-copy">
        <span class="showcase-eyebrow">Advanced Forms component</span>
        <h1>Input Number</h1>
        <p>Theme-aware, responsive input number component.</p>
        <div class="detail-badges"><span>40 props</span><span>0 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
      </div>
      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
    </header>
    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="InputNumber" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,increment,decrement">
      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Input Number</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
      <div class="playground-workbench">
        <div class="playground-preview">
          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
          <div class="playground-preview-source" data-playground-preview><InputNumber size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' id='{playground_id}' name='{playground_name}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' precision='{playground_precision}' label='{playground_label}' description='{playground_description}' helpText='{playground_helpText}' error='{playground_error}' invalid='{playground_invalid}' prefix='{playground_prefix}' suffix='{playground_suffix}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' inputMode='{playground_inputMode}' ariaLabel='{playground_ariaLabel}' required='{playground_required}' disabled='{playground_disabled}' inputDisabled='{playground_inputDisabled}' buttonsDisabled='{playground_buttonsDisabled}' readonly='{playground_readonly}' allowInput='{playground_allowInput}' keyboard='{playground_keyboard}' wheel='{playground_wheel}' clamp='{playground_clamp}' fullWidth='{playground_fullWidth}' showButtons='{playground_showButtons}' showValidationMessage='{playground_showValidationMessage}' decrementLabel='{playground_decrementLabel}' incrementLabel='{playground_incrementLabel}' controlsLabel='{playground_controlsLabel}' requiredMessage='{playground_requiredMessage}' minMessage='{playground_minMessage}' maxMessage='{playground_maxMessage}' /></div>
          <section class="playground-code" aria-label="Current component code">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
            <pre><code data-playground-code>&lt;InputNumber
  size="md"
  name="default-quantity"
  value="1"
  min="0"
  max="99"
/&gt;</code></pre>
          </section>
          <div class="playground-status" data-playground-status aria-live="polite"></div>
          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
        </div>
        <form class="playground-controls" data-playground-form>
          <header><div><span>Component props</span><strong>40 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
          <div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-number-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-input-number-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-number-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>number</small></span><input id="playground-input-number-value" name="pg_value" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>number</small></span><input id="playground-input-number-step" name="pg_step" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-precision"><span><strong>precision</strong><small>string</small></span><input id="playground-input-number-precision" name="pg_precision" type="text" value="auto" /></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="" /></label><label class="playground-field" for="playground-input-number-description"><span><strong>description</strong><small>string</small></span><input id="playground-input-number-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-input-number-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-input-number-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-input-number-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-number-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-input-number-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-input-number-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-input-number-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-number-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-input-number-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-input-number-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-field" for="playground-input-number-inputMode"><span><strong>input Mode</strong><small>string</small></span><input id="playground-input-number-inputMode" name="pg_inputMode" type="text" value="decimal" /></label><label class="playground-field" for="playground-input-number-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-input-number-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-inputDisabled"><span><strong>input Disabled</strong><small>boolean</small></span><input id="playground-input-number-inputDisabled" name="pg_inputDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-buttonsDisabled"><span><strong>buttons Disabled</strong><small>boolean</small></span><input id="playground-input-number-buttonsDisabled" name="pg_buttonsDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-number-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-allowInput"><span><strong>allow Input</strong><small>boolean</small></span><input id="playground-input-number-allowInput" name="pg_allowInput" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-keyboard"><span><strong>keyboard</strong><small>boolean</small></span><input id="playground-input-number-keyboard" name="pg_keyboard" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-wheel"><span><strong>wheel</strong><small>boolean</small></span><input id="playground-input-number-wheel" name="pg_wheel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-clamp"><span><strong>clamp</strong><small>boolean</small></span><input id="playground-input-number-clamp" name="pg_clamp" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-input-number-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showButtons"><span><strong>show Buttons</strong><small>boolean</small></span><input id="playground-input-number-showButtons" name="pg_showButtons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showValidationMessage"><span><strong>show Validation Message</strong><small>boolean</small></span><input id="playground-input-number-showValidationMessage" name="pg_showValidationMessage" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-decrementLabel"><span><strong>decrement Label</strong><small>string</small></span><input id="playground-input-number-decrementLabel" name="pg_decrementLabel" type="text" value="Decrease value" /></label><label class="playground-field" for="playground-input-number-incrementLabel"><span><strong>increment Label</strong><small>string</small></span><input id="playground-input-number-incrementLabel" name="pg_incrementLabel" type="text" value="Increase value" /></label><label class="playground-field" for="playground-input-number-controlsLabel"><span><strong>controls Label</strong><small>string</small></span><input id="playground-input-number-controlsLabel" name="pg_controlsLabel" type="text" value="Quantity controls" /></label><label class="playground-field" for="playground-input-number-requiredMessage"><span><strong>required Message</strong><small>string</small></span><input id="playground-input-number-requiredMessage" name="pg_requiredMessage" type="text" value="A value is required." /></label><label class="playground-field" for="playground-input-number-minMessage"><span><strong>min Message</strong><small>string</small></span><input id="playground-input-number-minMessage" name="pg_minMessage" type="text" value="Value is below the minimum." /></label><label class="playground-field" for="playground-input-number-maxMessage"><span><strong>max Message</strong><small>string</small></span><input id="playground-input-number-maxMessage" name="pg_maxMessage" type="text" value="Value is above the maximum." /></label></div>
        </form>
      </div>
    </section>
    <div class="detail-layout">
      <main class="detail-content">
        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Default controls</h2><p>Use standard decrement and increment buttons alongside a numeric input field.</p></div>
          <span class="demo-case-number">01</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
          </div>
          <section class="demo-code" aria-label="Default controls usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="default-quantity"
  value="1"
  min="0"
  max="99"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Labeled input style</h2><p>Add supporting label text and rounded controls for a more form-like number input.</p></div>
          <span class="demo-case-number">02</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
          </div>
          <section class="demo-code" aria-label="Labeled input style usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  variant="labeled"
  name="labeled-quantity"
  value="1"
  min="1"
  max="25"
  label="Select quantity"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Layout</span><h2>Vertical buttons</h2><p>Stack the increment and decrement buttons vertically beside the field.</p></div>
          <span class="demo-case-number">03</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
          </div>
          <section class="demo-code" aria-label="Vertical buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  variant="vertical"
  name="vertical-quantity"
  value="1"
  min="0"
  max="20"
  label="Select quantity"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Layout</span><h2>Horizontal buttons</h2><p>Place the increment and decrement buttons on opposite sides of the value.</p></div>
          <span class="demo-case-number">04</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
          </div>
          <section class="demo-code" aria-label="Horizontal buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  variant="horizontal"
  name="horizontal-quantity"
  value="1"
  min="0"
  max="20"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Sizing</span><h2>Compact size</h2><p>Use a smaller compact control when the available space is limited.</p></div>
          <span class="demo-case-number">05</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
          </div>
          <section class="demo-code" aria-label="Compact size usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="sm"
  variant="compact"
  name="compact-quantity"
  min="0"
  max="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Commerce</span><h2>Seat quantity selector</h2><p>Pair the control with pricing information for seat counts or plan add-ons.</p></div>
          <span class="demo-case-number">06</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
          </div>
          <section class="demo-code" aria-label="Seat quantity selector usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  variant="seat"
  name="additional-seats"
  min="0"
  max="50"
  label="Additional seats"
  description="$39 monthly"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">States</span><h2>Disabled input</h2><p>Disable manual entry while keeping supported quantity controls available.</p></div>
          <span class="demo-case-number">07</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
          </div>
          <section class="demo-code" aria-label="Disabled input usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="disabled-input"
  value="10"
  inputDisabled="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">States</span><h2>Disabled buttons</h2><p>Disable increment and decrement controls while leaving the current value visible.</p></div>
          <span class="demo-case-number">08</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
          </div>
          <section class="demo-code" aria-label="Disabled buttons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="disabled-buttons"
  value="10"
  buttonsDisabled="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Behaviour</span><h2>Custom step size</h2><p>Set a custom step so every button press changes the value by two.</p></div>
          <span class="demo-case-number">09</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
          </div>
          <section class="demo-code" aria-label="Custom step size usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="custom-step"
  min="0"
  max="20"
  step="2"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Limits</span><h2>Negative values</h2><p>Use the min option to permit controlled negative values.</p></div>
          <span class="demo-case-number">010</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
          </div>
          <section class="demo-code" aria-label="Negative values usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="negative-values"
  value="-10"
  min="-100"
  max="100"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Limits</span><h2>Maximum limit</h2><p>Set an upper limit and disable incrementing when that limit is reached.</p></div>
          <span class="demo-case-number">011</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
          </div>
          <section class="demo-code" aria-label="Maximum limit usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="maximum-limit"
  value="10"
  min="0"
  max="10"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Communicate whether the current numerical value is valid.</p></div>
          <span class="demo-case-number">012</span>
        </header>
        <div class="demo-workbench">
          <div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
          </div>
          <section class="demo-code" aria-label="Validation states usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;InputNumber
  size="md"
  name="invalid-quantity"
  value="10"
  min="0"
  max="5"
  error="Out of limit"
/&gt;</code></pre>
          </section>
        </div>
      </article></div></section>
        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@increment</code><span>Fires when the component emits the increment event.</span></div><div><code>@decrement</code><span>Fires when the component emits the decrement event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;InputNumber
  @input='console.log(payload)'
  @change='console.log(payload)'
  @increment='console.log(payload)'
  @decrement='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"InputNumber\"], [data-component=\"InputNumber\"]")

if (component) registerOutputHandler(component, "input", (payload) =&gt; <span>&#123;</span>
  console.log("input", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
  console.log("change", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "increment", (payload) =&gt; <span>&#123;</span>
  console.log("increment", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "decrement", (payload) =&gt; <span>&#123;</span>
  console.log("decrement", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"quantity"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>precision</code></td><td>string</td><td><code>"auto"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"decimal"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>inputDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>buttonsDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowInput</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>keyboard</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>wheel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clamp</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showButtons</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValidationMessage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>decrementLabel</code></td><td>string</td><td><code>"Decrease value"</code></td><td>No</td></tr><tr><td><code>incrementLabel</code></td><td>string</td><td><code>"Increase value"</code></td><td>No</td></tr><tr><td><code>controlsLabel</code></td><td>string</td><td><code>"Quantity controls"</code></td><td>No</td></tr><tr><td><code>requiredMessage</code></td><td>string</td><td><code>"A value is required."</code></td><td>No</td></tr><tr><td><code>minMessage</code></td><td>string</td><td><code>"Value is below the minimum."</code></td><td>No</td></tr><tr><td><code>maxMessage</code></td><td>string</td><td><code>"Value is above the maximum."</code></td><td>No</td></tr></tbody></table></div></section>
      </main>
      <aside class="detail-aside">
        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-number-demo-1">Default controls</a><a href="#input-number-demo-2">Labeled input style</a><a href="#input-number-demo-3">Vertical buttons</a><a href="#input-number-demo-4">Horizontal buttons</a><a href="#input-number-demo-5">Compact size</a><a href="#input-number-demo-6">Seat quantity selector</a><a href="#input-number-demo-7">Disabled input</a><a href="#input-number-demo-8">Disabled buttons</a><a href="#input-number-demo-9">Custom step size</a><a href="#input-number-demo-10">Negative values</a><a href="#input-number-demo-11">Maximum limit</a><a href="#input-number-demo-12">Validation states</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
      </aside>
    </div>
    <nav class="detail-pagination">
      <a href="/components/combo-box"><small>Previous</small><strong>← Combo Box</strong></a>
      <a href="/components/pin-input"><small>Next</small><strong>Pin Input →</strong></a>
    </nav>
  }
}