@leftium/nimble.css 0.1.0 → 0.3.0

package/dist/nimble.css

@@ -1,6 +1,7 @@
+@charset "UTF-8";
 @layer nimble.reset, nimble.base, nimble.utilities;
 @layer nimble.reset {
-  :where(*),
+  :where(*:not(progress)),
   :where(*::before),
   :where(*::after) {
     box-sizing: border-box;
@@ -100,6 +101,7 @@
   }
   :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
     touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
   }
   :where([aria-busy=true]) {
     cursor: progress;
@@ -121,20 +123,20 @@
 @layer nimble.base {
   :root {
     color-scheme: light dark;
-    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
-    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
-    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
-    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text-1: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-text-2: light-dark(oklch(0.58 0.005 250), oklch(0.65 0.005 250));
-    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
+    --nc-surface-hue: 250;
+    --nc-surface-1: light-dark(oklch(0.985 0.002 var(--nc-surface-hue)), oklch(0.17 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-2: light-dark(oklch(0.955 0.002 var(--nc-surface-hue)), oklch(0.2 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-3: light-dark(oklch(0.925 0.002 var(--nc-surface-hue)), oklch(0.23 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-4: light-dark(oklch(0.885 0.002 var(--nc-surface-hue)), oklch(0.27 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-text: light-dark(oklch(0.28 0.005 var(--nc-surface-hue)), oklch(0.86 0.005 var(--nc-surface-hue)));
+    --nc-border: light-dark(oklch(0.83 0.005 var(--nc-surface-hue)), oklch(0.28 0.005 calc(var(--nc-surface-hue) + 10)));
     --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
-    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
-    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
+    --nc-primary-hover: light-dark(oklch(from var(--nc-primary) calc(l - 0.1) c h), oklch(from var(--nc-primary) calc(l + 0.1) c h));
+    --nc-primary-focus: oklch(from var(--nc-primary) l c h / 0.4);
     --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
-    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
-    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
+    --nc-secondary-hover: light-dark(oklch(from var(--nc-secondary) calc(l - 0.1) c h), oklch(from var(--nc-secondary) calc(l + 0.1) c h));
+    --nc-secondary-focus: oklch(from var(--nc-secondary) l c h / 0.3);
     --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
     --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
@@ -156,7 +158,7 @@
     font-family: var(--nc-font-sans);
     font-size: 100%;
     line-height: 1.5;
-    color: var(--nc-text-1);
+    color: var(--nc-text);
     background-color: var(--nc-surface-1);
   }
   body {
@@ -166,10 +168,15 @@
   }
   body > * {
     grid-column: 2;
+    min-width: 0;
+  }
+  body > [style*="display: contents"] > * {
+    grid-column: 2;
+    min-width: 0;
   }
   ::selection {
     background-color: var(--nc-primary-focus);
-    color: var(--nc-text-1);
+    color: var(--nc-text);
   }
 }
 @layer nimble.base {
@@ -184,7 +191,7 @@
   h2 {
     font-size: 1.75rem;
     line-height: 1.15;
-    margin-top: 0;
+    margin-top: 2rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -192,7 +199,7 @@
   h3 {
     font-size: 1.5rem;
     line-height: 1.2;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -200,7 +207,7 @@
   h4 {
     font-size: 1.25rem;
     line-height: 1.3;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -208,7 +215,7 @@
   h5 {
     font-size: 1.125rem;
     line-height: 1.4;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -216,7 +223,7 @@
   h6 {
     font-size: 1rem;
     line-height: 1.5;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -236,9 +243,6 @@
     margin-top: 0;
     margin-bottom: var(--nc-spacing);
   }
-  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: calc(var(--nc-spacing) * 2);
-  }
   ul, ol {
     padding-inline-start: 1.5em;
   }
@@ -266,7 +270,7 @@
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(--nc-text-2);
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
   }
   hr {
     border: none;
@@ -293,8 +297,8 @@
     transition: color 0.2s, text-decoration-color 0.2s;
   }
   :where(a:not([role=button])):visited {
-    color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.5 0.2 310));
-    text-decoration-color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.5 0.2 310) 30%);
+    color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310));
+    text-decoration-color: color-mix(in oklch, var(--nc-primary) 40%, oklch(0.38 0.15 310) 30%);
   }
   :where(a:not([role=button])):hover {
     color: var(--nc-primary-hover);
@@ -328,6 +332,25 @@
     box-shadow: 0 0 0 2px var(--nc-primary-focus);
     outline: none;
   }
+  :where([type=reset]) {
+    background-color: var(--nc-secondary);
+    border-color: var(--nc-secondary);
+    color: var(--nc-secondary-contrast);
+  }
+  :where([type=reset]):hover {
+    background-color: var(--nc-secondary-hover);
+    border-color: var(--nc-secondary-hover);
+  }
+  :where([type=reset]):focus-visible {
+    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
+  }
+  :where(button, [type=submit], [type=reset], [type=button], [role=button]).inline {
+    --_btn-padding-v: 0.05em;
+    --_btn-padding-h: 0.4em;
+    margin: 0.1em 0.15em;
+    font-size: 0.875em;
+    vertical-align: baseline;
+  }
   :where(button, [type=submit], [type=reset], [type=button], [role=button]):disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -335,13 +358,41 @@
   }
   :where([role=group]) {
     display: inline-flex;
+    margin-bottom: var(--nc-spacing);
   }
   [role=group] > * {
     border-radius: 0;
     margin: 0;
+    position: relative;
   }
   [role=group] > * + * {
-    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
+    --_divider: "";
+  }
+  [role=group] > * + *::before {
+    content: var(--_divider);
+    position: absolute;
+    inset-inline-start: 0;
+    top: 20%;
+    bottom: 20%;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.3);
+    pointer-events: none;
+  }
+  [role=group] > :not(.secondary):not(.outline) + .secondary,
+  [role=group] > .secondary + :not(.secondary):not(.outline) {
+    --_divider: none;
+  }
+  [role=group] > :not(.secondary):not(.outline) + .outline,
+  [role=group] > .outline + :not(.secondary):not(.outline) {
+    --_divider: none;
+  }
+  [role=group] > .secondary + .outline,
+  [role=group] > .outline + .secondary {
+    --_divider: none;
+  }
+  [role=group] > input + *,
+  [role=group] > select + * {
+    --_divider: none;
   }
   [role=group] > :first-child {
     border-start-start-radius: var(--nc-radius);
@@ -351,6 +402,16 @@
     border-start-end-radius: var(--nc-radius);
     border-end-end-radius: var(--nc-radius);
   }
+  [role=group]:has(.outline):not(:has(> :not(.outline))) {
+    border: 1px solid var(--nc-primary);
+    border-radius: var(--nc-radius);
+  }
+  [role=group]:has(.outline):not(:has(> :not(.outline))) > .outline {
+    border: none;
+  }
+  [role=group] > .outline + .outline::before {
+    background: var(--nc-primary);
+  }
   [role=search] [role=group] > :first-child {
     border-start-start-radius: 5rem;
     border-end-start-radius: 5rem;
@@ -363,55 +424,79 @@
   }
 }
 @layer nimble.utilities {
-  .secondary {
+  .secondary:not(a:not([role=button])) {
     background-color: var(--nc-secondary);
     border-color: var(--nc-secondary);
     color: var(--nc-secondary-contrast);
   }
-  .secondary:hover {
+  .secondary:not(a:not([role=button])):hover {
     background-color: var(--nc-secondary-hover);
     border-color: var(--nc-secondary-hover);
   }
-  .secondary:focus-visible {
+  .secondary:not(a:not([role=button])):focus-visible {
     box-shadow: 0 0 0 2px var(--nc-secondary-focus);
   }
-  .outline {
+  a:not([role=button]).secondary {
+    color: var(--nc-secondary);
+    text-decoration-color: color-mix(in oklch, var(--nc-secondary), transparent 50%);
+  }
+  a:not([role=button]).secondary:hover {
+    color: var(--nc-secondary-hover);
+    text-decoration-color: var(--nc-secondary-hover);
+  }
+  .outline:not(a:not([role=button])) {
     background-color: transparent;
     color: var(--nc-primary);
   }
-  .outline:hover {
+  .outline:not(a:not([role=button])):hover {
     background-color: var(--nc-primary-focus);
     color: var(--nc-primary-hover);
     border-color: var(--nc-primary-hover);
   }
 }
 @layer nimble.base {
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]),
+  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset]),
   select, textarea) {
     --_input-bg: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
     padding: 0.5em 0.75em;
+    min-height: calc(2.5em + 2px);
     background-color: var(--_input-bg);
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
-    color: var(--nc-text-1);
+    color: var(--nc-text);
     font: inherit;
+    font-size: 1rem;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
-  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset]),
+  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
   select, textarea) {
     width: 100%;
+    margin-bottom: var(--nc-spacing);
   }
   :where(input, select, textarea):focus-visible {
     border-color: var(--nc-primary);
     box-shadow: 0 0 0 2px var(--nc-primary-focus);
     outline: none;
   }
+  :where(input, select, textarea) + :where(small) {
+    display: block;
+    margin-top: calc(var(--nc-spacing) * -0.75);
+    margin-bottom: var(--nc-spacing);
+    font-size: 0.875em;
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
+  }
   :where(input, select, textarea)[aria-invalid=false] {
     border-color: var(--nc-valid);
   }
   :where(input, select, textarea)[aria-invalid=true] {
     border-color: var(--nc-invalid);
   }
+  :where(input, select, textarea)[aria-invalid=false] + :where(small) {
+    color: var(--nc-valid);
+  }
+  :where(input, select, textarea)[aria-invalid=true] + :where(small) {
+    color: var(--nc-invalid);
+  }
   :where(label) {
     display: block;
     margin-bottom: 0.25em;
@@ -419,10 +504,15 @@
   :where(label:has(+ input, + select, + textarea)) {
     font-weight: 600;
   }
+  :where(label:has(+ [type=file], + [type=range])) {
+    margin-bottom: 0.5em;
+  }
   :where(fieldset) {
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
     padding: var(--nc-spacing);
+    min-width: 0;
+    max-width: 100%;
   }
   :where(legend) {
     font-weight: 600;
@@ -430,14 +520,82 @@
   }
   :where([type=checkbox], [type=radio]) {
     accent-color: var(--nc-primary);
+    width: 1.125em;
+    height: 1.125em;
+    margin: 0;
+  }
+  :where(label:has([type=checkbox], [type=radio])) {
+    display: flex;
+    align-items: center;
+    gap: 0.35em;
+    margin-bottom: 0.5em;
+  }
+  :where(label:has([type=checkbox], [type=radio]):last-child) {
+    margin-bottom: 0;
+  }
+  :where([type=search]) {
+    border-radius: 5rem;
+    padding-inline: 1.25em;
   }
   :where([type=range]) {
     accent-color: var(--nc-primary);
     width: 100%;
+    margin-bottom: var(--nc-spacing);
+  }
+  :where(input[list]) {
+    width: auto;
+  }
+  :where([type=file]) {
+    color: var(--nc-text);
+    font: inherit;
+    cursor: pointer;
+    max-width: 100%;
+    margin-bottom: var(--nc-spacing);
+  }
+  :where([type=file])::file-selector-button {
+    padding: 0.5em 1em;
+    margin-right: 0.75em;
+    margin-inline-end: 0.75em;
+    background-color: var(--nc-primary);
+    color: var(--nc-primary-contrast);
+    border: 1px solid var(--nc-primary);
+    border-radius: var(--nc-radius);
+    font: inherit;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+  }
+  :where([type=file])::file-selector-button:hover {
+    background-color: var(--nc-primary-hover);
+    border-color: var(--nc-primary-hover);
+  }
+  :where([type=date], [type=month], [type=week], [type=time], [type=datetime-local]) {
+    min-width: 10em;
+    margin-bottom: var(--nc-spacing);
   }
   :where([type=color]) {
+    --_color-size: calc(1em * 1.5 + 1em + 2px);
+    margin-bottom: var(--nc-spacing);
+    --_color-pad: 0.25em;
+    height: var(--_color-size);
+    width: calc((var(--_color-size) - 2 * var(--_color-pad)) * 1.618 + 2 * var(--_color-pad));
+    padding: var(--_color-pad);
+    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+    border: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius);
     cursor: pointer;
   }
+  :where([type=color])::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  :where([type=color])::-webkit-color-swatch {
+    border: none;
+    border-radius: calc(var(--nc-radius) * 0.5);
+  }
+  :where(label:has([type=checkbox][role=switch])) {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
   :where([type=checkbox][role=switch]) {
     appearance: none;
     width: 2.5em;
@@ -446,6 +604,8 @@
     background-color: var(--nc-border);
     position: relative;
     cursor: pointer;
+    flex-shrink: 0;
+    margin: 0;
     transition: background-color 0.2s;
   }
   :where([type=checkbox][role=switch])::before {
@@ -466,6 +626,15 @@
     transform: translateX(1.25em);
   }
 }
+[type=date],
+[type=month],
+[type=week],
+[type=time],
+[type=datetime-local] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 @layer nimble.base {
   :where(table) {
     width: 100%;
@@ -520,22 +689,95 @@
   }
   :where(figcaption) {
     font-size: 0.9em;
-    color: var(--nc-text-2);
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
     margin-top: 0.5em;
   }
 }
+@layer nimble.base {
+  :where(article) {
+    background-color: var(--nc-surface-1);
+    border: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius);
+    padding: var(--nc-spacing);
+    margin-bottom: var(--nc-spacing);
+  }
+  :where(article > header),
+  :where(article > footer) {
+    background-color: color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);
+    padding: var(--nc-spacing);
+  }
+  :where(article > header) {
+    margin: calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1) var(--nc-spacing);
+    border-bottom: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius) var(--nc-radius) 0 0;
+  }
+  :where(article > footer) {
+    margin: var(--nc-spacing) calc(var(--nc-spacing) * -1) calc(var(--nc-spacing) * -1);
+    border-top: 1px solid var(--nc-border);
+    border-radius: 0 0 var(--nc-radius) var(--nc-radius);
+  }
+  :where(article) > :last-child:not(footer) {
+    margin-bottom: 0;
+  }
+  :where(article > header, article > footer) > :last-child {
+    margin-bottom: 0;
+  }
+  :where(article > header, article > footer) > h1,
+  :where(article > header, article > footer) > h2,
+  :where(article > header, article > footer) > h3,
+  :where(article > header, article > footer) > h4,
+  :where(article > header, article > footer) > h5,
+  :where(article > header, article > footer) > h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
 @layer nimble.base {
   :where(details) {
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
-    padding: 0.75em 1em;
+    padding: 0 1em;
+  }
+  :where(details) {
+    margin-bottom: 0.5em;
   }
   :where(summary) {
     cursor: pointer;
     font-weight: 600;
+    margin: 0 -1em;
+    padding: 0.75em 1em;
+    list-style-type: "▶ ";
   }
   :where(details[open] > summary) {
-    margin-bottom: 0.5em;
+    list-style-type: "▼ ";
+  }
+  :where(details[open]) {
+    padding-bottom: 0.75em;
+  }
+  details :last-child {
+    margin-bottom: 0;
+  }
+}
+@supports selector(details::details-content) {
+  details::details-content {
+    transition: opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
+    opacity: 0;
+  }
+  details[open]::details-content {
+    opacity: 1;
+  }
+  @supports (interpolate-size: allow-keywords) {
+    details {
+      interpolate-size: allow-keywords;
+    }
+    details::details-content {
+      transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
+      height: 0;
+      overflow: clip;
+    }
+    details[open]::details-content {
+      height: auto;
+    }
   }
 }
 @layer nimble.base {
@@ -546,8 +788,15 @@
     max-width: min(90vw, 40rem);
     padding: var(--nc-spacing);
   }
