opui-css 3.3.4 → 4.0.0

package/{src/themes/theme-one → css}/components/progress.css

@@ -1,83 +1,97 @@
-@layer components.root {
-  :where(progress) {
-    --_accent-color: var(--primary);
-    --_bg-color: var(--surface-tonal);
-
-    appearance: none;
-    background-color: var(--_bg-color);
-    border-radius: var(--border-radius, 0.25rem);
-    border: 0;
-    display: inline-block;
-    block-size: var(--size-1);
-    overflow: hidden;
-    position: relative;
-    vertical-align: baseline;
-    inline-size: 100%;
-
-    &::-webkit-progress-bar {
-      border-radius: var(--border-radius, 0.25rem);
-      background: none;
-    }
-
-    &[value]::-webkit-progress-value {
-      background-color: var(--_accent-color);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: inline-size 0.2s
-          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
-      }
-    }
-
-    &::-moz-progress-bar {
-      background-color: var(--_accent-color);
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    progress:indeterminate {
-      background-color: var(--_bg-color);
-
-      &::after {
-        animation: indeterminate 2s linear infinite;
-        background-color: var(--_accent-color);
-        content: "";
-        inset: 0 auto 0 0;
-        position: absolute;
-        will-change: inset-inline-start, inset-inline-end;
-      }
-
-      &[value]::-webkit-progress-value {
-        background-color: transparent;
-      }
-
-      &::-moz-progress-bar {
-        background-color: transparent;
-      }
-    }
-
-    [dir="rtl"] {
-      :where(progress):indeterminate {
-        animation-direction: reverse;
-
-        &::after {
-          animation-direction: reverse;
-        }
-      }
-    }
-  }
-
-  @keyframes indeterminate {
-    0% {
-      left: -200%;
-      right: 100%;
-    }
-    60% {
-      left: 107%;
-      right: -8%;
-    }
-    100% {
-      left: 107%;
-      right: -8%;
-    }
-  }
-}
+@layer components.root {
+  :where(progress) {
+    --_accent-color: var(--primary);
+    --_bg-color: var(--surface-tonal);
+
+    appearance: none;
+    background-color: var(--_bg-color);
+    block-size: var(--size-1);
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+    display: inline-block;
+    inline-size: 100%;
+    overflow: hidden;
+    position: relative;
+    vertical-align: baseline;
+
+    /* Color */
+    &.filled {
+      --_bg-color: var(--surface-filled);
+    }
+
+    &.default {
+      --_bg-color: var(--surface-default);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+    }
+
+    &::-webkit-progress-bar {
+      background: none;
+      border-radius: var(--border-radius, 0.25rem);
+    }
+
+    &[value]::-webkit-progress-value {
+      background-color: var(--_accent-color);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+      }
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--_accent-color);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    progress:indeterminate {
+      background-color: var(--_bg-color);
+
+      &::after {
+        animation: indeterminate 2s linear infinite;
+        background-color: var(--_accent-color);
+        content: "";
+        inset: 0 auto 0 0;
+        position: absolute;
+        will-change: inset-inline-start, inset-inline-end;
+      }
+
+      &[value]::-webkit-progress-value {
+        background-color: transparent;
+      }
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+
+    [dir="rtl"] {
+      :where(progress):indeterminate {
+        animation-direction: reverse;
+
+        &::after {
+          animation-direction: reverse;
+        }
+      }
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      inset-inline-start: -200%;
+      inset-inline-end: 100%;
+    }
+
+    60% {
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
+    }
+
+    100% {
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
+    }
+  }
+}

package/css/components/radio.css

