@teseor/css 1.14.3 → 1.15.1

package/src/components/forms/fieldset/docs.html

@@ -0,0 +1,119 @@
+---
+title: Fieldset
+description: Groups related form fields with an optional legend and border.
+---
+
+<!-- @default -->
+<fieldset class="ui-fieldset">
+  <legend class="ui-fieldset__legend">Personal Information</legend>
+  <div class="ui-field">
+    <label class="ui-label" for="fname">First Name</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="fname" placeholder="Jane"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="lname">Last Name</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="lname" placeholder="Doe"></input>
+    </div>
+  </div>
+</fieldset>
+
+<!-- @bordered -->
+<!-- Visible border wrapping the field group -->
+<fieldset class="ui-fieldset ui-fieldset--bordered">
+  <legend class="ui-fieldset__legend">Shipping Address</legend>
+  <div class="ui-field">
+    <label class="ui-label" for="street">Street</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="street" placeholder="123 Example St"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="city">City</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="city" placeholder="Springfield"></input>
+    </div>
+  </div>
+</fieldset>
+
+<!-- @compact -->
+<!-- Reduced spacing for dense forms -->
+<fieldset class="ui-fieldset ui-fieldset--compact">
+  <legend class="ui-fieldset__legend">Preferences</legend>
+  <div class="ui-field">
+    <label class="ui-label" for="lang">Language</label>
+    <div class="ui-field__control">
+      <select class="ui-select" id="lang">
+        <option>English</option>
+        <option>Spanish</option>
+      </select>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="tz">Timezone</label>
+    <div class="ui-field__control">
+      <select class="ui-select" id="tz">
+        <option>UTC-5 Eastern</option>
+        <option>UTC-8 Pacific</option>
+      </select>
+    </div>
+  </div>
+</fieldset>
+
+<!-- @bordered_compact -->
+<!-- Bordered with reduced spacing -->
+<fieldset class="ui-fieldset ui-fieldset--bordered ui-fieldset--compact">
+  <legend class="ui-fieldset__legend">Payment</legend>
+  <div class="ui-field">
+    <label class="ui-label" for="card">Card Number</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="card" placeholder="4242 4242 4242 4242"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="exp">Expiry</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="exp" placeholder="MM/YY"></input>
+    </div>
+  </div>
+</fieldset>
+
+<!-- @disabled -->
+<!-- Native disabled attribute disables all child controls -->
+<fieldset class="ui-fieldset ui-fieldset--bordered" disabled>
+  <legend class="ui-fieldset__legend">Account (locked)</legend>
+  <div class="ui-field">
+    <label class="ui-label" for="uname">Username</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="uname" value="janedoe"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="role">Role</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="role" value="Editor"></input>
+    </div>
+  </div>
+</fieldset>
+
+<!-- @without_legend -->
+<!-- Fieldset as a spacing container without visible legend -->
+<fieldset class="ui-fieldset">
+  <div class="ui-field">
+    <label class="ui-label" for="search">Search</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="search" id="search" placeholder="Search..."></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="cat">Category</label>
+    <div class="ui-field__control">
+      <select class="ui-select" id="cat">
+        <option>All</option>
+        <option>Articles</option>
+      </select>
+    </div>
+  </div>
+</fieldset>

package/src/components/forms/fieldset/{fieldset.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'fieldset.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('fieldset visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'fieldset');
     await saveForLostPixel(page, 'fieldset');
