@akonwi/mica 0.5.0 → 0.6.0

package/mica.css

@@ -979,7 +979,7 @@
      command="close" aria-label="Close">✕</button> (or wrap it in a
      method=dialog form). absolute is safe: the dialog is positioned.
      shared with toasts (popovertarget/popovertargetaction=hide there). */
-  :where(dialog, [popover].toast) > :where(button.close) {
+  :where(dialog, m-toast[popover]) > :where(button.close) {
     position: absolute;
     inset-block-start: var(--space-sm);
     inset-inline-end: var(--space-sm);
@@ -1482,10 +1482,10 @@
   }
 
   /* --- toast: display only (queueing/auto-dismiss are Tier 2) ------- *
-   * <div popover="manual" class="toast" role="status"> — manual so it
-   * survives light dismiss and other popovers; role=status announces.
+   * <m-toast popover="manual" role="status"> — manual so it survives
+   * light dismiss and other popovers; role=status announces.
    * ------------------------------------------------------------------ */
-  :where([popover].toast) {
+  :where(m-toast[popover]) {
     position-area: none; /* not anchored — pinned to the corner */
     /* --m-toast-offset comes from toast.js when stacking; 0 without it */
     inset: auto var(--space-lg) calc(var(--space-lg) + var(--m-toast-offset, 0px)) auto;
@@ -1504,23 +1504,23 @@
       color: var(--color-text-muted);
     }
 
-    &:where([data-variant="success"]) {
+    &:where([variant="success"]) {
       border-inline-start: 2px solid var(--color-success);
     }
-    &:where([data-variant="danger"]) {
+    &:where([variant="danger"]) {
       border-inline-start: 2px solid var(--color-danger);
     }
-    &:where([data-variant="warning"]) {
+    &:where([variant="warning"]) {
       border-inline-start: 2px solid var(--color-warn);
     }
   }
   /* restacking motion always (inset-block-end); the entrance slide/fade
      only where overlay transitions work — see the base popover note. */
-  :where([popover].toast:popover-open) {
+  :where(m-toast[popover]:popover-open) {
     transition: inset-block-end 0.15s;
   }
   @supports (overlay: auto) {
-    :where([popover].toast:popover-open) {
+    :where(m-toast[popover]:popover-open) {
       transition:
         opacity 0.1s,
         translate 0.1s,
@@ -1529,7 +1529,7 @@
         display 0.1s allow-discrete;
     }
     @starting-style {
-      :where([popover].toast:popover-open) {
+      :where(m-toast[popover]:popover-open) {
         translate: 0 0.75rem;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akonwi/mica",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Custom elements. Native behavior. Nearly no JavaScript.",
   "keywords": [
     "css",

package/toast.js

@@ -1,12 +1,12 @@
 /* mica/toast.js — toast stacking, auto-dismiss, and a spawn helper.
  * Tier 2.
  *
- * Enhances the Tier-1 toast recipe (corner-pinned manual popovers).
+ * Enhances the Tier-1 <m-toast> recipe (corner-pinned manual popovers).
  * Declared toasts keep working without this module — it adds:
  *
  * - stacking: open toasts stack upward; JS ships one number per toast
  *   (--m-toast-offset), CSS owns the geometry and the reflow motion
- * - auto-dismiss: `data-duration` attribute in ms (default 5000,
+ * - auto-dismiss: `duration` attribute in ms (default 5000,
  *   "0" = sticky), paused while hovered
  * - toast(title, { description, variant, duration }): spawns the same
  *   recipe markup (`variant`: success, warning, or danger), shows it,
@@ -20,7 +20,7 @@ const open = [];
 const timers = new WeakMap();
 
 const isToast = (el) =>
-  el instanceof HTMLElement && el.matches("[popover].toast");
+  el instanceof HTMLElement && el.matches("m-toast[popover]");
 
 function restack() {
   let offset = 0;
@@ -31,8 +31,7 @@ function restack() {
 }
 
 function startTimer(el) {
-  const duration =
-    el.getAttribute("data-duration") ?? el.getAttribute("duration");
+  const duration = el.getAttribute("duration");
   const ms = duration !== null
     ? Number(duration)
     : DEFAULT_DURATION;
@@ -75,13 +74,12 @@ document.addEventListener(
 );
 
 export function toast(title, { description = "", variant = "", duration } = {}) {
-  const el = document.createElement("div");
+  const el = document.createElement("m-toast");
   el.popover = "manual";
-  el.className = "toast";
-  if (variant) el.setAttribute("data-variant", variant);
+  if (variant) el.setAttribute("variant", variant);
   el.setAttribute("role", "status");
   el.dataset.ephemeral = "";
-  if (duration !== undefined) el.setAttribute("data-duration", String(duration));
+  if (duration !== undefined) el.setAttribute("duration", String(duration));
 
   const x = document.createElement("button");
   x.className = "close";

package/types/react.d.ts

@@ -56,6 +56,11 @@ declare module 'react' {
         variant?: 'primary' | 'success' | 'warning' | 'danger'
         count?: boolean
       }>
+      'm-toast': MicaElement<{
+        popover?: 'manual'
+        variant?: 'success' | 'warning' | 'danger'
+        duration?: string | number
+      }>
       'm-field': MicaElement
       'm-error': MicaElement<{ active?: boolean }>
       'm-combobox': MicaElement