opui-css 2.4.0 → 3.0.0

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

@@ -1,65 +1,65 @@
-@layer components.root {
-  :where(.definition-list) {
-    --_border-style: solid;
-    --_border-width: 1px;
-
-    display: grid;
-    gap: var(--size-3);
-    padding: 0;
-
-    &.dotted {
-      --_border-style: dotted;
-      --_border-width: 2px;
-    }
-
-    li {
-      display: grid;
-      margin: 0;
-      padding: 0;
-
-      .term {
-        display: block;
-        font-weight: 700;
-        overflow: hidden;
-        position: relative;
-      }
-
-      hr {
-        display: none;
-        margin: 0;
-      }
-    }
-
-    @container (width > 45ch) {
-      gap: var(--size-1);
-
-      li {
-        align-items: baseline;
-        display: grid;
-        gap: var(--size-1);
-        grid-template-columns: 1fr auto;
-
-        &:has(hr) {
-          grid-template-columns: auto 1fr auto;
-        }
-
-        hr {
-          background-color: transparent;
-          border-block-end: var(--_border-width) var(--_border-style)
-            var(--border-color);
-          block-size: 2px;
-          display: block;
-        }
-
-        .term {
-          &::after {
-            display: inline-block;
-          }
-        }
-        .description {
-          color: var(--text-color-2);
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.definition-list) {
+    --_border-style: solid;
+    --_border-width: 1px;
+
+    display: grid;
+    gap: var(--size-3);
+    padding: 0;
+
+    &.dotted {
+      --_border-style: dotted;
+      --_border-width: 2px;
+    }
+
+    li {
+      display: grid;
+      margin: 0;
+      padding: 0;
+
+      .term {
+        display: block;
+        font-weight: 700;
+        overflow: hidden;
+        position: relative;
+      }
+
+      hr {
+        display: none;
+        margin: 0;
+      }
+    }
+
+    @container (width > 45ch) {
+      gap: var(--size-1);
+
+      li {
+        align-items: baseline;
+        display: grid;
+        gap: var(--size-1);
+        grid-template-columns: 1fr auto;
+
+        &:has(hr) {
+          grid-template-columns: auto 1fr auto;
+        }
+
+        hr {
+          background-color: transparent;
+          border-block-end: var(--_border-width) var(--_border-style)
+            var(--border-color);
+          block-size: 2px;
+          display: block;
+        }
+
+        .term {
+          &::after {
+            display: inline-block;
+          }
+        }
+        .description {
+          color: var(--text-color-2);
+        }
+      }
+    }
+  }
+}

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

@@ -1,59 +1,59 @@
-@layer components.extended {
-  :where(dialog) {
-    margin-block-start: 15%; /* vertical alignment */
-    padding-block: 0;
-    pointer-events: none;
-
-    &::backdrop {
-      background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(5px);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
-    }
-
-    &:not([open]) {
-      display: none;
-    }
-
-    &[open] {
-      pointer-events: all;
-    }
-
-    .actions {
-      justify-content: end;
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    /* Animation */
-    /* There's no close animation, intentionally */
-    opacity: 0;
-
-    &[open] {
-      opacity: 1;
-      transition: display 0.2s allow-discrete,
-        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
-        opacity 0.2s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      margin-block-start: 17%;
-      &[open] {
-        margin-block-start: 15%;
-
-        @starting-style {
-          margin-block-start: 17%;
-        }
-      }
-    }
-  }
-
-  :where(html:has(dialog[open])) {
-    overflow: hidden;
-  }
-}
+@layer components.extended {
+  :where(dialog) {
+    margin-block-start: 15%; /* vertical alignment */
+    padding-block: 0;
+    pointer-events: none;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(5px);
+
+      @media (prefers-reduced-motion: reduce) {
+        backdrop-filter: none;
+      }
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    &[open] {
+      pointer-events: all;
+    }
+
+    .actions {
+      justify-content: end;
+      padding-inline: var(--size-3) var(--size-1);
+    }
+
+    /* Animation */
+    /* There's no close animation, intentionally */
+    opacity: 0;
+
+    &[open] {
+      opacity: 1;
+      transition: display 0.2s allow-discrete,
+        margin-block-start 0.3s var(--ease-1), overlay 0.2s allow-discrete,
+        opacity 0.2s var(--ease-out-1);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      margin-block-start: 17%;
+      &[open] {
+        margin-block-start: 15%;
+
+        @starting-style {
+          margin-block-start: 17%;
+        }
+      }
+    }
+  }
+
+  :where(html:has(dialog[open])) {
+    overflow: hidden;
+  }
+}

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

@@ -1,7 +1,7 @@
-@layer components.root {
-  :where(hr) {
-    background-color: var(--border-color);
-    block-size: var(--border-size-1);
-    margin-block: var(--size-fluid-3);
-  }
-}
+@layer components.root {
+  :where(hr) {
+    background-color: var(--border-color);
+    block-size: var(--border-size-1);
+    margin-block: var(--size-fluid-3);
+  }
+}

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

@@ -1,83 +1,83 @@
-@layer components.extended {
-  /* Common styling for checkbox, radio and switch groups */
-  :where(fieldset.field-group) {
-    border: 0;
-    border-radius: 0;
-    gap: 0;
-    padding: 0;
-    z-index: 1;
-
-    legend {
-      color: var(--text-color-2);
-      padding: 0 1ex 0 0;
-    }
-
-    /* Disabled */
-    &[disabled] {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Validation */
-    &.error {
-      legend,
-      .supporting-text {
-        color: var(--color-9);
-      }
-    }
-
-    /* Required */
-    &:has([required]) {
-      &:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
-        legend {
-          position: relative;
-
-          &::after {
-            color: var(--red);
-            content: "*";
-            inset: 0 -0.25ex auto auto;
-            position: absolute;
-          }
-        }
-      }
-    }
-    :where(.radio, .checkbox, .switch) .label:after {
-      display: none;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      color: var(--text-color-2);
-      font-size: var(--font-size-xs);
-      line-height: 1.5;
-      z-index: 1;
-    }
-
-    /* Fields */
-    .fields {
-      display: flex;
-      flex-direction: column;
-      gap: var(--size-2);
-
-      * ~ & {
-        padding: var(--size-2) 0;
-      }
-    }
-
-    :last-child {
-      padding-block-end: 0;
-    }
-
-    /* Directions */
-    &.row {
-      .fields {
-        flex-direction: row;
-      }
-    }
-  }
-}
+@layer components.extended {
+  /* Common styling for checkbox, radio and switch groups */
+  :where(fieldset.field-group) {
+    border: 0;
+    border-radius: 0;
+    gap: 0;
+    padding: 0;
+    z-index: 1;
+
+    legend {
+      color: var(--text-color-2);
+      padding: 0 1ex 0 0;
+    }
+
+    /* Disabled */
+    &[disabled] {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Validation */
+    &.error {
+      legend,
+      .supporting-text {
+        color: var(--color-9);
+      }
+    }
+
+    /* Required */
+    &:has([required]) {
+      &:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
+        legend {
+          position: relative;
+
+          &::after {
+            color: var(--red);
+            content: "*";
+            inset: 0 -0.25ex auto auto;
+            position: absolute;
+          }
+        }
+      }
+    }
+    :where(.radio, .checkbox, .switch) .label:after {
+      display: none;
+    }
+
+    /* Supporting text */
+    .supporting-text {
+      color: var(--text-color-2);
+      font-size: var(--font-size-xs);
+      line-height: 1.5;
+      z-index: 1;
+    }
+
+    /* Fields */
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--size-2);
+
+      * ~ & {
+        padding: var(--size-2) 0;
+      }
+    }
+
+    :last-child {
+      padding-block-end: 0;
+    }
+
+    /* Directions */
+    &.row {
+      .fields {
+        flex-direction: row;
+      }
+    }
+  }
+}