-    await expect(page.locator('body')).toHaveScreenshot('fieldset.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/form/docs.html

@@ -0,0 +1,129 @@
+---
+title: Form
+description: Layout container for form fields with consistent spacing, sections, and an actions row.
+---
+
+<!-- @default -->
+<form class="ui-form">
+  <div class="ui-field">
+    <label class="ui-label" for="f-name">Name</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="f-name" placeholder="Full name"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="f-email">Email</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="email" id="f-email" placeholder="you@example.com"></input>
+    </div>
+  </div>
+  <div class="ui-form__actions">
+    <button class="ui-button">Submit</button>
+    <button class="ui-button ui-button--ghost" type="button">Cancel</button>
+  </div>
+</form>
+
+<!-- @with_sections -->
+<!-- Group related fields using fieldset-based sections -->
+<form class="ui-form">
+  <fieldset class="ui-form__section">
+    <legend class="ui-heading ui-heading--sm">Personal</legend>
+    <div class="ui-field">
+      <label class="ui-label" for="s-first">First name</label>
+      <div class="ui-field__control">
+        <input class="ui-input" type="text" id="s-first"></input>
+      </div>
+    </div>
+    <div class="ui-field">
+      <label class="ui-label" for="s-last">Last name</label>
+      <div class="ui-field__control">
+        <input class="ui-input" type="text" id="s-last"></input>
+      </div>
+    </div>
+  </fieldset>
+  <fieldset class="ui-form__section">
+    <legend class="ui-heading ui-heading--sm">Account</legend>
+    <div class="ui-field">
+      <label class="ui-label" for="s-email">Email</label>
+      <div class="ui-field__control">
+        <input class="ui-input" type="email" id="s-email"></input>
+      </div>
+    </div>
+    <div class="ui-field">
+      <label class="ui-label" for="s-pass">Password</label>
+      <div class="ui-field__control">
+        <input class="ui-input" type="password" id="s-pass"></input>
+      </div>
+    </div>
+  </fieldset>
+  <div class="ui-form__actions">
+    <button class="ui-button">Create account</button>
+  </div>
+</form>
+
+<!-- @compact -->
+<!-- Tighter spacing for dense interfaces -->
+<form class="ui-form ui-form--compact">
+  <div class="ui-field">
+    <label class="ui-label" for="c-user">Username</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="text" id="c-user"></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="c-pass">Password</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="password" id="c-pass"></input>
+    </div>
+  </div>
+  <div class="ui-form__actions">
+    <button class="ui-button">Log in</button>
+  </div>
+</form>
+
+<!-- @inline -->
+<!-- Horizontal layout for short forms like search or filters -->
+<form class="ui-form ui-form--inline">
+  <div class="ui-field">
+    <label class="ui-label" for="i-search">Search</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="search" id="i-search" placeholder="Search..."></input>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label" for="i-cat">Category</label>
+    <div class="ui-field__control">
+      <select class="ui-select" id="i-cat">
+        <option>All</option>
+        <option>Articles</option>
+        <option>Products</option>
+      </select>
+    </div>
+  </div>
+  <div class="ui-form__actions">
+    <button class="ui-button">Filter</button>
+  </div>
+</form>
+
+<!-- @with_validation -->
+<!-- Combining form layout with field error states -->
+<form class="ui-form">
+  <div class="ui-field">
+    <label class="ui-label ui-label--required" for="v-email">Email</label>
+    <div class="ui-field__control">
+      <input class="ui-input ui-input--error" type="email" id="v-email" value="not-an-email"></input>
+      <span class="ui-form-error">Enter a valid email address</span>
+    </div>
+  </div>
+  <div class="ui-field">
+    <label class="ui-label ui-label--required" for="v-pass">Password</label>
+    <div class="ui-field__control">
+      <input class="ui-input" type="password" id="v-pass"></input>
+      <span class="ui-form-helper">Must be at least 8 characters</span>
+    </div>
+  </div>
+  <div class="ui-form__actions">
+    <button class="ui-button">Sign up</button>
+    <button class="ui-button ui-button--ghost" type="button">Reset</button>
+  </div>
+</form>

package/src/components/forms/form/{form.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'form.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('form visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'form');
     await saveForLostPixel(page, 'form');
-    await expect(page.locator('body')).toHaveScreenshot('form.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/form-error/docs.html

@@ -0,0 +1,15 @@
+---
+title: Form Error
+description: Validation error message for form fields. Displays in danger color.
+---
+
+<!-- @default -->
+<span class="ui-form-error">This field is required</span>
+
+<!-- @with_icon -->
+<span class="ui-form-error">
+  <svg class="ui-form-error__icon ui-icon ui-icon--sm" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
+  </svg>
+  <span>Please enter a valid email</span>
+</span>

package/src/components/forms/form-error/{form-error.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'form-error.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('form-error visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'form-error');
     await saveForLostPixel(page, 'form-error');
-    await expect(page.locator('body')).toHaveScreenshot('form-error.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/form-helper/docs.html

@@ -0,0 +1,39 @@
+---
+title: Form Helper
+description: Helper text for form fields. Provides additional context or instructions.
+---
+
+<!-- @default -->
+<span class="ui-form-helper">Must be at least 8 characters</span>
+
+<!-- @with_input_field | column -->
+<!-- Helper text paired with a form input for context. -->
+<div class="ui-column ui-column--xs">
+  <input class="ui-input" type="email" placeholder="Email address"></input>
+  <span class="ui-form-helper">We will never share your email</span>
+</div>
+
+<!-- @error_state | column -->
+<!-- Helper text styled for validation errors using the input error context. -->
+<div class="ui-column ui-column--xs">
+  <input class="ui-input ui-input--error" type="text" value="abc"></input>
+  <span class="ui-form-helper" style="color: var(--ui-color-danger);">Password must be at least 8 characters</span>
+</div>
+
+<!-- @success_state | column -->
+<!-- Helper text for successful validation. -->
+<div class="ui-column ui-column--xs">
+  <input class="ui-input ui-input--success" type="text" value="strongpassword123"></input>
+  <span class="ui-form-helper" style="color: var(--ui-color-success);">Password strength: strong</span>
+</div>
+
+<!-- @with_select | column -->
+<!-- Helper text paired with a select field. -->
+<div class="ui-column ui-column--xs">
+  <select class="ui-select">
+    <option>Choose a country</option>
+    <option>United States</option>
+    <option>Canada</option>
+  </select>
+  <span class="ui-form-helper">Required for shipping calculations</span>
+</div>

package/src/components/forms/form-helper/{form-helper.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'form-helper.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('form-helper visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'form-helper');
     await saveForLostPixel(page, 'form-helper');
-    await expect(page.locator('body')).toHaveScreenshot('form-helper.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/input/docs.html

@@ -0,0 +1,66 @@
+---
+title: Input
+description: Text input field for user data entry. Heights align to grid rows.
+---
+
+<!-- @default -->
+<input class="ui-input" type="text" placeholder="Enter text..."></input>
+
+<!-- @sizes | column -->
+<input class="ui-input ui-input--sm" type="text" placeholder="Small (1.5 rows)"></input>
+<input class="ui-input" type="text" placeholder="Default (2 rows)"></input>
+<input class="ui-input ui-input--lg" type="text" placeholder="Large (2.5 rows)"></input>
+
+<!-- @variants | column -->
+<input class="ui-input" type="text" placeholder="Outline (default)"></input>
+<input class="ui-input ui-input--filled" type="text" placeholder="Filled"></input>
+<input class="ui-input ui-input--ghost" type="text" placeholder="Ghost"></input>
+
+<!-- @states | column -->
+<input class="ui-input" type="text" placeholder="Default"></input>
+<input class="ui-input ui-input--error" type="text" value="Invalid input"></input>
+<input class="ui-input ui-input--success" type="text" value="Valid input"></input>
+<input class="ui-input" type="text" placeholder="Disabled" disabled></input>
+<input class="ui-input" type="text" value="Read only" readonly></input>
+
+<!-- @full_width -->
+<input class="ui-input ui-input--block" type="text" placeholder="Full width input"></input>
+
+<!-- @with_prefix_icon -->
+<div class="ui-input-group ui-input-group--has-prefix">
+  <span class="ui-input-group__addon ui-input-group__addon--start">
+    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-input ui-input--block" type="search" placeholder="Search..."></input>
+</div>
+
+<!-- @with_suffix_icon -->
+<div class="ui-input-group ui-input-group--has-suffix">
+  <input class="ui-input ui-input--block" type="email" placeholder="Email address"></input>
+  <span class="ui-input-group__addon ui-input-group__addon--end">
+    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+    </svg>
+  </span>
+</div>
+
+<!-- @with_both_addons -->
+<div class="ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix">
+  <span class="ui-input-group__addon ui-input-group__addon--start">
+    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+      <circle cx="12" cy="7" r="4"></circle>
+    </svg>
+  </span>
+  <input class="ui-input ui-input--block" type="text" placeholder="Username"></input>
+  <span class="ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive">
+    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </span>
+</div>

package/src/components/forms/input/{input.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'input.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('input visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'input');
     await saveForLostPixel(page, 'input');
-    await expect(page.locator('body')).toHaveScreenshot('input.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/label/docs.html

@@ -0,0 +1,26 @@
+---
+title: Label
+description: Form control labels. Associates text with inputs via htmlFor or wrapping.
+---
+
+<!-- @default -->
+<label class="ui-label" for="input1">Email address</label>
+
+<!-- @required -->
+<label class="ui-label" for="input2">
+Email address
+  <span class="ui-label__required">*</span>
+</label>
+
+<!-- @optional -->
+<label class="ui-label" for="input3">
+Phone number
+  <span class="ui-label__optional">(optional)</span>
+</label>
+
+<!-- @sizes | column -->
+<label class="ui-label">Default size</label>
+<label class="ui-label ui-label--lg">Large size</label>
+
+<!-- @disabled -->
+<label class="ui-label" aria-disabled="true">Disabled label</label>

package/src/components/forms/label/{label.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'label.docs.json');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('label visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'label');
     await saveForLostPixel(page, 'label');
-    await expect(page.locator('body')).toHaveScreenshot('label.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/forms/number-input/docs.html

@@ -0,0 +1,97 @@
+---
+title: Number Input
+description: Numeric input with increment and decrement stepper buttons.
+---
+
+<!-- @default -->
+<div class="ui-number-input">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="5"></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>
+
+<!-- @sizes | column -->
+<div class="ui-number-input ui-number-input--sm">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="3"></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>
+<div class="ui-number-input">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="5"></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>
+<div class="ui-number-input ui-number-input--lg">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="10"></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>
+
+<!-- @block -->
+<!-- Full-width layout. -->
+<div class="ui-number-input ui-number-input--block">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="5"></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase">
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>
+
+<!-- @disabled -->
+<div class="ui-number-input ui-number-input--disabled">
+  <button class="ui-number-input__decrement" type="button" aria-label="Decrease" disabled>
+    <svg viewBox="0 0 24 24">
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+  <input class="ui-number-input__field" type="number" value="0" disabled></input>
+  <button class="ui-number-input__increment" type="button" aria-label="Increase" disabled>
+    <svg viewBox="0 0 24 24">
+      <path d="M12 5v14"></path>
+      <path d="M5 12h14"></path>
+    </svg>
+  </button>
+</div>