luxen-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Luxen UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# Luxen UI
+
+[![npm version](https://img.shields.io/npm/v/luxen-ui.svg)](https://www.npmjs.com/package/luxen-ui)
+[![lit](https://img.shields.io/badge/lib-lit-1e40af.svg)](https://github.com/lit/lit/)
+[![CI](https://img.shields.io/github/actions/workflow/status/luxen-ui/luxen-ui/ci.yml?label=CI&color=1a7f37)](https://github.com/luxen-ui/luxen-ui/actions/workflows/ci.yml)
+![license](https://img.shields.io/badge/license-MIT-green.svg)
+
+A Web UI library built with with modern CSS-first, native HTML and custom HTML elements.
+
+## Features
+
+- **Web Components** — Custom elements with the `l-` prefix (e.g. `<l-badge>`, `<l-tooltip>`)
+- **CSS-only elements** — Styled with plain CSS classes, no JavaScript required
+- **Modular** — Import only what you need (JS and CSS are individually tree-shakeable)
+- **CDN-ready** — Ship individual modules directly from a CDN
+
+## Documentation
+
+Visit https://luxen-ui.com to explore the documentation.
+
+## 📦 Elements
+
+| Name          | HTML tag            | Type                                    |
+| ------------- | ------------------- | --------------------------------------- |
+| Avatar        | `<l-avatar>`        | ⬢ Custom HTML Element (with Shadow DOM) |
+| Badge         | `<l-badge>`         | ◇ Custom HTML Element (no Shadow DOM)   |
+| Button        | `<button>`          | ⏣ Native HTML Element                   |
+| Carousel      | `<l-carousel>`      | ⬢ Custom HTML Element (with Shadow DOM) |
+| Carousel Item | `<l-carousel-item>` | ⬢ Custom HTML Element (with Shadow DOM) |
+| Close Button  | `<button>`          | ⏣ Native HTML Element                   |
+| Dialog        | `<l-dialog>`        | ⬢ Custom HTML Element (with Shadow DOM) |
+| Disclosure    | `<details>`         | ⏣ Native HTML Element                   |
+| Divider       | `<l-divider>`       | ◇ Custom HTML Element (no Shadow DOM)   |
+| Drawer        | `<l-drawer>`        | ⬢ Custom HTML Element (with Shadow DOM) |
+| Dropdown      | `<l-dropdown>`      | ⬢ Custom HTML Element (with Shadow DOM) |
+| Dropdown Item | `<l-dropdown-item>` | ⬢ Custom HTML Element (with Shadow DOM) |
+| Icon          | `<l-icon>`          | ⬢ Custom HTML Element (with Shadow DOM) |
+| Input OTP     | `<l-input-otp>`     | ⬡ Progressive Custom HTML Element       |
+| Input Stepper | `<l-input-stepper>` | ⬡ Progressive Custom HTML Element       |
+| Kbd           | `<kbd>`             | ⏣ Native HTML Element                   |
+| Popover       | `<l-popover>`       | ⬢ Custom HTML Element (with Shadow DOM) |
+| Progress      | `<progress>`        | ⏣ Native HTML Element                   |
+| Rating        | `<l-rating>`        | ⬢ Custom HTML Element (with Shadow DOM) |
+| Select        | `<select>`          | ⏣ Native HTML Element                   |
+| Skeleton      | `<l-skeleton>`      | ◇ Custom HTML Element (no Shadow DOM)   |
+| Spinner       | `<l-spinner>`       | ⬢ Custom HTML Element (with Shadow DOM) |
+| Tabs          | `<l-tabs>`          | ⬡ Progressive Custom HTML Element       |
+| Toast         | `<l-toast>`         | ◇ Custom HTML Element (no Shadow DOM)   |
+| Tooltip       | `<l-tooltip>`       | ⬢ Custom HTML Element (with Shadow DOM) |
+| Tree          | `<l-tree>`          | ⬢ Custom HTML Element (with Shadow DOM) |
+| Tree Item     | `<l-tree-item>`     | ⬢ Custom HTML Element (with Shadow DOM) |
+
+## Install
+
+```bash
+npm install luxen-ui
+```
+
+## Usage
+
+```js
+// Import a web component
+import 'luxen-ui/tooltip';
+
+// Import a CSS-only element
+import 'luxen-ui/css/button';
+```
+
+```html
+<button
+  id="my-button"
+  type="button"
+  class="l-button"
+>
+  Hover me
+</button>
+<l-tooltip for="my-button">Hello world</l-tooltip>
+```
+
+## Local Development
+
+Requires **Node.js >= 24** and **pnpm**.
+
+```bash
+pnpm install
+pnpm build
+```
+
+```bash
+# Dev servers
+cd packages/ui && pnpm dev           # CSS watch
+cd packages/ui && pnpm dev:elements  # Vite dev server
+cd packages/docs && pnpm dev         # Docs (VitePress)
+```
+
+## License
+
+Licensed under the [MIT license](./LICENSE).

package/dist/css/elements/avatar.css

@@ -0,0 +1,20 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅰🆅🅰🆃🅰🆁
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-avatar-group {
+    display: flex;
+    isolation: isolate;
+
+    > * + * {
+      margin-inline-start: -0.5rem;
+    }
+
+    > l-avatar {
+      box-shadow: 0 0 0 2px var(--l-color-surface);
+    }
+  }
+}

package/dist/css/elements/badge.css

@@ -0,0 +1,159 @@
+@layer components {
+  /*
+    Autonomous custom elements
+    https://blog.jim-nielsen.com/2021/custom-elements-without-js/
+  */
+  l-badge {
+    /* Per-variant primitives — set by [variant], consumed by appearance */
+    --_text-color: var(--l-color-text-neutral);
+    --_background-color: transparent;
+    --_border-color: color-mix(in oklab, var(--_text-color) 30%, transparent);
+
+    /* Size defaults (md) */
+    --_height: 1.375rem;
+    --_font-size: var(--text-xs);
+    --_padding-inline: 0.375rem;
+    --_gap: 0.25rem;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--_gap);
+    min-height: var(--_height);
+    padding-block: 0.25rem;
+    padding-inline: var(--_padding-inline);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--radius-md);
+    corner-shape: squircle;
+    background-color: var(--_background-color);
+    color: var(--_text-color);
+    font-family: var(--font-neo-grotesque);
+    font-size: var(--_font-size);
+    font-weight: var(--font-weight-medium);
+    line-height: 1;
+    text-box: trim-both cap alphabetic;
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆂🅸🆉🅴🆂
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &[size='sm'] {
+      --_height: 1.25rem;
+      --_padding-inline: 0.25rem;
+      --_gap: 0.125rem;
+    }
+    &[size='lg'] {
+      --_height: 1.5rem;
+      --_font-size: var(--text-sm);
+      --_padding-inline: 0.5rem;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆅🅰🆁🅸🅰🅽🆃🆂
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &[variant='info'] {
+      --_text-color: var(--l-color-text-info);
+    }
+    &[variant='success'] {
+      --_text-color: var(--l-color-text-success);
+    }
+    &[variant='warning'] {
+      --_text-color: var(--l-color-text-warning);
+    }
+    &[variant='danger'] {
+      --_text-color: var(--l-color-text-danger);
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅰🅿🅿🅴🅰🆁🅰🅽🅲🅴
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &[appearance='filled'] {
+      --_background-color: var(--l-color-bg-fill-neutral-subtle);
+      --_border-color: transparent;
+
+      &[variant='info'] {
+        --_background-color: var(--l-color-bg-fill-info-subtle);
+      }
+      &[variant='success'] {
+        --_background-color: var(--l-color-bg-fill-success-subtle);
+      }
+      &[variant='warning'] {
+        --_background-color: var(--l-color-bg-fill-warning-subtle);
+      }
+      &[variant='danger'] {
+        --_background-color: var(--l-color-bg-fill-danger-subtle);
+      }
+    }
+
+    &[appearance='filled-outlined'] {
+      --_background-color: var(--l-color-bg-fill-neutral-subtle);
+
+      &[variant='info'] {
+        --_background-color: var(--l-color-bg-fill-info-subtle);
+      }
+      &[variant='success'] {
+        --_background-color: var(--l-color-bg-fill-success-subtle);
+      }
+      &[variant='warning'] {
+        --_background-color: var(--l-color-bg-fill-warning-subtle);
+      }
+      &[variant='danger'] {
+        --_background-color: var(--l-color-bg-fill-danger-subtle);
+      }
+    }
+
+    &[appearance='accent'] {
+      --_background-color: var(--l-color-bg-fill-neutral-strong);
+      --_text-color: var(--l-color-surface);
+      --_border-color: transparent;
+
+      &[variant='info'] {
+        --_background-color: var(--l-color-bg-fill-info-strong);
+        --_text-color: white;
+      }
+      &[variant='success'] {
+        --_background-color: var(--l-color-bg-fill-success-strong);
+      }
+      &[variant='warning'] {
+        --_background-color: var(--l-color-bg-fill-warning-strong);
+      }
+      &[variant='danger'] {
+        --_background-color: var(--l-color-bg-fill-danger-strong);
+        --_text-color: white;
+      }
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅿🅸🅻🅻
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &[pill] {
+      border-radius: var(--radius-full);
+      corner-shape: unset;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🅸🅲🅾🅽
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    iconify-icon {
+      color: currentColor;
+      height: 1em;
+    }
+  }
+
+  l-badge:has(iconify-icon:first-child) {
+    padding-inline-start: 0.25rem;
+  }
+}

package/dist/css/elements/button.css

@@ -0,0 +1,171 @@
+@layer components {
+  /**
+   * - https://component.gallery/components/button
+   * - https://designsystems.surf/components/button
+   * - https://www.uiguideline.com/components/button
+   * - https://codepen.io/jh3y/pen/XJdLrZV
+   */
+
+  .l-button {
+    /* Local variables */
+    --_button-size-xs: var(--l-size-control-xs); /* 24px */
+    --_button-size-sm: var(--l-size-control-sm); /* 28px */
+    --_button-size-md: var(--l-size-control-md); /* 32px */
+    --_button-size-lg: var(--l-size-control-lg); /* 36px */
+    --_button-size-xl: var(--l-size-control-xl); /* 40px */
+
+    /* Appearance (default: secondary) */
+    --height: var(--_button-size-md);
+    --padding-inline: 0.625rem;
+    --background-color: var(--l-color-bg-fill-secondary);
+    --background-color-active: color-mix(
+      in oklab,
+      var(--l-color-bg-fill-secondary) 90%,
+      var(--l-color-text-primary)
+    );
+    --background-color-hover: var(--background-color-active);
+    --font-size: var(--text-md);
+    --text-color: var(--l-color-text-primary);
+    --text-color-hover: var(--text-color);
+    --border-color: var(--l-color-border);
+    --border-color-hover: color-mix(
+      in oklab,
+      var(--l-color-border) 75%,
+      var(--l-color-text-primary)
+    );
+
+    /*
+    --border-radius: if(
+      style(--size: sm): var(--radius-sm);
+      style(--size: lg): var(--radius-md);
+      style(--size: xl): var(--radius-lg);
+      else: var(--radius-md);
+    );
+    */
+
+    /* Base styles */
+    position: relative;
+    display: inline-flex;
+    place-items: center;
+    gap: calc(var(--spacing) * 2);
+    height: var(--height);
+    padding-inline: var(--padding-inline);
+    border: 1px solid var(--border-color);
+    border-radius: calc(var(--height) / 8);
+    background: var(--background-color);
+    color: var(--text-color);
+    outline: none;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-semibold);
+    text-decoration: none;
+    -webkit-user-select: none;
+            user-select: none;
+    white-space: nowrap;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+
+    /* Transitions */
+    transition-property: background-color, color, text-decoration, border-color;
+    transition-duration: 150ms;
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    Button states
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:not(:disabled):hover {
+      background-color: var(--background-color-hover);
+      border-color: var(--border-color-hover);
+      color: var(--text-color-hover);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--background-color-active);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: 2px;
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Button variant="primary"
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-button[data-variant='primary'] {
+    --background-color: var(--l-color-bg-fill-brand);
+    --background-color-active: var(--l-color-bg-fill-brand-active);
+    --background-color-hover: var(--l-color-bg-fill-brand-hover);
+    --text-color: var(--l-color-text-on-fill-brand);
+    --text-color-hover: var(--l-color-text-on-fill-brand);
+    --border-color: transparent;
+    --border-color-hover: transparent;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Button variant="destructive"
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-button[data-variant='destructive'] {
+    --background-color: var(--l-color-bg-fill-danger-soft);
+    --background-color-hover: color-mix(
+      in oklab,
+      var(--l-color-bg-fill-danger-soft) 80%,
+      var(--l-color-text-danger)
+    );
+    --background-color-active: color-mix(
+      in oklab,
+      var(--l-color-bg-fill-danger-soft) 65%,
+      var(--l-color-text-danger)
+    );
+    --text-color: var(--l-color-text-danger);
+    --text-color-hover: var(--l-color-text-danger);
+    --border-color: transparent;
+    --border-color-hover: transparent;
+  }
+
+  .l-button[data-press-effect]:active {
+    scale: 0.98;
+    translate: 0 1px;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  Button size
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  .l-button[data-icon-only] {
+    width: var(--height);
+    font-size: var(--icon-only-size, 1.25em);
+  }
+
+  .l-button[data-size='sm'] {
+    --height: var(--_button-size-sm);
+    --padding-inline: 0.5rem;
+    --font-size: var(--text-sm);
+  }
+
+  .l-button[data-size='lg'] {
+    --height: var(--_button-size-lg);
+    --padding-inline: 0.75rem;
+    --font-size: var(--text-base);
+  }
+
+  .l-button[data-size='xl'] {
+    --height: var(--_button-size-xl);
+    --padding-inline: 0.875rem;
+    --font-size: var(--text-lg);
+  }
+}

package/dist/css/elements/close-button/circle.css

@@ -0,0 +1,66 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅻🅾🆂🅴 🅱🆄🆃🆃🅾🅽
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  - https://www.benjystanton.co.uk/blog/accessible-close-buttons/
+  */
+
+  .l-close {
+    --size: 36px;
+    --icon-color: var(--l-color-text-primary);
+    --icon-size: 24px;
+
+    display: grid;
+    place-items: center;
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: 2px;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆄🅸: close icon
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &::after {
+      content: '';
+      display: block;
+      height: var(--icon-size);
+      width: var(--icon-size);
+      background-color: var(--icon-color);
+      /* https://pictogrammers.com/library/mdi/icon/close */
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')
+        center no-repeat;
+    }
+  }
+}
+
+@layer components {
+  .l-close:not([data-appearance]),
+  .l-close[data-appearance='circle'] {
+    --size: 44px;
+    --background-color: light-dark(var(--color-gray-100), var(--color-gray-700));
+    --background-color-hover: light-dark(var(--color-gray-200), var(--color-gray-600));
+
+    border-radius: var(--radius-full);
+    background-color: var(--background-color);
+
+    transition-property: background-color;
+    transition-duration: 150ms;
+
+    &:hover {
+      background-color: var(--background-color-hover);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, var(--background-color-hover) 80%, black);
+    }
+  }
+}

package/dist/css/elements/close-button/ring.css

@@ -0,0 +1,71 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅻🅾🆂🅴 🅱🆄🆃🆃🅾🅽
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  - https://www.benjystanton.co.uk/blog/accessible-close-buttons/
+  */
+
+  .l-close {
+    --size: 36px;
+    --icon-color: var(--l-color-text-primary);
+    --icon-size: 24px;
+
+    display: grid;
+    place-items: center;
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: 2px;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆄🅸: close icon
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &::after {
+      content: '';
+      display: block;
+      height: var(--icon-size);
+      width: var(--icon-size);
+      background-color: var(--icon-color);
+      /* https://pictogrammers.com/library/mdi/icon/close */
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')
+        center no-repeat;
+    }
+  }
+}
+
+@layer components {
+  .l-close:not([data-appearance]),
+  .l-close[data-appearance='ring'] {
+    --ring-color: var(--l-color-border-interactive);
+    --ring-tickness: 0.25rem;
+
+    /* Private custom properties */
+    --_ring-tickness: 0;
+    --_ring-color: var(--ring-color);
+
+    border-radius: var(--radius-full);
+    box-shadow: 0 0 0 var(--_ring-tickness) var(--_ring-color);
+
+    &:hover {
+      --_ring-tickness: var(--ring-tickness);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition-duration: 250ms;
+      }
+    }
+
+    &:active {
+      --_ring-color: --darken(var(--ring-color), 5%);
+      --_ring-tickness: calc(var(--ring-tickness) * 0.6);
+    }
+  }
+}

package/dist/css/elements/close-button/square.css

@@ -0,0 +1,70 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅲🅻🅾🆂🅴 🅱🆄🆃🆃🅾🅽
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  - https://www.benjystanton.co.uk/blog/accessible-close-buttons/
+  */
+
+  .l-close {
+    --size: 36px;
+    --icon-color: var(--l-color-text-primary);
+    --icon-size: 24px;
+
+    display: grid;
+    place-items: center;
+    width: var(--size);
+    height: var(--size);
+    aspect-ratio: 1;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: 2px;
+    }
+
+    /*
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+     🆄🅸: close icon
+    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+    */
+
+    &::after {
+      content: '';
+      display: block;
+      height: var(--icon-size);
+      width: var(--icon-size);
+      background-color: var(--icon-color);
+      /* https://pictogrammers.com/library/mdi/icon/close */
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')
+        center no-repeat;
+    }
+  }
+}
+
+@layer components {
+  .l-close:not([data-appearance]),
+  .l-close[data-appearance='square'] {
+    --background-color: transparent;
+    --background-color-hover: light-dark(var(--color-gray-100), var(--color-gray-700));
+
+    /*
+    Accessibility: the overall size should be at least 44 pixels in height and width
+    https://www.benjystanton.co.uk/blog/accessible-close-buttons/
+    */
+    padding: var(--spacing-2);
+    border-radius: var(--radius-sm);
+    background-color: var(--background-color);
+
+    transition-property: background-color;
+    transition-duration: 150ms;
+
+    &:hover {
+      background-color: var(--background-color-hover);
+    }
+
+    &:active {
+      background-color: color-mix(in oklab, var(--background-color-hover) 80%, black);
+    }
+  }
+}