opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/icon-button.css

@@ -1,139 +0,0 @@
-@layer components.root {
-  :where(.ui-icon-button) {
-    --_motion: var(--motion, 1);
-    --_color: light-dark(var(--color-16), var(--color-1));
-    --_color-contrast: light-dark(var(--color-1), var(--color-16));
-    --_color-tonal: var(--surface-tonal);
-
-    --_accent: var(--_color);
-    --_accent-contrast: var(--_color-contrast);
-    --_accent-tonal: var(--_color-tonal);
-    --_accent-tonal-contrast: var(--_color);
-    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
-        oklch(from var(--_accent) l 0.01 h / 20%));
-    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
-        oklch(from var(--_accent) l 0.06 h / 30%));
-    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
-        oklch(from var(--_accent) calc(l - 0.1) c h));
-    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
-        oklch(from var(--_accent) calc(l - 0.15) c h));
-    --_outlined-active-bg-color: var(--_filled-active-bg-color);
-
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-width: var(--border-size-1);
-    --_text-color: inherit;
-
-    align-items: center;
-    aspect-ratio: 1;
-    background-color: var(--_bg-color);
-    block-size: var(--size-6);
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--radius-round);
-    color: var(--_text-color);
-    display: inline-flex;
-    inline-size: var(--size-6);
-    justify-content: center;
-    padding: 0;
-    transform-style: preserve-3d;
-    transition:
-      background-color calc(0.1s * var(--_motion)) ease,
-      color calc(0.1s * var(--_motion)) ease,
-      border-color calc(0.1s * var(--_motion)) ease,
-      box-shadow calc(0.1s * var(--_motion)) ease;
-
-    &:where([disabled]) {
-      --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
-      cursor: not-allowed;
-      opacity: 0.64;
-    }
-
-    svg {
-      block-size: auto;
-      inline-size: auto;
-      max-block-size: var(--size-5);
-      max-inline-size: var(--size-5);
-      pointer-events: none;
-    }
-
-    /* Ripple effect, utils.css */
-    &::before {
-      --highlight-size: 130%;
-      background-color: transparent;
-      transition:
-        transform calc(0.2s * var(--_motion)) ease,
-        background-color calc(0.1s * var(--_motion)) ease;
-    }
-
-    &.ui-critical,
-    &.ui-primary {
-      --_color-contrast: var(--gray-1);
-      --_color-tonal: var(--color-6);
-      --_accent-tonal-contrast: var(--text-primary-contrast);
-
-      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
-      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
-
-      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
-
-      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-    }
-
-    &.ui-critical {
-      --_color: var(--critical);
-    }
-
-    &.ui-primary {
-      --_color: var(--primary);
-    }
-
-    /* Element states */
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        &::before {
-          background-color: var(--_interaction-hover-color,
-              var(--_default-hover-bg-color));
-        }
-      }
-
-      &:where(:hover:active),
-      &[aria-current="page"] {
-        &::before {
-          background-color: var(--_interaction-active-color,
-              var(--_default-active-bg-color));
-        }
-      }
-    }
-
-    /* Size */
-    &.ui-small {
-      block-size: var(--size-4);
-      inline-size: var(--size-4);
-
-      svg {
-        max-block-size: var(--size-4);
-        max-inline-size: var(--size-4);
-      }
-    }
-
-    /* Variants */
-    &.ui-outlined {
-      --_bg-color: transparent;
-      --_border-color: var(--_accent);
-      --_text-color: var(--_accent);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--_accent-tonal);
-      --_text-color: var(--_accent-tonal-contrast);
-    }
-
-    &.ui-filled {
-      --_bg-color: var(--_accent);
-      --_interaction-active-color: var(--_filled-active-bg-color);
-      --_interaction-hover-color: var(--_filled-hover-bg-color);
-      --_text-color: var(--_accent-contrast);
-    }
-  }
-}

package/css/components/text-input.css

