// 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 = 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 = 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"
  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"
  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
  state playground_inputDisabled = ctx.url.searchParams.get("pg_inputDisabled") ?? "false"
  state playground_buttonsDisabled = ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false"
  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
  state playground_allowInput = ctx.url.searchParams.get("pg_allowInput") ?? "true"
  state playground_keyboard = ctx.url.searchParams.get("pg_keyboard") ?? "true"
  state playground_wheel = ctx.url.searchParams.get("pg_wheel") ?? "false"
  state playground_clamp = ctx.url.searchParams.get("pg_clamp") ?? "true"
  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
  state playground_showButtons = ctx.url.searchParams.get("pg_showButtons") ?? "true"
  state playground_showValidationMessage = ctx.url.searchParams.get("pg_showValidationMessage") ?? "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 events</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">
      <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><div data-component="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></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>
        <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><select id="playground-input-number-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="compact">compact</option><option value="horizontal">horizontal</option><option value="labeled">labeled</option><option value="seat">seat</option><option value="vertical">vertical</option></select></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"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></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"><div data-component="InputNumber" size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity"></div></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"><div data-component="InputNumber" size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity"></div></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"><div data-component="InputNumber" size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20"></div></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"><div data-component="InputNumber" size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10"></div></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"><div data-component="InputNumber" size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly"></div></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"><div data-component="InputNumber" size="md" color="primary" name="disabled-input" value="10" inputDisabled="true"></div></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"><div data-component="InputNumber" size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true"></div></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"><div data-component="InputNumber" size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2"></div></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"><div data-component="InputNumber" size="md" color="primary" name="negative-values" value="-10" min="-100" max="100"></div></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"><div data-component="InputNumber" size="md" color="primary" name="maximum-limit" value="10" min="0" max="10"></div></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"><div data-component="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit"></div></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 events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component 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><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) =&gt; &#123;
  console.log(event.detail)
&#125;)</code></pre></section></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">Events</a><a href="#api">Props API</a></div>
      </aside>
    </div>
    <nav class="detail-pagination">
      <a href="/components/copy-markup"><small>Previous</small><strong>← Copy Markup</strong></a>
      <a href="/components/pin-input"><small>Next</small><strong>Pin Input →</strong></a>
    </nav>
  }
}