@leftium/nimble.css 0.1.0 → 0.2.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;
@@ -125,8 +127,7 @@
     --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-text: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
     --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
     --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));
@@ -156,7 +157,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 +167,11 @@
   }
   body > * {
     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 +186,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 +194,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 +202,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 +210,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 +218,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 +238,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 +265,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 +292,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 +327,13 @@
     box-shadow: 0 0 0 2px var(--nc-primary-focus);
     outline: none;
   }
+  :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 +341,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 +385,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;
@@ -386,32 +430,48 @@
   }
 }
 @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;
@@ -423,6 +483,8 @@
     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 +492,75 @@
   }
   :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: var(--nc-spacing);
+  }
+  :where(label:has([type=radio])) {
+    margin-bottom: 0.35em;
   }
   :where([type=range]) {
     accent-color: var(--nc-primary);
     width: 100%;
   }
+  :where(input[list]) {
+    width: auto;
+  }
+  :where([type=file]) {
+    color: var(--nc-text);
+    font: inherit;
+    cursor: pointer;
+    max-width: 100%;
+  }
+  :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);
+    --_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: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
   :where([type=checkbox][role=switch]) {
     appearance: none;
     width: 2.5em;
@@ -446,6 +569,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 +591,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,7 +654,7 @@
   }
   :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;
   }
 }
@@ -528,14 +662,45 @@
   :where(details) {
     border: 1px solid var(--nc-border);
     border-radius: var(--nc-radius);
-    padding: 0.75em 1em;
+    padding: 0 1em;
   }
   :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 +711,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 +749,162 @@
     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) {
+      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);

package/dist/nimble.min.css