@@ -1,68 +0,0 @@
-@layer components.extended {
-  :where(
-    .ui-text-field:has(
-      :where(
-        input[type="date"],
-        input[type="datetime-local"],
-        input[type="email"],
-        input[type="month"],
-        input[type="number"],
-        input[type="password"],
-        input[type="search"],
-        input[type="tel"],
-        input[type="text"],
-        input[type="time"],
-        input[type="url"],
-        input[type="week"]
-      )
-    )
-  ) {
-    /* Sizes */
-    &.ui-small {
-      input {
-        padding-inline: var(--size-2);
-      }
-    }
-  }
-
-  /* Autosuggest */
-  :where(.ui-text-field:has(input[list])) {
-    .ui-field {
-      position: relative;
-    }
-
-    /* Hide native arrow */
-    input[list]::-webkit-calendar-picker-indicator {
-      cursor: pointer;
-      opacity: 0;
-      pointer-events: none;
-      position: absolute;
-    }
-
-    input[list] {
-      padding-inline-end: var(--size-8);
-    }
-
-    .ui-field::after {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      content: "";
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-
-    &.ui-small {
-      input[list] {
-        padding-inline-end: var(--size-7);
-      }
-
-      .ui-field::after {
-        inset-inline-end: var(--size-2);
-      }
-    }
-  }
-}

package/css/components/toast.css

@@ -1,157 +0,0 @@
-@layer components.extended {
-  :where(#toast-manager) {
-    background: none;
-    block-size: auto;
-    border: none;
-    display: none;
-    flex-direction: column-reverse;
-    gap: var(--size-3);
-    inline-size: auto;
-    inset: auto var(--size-4) var(--size-4) auto;
-    margin: 0;
-    max-inline-size: calc(100vi - var(--size-8));
-    overflow: visible;
-    padding: 0;
-    pointer-events: none;
-    position: fixed;
-    z-index: 1000;
-
-    &:popover-open {
-      display: flex;
-    }
-
-    &::backdrop {
-      display: none;
-    }
-
-    /* Optional cap on visible toasts. Older toasts beyond this depth are hidden
-		   but still in the DOM so they animate cleanly when newer ones are removed. */
-    /* > .toast:nth-last-child(n + 6) { display: none; } */
-  }
-
-  :where(.ui-toast) {
-    --_anim-enter: 0.3s;
-    --_anim-exit: 0.3s;
-
-    align-items: center;
-    animation:
-      toast-enter var(--_anim-enter) var(--ease-out-3) both,
-      toast-hold attr(data-duration type(<time>), 5s) linear both,
-      toast-exit var(--_anim-exit) var(--ease-in-3) both;
-    animation-delay:
-      0s, var(--_anim-enter),
-      calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
-    background-color: light-dark(var(--gray-15), var(--gray-2));
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-3);
-    color: var(--text-primary-contrast);
-    display: flex;
-    gap: var(--size-3);
-    justify-content: space-between;
-    min-inline-size: 30ch;
-    padding: var(--size-3) var(--size-4);
-    pointer-events: auto;
-
-    &:hover {
-      animation-play-state: paused;
-    }
-
-    &.ui-exiting {
-      animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
-    }
-
-    .ui-icon {
-      background: no-repeat center / contain;
-      block-size: var(--size-4);
-      flex-shrink: 0;
-      inline-size: var(--size-4);
-    }
-
-    /* Hide the icon slot when there's no severity to render against. */
-    &:not([data-severity]) .ui-icon {
-      display: none;
-    }
-
-    .ui-content {
-      font-size: var(--font-size-05);
-      word-break: break-word;
-    }
-
-    .ui-title {
-      font-weight: 600;
-    }
-
-    .ui-description {
-      color: oklch(from currentColor l c h / 75%);
-      font-size: var(--font-size-0);
-    }
-
-    .ui-close-button {
-      background: none;
-      border: none;
-      color: inherit;
-      cursor: pointer;
-      display: grid;
-      opacity: 0.7;
-      padding: var(--size-1);
-      place-items: center;
-      transition: opacity 0.2s;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    &[data-severity="success"] .ui-icon {
-      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
-    }
-
-    &[data-severity="info"] .ui-icon {
-      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-    }
-
-    &[data-severity="warning"] .ui-icon {
-      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
-    }
-
-    &[data-severity="critical"] .ui-icon {
-      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
-    }
-  }
-
-  @keyframes toast-enter {
-    from {
-      opacity: 0;
-      translate: var(--size-4) 0;
-    }
-
-    to {
-      opacity: 1;
-      translate: 0 0;
-    }
-  }
-
-  @keyframes toast-hold {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes toast-exit {
-    from {
-      opacity: 1;
-      scale: 1;
-      translate: 0 0;
-    }
-
-    to {
-      opacity: 0;
-      scale: 0.9;
-      translate: 0 var(--size-4);
-    }
-  }
-}

package/css/js/toast.js

@@ -1,94 +0,0 @@
-/**
- * Toast manager.
- *
- * - HTML owns structure (via <template id="toast-template">).
- * - CSS owns lifetime (via attr(data-duration type(<time>))).
- * - JS owns lifecycle (clone template, fill slots, append, remove on animationend).
- *
- * No setTimeout. No popovertargetaction. No innerHTML of user data.
- */
-
-const FALLBACK_TEMPLATE = `<div class="ui-toast" role="alert">
-  <span class="ui-icon" data-toast-icon></span>
-  <div class="ui-content">
-    <div class="ui-title" data-toast-title></div>
-    <div class="ui-description" data-toast-description></div>
-  </div>
-  <button class="ui-close-button" data-toast-close type="button" aria-label="Close">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-  </button>
-</div>`
-
-export function initToastManager() {
-  const manager = document.getElementById("toast-manager")
-  if (!manager) return
-
-  try {
-    manager.showPopover()
-  } catch {
-    /* already open or unsupported */
-  }
-
-  manager.addEventListener("command", (event) => {
-    if (event.command !== "--show-toast") return
-    const trigger = event.source
-    if (!trigger) return
-
-    const data = trigger.dataset || {}
-    showToast(
-      {
-        description: data.description,
-        duration: data.duration,
-        severity: data.severity,
-        template: data.template,
-        title: data.title || trigger.textContent?.trim() || "",
-      },
-      manager,
-    )
-  })
-
-  window.showToast = (options) => showToast(options || {}, manager)
-}
-
-function showToast(options, manager) {
-  const node = buildToast(options.template || "toast-template")
-  if (!node) return
-
-  fillSlot(node, "[data-toast-title]", options.title)
-  fillSlot(node, "[data-toast-description]", options.description)
-
-  if (options.severity) node.dataset.severity = options.severity
-  if (options.duration) node.dataset.duration = options.duration
-
-  wireToast(node)
-  manager.appendChild(node)
-}
-
-function buildToast(templateId) {
-  const tpl = document.getElementById(templateId)
-  if (tpl?.content?.firstElementChild) {
-    return tpl.content.firstElementChild.cloneNode(true)
-  }
-  const wrap = document.createElement("div")
-  wrap.innerHTML = FALLBACK_TEMPLATE.trim()
-  return wrap.firstElementChild
-}
-
-function fillSlot(root, selector, text) {
-  const el = root.querySelector(selector)
-  if (!el) return
-  if (text == null || text === "") {
-    el.remove()
-    return
-  }
-  el.textContent = text
-}
-
-function wireToast(node) {
-  node.querySelector("[data-toast-close]")?.addEventListener("click", () => {
-    node.classList.add("ui-exiting")
-  })
-  node.addEventListener("animationend", (event) => {
-    if (event.animationName === "toast-exit") node.remove()
-  })
-}