opui-css 5.4.1 → 5.4.3

package/css/components/drawer.css

@@ -1,172 +1,170 @@
-@layer components.root {
-  :where(dialog.ui-drawer) {
-    --_motion: var(--motion, 1);
-    --_backdrop-bg-color: transparent;
-    --_backdrop-blur: blur(2px);
-    --_bg-color: var(--surface-default);
-    --_block-size: min(80vb, 650px);
-    --_border-color: var(--border-color);
-    --_border-width: var(--border-width);
-    --_color: var(--text-primary);
-    --_content-padding: var(--size-4);
-    --_footer-gap: var(--size-3);
-    --_footer-padding: var(--size-3);
-    --_header-font-size: var(--font-size-3);
-    --_header-padding: var(--size-3);
-    --_inline-size: min(375px, 100vi);
-    --_shadow: var(--shadow-2);
-    --_transition-duration: calc(0.2s * var(--_motion));
-    --_transition-timing: var(--ease-out-3);
-
-    background-color: var(--_bg-color);
-    border: none;
-    box-shadow: var(--_shadow);
-    color: var(--_color);
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    max-inline-size: 100%;
-    padding: 0;
-    position: fixed;
-    transition:
-      display var(--_transition-duration) allow-discrete,
-      overlay var(--_transition-duration) allow-discrete,
-      translate var(--_transition-duration) var(--_transition-timing);
-    z-index: 1000;
-
-    &::backdrop {
-      backdrop-filter: var(--_backdrop-blur);
-      background-color: var(--_backdrop-bg-color);
-      opacity: 0;
-      transition:
-        display var(--_transition-duration) allow-discrete,
-        overlay var(--_transition-duration) allow-discrete,
-        opacity var(--_transition-duration) var(--_transition-timing);
-    }
-
-    &.ui-backdrop-transparent {
-      --_backdrop-blur: none;
-    }
-
-    .ui-header {
-      align-items: center;
-      border-block-end: var(--_border-width) solid var(--_border-color);
-      display: flex;
-      padding: var(--_header-padding);
-
-      :where(h1, h2, h3, h4, h5, h6) {
-        font-size: var(--_header-font-size);
-        margin: 0;
-      }
-
-      :where(.ui-icon-button) {
-        margin-inline-start: auto;
-      }
-    }
-
-    .ui-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--_content-padding);
-    }
-
-    .ui-footer {
-      border-block-start: var(--_border-width) solid var(--_border-color);
-      display: flex;
-      gap: var(--_footer-gap);
-      justify-content: end;
-      padding: var(--_footer-padding);
-    }
-
-    &.ui-inline-start,
-    &.ui-inline-end {
-      block-size: 100dvb;
-      inline-size: var(--_inline-size);
-      inset-block: 0;
-      max-block-size: 100%;
-    }
-
-    &.ui-inline-start {
-      border-inline-end: var(--_border-width) solid var(--_border-color);
-      inset-inline-end: auto;
-      inset-inline-start: 0;
-      translate: -100% 0;
-    }
-
-    &.ui-inline-end {
-      border-inline-start: var(--_border-width) solid var(--_border-color);
-      inset-inline-end: 0;
-      inset-inline-start: auto;
-      translate: 100% 0;
-
-      .ui-footer {
-        justify-content: start;
-      }
-    }
-
-    &.ui-block-start,
-    &.ui-block-end {
-      block-size: var(--_block-size);
-      inline-size: 100dvi;
-      inset-inline: 0;
-      max-block-size: 80dvb;
-    }
-
-    &.ui-block-start {
-      border-block-end: var(--_border-width) solid var(--_border-color);
-      inset-block-end: auto;
-      inset-block-start: 0;
-      translate: 0 -100%;
-    }
-
-    &.ui-block-end {
-      border-block-start: var(--_border-width) solid var(--_border-color);
-      inset-block-end: 0;
-      inset-block-start: auto;
-      translate: 0 100%;
-    }
-
-    &[open] {
-      translate: 0 0;
-
-      &::backdrop {
-        opacity: 1;
-      }
-
-      @starting-style {
-        &::backdrop {
-          opacity: 0;
-        }
-
-        &.ui-inline-start {
-          translate: -100% 0;
-        }
-
-        &.ui-inline-end {
-          translate: 100% 0;
-        }
-
-        &.ui-block-start {
-          translate: 0 -100%;
-        }
-
-        &.ui-block-end {
-          translate: 0 100%;
-        }
-      }
-    }
-  }
-
-  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
-	   This carve-out re-enables page scrolling when a transparent-backdrop drawer is
-	   open on wide viewports (where the drawer doesn't visually cover the page). */
-  html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
-    overflow: unset;
-    overscroll-behavior: auto;
-
-    @media (width < 500px) {
-      overflow: clip;
-      overscroll-behavior: contain;
-    }
-  }
-}
+@layer components.root {
+  :where(dialog.ui-drawer) {
+    --_motion: var(--motion, 1);
+    --_backdrop-bg-color: transparent;
+    --_backdrop-blur: blur(2px);
+    --_bg-color: var(--surface-default);
+    --_block-size: min(80vb, 650px);
+    --_border-color: var(--border-color);
+    --_border-width: var(--border-width);
+    --_color: var(--text-primary);
+    --_content-padding: var(--size-4);
+    --_footer-gap: var(--size-3);
+    --_footer-padding: var(--size-3);
+    --_header-font-size: var(--font-size-3);
+    --_header-padding: var(--size-3);
+    --_inline-size: min(375px, 100vi);
+    --_shadow: var(--shadow-2);
+    --_transition-duration: calc(0.2s * var(--_motion));
+    --_transition-timing: var(--ease-out-3);
+
+    background-color: var(--_bg-color);
+    border: none;
+    box-shadow: var(--_shadow);
+    color: var(--_color);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    max-inline-size: 100%;
+    padding: 0;
+    position: fixed;
+    transition:
+      display var(--_transition-duration) allow-discrete,
+      overlay var(--_transition-duration) allow-discrete,
+      translate var(--_transition-duration) var(--_transition-timing);
+    z-index: 1000;
+
+    &::backdrop {
+      backdrop-filter: var(--_backdrop-blur);
+      background-color: var(--_backdrop-bg-color);
+      opacity: 0;
+      transition:
+        display var(--_transition-duration) allow-discrete,
+        overlay var(--_transition-duration) allow-discrete,
+        opacity var(--_transition-duration) var(--_transition-timing);
+    }
+
+    &.ui-backdrop-transparent {
+      --_backdrop-blur: none;
+    }
+
+    .ui-header {
+      align-items: center;
+      border-block-end: var(--_border-width) solid var(--_border-color);
+      display: flex;
+      padding: var(--_header-padding);
+
+      :where(h1, h2, h3, h4, h5, h6) {
+        font-size: var(--_header-font-size);
+        margin: 0;
+      }
+
+      :where(.ui-icon-button) {
+        margin-inline-start: auto;
+      }
+    }
+
+    .ui-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--_content-padding);
+    }
+
+    .ui-footer {
+      border-block-start: var(--_border-width) solid var(--_border-color);
+      display: flex;
+      gap: var(--_footer-gap);
+      justify-content: end;
+      padding: var(--_footer-padding);
+    }
+
+    &.ui-inline-start,
+    &.ui-inline-end {
+      block-size: 100dvb;
+      inline-size: var(--_inline-size);
+      inset-block: 0;
+      max-block-size: 100%;
+    }
+
+    &.ui-inline-start {
+      border-inline-end: var(--_border-width) solid var(--_border-color);
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      translate: -100% 0;
+    }
+
+    &.ui-inline-end {
+      border-inline-start: var(--_border-width) solid var(--_border-color);
+      inset-inline-end: 0;
+      inset-inline-start: auto;
+      translate: 100% 0;
+
+      .ui-footer {
+        justify-content: start;
+      }
+    }
+
+    &.ui-block-start,
+    &.ui-block-end {
+      block-size: var(--_block-size);
+      inline-size: 100dvi;
+      inset-inline: 0;
+      max-block-size: 80dvb;
+    }
+
+    &.ui-block-start {
+      border-block-end: var(--_border-width) solid var(--_border-color);
+      inset-block-end: auto;
+      inset-block-start: 0;
+      translate: 0 -100%;
+    }
+
+    &.ui-block-end {
+      border-block-start: var(--_border-width) solid var(--_border-color);
+      inset-block-end: 0;
+      inset-block-start: auto;
+      translate: 0 100%;
+    }
+
+    &[open] {
+      translate: 0 0;
+
+      &::backdrop {
+        opacity: 1;
+      }
+
+      @starting-style {
+        &::backdrop {
+          opacity: 0;
+        }
+
+        &.ui-inline-start {
+          translate: -100% 0;
+        }
+
+        &.ui-inline-end {
+          translate: 100% 0;
+        }
+
+        &.ui-block-start {
+          translate: 0 -100%;
+        }
+
+        &.ui-block-end {
+          translate: 0 100%;
+        }
+      }
+    }
+  }
+
+  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css. */
+  html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
+    overflow: unset;
+    overscroll-behavior: auto;
+
+    @media (width < 500px) {
+      overflow: clip;
+      overscroll-behavior: contain;
+    }
+  }
+}