@@ -0,0 +1,172 @@
+@layer components.root {
+	label.radio {
+		--_input-size: 1.125rem;
+		--_indicator-size: 50%;
+
+		align-items: center;
+		color: var(--text-primary);
+		cursor: pointer;
+		display: inline-grid;
+		gap: 0 var(--size-2);
+		grid-auto-columns: auto;
+		grid-auto-flow: column;
+		inline-size: fit-content;
+		line-height: 1.5;
+		transform: translateZ(0);
+		user-select: none;
+
+		/* Disabled */
+		&:has([disabled]) {
+			cursor: not-allowed;
+			opacity: 0.64;
+			user-select: none;
+
+			input {
+				cursor: not-allowed;
+			}
+		}
+
+		/* Required dot */
+		&:has(:invalid) {
+			.label:after {
+				color: var(--red);
+				content: "*";
+				inset: 0 -0.25ex auto auto;
+				position: absolute;
+			}
+		}
+
+		/* Label */
+		.label {
+			color: var(--text-primary);
+			font-size: var(--font-size-05);
+			grid-column: 2;
+			grid-row: 1;
+			padding-inline: 0 1ex;
+			position: relative;
+		}
+
+		/* End text */
+		:where(.end-text) {
+			color: var(--text-muted);
+			font-size: var(--font-size-0);
+			grid-column: 2;
+			grid-row: 2;
+			line-height: 1.5;
+			z-index: 1;
+		}
+
+		/* Stacked layout */
+		&.stack {
+			grid-auto-columns: unset;
+			justify-items: center;
+
+			.label {
+				grid-column: 1/-1;
+				grid-row: 2;
+				margin-block-start: var(--size-1);
+				padding-inline: 1ex;
+
+				/* Required dot */
+				&::after {
+					inset: 0 -0.25ex auto auto;
+				}
+			}
+
+			.end-text {
+				grid-column: 1/-1;
+				grid-row: 3;
+			}
+		}
+
+		/* Input */
+		input[type="radio"] {
+			appearance: none;
+			aspect-ratio: 1;
+			background-color: var(--surface-default);
+			block-size: var(--_input-size);
+			border: 1px solid var(--field-border-color);
+			border-radius: var(--radius-round);
+			box-sizing: border-box;
+			cursor: pointer;
+			display: grid;
+			inline-size: var(--_input-size);
+			margin: 0;
+			padding: 0;
+			place-items: center;
+			position: relative;
+
+			&:checked {
+				background-color: var(--primary);
+				border-color: var(--primary);
+			}
+
+			/* Dot */
+			&::after {
+				background-color: var(--primary-contrast);
+				block-size: var(--_indicator-size);
+				border-radius: var(--radius-round);
+				content: "";
+				inline-size: var(--_indicator-size);
+				margin: auto;
+				opacity: 0;
+			}
+
+			&:checked::after {
+				opacity: 1;
+			}
+
+			&::before {
+				--highlight-size: 175%;
+			}
+		}
+
+		/* Sizes */
+		&.small {
+			input[type="radio"] {
+				--_input-size: var(--size-3);
+
+			}
+		}
+
+		&.large {
+			input[type="radio"] {
+				--_input-size: var(--size-4);
+
+			}
+		}
+
+		/* Validation */
+		&[data-invalid],
+		&:has(:user-invalid) {
+			--palette-source: oklch(0.58 0.21 var(--hue-red));
+
+			:where(.end-text) {
+				color: var(--primary);
+			}
+		}
+
+		/* Touch devices */
+		@media (pointer: coarse) {
+			input[type="radio"] {
+				block-size: var(--size-4);
+				inline-size: var(--size-4);
+			}
+		}
+
+		@media (forced-colors: active) {
+			input[type="radio"] {
+				border: 1px solid CanvasText;
+
+				&:checked {
+					background-color: SelectedItem;
+					border-color: SelectedItem;
+
+					&::after {
+						background-color: SelectedItemText;
+					}
+				}
+			}
+		}
+	}
+}

package/css/components/range.css

