@teseor/css 1.0.0

package/src/04-components/progress/index.scss

@@ -0,0 +1,102 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Progress - progress bar indicator
+// Shows completion status of a task
+
+@layer components.tokens {
+  .progress {
+    --_height: var(--ui-progress-height, calc(#{t.$unit} * 1));
+    --_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --_fill: var(--ui-progress-fill, var(--ui-color-primary));
+    --_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
+  }
+
+  .progress--sm {
+    --_height: calc(#{t.$unit} * 1);
+  }
+
+  .progress--lg {
+    --_height: calc(#{t.$unit} * 2);
+  }
+}
+
+@layer components.styles {
+  .progress {
+    position: relative;
+
+    block-size: var(--_height);
+    overflow: hidden;
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  .progress__bar {
+    block-size: 100%;
+
+    background: var(--_fill);
+    border-radius: var(--_radius);
+
+    transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  }
+
+  // Indeterminate state - animated stripe
+  .progress--indeterminate .progress__bar {
+    inline-size: 30%;
+
+    animation: progress-indeterminate 1.5s infinite ease-in-out;
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(400%);
+    }
+  }
+
+  // Striped variant
+  .progress--striped .progress__bar {
+    background-image: linear-gradient(
+      45deg,
+      rgb(255 255 255 / 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgb(255 255 255 / 0.15) 50%,
+      rgb(255 255 255 / 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: #{t.$unit} #{t.$unit};
+  }
+
+  // Animated stripes
+  .progress--animated .progress__bar {
+    animation: progress-stripes 1s linear infinite;
+  }
+
+  @keyframes progress-stripes {
+    from {
+      background-position: #{t.$unit} 0;
+    }
+
+    to {
+      background-position: 0 0;
+    }
+  }
+
+  // Color variants
+  .progress--success {
+    --_fill: var(--ui-color-success);
+  }
+
+  .progress--warning {
+    --_fill: var(--ui-color-warning);
+  }
+
+  .progress--danger {
+    --_fill: var(--ui-color-danger);
+  }
+}

package/src/04-components/progress/progress.api.json

@@ -0,0 +1,23 @@
+{
+  "name": "progress",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-progress-height",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-progress-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-progress-fill",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-progress-radius",
+      "default": "var(--ui-radius-full)"
+    }
+  ]
+}

package/src/04-components/progress/progress.docs.json

@@ -0,0 +1,87 @@
+{
+  "id": "progress",
+  "type": "component",
+  "title": "Progress",
+  "description": "Progress bar indicator showing completion status. Use aria-valuenow for accessibility.",
+  "api": "./progress.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Loading\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div>",
+          "code": "<div class=\"ui-progress\" role=\"progressbar\"\n     aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n  <div class=\"ui-progress__bar\" style=\"width: 60%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><div class=\"ui-progress ui-progress--sm\" role=\"progressbar\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 40%;\"></div></div><div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div><div class=\"ui-progress ui-progress--lg\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 80%;\"></div></div></div>",
+          "code": "<div class=\"ui-progress ui-progress--sm\">...</div>\n<div class=\"ui-progress\">...</div>\n<div class=\"ui-progress ui-progress--lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Colors",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-2);\"><div class=\"ui-progress ui-progress--success\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 100%;\"></div></div><div class=\"ui-progress ui-progress--warning\" role=\"progressbar\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 60%;\"></div></div><div class=\"ui-progress ui-progress--danger\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 25%;\"></div></div></div>",
+          "code": "<div class=\"ui-progress ui-progress--success\">...</div>\n<div class=\"ui-progress ui-progress--warning\">...</div>\n<div class=\"ui-progress ui-progress--danger\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "examples": [
+        {
+          "html": "<div class=\"ui-progress ui-progress--striped\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 70%;\"></div></div>",
+          "code": "<div class=\"ui-progress ui-progress--striped\">\n  <div class=\"ui-progress__bar\" style=\"width: 70%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Animated Stripes",
+      "examples": [
+        {
+          "html": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ui-progress__bar\" style=\"width: 50%;\"></div></div>",
+          "code": "<div class=\"ui-progress ui-progress--striped ui-progress--animated\">\n  <div class=\"ui-progress__bar\" style=\"width: 50%;\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Indeterminate",
+      "description": "For unknown progress duration",
+      "api": "./progress.api.json",
+      "examples": [
+        {
+          "html": "<div class=\"ui-progress ui-progress--indeterminate\" role=\"progressbar\" aria-label=\"Loading\"><div class=\"ui-progress__bar\"></div></div>",
+          "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-progress-height",
+      "default": "calc(var(--unit) * 1)",
+      "description": "Bar height"
+    },
+    {
+      "token": "--ui-progress-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background"
+    },
+    {
+      "token": "--ui-progress-fill",
+      "default": "var(--ui-color-primary)",
+      "description": "Fill color"
+    },
+    {
+      "token": "--ui-progress-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Border radius"
+    }
+  ]
+}

package/src/04-components/progress/progress.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'progress.docs.json');
+
+test.describe('progress visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'progress');
+    await saveForLostPixel(page, 'progress');
+    await expect(page.locator('body')).toHaveScreenshot('progress.visual.png');
+  });
+});

package/src/04-components/radio/index.scss

@@ -0,0 +1,96 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component radio
+// @element input
+
+@layer components.tokens {
+  .radio {
+    --_size: var(--ui-radio-size, calc(#{t.$unit} * 2));
+    --_bg: var(--ui-radio-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
+    --_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  // @modifier size
+  .radio--lg {
+    --_size: var(--ui-radio-size-lg, calc(#{t.$unit} * 3));
+  }
+
+  // @modifier boolean error
+  .radio--error {
+    --_border-color: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+}
+
+@layer components.styles {
+  .radio {
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    margin: 0;
+
+    vertical-align: middle;
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: 50%;
+    cursor: pointer;
+    // Reset native radio
+    appearance: none;
+
+    transition:
+      background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    // Inner dot for checked state
+    &::before {
+      content: '';
+
+      block-size: 50%;
+      inline-size: 50%;
+
+      background-color: var(--_dot-color);
+      border-radius: 50%;
+      opacity: 0;
+      transform: scale(0);
+
+      transition:
+        opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+        transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--_border-color-focus);
+    }
+
+    &:focus-visible {
+      border-color: var(--_border-color-focus);
+      outline: none;
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &:checked {
+      background: var(--_bg-checked);
+      border-color: var(--_bg-checked);
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/04-components/radio/radio.api.json

@@ -0,0 +1,46 @@
+{
+  "name": "radio",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["lg"]
+    },
+    "error": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-radio-size",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-radio-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-radio-bg-checked",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-radio-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-radio-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-radio-dot-color",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-radio-size-lg",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-radio-error-border",
+      "default": "var(--ui-color-danger)"
+    }
+  ]
+}

package/src/04-components/radio/radio.docs.json

@@ -0,0 +1,159 @@
+{
+  "id": "radio",
+  "type": "component",
+  "title": "Radio",
+  "description": "Native radio button with custom styling. Use for mutually exclusive options within a group.",
+  "api": "./radio.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "input", "class": "ui-radio", "attrs": { "type": "radio", "name": "demo1" } },
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "demo1", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"radio\" class=\"ui-radio\" name=\"group1\">\n<input type=\"radio\" class=\"ui-radio\" name=\"group1\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--sm",
+              "attrs": { "type": "radio", "name": "sizes", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "sizes2", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--lg",
+              "attrs": { "type": "radio", "name": "sizes3", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--sm\" checked>\n<input type=\"radio\" class=\"ui-radio\" checked>\n<input type=\"radio\" class=\"ui-radio ui-radio--lg\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "states1" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "states2", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "states3", "disabled": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio",
+              "attrs": { "type": "radio", "name": "states4", "checked": "", "disabled": "" }
+            }
+          ],
+          "code": "<input type=\"radio\" class=\"ui-radio\">\n<input type=\"radio\" class=\"ui-radio\" checked>\n<input type=\"radio\" class=\"ui-radio\" disabled>\n<input type=\"radio\" class=\"ui-radio\" checked disabled>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--error",
+              "attrs": { "type": "radio", "name": "error1" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-radio ui-radio--error",
+              "attrs": { "type": "radio", "name": "error2", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"radio\" class=\"ui-radio ui-radio--error\">\n<input type=\"radio\" class=\"ui-radio ui-radio--error\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "html": "<label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"labeled\"><span>Option one</span></label>",
+          "code": "<label class=\"ui-cluster\">\n  <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n  <span>Option one</span>\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Radio Group",
+      "examples": [
+        {
+          "html": "<fieldset style=\"border: none; padding: 0; margin: 0;\"><legend style=\"font-weight: 600; margin-block-end: var(--ui-space-1);\">Choose an option</legend><div class=\"ui-stack\" style=\"--stack-gap: var(--ui-space-1);\"><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\" checked><span>Option A</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option B</span></label><label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"radio\" class=\"ui-radio\" name=\"group-demo\"><span>Option C</span></label></div></fieldset>",
+          "code": "<fieldset>\n  <legend>Choose an option</legend>\n  <div class=\"ui-stack\">\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\" checked>\n      <span>Option A</span>\n    </label>\n    <label class=\"ui-cluster\">\n      <input type=\"radio\" class=\"ui-radio\" name=\"group\">\n      <span>Option B</span>\n    </label>\n  </div>\n</fieldset>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-radio-size",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Default size"
+    },
+    {
+      "token": "--ui-radio-size-lg",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-radio-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background (unchecked)"
+    },
+    {
+      "token": "--ui-radio-bg-checked",
+      "default": "var(--ui-color-primary)",
+      "description": "Background (checked)"
+    },
+    {
+      "token": "--ui-radio-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-radio-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    {
+      "token": "--ui-radio-dot-color",
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Inner dot color"
+    }
+  ]
+}

package/src/04-components/radio/radio.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'radio.docs.json');
+
+test.describe('radio visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'radio');
+    await saveForLostPixel(page, 'radio');
+    await expect(page.locator('body')).toHaveScreenshot('radio.visual.png');
+  });
+});

package/src/04-components/select/index.scss

@@ -0,0 +1,113 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component select
+// @element select
+
+@layer components.tokens {
+  .select {
+    --_height: var(--ui-select-height, var(--ui-row-2, #{t.$row-2}));
+    --_padding-x: var(--ui-select-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-select-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-select-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-select-text, var(--ui-color-text, #{t.$color-text}));
+    --_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+  }
+
+  // @modifier size
+  .select--sm {
+    --_height: var(--ui-select-height-sm, calc(#{t.$row} * 1.5));
+    --_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .select--lg {
+    --_height: var(--ui-select-height-lg, calc(#{t.$row} * 2.5));
+    --_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  // @modifier variant
+  .select--filled {
+    --_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_border-color: transparent;
+  }
+
+  .select--ghost {
+    --_bg: transparent;
+    --_border-color: transparent;
+  }
+
+  // @modifier state
+  .select--error {
+    --_border-color: var(--ui-select-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+
+  .select--success {
+    --_border-color: var(--ui-select-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
+}
+
+@layer components.styles {
+  .select {
+
+    display: inline-block;
+
+    block-size: var(--_height);
+    // Extra padding for arrow
+    padding-inline-start: var(--_padding-x);
+    padding-inline-end: calc(var(--_height) - var(--ui-space-half, #{t.$space-0}));
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: 1;
+    color: var(--_text);
+
+    background-color: var(--_bg);
+    // Chevron down arrow
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+    cursor: pointer;
+    // Reset native select
+    appearance: none;
+
+    transition:
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    background-repeat: no-repeat;
+    background-position: right var(--ui-space-half, #{t.$space-0}) center;
+    background-size: calc(var(--_height) * 0.5);
+
+    &:hover:not(:disabled, :focus) {
+      border-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+    }
+
+    &:focus,
+    &--focus {
+      border-color: var(--_border-color-focus);
+      outline: none;
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &:disabled,
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    // Full width
+    &--block {
+      inline-size: 100%;
+    }
+
+    // Placeholder option styling
+    &:invalid,
+    &--placeholder {
+      color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    }
+  }
+}