opui-css 5.4.1 → 5.4.3

package/css/components/text-input.css

@@ -1,68 +1,68 @@
-@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);
-      }
-    }
-  }
-}
+@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/textarea.css

@@ -1,26 +1,26 @@
-@layer components.extended {
-  :where(.ui-textarea) {
-    textarea {
-      block-size: auto;
-      field-sizing: content;
-      min-block-size: calc(
-        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
-      );
-      resize: vertical;
-    }
-
-    /* Size */
-    &.ui-small {
-      textarea {
-        min-block-size: var(--size-9);
-      }
-    }
-
-    /* Auto-fit */
-    &.ui-auto-fit {
-      textarea {
-        resize: both;
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(.ui-textarea) {
+    textarea {
+      block-size: auto;
+      field-sizing: content;
+      min-block-size: calc(
+        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
+      );
+      resize: vertical;
+    }
+
+    /* Size */
+    &.ui-small {
+      textarea {
+        min-block-size: var(--size-9);
+      }
+    }
+
+    /* Auto-fit */
+    &.ui-auto-fit {
+      textarea {
+        resize: both;
+      }
+    }
+  }
+}

package/css/components/toast.css

@@ -1,160 +1,157 @@
-@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;
-      }
-    }
-
-    /* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
-    &[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;
-    }
-  }
-
-  /* Identity keyframe — only purpose is to delay the exit animation by the
-	   author-defined duration. */
-  @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);
-    }
-  }
-}
+@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);
+    }
+  }
+}