opui-css 5.0.1 → 5.1.1

package/css/components/text-field.css

@@ -1,5 +1,4 @@
 @layer components.extended {
-
   /*
 - Common styling for input, textarea and select
 - Form related styles such as: label, supporting text, error handling
@@ -106,7 +105,6 @@
 
     /* Textarea - keep affix aligned with the first line */
     &.ui-textarea .ui-field {
-
       .ui-prefix,
       .ui-suffix {
         align-self: start;
@@ -153,7 +151,6 @@
       /* Variants */
       &.ui-filled {
         input {
-
           &::-webkit-file-upload-button,
           &::file-selector-button {
             background-color: var(--surface-default);
@@ -192,7 +189,6 @@
       .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
-
       }
     }
 
@@ -203,7 +199,8 @@
 
         button {
           outline: 0;
-          padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+          padding: var(--_field-padding-block) var(--size-8)
+            var(--_field-padding-block) var(--_field-padding-inline);
         }
       }
     }
@@ -211,7 +208,8 @@
     /* Non-customizable Select */
     &:has(select):not(:has(button)) {
       select {
-        padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+        padding: var(--_field-padding-block) var(--size-8)
+          var(--_field-padding-block) var(--_field-padding-inline);
       }
     }
 
@@ -309,11 +307,12 @@
       --_bg-color: var(--surface-tonal);
 
       &:not(:has([disabled], :has(input[type="color"]))) {
-
         /* Hover */
         &:hover {
-          --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.93) c h),
-              oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+          --_bg-color: light-dark(
+            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
+            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
+          );
         }
       }
     }
@@ -404,7 +403,7 @@
       .ui-field:has(textarea) {
         grid-row: 1 / span 3;
 
-        +.ui-end-text {
+        + .ui-end-text {
           grid-row: 4;
         }
       }

package/css/components/text-input.css

@@ -1,6 +1,8 @@
 @layer components.extended {
-
-  :where(.ui-text-field:has( :where(input[type="date"],
+  :where(
+    .ui-text-field:has(
+      :where(
+        input[type="date"],
         input[type="datetime-local"],
         input[type="email"],
         input[type="month"],
@@ -11,8 +13,10 @@
         input[type="text"],
         input[type="time"],
         input[type="url"],
-        input[type="week"]))) {
-
+        input[type="week"]
+      )
+    )
+  ) {
     /* Sizes */
     &.ui-small {
       input {

package/css/components/textarea.css

@@ -3,7 +3,9 @@
     textarea {
       block-size: auto;
       field-sizing: content;
-      min-block-size: calc(var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh);
+      min-block-size: calc(
+        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
+      );
       resize: vertical;
     }
 

package/css/components/toast.css

@@ -1,161 +1,160 @@
 @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
+  :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
+    /* > .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);
-		}
-	}
+  @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/components/toggle-button.css

@@ -2,86 +2,90 @@
 * Somehow handle when a group gets too wide for its container. Should it be handled?
 */
 @layer components.root {
-	:where(.ui-toggle-button) {
-		--_button-bg-color: transparent;
-		--_size: var(--field-size);
-		--_svg-size: var(--size-4);
+  :where(.ui-toggle-button) {
+    --_button-bg-color: transparent;
+    --_size: var(--field-size);
+    --_svg-size: var(--size-4);
 
-		align-items: center;
-		background-color: var(--_button-bg-color);
-		block-size: var(--_size);
-		border: 1px solid var(--border-color);
-		border-radius: var(--button-border-radius);
-		color: var(--text-primary);
-		cursor: pointer;
-		display: inline-flex;
-		flex: auto;
-		gap: var(--size-2);
-		inline-size: fit-content;
-		justify-content: center;
-		min-inline-size: var(--_size);
-		outline-offset: calc(-1 * var(--size-2));
-		padding: 0 var(--size-2);
-		position: relative;
-		user-select: none;
+    align-items: center;
+    background-color: var(--_button-bg-color);
+    block-size: var(--_size);
+    border: 1px solid var(--border-color);
+    border-radius: var(--button-border-radius);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: auto;
+    gap: var(--size-2);
+    inline-size: fit-content;
+    justify-content: center;
+    min-inline-size: var(--_size);
+    outline-offset: calc(-1 * var(--size-2));
+    padding: 0 var(--size-2);
+    position: relative;
+    user-select: none;
 
-		input[type="checkbox"],
-		input[type="radio"] {
-			/* utils.css > .ui-sr-only */
-			block-size: 1px;
-			clip-path: inset(50%);
-			inline-size: 1px;
-			overflow: hidden;
-			position: absolute;
-			white-space: nowrap;
-		}
+    input[type="checkbox"],
+    input[type="radio"] {
+      /* utils.css > .ui-sr-only */
+      block-size: 1px;
+      clip-path: inset(50%);
+      inline-size: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+    }
 
-		/* Element states */
-		@media (pointer: fine) {
-			&:hover:not(.ui-disabled) {
-				--_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
-			}
-		}
+    /* Element states */
+    @media (pointer: fine) {
+      &:hover:not(.ui-disabled) {
+        --_button-bg-color: light-dark(
+          oklch(0% 0 0 / 0.04),
+          oklch(100% 0 0 / 0.08)
+        );
+      }
+    }
 
-		&:has(input:focus-visible) {
-			--focus-ring-color: var(--text-muted);
-			--focus-ring-offset: -6px;
-			outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
-			outline-offset: var(--focus-ring-offset);
-		}
+    &:has(input:focus-visible) {
+      --focus-ring-color: var(--text-muted);
+      --focus-ring-offset: -6px;
+      outline: var(--focus-ring-width) var(--focus-ring-style)
+        var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
 
-		/* Disabled */
-		&.ui-disabled {
-			border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
-			color: color-mix(in oklch, var(--text-primary) 30%, transparent);
-			cursor: not-allowed;
-		}
+    /* Disabled */
+    &.ui-disabled {
+      border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
+      color: color-mix(in oklch, var(--text-primary) 30%, transparent);
+      cursor: not-allowed;
+    }
 
-		/* svgs */
-		svg {
-			block-size: var(--_svg-size);
-			flex-shrink: 0;
-			inline-size: var(--_svg-size);
-		}
+    /* svgs */
+    svg {
+      block-size: var(--_svg-size);
+      flex-shrink: 0;
+      inline-size: var(--_svg-size);
+    }
 
-		/* Selected */
-		&:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
-			--_button-bg-color: oklch(from var(--primary) l c h / 25%);
+    /* Selected */
+    &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+      --_button-bg-color: oklch(from var(--primary) l c h / 25%);
 
-			@media (pointer: fine) {
-				&:hover {
-					--_button-bg-color: oklch(from var(--primary) l c h / 35%);
-				}
-			}
-		}
+      @media (pointer: fine) {
+        &:hover {
+          --_button-bg-color: oklch(from var(--primary) l c h / 35%);
+        }
+      }
+    }
 
-		/* Sizes */
-		&.ui-small {
-			--_size: var(--field-size-small);
-		}
+    /* Sizes */
+    &.ui-small {
+      --_size: var(--field-size-small);
+    }
 
-		&.ui-x-small {
-			--_size: var(--field-size-x-small);
-		}
-	}
+    &.ui-x-small {
+      --_size: var(--field-size-x-small);
+    }
+  }
 }