package/css/components/form.css

@@ -1,147 +1,146 @@
-@layer components.extended {
-  /* Form */
-  :where(.ui-form) {
-    display: grid;
-    gap: var(--size-8);
-
-    hr {
-      margin-block: 0;
-    }
-  }
-
-  /* Fieldset */
-  :where(.ui-fieldset) {
-    all: unset;
-    border: 0;
-    border-radius: 0;
-    display: grid;
-    gap: var(--size-1);
-    margin: 0;
-    min-inline-size: 0;
-    padding: 0;
-
-    /* Legend */
-    :where(legend, .ui-legend) {
-      all: unset;
-      color: var(--text-primary);
-      font-weight: 600;
-      margin-block-end: var(--size-3);
-      padding: 0;
-
-      &:has(+ :where(.ui-field-description)) {
-        margin-block-end: 0;
-      }
-    }
-
-    /* Field description / supporting text */
-    :where(.ui-field-description) {
-      color: var(--text-muted);
-      font-size: var(--font-size-05);
-      line-height: var(--font-lineheight-3);
-
-      &:has(+ *) {
-        margin-block-end: var(--size-3);
-      }
-    }
-
-    /* End text */
-    :where(.ui-end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      line-height: var(--font-lineheight-3);
-    }
-
-    &:has(.ui-text-field.ui-row) {
-      row-gap: var(--size-7);
-    }
-
-    /* Disabled */
-    &[disabled] {
-      opacity: 0.64;
-      user-select: none;
-
-      input,
-      label,
-      .ui-label {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Error / validation */
-    &[data-invalid] {
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-
-      :where(.ui-checkbox, .ui-radio, .ui-switch) {
-        --primary: var(--critical);
-
-        :where(.ui-end-text) {
-          color: var(--critical);
-        }
-      }
-
-      :where(.ui-switch) {
-        input {
-          border-radius: var(--radius-round);
-          outline: 2px solid var(--critical);
-        }
-      }
-    }
-
-    /* Required */
-    &:has(:invalid) {
-      :where(legend, .ui-legend) {
-        padding-inline-end: 1ex;
-        position: relative;
-
-        &::after {
-          color: var(--red);
-          content: "*";
-          inset: 0 -0.25ex auto auto;
-          position: absolute;
-        }
-      }
-    }
-  }
-
-  /* Field group */
-  :where(.ui-field-group) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-4);
-
-    /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
-        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
-      ) {
-      gap: var(--size-2);
-    }
-
-    /* If it only has buttons */
-    &:has(.ui-button):not(:has(*:not(.ui-button))) {
-      align-items: center;
-      flex-direction: row;
-      gap: var(--size-2);
-
-      /* If it's not preceeded by an hr */
-      &:not(hr + &) {
-        margin-block-start: var(--size-4);
-      }
-    }
-
-    & + & {
-      margin-block-start: var(--size-5);
-    }
-
-    /* Directions */
-    &.ui-row {
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
-        gap: var(--size-4);
-      }
-    }
-  }
-}
+@layer components.extended {
+
+  /* Form */
+  :where(.ui-form) {
+    display: grid;
+    gap: var(--size-8);
+
+    hr {
+      margin-block: 0;
+    }
+  }
+
+  /* Fieldset */
+  :where(.ui-fieldset) {
+    all: unset;
+    border: 0;
+    border-radius: 0;
+    display: grid;
+    gap: var(--size-1);
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+
+    /* Legend */
+    :where(legend, .ui-legend) {
+      all: unset;
+      color: var(--text-primary);
+      font-weight: 600;
+      margin-block-end: var(--size-3);
+      padding: 0;
+
+      &:has(+ :where(.ui-field-description)) {
+        margin-block-end: 0;
+      }
+    }
+
+    /* Field description / supporting text */
+    :where(.ui-field-description) {
+      color: var(--text-muted);
+      font-size: var(--font-size-05);
+      line-height: var(--font-lineheight-3);
+
+      &:has(+ *) {
+        margin-block-end: var(--size-3);
+      }
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      line-height: var(--font-lineheight-3);
+    }
+
+    &:has(.ui-text-field.ui-row) {
+      row-gap: var(--size-7);
+    }
+
+    /* Disabled */
+    &[disabled] {
+      opacity: 0.64;
+      user-select: none;
+
+      input,
+      label,
+      .ui-label {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Error / validation */
+    &[data-invalid] {
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+
+      :where(.ui-checkbox, .ui-radio, .ui-switch) {
+        --primary: var(--critical);
+
+        :where(.ui-end-text) {
+          color: var(--critical);
+        }
+      }
+
+      :where(.ui-switch) {
+        input {
+          border-radius: var(--radius-round);
+          outline: 2px solid var(--critical);
+        }
+      }
+    }
+
+    /* Required */
+    &:has(:invalid) {
+      :where(legend, .ui-legend) {
+        padding-inline-end: 1ex;
+        position: relative;
+
+        &::after {
+          color: var(--red);
+          content: "*";
+          inset: 0 -0.25ex auto auto;
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  /* Field group */
+  :where(.ui-field-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-4);
+
+    /* If it only has checkboxes, radios, or switches */
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not( :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
+      gap: var(--size-2);
+    }
+
+    /* If it only has buttons */
+    &:has(.ui-button):not(:has(*:not(.ui-button))) {
+      align-items: center;
+      flex-direction: row;
+      gap: var(--size-2);
+
+      /* If it's not preceded by an hr */
+      &:not(hr + &) {
+        margin-block-start: var(--size-4);
+      }
+    }
+
+    &+& {
+      margin-block-start: var(--size-5);
+    }
+
+    /* Directions */
+    &.ui-row {
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
+        gap: var(--size-4);
+      }
+    }
+  }
+}