opui-css 5.4.1 → 5.4.3

package/css/components/card.css

@@ -1,115 +1,116 @@
-@layer components.root {
-  :where(.ui-card) {
-    --_bg-tonal: var(--surface-tonal);
-    --_bg-elevated: var(--surface-elevated);
-    --_bg-surface: var(--surface-default);
-    --_border-color: var(--border-color);
-    --_card-bg-color: var(--_bg-surface);
-    --_card-border-color: transparent;
-    --_card-border-width: 0;
-
-    --_card-shadow: none;
-    --_shadow-light: var(--shadow-3);
-    --_shadow-dark: var(--shadow-4);
-    --_shadow-elevated: var(--_shadow-light);
-
-    @container style(--color-scheme: dark) {
-      --_shadow-elevated: var(--_shadow-dark);
-    }
-
-    background-color: var(--_card-bg-color);
-    border-color: var(--_card-border-color);
-    border-radius: var(--border-radius);
-    border-style: solid;
-    border-width: var(--_card-border-width);
-    box-shadow: var(--_card-shadow);
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-3);
-    overflow: hidden;
-    padding-inline: 0;
-    position: relative;
-
-    /* Variants */
-    &.ui-text {
-      --_card-bg-color: transparent;
-      --_card-border-color: transparent;
-      --_card-border-width: 0;
-      --_card-shadow: none;
-    }
-
-    &.ui-tonal {
-      --_card-bg-color: var(--_bg-tonal);
-      --_card-border-width: 1px;
-    }
-
-    &.ui-elevated {
-      --_card-bg-color: var(--_bg-elevated);
-      --_card-shadow: var(--_shadow-elevated);
-    }
-
-    &.ui-outlined {
-      --_card-bg-color: var(--_bg-surface);
-      --_card-border-color: var(--_border-color);
-      --_card-border-width: 1px;
-    }
-
-    & > :where(hgroup, .ui-content) {
-      padding-inline: var(--size-3);
-
-      &:last-child {
-        padding-block-end: var(--size-3);
-      }
-    }
-
-    /* Header */
-    & > hgroup {
-      padding-block: var(--size-3) 0;
-
-      /* Top paragraph */
-      & > p:first-of-type:first-child {
-        line-height: 1.3;
-      }
-
-      :where(h1, h2, h3, h4, h5, h6):last-child {
-        margin-block-end: 0;
-      }
-
-      /* Bottom paragraph */
-      & > p:last-of-type:last-child:not(:first-child) {
-        font-size: var(--font-size-1);
-      }
-    }
-
-    /* Content */
-    & > .ui-content:where(:only-child, :first-child) {
-      padding-block: var(--size-3) var(--size-4);
-    }
-
-    /* Actions */
-    & > .ui-actions {
-      display: flex;
-      gap: var(--size-2);
-      margin-block: var(--size-2) 0;
-      padding-block-end: var(--size-2);
-      padding-inline: var(--size-3);
-
-      &:has(.ui-button:first-child[class="ui-button"]) {
-        padding-inline: var(--size-1) var(--size-3);
-      }
-
-      &:has(.ui-button:not([class="ui-button"])) {
-        padding-block-end: var(--size-2);
-      }
-
-      /* Alignment */
-      &.ui-align-end {
-        justify-content: end;
-
-        &:has(.ui-button:first-child[class="ui-button"]) {
-          padding-inline: var(--size-3) var(--size-1);
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-card) {
+    --_bg-tonal: var(--surface-tonal);
+    --_bg-elevated: var(--surface-elevated);
+    --_bg-surface: var(--surface-default);
+    --_border-color: var(--border-color);
+    --_card-bg-color: var(--_bg-surface);
+    --_card-border-color: transparent;
+    --_card-border-width: 0;
+
+    --_card-shadow: none;
+    --_shadow-light: var(--shadow-3);
+    --_shadow-dark: var(--shadow-4);
+    --_shadow-elevated: var(--_shadow-light);
+
+    @container style(--color-scheme: dark) {
+      --_shadow-elevated: var(--_shadow-dark);
+    }
+
+    background-color: var(--_card-bg-color);
+    border-color: var(--_card-border-color);
+    border-radius: var(--border-radius);
+    border-style: solid;
+    border-width: var(--_card-border-width);
+    box-shadow: var(--_card-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-3);
+    overflow: hidden;
+    padding-inline: 0;
+    position: relative;
+
+    /* Variants */
+    &.ui-text {
+      --_card-bg-color: transparent;
+      --_card-border-color: transparent;
+      --_card-border-width: 0;
+      --_card-shadow: none;
+    }
+
+    &.ui-tonal {
+      --_card-bg-color: var(--_bg-tonal);
+      --_card-border-width: 1px;
+    }
+
+    &.ui-elevated {
+      --_card-bg-color: var(--_bg-elevated);
+      --_card-shadow: var(--_shadow-elevated);
+    }
+
+    &.ui-outlined {
+      --_card-bg-color: var(--_bg-surface);
+      --_card-border-color: var(--_border-color);
+      --_card-border-width: 1px;
+    }
+
+    &> :where(hgroup, .ui-content) {
+      padding-inline: var(--size-3);
+
+      &:last-child {
+        padding-block-end: var(--size-3);
+      }
+    }
+
+    /* Header */
+    &>hgroup {
+      padding-block: var(--size-3) 0;
+
+      /* Top paragraph */
+      &>p:first-of-type:first-child {
+        font-size: var(--font-size-0);
+        line-height: 1.3;
+      }
+
+      :where(h1, h2, h3, h4, h5, h6):last-child {
+        margin-block-end: 0;
+      }
+
+      /* Bottom paragraph */
+      &>p:last-of-type:last-child:not(:first-child) {
+        font-size: var(--font-size-1);
+      }
+    }
+
+    /* Content */
+    &>.ui-content:where(:only-child, :first-child) {
+      padding-block: var(--size-3) var(--size-4);
+    }
+
+    /* Actions */
+    &>.ui-actions {
+      display: flex;
+      gap: var(--size-2);
+      margin-block: var(--size-2) 0;
+      padding-block-end: var(--size-2);
+      padding-inline: var(--size-3);
+
+      &:has(.ui-button:first-child[class="ui-button"]) {
+        padding-inline: var(--size-1) var(--size-3);
+      }
+
+      &:has(.ui-button:not([class="ui-button"])) {
+        padding-block-end: var(--size-2);
+      }
+
+      /* Alignment */
+      &.ui-align-end {
+        justify-content: end;
+
+        &:has(.ui-button:first-child[class="ui-button"]) {
+          padding-inline: var(--size-3) var(--size-1);
+        }
+      }
+    }
+  }
+}

package/css/components/checkbox.css

@@ -1,211 +1,211 @@
-@layer components.root {
-  label.ui-checkbox {
-    --_input-size: var(--size-4);
-
-    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;
-      position: relative;
-      padding-inline: 0 1ex;
-    }
-
-    /* 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;
-    }
-
-    /* Spread layout */
-    &.ui-spread {
-      align-items: center;
-      column-gap: var(--size-4);
-      grid-auto-flow: unset;
-      grid-template-columns: 1fr auto;
-      inline-size: 100%;
-
-      .ui-label {
-        font-weight: 600;
-        grid-column: 1;
-        grid-row: 1;
-        inline-size: fit-content;
-      }
-
-      input {
-        grid-column: 2;
-        grid-row: 1;
-      }
-
-      :where(.ui-end-text) {
-        grid-column: 1;
-        grid-row: 2;
-      }
-    }
-
-    /* Stacked layout */
-    &.ui-stack {
-      justify-items: center;
-      grid-auto-columns: unset;
-
-      .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="checkbox"] {
-      --_input-size: var(--size-4);
-
-      appearance: none;
-      aspect-ratio: 1;
-      background-color: var(--surface-default);
-      block-size: var(--_input-size);
-      border-radius: var(--radius-1);
-      border: 1px solid var(--border-color);
-      box-sizing: border-box;
-      cursor: pointer;
-      display: grid;
-      font-size: var(--_input-size);
-      inline-size: var(--_input-size);
-      margin: 0;
-      padding: 0;
-      place-items: center;
-      position: relative;
-
-      &:checked,
-      &:indeterminate {
-        background-color: var(--primary);
-        border-color: var(--primary);
-      }
-
-      /* Checkmark */
-      &::after {
-        background-color: var(--primary-contrast);
-        clip-path: polygon(
-          15% 52%,
-          40% 77%,
-          85% 32%,
-          75% 22%,
-          40% 57%,
-          25% 42%
-        );
-        content: "";
-        inset: 0;
-        opacity: 0;
-        position: absolute;
-      }
-
-      &:checked::after,
-      &:indeterminate::after {
-        opacity: 1;
-      }
-
-      /* Indeterminate dash */
-      &:indeterminate::after {
-        clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
-      }
-
-      &::before {
-        --highlight-size: 175%;
-      }
-    }
-
-    /* Sizes */
-    &.ui-small {
-      input[type="checkbox"] {
-        --_input-size: var(--size-3);
-      }
-    }
-
-    &.ui-large {
-      input[type="checkbox"] {
-        --_input-size: var(--size-5);
-      }
-    }
-
-    /* Validation */
-    &[data-invalid],
-    &:has(:user-invalid) {
-      --primary: var(--critical);
-
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-    }
-
-    /* Touch devices */
-    @media (pointer: coarse) {
-      input {
-        --_input-size: var(--size-4);
-      }
-    }
-
-    @media (forced-colors: active) {
-      input {
-        border: 1px solid CanvasText;
-
-        &:checked,
-        &:indeterminate {
-          background-color: SelectedItem;
-          border-color: SelectedItem;
-
-          &::after {
-            background-color: SelectedItemText;
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  label.ui-checkbox {
+    --_input-size: var(--size-4);
+
+    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;
+      position: relative;
+      padding-inline: 0 1ex;
+    }
+
+    /* 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;
+    }
+
+    /* Spread layout */
+    &.ui-spread {
+      align-items: center;
+      column-gap: var(--size-4);
+      grid-auto-flow: unset;
+      grid-template-columns: 1fr auto;
+      inline-size: 100%;
+
+      .ui-label {
+        font-weight: 600;
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: fit-content;
+      }
+
+      input {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      :where(.ui-end-text) {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
+    /* Stacked layout */
+    &.ui-stack {
+      justify-items: center;
+      grid-auto-columns: unset;
+
+      .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="checkbox"] {
+      --_input-size: var(--size-4);
+
+      appearance: none;
+      aspect-ratio: 1;
+      background-color: var(--surface-default);
+      block-size: var(--_input-size);
+      border-radius: var(--radius-1);
+      border: 1px solid var(--border-color);
+      box-sizing: border-box;
+      cursor: pointer;
+      display: grid;
+      font-size: var(--_input-size);
+      inline-size: var(--_input-size);
+      margin: 0;
+      padding: 0;
+      place-items: center;
+      position: relative;
+
+      &:checked,
+      &:indeterminate {
+        background-color: var(--primary);
+        border-color: var(--primary);
+      }
+
+      /* Checkmark */
+      &::after {
+        background-color: var(--primary-contrast);
+        clip-path: polygon(
+          15% 52%,
+          40% 77%,
+          85% 32%,
+          75% 22%,
+          40% 57%,
+          25% 42%
+        );
+        content: "";
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+      }
+
+      &:checked::after,
+      &:indeterminate::after {
+        opacity: 1;
+      }
+
+      /* Indeterminate dash */
+      &:indeterminate::after {
+        clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
+      }
+
+      &::before {
+        --highlight-size: 175%;
+      }
+    }
+
+    /* Sizes */
+    &.ui-small {
+      input[type="checkbox"] {
+        --_input-size: var(--size-3);
+      }
+    }
+
+    &.ui-large {
+      input[type="checkbox"] {
+        --_input-size: var(--size-5);
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --primary: var(--critical);
+
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+    }
+
+    /* Touch devices */
+    @media (pointer: coarse) {
+      input {
+        --_input-size: var(--size-4);
+      }
+    }
+
+    @media (forced-colors: active) {
+      input {
+        border: 1px solid CanvasText;
+
+        &:checked,
+        &:indeterminate {
+          background-color: SelectedItem;
+          border-color: SelectedItem;
+
+          &::after {
+            background-color: SelectedItemText;
+          }
+        }
+      }
+    }
+  }
+}