@@ -0,0 +1,337 @@
+@layer components.root {
+  :where(.range) {
+    display: grid;
+    gap: var(--size-1) 0;
+    /* Two-column base so the optional .value cell can sit next to the
+       label on row 1. Children that span the full width keep using
+       `grid-column: 1/-1`, so this is backwards compatible. */
+    grid-template-columns: 1fr auto;
+    position: relative;
+
+    .label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      font-weight: 600;
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    /* Live current-value readout. Pairs with the <output> element
+       rendered by the Range component (or hand-written .value markup). */
+    :where(.value) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+      grid-column: 2;
+      grid-row: 1;
+      line-height: 1.5;
+      text-align: end;
+    }
+
+    .start-text {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 2;
+      line-height: 1.5;
+    }
+
+    :where(.end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 5;
+      line-height: 1.5;
+    }
+
+    /* Datalist (tick mark labels) */
+    :where(datalist) {
+      color: var(--text-muted);
+      display: flex;
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 4;
+      justify-content: space-between;
+      margin-top: calc(var(--size-1) * -1);
+      padding-inline: calc(3ex / 2);
+
+      &>option {
+        display: flex;
+        inline-size: 0;
+        justify-content: center;
+        padding: 0;
+        white-space: nowrap;
+      }
+    }
+
+    /* Disabled */
+    &:has([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      .label,
+      .value,
+      .start-text,
+      .end-text {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Color */
+    &.filled input[type="range"] {
+      --_track-color: var(--surface-filled);
+    }
+
+    &.default input[type="range"] {
+      --_track-color: var(--surface-default);
+    }
+
+    &.tonal input[type="range"] {
+      --_track-color: var(--surface-tonal);
+    }
+
+    /* Orientation */
+    &.spread {
+      align-items: center;
+      column-gap: var(--size-4);
+      container-type: inline-size;
+      grid-template-columns: 1fr auto;
+
+      .label {
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .start-text {
+        color: var(--text-muted);
+        display: block;
+        font-size: var(--font-size-0);
+        grid-column: 1;
+        grid-row: 2;
+        line-height: 1.5;
+      }
+
+      input[type="range"] {
+        align-self: center;
+        grid-column: 2;
+        grid-row: 1;
+        min-inline-size: 25ch;
+      }
+
+      /* In spread mode, the value sits below the slider in col 2
+         (where end-text would normally land). When end-text is also
+         present it shifts down a row to avoid collision. */
+      :where(.value) {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      :where(.end-text) {
+        grid-column: 2;
+        grid-row: 2;
+        text-align: end;
+      }
+
+      datalist {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      /* When both datalist and end-text exist, push end-text below the datalist
+         so they don't collide on the same grid cell. */
+      &:has(datalist) :where(.end-text) {
+        grid-row: 3;
+      }
+
+      &:has(.value) :where(.end-text) {
+        grid-row: 3;
+      }
+
+      &:has(.value):has(datalist) :where(.end-text) {
+        grid-row: 4;
+      }
+
+      @container (width < 400px) {
+        grid-template-columns: 1fr;
+
+        * {
+          grid-column: 1/-1;
+        }
+
+        .label {
+          grid-row: 1;
+        }
+
+        /* Share row 1 with the label: the label's text stays left-aligned
+           in its full-width cell, while the value shrinks to fit and
+           right-aligns. Visually reads as a "[name ........ value]" row. */
+        :where(.value) {
+          grid-row: 1;
+          justify-self: end;
+          text-align: end;
+        }
+
+        .start-text {
+          grid-row: 2;
+        }
+
+        input[type="range"] {
+          grid-column: 1/-1;
+          grid-row: 3;
+        }
+
+        datalist {
+          grid-column: 1/-1;
+          grid-row: 4;
+        }
+
+        :where(.end-text) {
+          grid-row: 5;
+          text-align: start;
+        }
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --_thumb-bg: var(--color-9);
+      --_thumb-highlight-color: oklch(from var(--color-9) 70% 100% h / 20%);
+
+      .start-text,
+      .end-text,
+      .value {
+        color: var(--color-9);
+      }
+    }
+
+    /* Range input */
+    :where(& > input[type="range"]) {
+      --_thumb-bg: var(--primary);
+      --_thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
+      --_thumb-highlight-size: 0px;
+      --_thumb-offset: -1.125ex;
+      --_thumb-size: 3ex;
+      --_track-color: var(--field-border-color);
+      --_track-fill: 0%;
+      --_track-fill-color: var(--primary);
+      --_track-height: 0.75ex;
+      --_track-radius: 1e5px;
+
+      appearance: none;
+      background: transparent;
+      block-size: var(--size-4);
+      display: block;
+      grid-column: 1/-1;
+      grid-row: 3;
+      inline-size: 100%;
+      outline-offset: 1ex;
+
+      @media (hover: none) {
+        --_thumb-offset: -11.5px;
+        --_thumb-size: 30px;
+      }
+
+      /* Track */
+      &::-webkit-slider-runnable-track {
+        appearance: none;
+        background: linear-gradient(to right,
+            var(--_track-fill-color) var(--_track-fill, 0%),
+            var(--_track-color) 0%);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      &::-moz-range-track {
+        appearance: none;
+        background: var(--_track-color);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      &::-moz-range-progress {
+        appearance: none;
+        background: var(--_track-fill-color);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      /* Ring */
+      &::-webkit-slider-thumb {
+        appearance: none;
+        background: var(--_thumb-bg);
+        block-size: var(--_thumb-size);
+        border: 3px solid var(--surface-default);
+        border-radius: 50%;
+        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        cursor: ew-resize;
+        inline-size: var(--_thumb-size);
+        margin-block-start: var(--_thumb-offset);
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: box-shadow 0.1s ease;
+        }
+
+        .fieldset-item:focus-within & {
+          border-color: var(--gray-14);
+        }
+      }
+
+      &::-moz-range-thumb {
+        appearance: none;
+        background: var(--_thumb-bg);
+        block-size: var(--_thumb-size);
+        border: 3px solid var(--surface-default);
+        border-radius: 50%;
+        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        cursor: ew-resize;
+        inline-size: var(--_thumb-size);
+        margin-block-start: var(--_thumb-offset);
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: box-shadow 0.1s ease;
+        }
+
+        .fieldset-item:focus-within & {
+          border-color: var(--gray-14);
+        }
+      }
+
+      /* Element state */
+      .range:has(:user-invalid) &,
+      .range[data-invalid] & {
+        --_track-fill-color: var(--color-9);
+      }
+
+      &:not([disabled]) {
+        &:hover {
+          --_thumb-highlight-size: var(--size-1);
+        }
+
+        &:active {
+          --_thumb-highlight-size: var(--size-2);
+          --_track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
+              oklch(from var(--field-border-color) calc(l * 1.1) c h));
+        }
+      }
+
+      &[disabled] {
+        --_thumb-bg: oklch(from var(--text-primary) l c h / 50%);
+        --_track-color: var(--field-border-color);
+
+        cursor: not-allowed;
+
+        &::-webkit-slider-thumb {
+          cursor: not-allowed;
+        }
+
+        &::-moz-range-thumb {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+}