@teseor/css 1.0.0

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

@@ -0,0 +1,180 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Toast - notification messages
+// Appears in viewport corner with auto-dismiss
+
+@layer components.tokens {
+  .toast-viewport {
+    --_gap: var(--ui-toast-viewport-gap, calc(#{t.$unit} * 1));
+    --_padding: var(--ui-toast-viewport-padding, calc(#{t.$unit} * 2));
+    --_max-width: var(--ui-toast-viewport-max-width, 420px);
+  }
+
+  .toast {
+    --_padding: var(--ui-toast-padding, calc(#{t.$unit} * 2));
+    --_gap: var(--ui-toast-gap, calc(#{t.$unit} * 1));
+    --_radius: var(--ui-toast-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-toast-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-toast-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_shadow: var(--ui-toast-shadow, var(--shadow-lg));
+  }
+
+  .toast--success {
+    --_border-color: var(--ui-color-success);
+  }
+
+  .toast--warning {
+    --_border-color: var(--ui-color-warning);
+  }
+
+  .toast--danger {
+    --_border-color: var(--ui-color-danger);
+  }
+
+  .toast--info {
+    --_border-color: var(--ui-color-primary);
+  }
+}
+
+@layer components.styles {
+  // Viewport - fixed container for all toasts
+  .toast-viewport {
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+    position: fixed;
+    z-index: var(--ui-z-toast, 1000);
+
+    max-inline-size: var(--_max-width);
+    padding: var(--_padding);
+
+    pointer-events: none;
+
+    list-style: none;
+  }
+
+  // Position modifiers
+  .toast-viewport--top-end {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .toast-viewport--top-start {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-viewport--bottom-end {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+
+  .toast-viewport--bottom-start {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-viewport--top-center {
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+
+    transform: translateX(-50%);
+  }
+
+  .toast-viewport--bottom-center {
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+
+    transform: translateX(-50%);
+  }
+
+  // Individual toast
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--_gap);
+
+    padding: var(--_padding);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    box-shadow: var(--_shadow);
+    pointer-events: auto;
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  }
+
+  .toast__icon {
+    flex-shrink: 0;
+  }
+
+  .toast__content {
+    flex: 1;
+
+    min-inline-size: 0;
+  }
+
+  .toast__title {
+    margin: 0;
+
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: var(--ui-row-1, #{t.$row});
+  }
+
+  .toast__description {
+    margin: 0;
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  .toast__action {
+    flex-shrink: 0;
+  }
+
+  .toast__close {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--ui-row-1, #{t.$row});
+    inline-size: var(--ui-row-1, #{t.$row});
+    padding: 0;
+
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--ui-color-text, #{t.$color-text});
+    }
+  }
+
+  // Animation states
+  .toast[data-state="open"] {
+    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+
+  .toast[data-state="closed"] {
+    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+
+  @keyframes toast-slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes toast-slide-out {
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+{
+  "name": "toast",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-toast-viewport-gap",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-toast-viewport-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-toast-viewport-max-width",
+      "default": "420px"
+    },
+    {
+      "name": "--ui-toast-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-toast-gap",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-toast-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-toast-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-toast-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-toast-shadow",
+      "default": "var(--shadow-lg)"
+    }
+  ]
+}

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

@@ -0,0 +1,99 @@
+{
+  "api": "./toast.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Notification</p><p class=\"ui-toast__description\">Your changes have been saved.</p></div><button class=\"ui-toast__close\">X</button></div>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "html": "<div class=\"ui-toast ui-toast--success\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Success</p><p class=\"ui-toast__description\">Operation completed successfully.</p></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div class=\"ui-toast ui-toast--warning\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Warning</p><p class=\"ui-toast__description\">Please review before continuing.</p></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div class=\"ui-toast ui-toast--danger\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Error</p><p class=\"ui-toast__description\">Something went wrong.</p></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div class=\"ui-toast ui-toast--info\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Info</p><p class=\"ui-toast__description\">New updates available.</p></div></div>",
+          "layout": "stack"
+        }
+      ]
+    },
+    {
+      "title": "With Action",
+      "examples": [
+        {
+          "html": "<div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">File deleted</p><p class=\"ui-toast__description\">document.pdf was moved to trash.</p></div><button class=\"ui-toast__action ui-button ui-button--sm ui-button--secondary\">Undo</button><button class=\"ui-toast__close\">X</button></div>"
+        }
+      ]
+    },
+    {
+      "title": "Viewport Positions",
+      "description": "Container positions for toast placement",
+      "examples": [
+        {
+          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--top-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Top End</p></div></div></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div style=\"position:relative;height:200px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-toast-viewport ui-toast-viewport--bottom-end\" style=\"position:absolute\"><div class=\"ui-toast\"><div class=\"ui-toast__content\"><p class=\"ui-toast__title\">Bottom End</p></div></div></div></div>",
+          "layout": "stack"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-toast-viewport-gap",
+      "default": "var(--unit)",
+      "description": "Gap between toasts in viewport"
+    },
+    {
+      "token": "--ui-toast-viewport-padding",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Viewport padding from edges"
+    },
+    {
+      "token": "--ui-toast-viewport-max-width",
+      "default": "420px",
+      "description": "Maximum toast width"
+    },
+    {
+      "token": "--ui-toast-padding",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Toast padding"
+    },
+    {
+      "token": "--ui-toast-gap",
+      "default": "var(--unit)",
+      "description": "Gap between toast elements"
+    },
+    {
+      "token": "--ui-toast-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-toast-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-toast-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-toast-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" }
+  ]
+}

package/src/04-components/toast/toast.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, 'toast.docs.json');
+
+test.describe('toast visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'toast');
+    await saveForLostPixel(page, 'toast');
+    await expect(page.locator('body')).toHaveScreenshot('toast.visual.png');
+  });
+});

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

@@ -0,0 +1,117 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component toggle
+// @element div
+
+@layer components.tokens {
+  .toggle {
+    --_track-width: var(--ui-toggle-track-width, calc(#{t.$unit} * 5));
+    --_track-height: var(--ui-toggle-track-height, calc(#{t.$unit} * 3));
+    --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
+    --_track-radius: var(--ui-toggle-track-radius, calc(#{t.$unit} * 1.5));
+    --_thumb-size: var(--ui-toggle-thumb-size, calc(#{t.$unit} * 2.5));
+    --_thumb-bg: var(--ui-toggle-thumb-bg, white);
+    --_thumb-offset: var(--ui-toggle-thumb-offset, calc(#{t.$unit} / 4));
+  }
+
+  // @modifier size
+  .toggle--sm {
+    --_track-width: calc(#{t.$unit} * 4);
+    --_track-height: calc(#{t.$unit} * 2);
+    --_track-radius: #{t.$unit};
+    --_thumb-size: calc(#{t.$unit} * 1.5);
+  }
+
+  .toggle--lg {
+    --_track-width: calc(#{t.$unit} * 6);
+    --_track-height: calc(#{t.$unit} * 4);
+    --_track-radius: calc(#{t.$unit} * 2);
+    --_thumb-size: calc(#{t.$unit} * 3.5);
+  }
+}
+
+@layer components.styles {
+  .toggle {
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    position: relative;
+
+    block-size: var(--_track-height);
+    inline-size: var(--_track-width);
+
+    background: var(--_track-bg);
+    border-radius: var(--_track-radius);
+    cursor: pointer;
+
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+
+  // Hidden checkbox input
+  .toggle__input {
+    position: absolute;
+    inset: 0;
+
+    block-size: 100%;
+    inline-size: 100%;
+    margin: 0;
+
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  // Track (visual container)
+  .toggle__track {
+    position: absolute;
+    inset: 0;
+
+    background: var(--_track-bg);
+    border-radius: var(--_track-radius);
+
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+
+  // Thumb (sliding indicator)
+  .toggle__thumb {
+    position: absolute;
+    inset-block-start: var(--_thumb-offset);
+    inset-inline-start: var(--_thumb-offset);
+
+    block-size: var(--_thumb-size);
+    inline-size: var(--_thumb-size);
+
+    background: var(--_thumb-bg);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+
+    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+
+  // Checked state
+  .toggle__input:checked ~ .toggle__track {
+    background: var(--_track-bg-checked);
+  }
+
+  .toggle__input:checked ~ .toggle__thumb {
+    transform: translateX(calc(var(--_track-width) - var(--_thumb-size) - var(--_thumb-offset) * 2));
+  }
+
+  // Focus state
+  .toggle__input:focus-visible ~ .toggle__track {
+    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+    outline-offset: calc(#{t.$unit} / 4);
+  }
+
+  // Disabled state
+  .toggle__input:disabled ~ .toggle__track,
+  .toggle__input:disabled ~ .toggle__thumb {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .toggle:has(.toggle__input:disabled) {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,43 @@
+{
+  "name": "toggle",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-toggle-track-width",
+      "default": "calc(#{t.$unit} * 5"
+    },
+    {
+      "name": "--ui-toggle-track-height",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-toggle-track-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-toggle-track-bg-checked",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-toggle-track-radius",
+      "default": "calc(#{t.$unit} * 1.5"
+    },
+    {
+      "name": "--ui-toggle-thumb-size",
+      "default": "calc(#{t.$unit} * 2.5"
+    },
+    {
+      "name": "--ui-toggle-thumb-bg",
+      "default": "white"
+    },
+    {
+      "name": "--ui-toggle-thumb-offset",
+      "default": "calc(#{t.$unit} / 4"
+    }
+  ]
+}

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

@@ -0,0 +1,92 @@
+{
+  "id": "toggle",
+  "type": "component",
+  "title": "Toggle",
+  "description": "Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.",
+  "api": "./toggle.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\">\n  <span class=\"ui-toggle__track\"></span>\n  <span class=\"ui-toggle__thumb\"></span>\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Checked",
+      "examples": [
+        {
+          "html": "<label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label>",
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked>\n  ...\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: center;\"><label class=\"ui-toggle ui-toggle--sm\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle ui-toggle--lg\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
+          "code": "<label class=\"ui-toggle ui-toggle--sm\">...</label>\n<label class=\"ui-toggle\">...</label>\n<label class=\"ui-toggle ui-toggle--lg\">...</label>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" checked disabled><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label></div>",
+          "code": "<label class=\"ui-toggle\">\n  <input type=\"checkbox\" ... disabled>\n  ...\n</label>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\"><label class=\"ui-toggle\"><input type=\"checkbox\" class=\"ui-toggle__input\" role=\"switch\" id=\"notifications\"><span class=\"ui-toggle__track\"></span><span class=\"ui-toggle__thumb\"></span></label><label for=\"notifications\">Enable notifications</label></div>",
+          "code": "<div style=\"display: flex; align-items: center; gap: var(--ui-space-2);\">\n  <label class=\"ui-toggle\">\n    <input type=\"checkbox\" ... id=\"notifications\">\n    ...\n  </label>\n  <label for=\"notifications\">Enable notifications</label>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-toggle-track-width",
+      "default": "calc(var(--unit) * 5)",
+      "description": "Track width"
+    },
+    {
+      "token": "--ui-toggle-track-height",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Track height"
+    },
+    {
+      "token": "--ui-toggle-track-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Track background (unchecked)"
+    },
+    {
+      "token": "--ui-toggle-track-bg-checked",
+      "default": "var(--ui-color-primary)",
+      "description": "Track background (checked)"
+    },
+    {
+      "token": "--ui-toggle-track-radius",
+      "default": "calc(var(--unit) * 1.5)",
+      "description": "Track border radius"
+    },
+    {
+      "token": "--ui-toggle-thumb-size",
+      "default": "calc(var(--unit) * 2.5)",
+      "description": "Thumb size"
+    },
+    { "token": "--ui-toggle-thumb-bg", "default": "white", "description": "Thumb background" },
+    {
+      "token": "--ui-toggle-thumb-offset",
+      "default": "calc(var(--unit) / 4)",
+      "description": "Thumb offset from edge"
+    }
+  ]
+}

package/src/04-components/toggle/toggle.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, 'toggle.docs.json');
+
+test.describe('toggle visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'toggle');
+    await saveForLostPixel(page, 'toggle');
+    await expect(page.locator('body')).toHaveScreenshot('toggle.visual.png');
+  });
+});