-  :where(dialog::backdrop) {
+  dialog::backdrop {
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    animation: nc-backdrop-in 0.2s ease;
+  }
+  @keyframes nc-backdrop-in {
+    from {
+      opacity: 0;
+    }
   }
 }
 @media print {
@@ -577,6 +826,165 @@
     margin: 2cm;
   }
 }
+@layer nimble.base {
+  :where(progress) {
+    -webkit-appearance: none;
+    appearance: none;
+    position: relative;
+    width: 100%;
+    height: 0.5rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nc-radius);
+    background-color: var(--nc-surface-3);
+    color: var(--nc-primary);
+  }
+  :where(progress)::-webkit-progress-bar {
+    border-radius: var(--nc-radius);
+    background-color: var(--nc-surface-3);
+  }
+  :where(progress)::-webkit-progress-value {
+    background-color: var(--nc-primary);
+    border-radius: var(--nc-radius);
+    transition: inline-size 0.3s ease;
+  }
+  :where(progress)::-moz-progress-bar {
+    background-color: var(--nc-primary);
+    border-radius: var(--nc-radius);
+  }
+  :where(progress):not([value]) {
+    --nc-progress-track:
+      linear-gradient(to right,
+        var(--nc-surface-3) 0%,
+        var(--nc-primary) 25%,
+        var(--nc-primary) 25%,
+        var(--nc-surface-3) 50%,
+        var(--nc-surface-3) 50%,
+        var(--nc-primary) 75%,
+        var(--nc-primary) 75%,
+        var(--nc-surface-3) 100%);
+    --nc-progress-track-size: 200% 100%;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    @supports selector(progress::after) {
+      :where(progress):not([value])::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--nc-progress-track);
+        background-size: var(--nc-progress-track-size);
+        animation: nc-progress-indeterminate 12s linear infinite;
+      }
+    }
+    :where(progress):not([value])::-webkit-progress-bar {
+      background: var(--nc-progress-track);
+      background-size: var(--nc-progress-track-size);
+      animation: nc-progress-indeterminate 12s linear infinite;
+    }
+    :where(progress):not([value])::-moz-progress-bar {
+      background: var(--nc-progress-track);
+      background-size: var(--nc-progress-track-size);
+      animation: nc-progress-indeterminate 12s linear infinite;
+    }
+  }
+  @keyframes nc-progress-indeterminate {
+    from {
+      background-position: 0% 0%;
+    }
+    to {
+      background-position: -200% 0%;
+    }
+  }
+}
+@layer nimble.base {
+  :where(meter) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nc-radius);
+    background-color: var(--nc-surface-3);
+  }
+  :where(meter)::-webkit-meter-bar {
+    border-radius: var(--nc-radius);
+    background-color: var(--nc-surface-3);
+    border: 0;
+    height: 0.5rem;
+  }
+  :where(meter)::-webkit-meter-optimum-value {
+    background-color: var(--nc-valid);
+    border-radius: var(--nc-radius);
+  }
+  :where(meter)::-webkit-meter-suboptimum-value {
+    background-color: var(--nc-primary);
+    border-radius: var(--nc-radius);
+  }
+  :where(meter)::-webkit-meter-even-less-good-value {
+    background-color: var(--nc-invalid);
+    border-radius: var(--nc-radius);
+  }
+  :where(meter)::-moz-meter-bar {
+    background-color: var(--nc-primary);
+    border-radius: var(--nc-radius);
+  }
+  :where(meter):-moz-meter-optimum::-moz-meter-bar {
+    background-color: var(--nc-valid);
+  }
+  :where(meter):-moz-meter-sub-optimum::-moz-meter-bar {
+    background-color: var(--nc-primary);
+  }
+  :where(meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background-color: var(--nc-invalid);
+  }
+}
+@layer nimble.base {
+  @supports (appearance: base-select) {
+    :where(select),
+    :where(select)::picker(select) {
+      appearance: base-select;
+    }
+    :where(select)::picker-icon {
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l6 6 6-6'/%3E%3C/svg%3E");
+      transition: rotate 0.4s;
+    }
+    :where(select):open::picker-icon {
+      rotate: 180deg;
+    }
+    :where(select)::picker(select) {
+      position-area: block-end;
+      position-try-order: normal;
+      position-try-fallbacks: flip-block;
+      border: 1px solid var(--nc-border);
+      border-radius: var(--nc-radius);
+      background-color: var(--nc-surface-1);
+      padding: 0.25em;
+      opacity: 0;
+      transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+    }
+    :where(select):open::picker(select) {
+      opacity: 1;
+    }
+    @starting-style {
+      :where(select):open::picker(select) {
+        opacity: 0;
+      }
+    }
+    :where(select) option {
+      padding: 0.5em 0.75em;
+      border-radius: var(--nc-radius);
+      transition: background-color 0.15s;
+    }
+    :where(select) option:hover {
+      background-color: var(--nc-surface-2);
+    }
+    :where(select) option:checked {
+      font-weight: 600;
+    }
+  }
+}
 @layer nimble.utilities {
   .container {
     max-width: var(--nc-content-width);