@@ -1 +1 @@
-@layer nimble.reset{:where(*),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text-1:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-text-2:light-dark(oklch(58% .005 250),oklch(65% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text-1);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text-1)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{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}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:var(--nc-text-2);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}:where(a:not([role=button])){color:var(--nc-primary);text-underline-offset:.15em;text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);transition:color .2s,text-decoration-color .2s}:where(a:not([role=button])):visited{color:color-mix(in oklch, var(--nc-primary) 40%, oklch(50% .2 310));-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(50% .2 310) 30%);text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(50% .2 310) 30%)}:where(a:not([role=button])):hover{color:var(--nc-primary-hover);-webkit-text-decoration-color:var(--nc-primary-hover);text-decoration-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]){--_btn-padding-v:.5em;--_btn-padding-h:1em;padding:var(--_btn-padding-v) var(--_btn-padding-h);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;text-align:center;margin:0 .25em .25em 0;font-size:1rem;line-height:1.5;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-block}:where(button,[type=submit],[type=reset],[type=button],[role=button]):hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]):focus-visible{box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where(button,[type=submit],[type=reset],[type=button],[role=button]):disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:where([role=group]){display:inline-flex}[role=group]>*{border-radius:0;margin:0}[role=group]>*+*{box-shadow:-1px 0 #ffffff4d}[role=group]>:first-child{border-start-start-radius:var(--nc-radius);border-end-start-radius:var(--nc-radius)}[role=group]>:last-child{border-start-end-radius:var(--nc-radius);border-end-end-radius:var(--nc-radius)}[role=search] [role=group]>:first-child{border-start-start-radius:5rem;border-end-start-radius:5rem;padding-inline-start:1.25em}[role=search] [role=group]>:last-child{border-start-end-radius:5rem;border-end-end-radius:5rem;padding-inline-end:1.25em}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea){--_input-bg:color-mix(in oklch, var(--nc-surface-1), var(--nc-surface-2) 20%);background-color:var(--_input-bg);border:1px solid var(--nc-border);border-radius:var(--nc-radius);color:var(--nc-text-1);font:inherit;padding:.5em .75em;transition:border-color .2s,box-shadow .2s}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset]),select,textarea){width:100%}: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)[aria-invalid=false]{border-color:var(--nc-valid)}:where(input,select,textarea)[aria-invalid=true]{border-color:var(--nc-invalid)}:where(label){margin-bottom:.25em;display:block}:where(label:has(+input,+select,+textarea)){font-weight:600}:where(fieldset){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:var(--nc-spacing)}:where(legend){padding-inline:.25em;font-weight:600}:where([type=checkbox],[type=radio]){accent-color:var(--nc-primary)}:where([type=range]){accent-color:var(--nc-primary);width:100%}:where([type=color]){cursor:pointer}:where([type=checkbox][role=switch]){appearance:none;background-color:var(--nc-border);cursor:pointer;border-radius:1em;width:2.5em;height:1.25em;transition:background-color .2s;position:relative}:where([type=checkbox][role=switch]):before{content:"";background-color:#fff;border-radius:50%;width:calc(1.25em - 4px);height:calc(1.25em - 4px);transition:transform .2s;position:absolute;top:2px;left:2px}:where([type=checkbox][role=switch]):checked{background-color:var(--nc-primary)}:where([type=checkbox][role=switch]):checked:before{transform:translate(1.25em)}:where(table){border-collapse:collapse;width:100%}:where(th,td){border-bottom:1px solid color-mix(in oklch, var(--nc-border), transparent 40%);text-align:start;padding:.5em .75em}:where(thead th,thead td){background-color:var(--nc-surface-2);text-wrap:balance;border-bottom-width:2px;font-weight:600}:where(figure:has(table)){overflow-x:auto}:where(code,kbd,samp){font-family:var(--nc-font-mono);background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:.15em .35em;font-size:.875em}:where(pre){background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:var(--nc-spacing);overflow-x:auto}:where(pre code){font-size:inherit;background:0 0;padding:0}:where(kbd){border:1px solid var(--nc-border);border-bottom-width:2px}:where(img,video,canvas,svg){max-width:100%;height:auto}:where(figure){margin:0}:where(figcaption){color:var(--nc-text-2);margin-top:.5em;font-size:.9em}:where(details){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:.75em 1em}:where(summary){cursor:pointer;font-weight:600}:where(details[open]>summary){margin-bottom:.5em}:where(dialog){background-color:var(--nc-surface-4);border:1px solid var(--nc-border);border-radius:var(--nc-radius);max-width:min(90vw,40rem);padding:var(--nc-spacing)}:where(){background:#00000080}}@layer nimble.utilities{.secondary{background-color:var(--nc-secondary);border-color:var(--nc-secondary);color:var(--nc-secondary-contrast)}.secondary:hover{background-color:var(--nc-secondary-hover);border-color:var(--nc-secondary-hover)}.secondary:focus-visible{box-shadow:0 0 0 2px var(--nc-secondary-focus)}.outline{color:var(--nc-primary);background-color:#0000}.outline:hover{background-color:var(--nc-primary-focus);color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}.container{max-width:var(--nc-content-width);padding-inline:var(--nc-spacing);margin-inline:auto}.fluid{max-width:none;padding-inline:var(--nc-spacing);display:block}.full-bleed{grid-column:1/-1}.wide{width:100%;max-width:1200px;padding-inline:var(--nc-spacing);grid-column:1/-1;margin-inline:auto}.striped :where(tbody tr:nth-child(2n)){background-color:var(--nc-surface-2)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.overflow-auto{overflow:auto}}@media print{body{color:#000;background:#fff}a[href]:after{content:" (" attr(href) ")";color:#555;font-size:.85em}a[href^=\#]:after,a[href^=javascript\:]:after{content:none}pre,blockquote{page-break-inside:avoid}h2,h3,h4{page-break-after:avoid}img{max-width:100%!important}@page{margin:2cm}}
+@layer nimble.reset{:where(:not(progress)),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}:where(a:not([role=button])){color:var(--nc-primary);text-underline-offset:.15em;text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);text-decoration-color:color-mix(in oklch, var(--nc-primary), transparent 50%);transition:color .2s,text-decoration-color .2s}:where(a:not([role=button])):visited{color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310));-webkit-text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%);text-decoration-color:color-mix(in oklch, var(--nc-primary) 40%, oklch(38% .15 310) 30%)}:where(a:not([role=button])):hover{color:var(--nc-primary-hover);-webkit-text-decoration-color:var(--nc-primary-hover);text-decoration-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]){--_btn-padding-v:.5em;--_btn-padding-h:1em;padding:var(--_btn-padding-v) var(--_btn-padding-h);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;text-align:center;margin:0 .25em .25em 0;font-size:1rem;line-height:1.5;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-block}:where(button,[type=submit],[type=reset],[type=button],[role=button]):hover{background-color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button]):focus-visible{box-shadow:0 0 0 2px var(--nc-primary-focus);outline:none}:where(button,[type=submit],[type=reset],[type=button],[role=button]).inline{--_btn-padding-v:.05em;--_btn-padding-h:.4em;vertical-align:baseline;margin:.1em .15em;font-size:.875em}:where(button,[type=submit],[type=reset],[type=button],[role=button]):disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:where([role=group]){margin-bottom:var(--nc-spacing);display:inline-flex}[role=group]>*{border-radius:0;margin:0;position:relative}[role=group]>*+*{--_divider:""}[role=group]>*+:before{content:var(--_divider);inset-inline-start:0;pointer-events:none;background:#ffffff4d;width:1px;position:absolute;top:20%;bottom:20%}[role=group]>:not(.secondary):not(.outline)+.secondary,[role=group]>.secondary+:not(.secondary):not(.outline),[role=group]>:not(.secondary):not(.outline)+.outline,[role=group]>.outline+:not(.secondary):not(.outline),[role=group]>.secondary+.outline,[role=group]>.outline+.secondary,[role=group]>input+*,[role=group]>select+*{--_divider:none}[role=group]>:first-child{border-start-start-radius:var(--nc-radius);border-end-start-radius:var(--nc-radius)}[role=group]>:last-child{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;padding-inline-start:1.25em}[role=search] [role=group]>:last-child{border-start-end-radius:5rem;border-end-end-radius:5rem;padding-inline-end:1.25em}: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%);background-color:var(--_input-bg);border:1px solid var(--nc-border);border-radius:var(--nc-radius);min-height:calc(2.5em + 2px);color:var(--nc-text);font:inherit;padding:.5em .75em;font-size:1rem;transition:border-color .2s,box-shadow .2s}: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){margin-top:calc(var(--nc-spacing) * -.75);margin-bottom:var(--nc-spacing);color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.875em;display:block}: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){margin-bottom:.25em;display:block}:where(label:has(+input,+select,+textarea)){font-weight:600}: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){padding-inline:.25em;font-weight:600}: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])){margin-bottom:var(--nc-spacing);align-items:center;gap:.35em;display:flex}:where(label:has([type=radio])){margin-bottom:.35em}:where([type=range]){accent-color:var(--nc-primary);width:100%}:where(input[list]){width:auto}:where([type=file]){color:var(--nc-text);font:inherit;cursor:pointer;max-width:100%}:where([type=file])::file-selector-button{margin-right:.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;margin-inline-end:.75em;padding:.5em 1em;transition:background-color .2s,border-color .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);--_color-pad:.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-radius:calc(var(--nc-radius) * .5);border:none}:where(label:has([type=checkbox][role=switch])){align-items:center;gap:.5em;display:inline-flex}:where([type=checkbox][role=switch]){appearance:none;background-color:var(--nc-border);cursor:pointer;border-radius:1em;flex-shrink:0;width:2.5em;height:1.25em;margin:0;transition:background-color .2s;position:relative}:where([type=checkbox][role=switch]):before{content:"";background-color:#fff;border-radius:50%;width:calc(1.25em - 4px);height:calc(1.25em - 4px);transition:transform .2s;position:absolute;top:2px;left:2px}:where([type=checkbox][role=switch]):checked{background-color:var(--nc-primary)}:where([type=checkbox][role=switch]):checked:before{transform:translate(1.25em)}:where(table){border-collapse:collapse;width:100%}:where(th,td){border-bottom:1px solid color-mix(in oklch, var(--nc-border), transparent 40%);text-align:start;padding:.5em .75em}:where(thead th,thead td){background-color:var(--nc-surface-2);text-wrap:balance;border-bottom-width:2px;font-weight:600}:where(figure:has(table)){overflow-x:auto}:where(code,kbd,samp){font-family:var(--nc-font-mono);background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:.15em .35em;font-size:.875em}:where(pre){background-color:var(--nc-surface-2);border-radius:var(--nc-radius);padding:var(--nc-spacing);overflow-x:auto}:where(pre code){font-size:inherit;background:0 0;padding:0}:where(kbd){border:1px solid var(--nc-border);border-bottom-width:2px}:where(img,video,canvas,svg){max-width:100%;height:auto}:where(figure){margin:0}:where(figcaption){color:color-mix(in oklch, var(--nc-text), transparent 40%);margin-top:.5em;font-size:.9em}:where(details){border:1px solid var(--nc-border);border-radius:var(--nc-radius);padding:0 1em}:where(summary){cursor:pointer;margin:0 -1em;padding:.75em 1em;font-weight:600;list-style-type:"▶ "}:where(details[open]>summary){list-style-type:"▼ "}:where(details[open]){padding-bottom:.75em}details :last-child{margin-bottom:0}:where(dialog){background-color:var(--nc-surface-4);border:1px solid var(--nc-border);border-radius:var(--nc-radius);max-width:min(90vw,40rem);padding:var(--nc-spacing)}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;animation:.2s nc-backdrop-in}@keyframes nc-backdrop-in{0%{opacity:0}}:where(progress){appearance:none;border-radius:var(--nc-radius);background-color:var(--nc-surface-3);width:100%;height:.5rem;color:var(--nc-primary);border:0;position:relative;overflow:hidden}: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 .3s}: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:"";background:var(--nc-progress-track);background-size:var(--nc-progress-track-size);animation:12s linear infinite nc-progress-indeterminate;position:absolute;inset:0}}:where(progress):not([value])::-webkit-progress-bar{background:var(--nc-progress-track);background-size:var(--nc-progress-track-size);animation:12s linear infinite nc-progress-indeterminate}:where(progress):not([value])::-moz-progress-bar{background:var(--nc-progress-track);background-size:var(--nc-progress-track-size);animation:12s linear infinite nc-progress-indeterminate}}@keyframes nc-progress-indeterminate{0%{background-position:0 0}to{background-position:-200% 0}}:where(meter){appearance:none;border-radius:var(--nc-radius);background-color:var(--nc-surface-3);border:0;width:100%;height:.5rem;overflow:hidden}:where(meter)::-webkit-meter-bar{border-radius:var(--nc-radius);background-color:var(--nc-surface-3);border:0;height:.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)}@supports (appearance:base-select){:where(select){appearance:base-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 .4s}:where(select):open::picker-icon{rotate:180deg}:where(select)::picker(select){border:1px solid var(--nc-border);border-radius:var(--nc-radius);background-color:var(--nc-surface-1);opacity:0;transition:opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;padding:.25em}:where(select):open::picker(select){opacity:1}@starting-style{:where(select):open::picker(select){opacity:0}}:where(select) option{border-radius:var(--nc-radius);padding:.5em .75em;transition:background-color .15s}:where(select) option:hover{background-color:var(--nc-surface-2)}:where(select) option:checked{font-weight:600}}}@layer nimble.utilities{.secondary{background-color:var(--nc-secondary);border-color:var(--nc-secondary);color:var(--nc-secondary-contrast)}.secondary:hover{background-color:var(--nc-secondary-hover);border-color:var(--nc-secondary-hover)}.secondary:focus-visible{box-shadow:0 0 0 2px var(--nc-secondary-focus)}.outline{color:var(--nc-primary);background-color:#0000}.outline:hover{background-color:var(--nc-primary-focus);color:var(--nc-primary-hover);border-color:var(--nc-primary-hover)}.container{max-width:var(--nc-content-width);padding-inline:var(--nc-spacing);margin-inline:auto}.fluid{max-width:none;padding-inline:var(--nc-spacing);display:block}.full-bleed{grid-column:1/-1}.wide{width:100%;max-width:1200px;padding-inline:var(--nc-spacing);grid-column:1/-1;margin-inline:auto}.striped :where(tbody tr:nth-child(2n)){background-color:var(--nc-surface-2)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.overflow-auto{overflow:auto}}[type=date],[type=month],[type=week],[type=time],[type=datetime-local]{appearance:none}@supports selector(details::details-content){details::details-content{transition:opacity .3s ease, content-visibility .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 .3s ease, opacity .3s ease, content-visibility .3s ease allow-discrete;height:0;overflow:clip}details[open]::details-content{height:auto}}}@media print{body{color:#000;background:#fff}a[href]:after{content:" (" attr(href) ")";color:#555;font-size:.85em}a[href^=\#]:after,a[href^=javascript\:]:after{content:none}pre,blockquote{page-break-inside:avoid}h2,h3,h4{page-break-after:avoid}img{max-width:100%!important}@page{margin:2cm}}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@leftium/nimble.css",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A minimal class/classless CSS library combining Open Props design tokens with PicoCSS aesthetics",
   "type": "module",
   "main": "dist/nimble.min.css",
   "exports": {
     ".": "./dist/nimble.min.css",
+    "./core": "./dist/nimble-core.min.css",
     "./base": "./dist/nimble-base.min.css",
     "./reset": "./dist/nimble-reset.min.css",
     "./utilities": "./dist/nimble-utilities.min.css",
-    "./scss": "./src/nimble.scss"
+    "./progress": "./dist/nimble-progress.min.css",
+    "./meter": "./dist/nimble-meter.min.css",
+    "./select": "./dist/nimble-select.min.css",
+    "./scss": "./src/nimble.scss",
+    "./scss/core": "./src/nimble-core.scss",
+    "./scss/progress": "./src/_progress.scss",
+    "./scss/meter": "./src/_meter.scss",
+    "./scss/select": "./src/_select.scss"
   },
   "repository": {
     "type": "git",