opui-css 5.4.1 → 5.4.3

package/css/components/progress.css

@@ -1,99 +1,99 @@
-@layer components.root {
-  :where(.ui-progress) {
-    --_motion: var(--motion, 1);
-    --_accent-color: var(--primary);
-    --_bg-color: var(--surface-tonal);
-
-    background-color: var(--_bg-color);
-    block-size: var(--size-1);
-    border-radius: var(--border-radius, 0.25rem);
-    display: inline-block;
-    inline-size: 100%;
-    overflow: hidden;
-    position: relative;
-    vertical-align: baseline;
-
-    /* Color */
-    &.ui-filled {
-      --_bg-color: var(--surface-filled);
-    }
-
-    &.ui-default {
-      --_bg-color: var(--surface-default);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-    }
-
-    & > progress {
-      appearance: none;
-      background: none;
-      block-size: 100%;
-      border: 0;
-      display: block;
-      inline-size: 100%;
-
-      &::-webkit-progress-bar {
-        background: none;
-        border-radius: var(--border-radius, 0.25rem);
-      }
-
-      &[value]::-webkit-progress-value {
-        background-color: var(--_accent-color);
-        transition: inline-size calc(0.2s * var(--_motion))
-          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
-      }
-
-      &::-moz-progress-bar {
-        background-color: var(--_accent-color);
-      }
-    }
-  }
-
-  :where(.ui-progress):has(> progress:indeterminate) {
-    &::after {
-      animation: indeterminate calc(2s * var(--motion, 1)) linear infinite;
-      background-color: var(--_accent-color);
-      content: "";
-      inset: 0 auto 0 0;
-      position: absolute;
-      will-change: inset-inline-start, inset-inline-end;
-    }
-
-    & > progress {
-      &::-webkit-progress-value {
-        background-color: transparent;
-      }
-
-      &::-moz-progress-bar {
-        background-color: transparent;
-      }
-    }
-  }
-
-  [dir="rtl"] {
-    :where(.ui-progress):has(> progress:indeterminate) {
-      &::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%;
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-progress) {
+    --_motion: var(--motion, 1);
+    --_accent-color: var(--primary);
+    --_bg-color: var(--surface-tonal);
+
+    background-color: var(--_bg-color);
+    block-size: var(--size-1);
+    border-radius: var(--border-radius, 0.25rem);
+    display: inline-block;
+    inline-size: 100%;
+    overflow: hidden;
+    position: relative;
+    vertical-align: baseline;
+
+    /* Color */
+    &.ui-filled {
+      --_bg-color: var(--surface-filled);
+    }
+
+    &.ui-default {
+      --_bg-color: var(--surface-default);
+    }
+
+    &.ui-tonal {
+      --_bg-color: var(--surface-tonal);
+    }
+
+    & > progress {
+      appearance: none;
+      background: none;
+      block-size: 100%;
+      border: 0;
+      display: block;
+      inline-size: 100%;
+
+      &::-webkit-progress-bar {
+        background: none;
+        border-radius: var(--border-radius, 0.25rem);
+      }
+
+      &[value]::-webkit-progress-value {
+        background-color: var(--_accent-color);
+        transition: inline-size calc(0.2s * var(--_motion))
+          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+      }
+
+      &::-moz-progress-bar {
+        background-color: var(--_accent-color);
+      }
+    }
+  }
+
+  :where(.ui-progress):has(> progress:indeterminate) {
+    &::after {
+      animation: indeterminate calc(2s * var(--motion, 1)) linear infinite;
+      background-color: var(--_accent-color);
+      content: "";
+      inset: 0 auto 0 0;
+      position: absolute;
+      will-change: inset-inline-start, inset-inline-end;
+    }
+
+    & > progress {
+      &::-webkit-progress-value {
+        background-color: transparent;
+      }
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    :where(.ui-progress):has(> progress:indeterminate) {
+      &::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

@@ -1,170 +1,170 @@
-@layer components.root {
-  label.ui-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) {
-      .ui-label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Label */
-    .ui-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(.ui-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 */
-    &.ui-stack {
-      grid-auto-columns: unset;
-      justify-items: center;
-
-      .ui-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;
-        }
-      }
-
-      .ui-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 */
-    &.ui-small {
-      input[type="radio"] {
-        --_input-size: var(--size-3);
-      }
-    }
-
-    &.ui-large {
-      input[type="radio"] {
-        --_input-size: var(--size-4);
-      }
-    }
-
-    /* Validation */
-    &[data-invalid],
-    &:has(:user-invalid) {
-      --primary: var(--critical);
-
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-    }
-
-    /* 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;
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  label.ui-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) {
+      .ui-label:after {
+        color: var(--red);
+        content: "*";
+        inset: 0 -0.25ex auto auto;
+        position: absolute;
+      }
+    }
+
+    /* Label */
+    .ui-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(.ui-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 */
+    &.ui-stack {
+      grid-auto-columns: unset;
+      justify-items: center;
+
+      .ui-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;
+        }
+      }
+
+      .ui-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 */
+    &.ui-small {
+      input[type="radio"] {
+        --_input-size: var(--size-3);
+      }
+    }
+
+    &.ui-large {
+      input[type="radio"] {
+        --_input-size: var(--size-4);
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --primary: var(--critical);
+
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+    }
+
+    /* 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;
+          }
+        }
+      }
+    }
+  }
+}