opui-css 2.4.0 → 3.0.0

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

@@ -1,120 +1,120 @@
-@layer components.root {
-  :where(nav.tabs) {
-    --_bg-color: transparent;
-
-    & > [role="tablist"] {
-      button {
-        outline-color: transparent;
-        outline-offset: -4px;
-
-        &[aria-selected="true"] {
-          &:focus-visible {
-            outline: 2px solid var(--text-color-1);
-          }
-        }
-      }
-    }
-
-    /* Underlined */
-    &.underlined {
-      /* Tab list */
-      & > [role="tablist"] {
-        border-bottom: 1px solid var(--border-color);
-
-        button {
-          --_ripple-color: light-dark(
-            color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
-            color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
-          );
-
-          background: var(--_bg-color) var(--ripple, none);
-          font-weight: 500;
-          line-height: var(--font-lineheight-4);
-          padding: var(--size-2) var(--size-3);
-
-          &:focus-visible {
-            border-radius: 0;
-          }
-
-          &[aria-selected="true"] {
-            border-block-end: 2px solid var(--primary);
-            color: var(--primary);
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            transition: background-color 0.2s var(--ease-out-3),
-              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
-              outline-offset 0.05s var(--ease-1);
-
-            /*** Ripple effect */
-            background-position: center;
-            transition: background var(--button-ripple-duration);
-            &:where(:not(:active):hover) {
-              --ripple: radial-gradient(
-                  circle,
-                  transparent 1%,
-                  var(--_ripple-color) 1%
-                )
-                center/15000%;
-            }
-
-            &:where(:hover:active) {
-              background-size: var(--button-ripple-size);
-              transition: background 0s;
-            }
-
-            &:hover {
-              background-color: light-dark(
-                oklch(from var(--primary) calc(l * 0.75) none h / 5%),
-                oklch(from var(--primary) calc(l * 1.25) none h / 5%)
-              );
-            }
-          }
-        }
-      }
-    }
-
-    /* Filled */
-    &.filled {
-      --_bg-color: var(--surface-default);
-      --_radius: var(--border-radius);
-      --_selected-bg: var(--surface-filled);
-
-      & > [role="tablist"] {
-        background-color: var(--_bg-color);
-        border: var(--border-width) solid var(--border-color);
-        border-radius: var(--_radius);
-        overflow: hidden;
-        padding: 0.792ex;
-        width: fit-content;
-
-        button {
-          background-color: var(--_bg-color);
-          border-radius: var(--_radius);
-          line-height: var(--font-lineheight-4);
-          padding-inline: var(--size-3);
-
-          &:hover {
-            background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
-          }
-
-          &[aria-selected="true"] {
-            background-color: var(--_selected-bg);
-
-            &:hover {
-              background-color: oklch(
-                from var(--_selected-bg) calc(l * 1.25) c h
-              );
-            }
-          }
-
-          @media (prefers-reduced-motion: no-preference) {
-            transition: background-color 0.2s var(--ease-out-3),
-              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
-              outline-offset 0.05s var(--ease-1);
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(nav.tabs) {
+    --_bg-color: transparent;
+
+    & > [role="tablist"] {
+      button {
+        outline-color: transparent;
+        outline-offset: -4px;
+
+        &[aria-selected="true"] {
+          &:focus-visible {
+            outline: 2px solid var(--text-color-1);
+          }
+        }
+      }
+    }
+
+    /* Underlined */
+    &.underlined {
+      /* Tab list */
+      & > [role="tablist"] {
+        border-bottom: 1px solid var(--border-color);
+
+        button {
+          --_ripple-color: light-dark(
+            color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
+            color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
+          );
+
+          background: var(--_bg-color) var(--ripple, none);
+          font-weight: 500;
+          line-height: var(--font-lineheight-4);
+          padding: var(--size-2) var(--size-3);
+
+          &:focus-visible {
+            border-radius: 0;
+          }
+
+          &[aria-selected="true"] {
+            border-block-end: 2px solid var(--primary);
+            color: var(--primary);
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition: background-color 0.2s var(--ease-out-3),
+              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
+              outline-offset 0.05s var(--ease-1);
+
+            /*** Ripple effect */
+            background-position: center;
+            transition: background var(--button-ripple-duration);
+            &:where(:not(:active):hover) {
+              --ripple: radial-gradient(
+                  circle,
+                  transparent 1%,
+                  var(--_ripple-color) 1%
+                )
+                center/15000%;
+            }
+
+            &:where(:hover:active) {
+              background-size: var(--button-ripple-size);
+              transition: background 0s;
+            }
+
+            &:hover {
+              background-color: light-dark(
+                oklch(from var(--primary) calc(l * 0.75) none h / 5%),
+                oklch(from var(--primary) calc(l * 1.25) none h / 5%)
+              );
+            }
+          }
+        }
+      }
+    }
+
+    /* Filled */
+    &.filled {
+      --_bg-color: var(--surface-default);
+      --_radius: var(--border-radius);
+      --_selected-bg: var(--surface-filled);
+
+      & > [role="tablist"] {
+        background-color: var(--_bg-color);
+        border: var(--border-width) solid var(--border-color);
+        border-radius: var(--_radius);
+        overflow: hidden;
+        padding: 0.792ex;
+        width: fit-content;
+
+        button {
+          background-color: var(--_bg-color);
+          border-radius: var(--_radius);
+          line-height: var(--font-lineheight-4);
+          padding-inline: var(--size-3);
+
+          &:hover {
+            background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
+          }
+
+          &[aria-selected="true"] {
+            background-color: var(--_selected-bg);
+
+            &:hover {
+              background-color: oklch(
+                from var(--_selected-bg) calc(l * 1.25) c h
+              );
+            }
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition: background-color 0.2s var(--ease-out-3),
+              border-color 0.2s var(--ease-out-3), color 0.2s var(--ease-out-3),
+              outline-offset 0.05s var(--ease-1);
+          }
+        }
+      }
+    }
+  }
+}

package/src/themes/theme-one/components/table.css

@@ -0,0 +1,100 @@
+@layer components.root {
+  :where(table) {
+    border-collapse: collapse;
+    display: block;
+    margin: var(--size-3) 0;
+    max-inline-size: 100%;
+    position: relative;
+
+    /* Rows */
+    tr {
+      background-color: var(--surface-default);
+      border-top: 1px solid var(--border-color);
+
+      &:hover {
+        background-color: oklch(from var(--surface-filled) l c h / 75%);
+      }
+    }
+
+    /* Cells */
+    th,
+    td {
+      border: 1px solid var(--border-color);
+      padding: var(--size-1) var(--size-2);
+    }
+
+    th {
+      background-color: var(--surface-filled);
+      color: var(--text-color-1);
+      font-size: var(--font-size-sm, 0.75rem);
+      font-weight: 600;
+      text-align: start;
+    }
+
+    td {
+      font-size: var(--font-size-sm, 0.75rem);
+    }
+
+    /* Caption */
+    caption {
+      caption-side: bottom;
+      color: var(--text-color-2);
+      font-size: var(--font-size-sm, 0.75rem);
+      padding: var(--size-2) 0;
+      text-align: start;
+    }
+
+    /* Footer */
+    tfoot {
+      border-top: 2px solid var(--border-color);
+
+      tr {
+        background-color: var(--surface-filled);
+      }
+
+      td {
+        color: var(--text-color-1);
+        font-weight: 600;
+      }
+    }
+
+    /* Column group */
+    colgroup col {
+      border: none;
+    }
+
+    @container (width < 60ch) {
+      th,
+      td {
+        padding: var(--size-1) 0.875rem;
+      }
+    }
+
+    /* Sticky header */
+    &.sticky-header thead {
+      background-color: var(--surface-filled);
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* Dense */
+    &.dense {
+      th,
+      td {
+        padding: var(--size-1) var(--size-2);
+      }
+
+      caption {
+        padding: var(--size-1) 0;
+      }
+
+      @container (width < 60ch) {
+        th,
+        td {
+          padding: var(--size-1) var(--size-2);
+        }
+      }
+    }
+  }
+}

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

@@ -1,57 +1,57 @@
-@layer components.extended {
-  :where(
-      .field:has(
-          :where(
-              input[type="date"],
-              input[type="datetime-local"],
-              input[type="email"],
-              input[type="month"],
-              input[type="number"],
-              input[type="password"],
-              input[type="search"],
-              input[type="tel"],
-              input[type="text"],
-              input[type="time"],
-              input[type="url"],
-              input[type="week"]
-            )
-        )
-    ) {
-    /* Sizes */
-    &.small {
-      input {
-        padding-inline: var(--size-2);
-      }
-    }
-  }
-
-  /* Autosuggest */
-  :where(.field:has(input[list])) {
-    /* Hide native arrow */
-    input::-webkit-calendar-picker-indicator {
-      opacity: 0;
-      position: absolute;
-      cursor: pointer;
-      pointer-events: none;
-    }
-  }
-  :where(
-      .field:has(input[list]:placeholder-shown),
-      .field:has(input[list]):where(:focus-within, :hover)
-    ) {
-    /* Arrow */
-    &::after {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      content: "";
-      display: inline-block;
-      flex-shrink: 0;
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-  }
-}
+@layer components.extended {
+  :where(
+      .field:has(
+          :where(
+              input[type="date"],
+              input[type="datetime-local"],
+              input[type="email"],
+              input[type="month"],
+              input[type="number"],
+              input[type="password"],
+              input[type="search"],
+              input[type="tel"],
+              input[type="text"],
+              input[type="time"],
+              input[type="url"],
+              input[type="week"]
+            )
+        )
+    ) {
+    /* Sizes */
+    &.small {
+      input {
+        padding-inline: var(--size-2);
+      }
+    }
+  }
+
+  /* Autosuggest */
+  :where(.field:has(input[list])) {
+    /* Hide native arrow */
+    input::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      pointer-events: none;
+    }
+  }
+  :where(
+      .field:has(input[list]:placeholder-shown),
+      .field:has(input[list]):where(:focus-within, :hover)
+    ) {
+    /* Arrow */
+    &::after {
+      block-size: 0;
+      border-block-start: 5px solid;
+      border-inline: 5px solid transparent;
+      content: "";
+      display: inline-block;
+      flex-shrink: 0;
+      inline-size: 0;
+      inset: 50% var(--size-3) auto auto;
+      pointer-events: none;
+      position: absolute;
+      translate: 0 -50%;
+    }
+  }
+}

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

@@ -1,25 +1,25 @@
-@layer components.extended {
-  :where(.field:has(textarea)) {
-    textarea {
-      block-size: auto;
-      field-sizing: content;
-      min-block-size: 5rem;
-      resize: vertical;
-    }
-
-    /* Size */
-    &.small {
-      textarea {
-        min-block-size: var(--_height);
-      }
-    }
-
-    /* Auto-fit */
-    &.auto-fit {
-      textarea {
-        min-block-size: var(--_height);
-        resize: both;
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(.field:has(textarea)) {
+    textarea {
+      block-size: auto;
+      field-sizing: content;
+      min-block-size: 5rem;
+      resize: vertical;
+    }
+
+    /* Size */
+    &.small {
+      textarea {
+        min-block-size: var(--_height);
+      }
+    }
+
+    /* Auto-fit */
+    &.auto-fit {
+      textarea {
+        min-block-size: var(--_height);
+        resize: both;
+      }
+    }
+  }
+}