@leftium/nimble.css 0.12.0 → 0.13.0

package/dist/nimble-core.css

@@ -166,7 +166,7 @@
   }
   body {
     display: grid;
-    grid-template-columns: 1fr var(--nc-content-shadow-gap) min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing) - 2 * var(--nc-content-shadow-gap))) var(--nc-content-shadow-gap) 1fr;
+    grid-template-columns: 1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;
     min-height: 100dvh;
     padding-block: var(--nc-spacing);
     position: relative;
@@ -178,26 +178,24 @@
 }
 @layer nimble.base {
   body > * {
-    grid-column: 3;
+    grid-column: 2;
     min-width: 0;
   }
   body > [style*="display: contents"] > * {
-    grid-column: 3;
+    grid-column: 2;
     min-width: 0;
   }
-  @media (min-width: 720px) {
-    body::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: min(calc(var(--nc-content-width) + 2 * var(--nc-content-shadow-gap)), calc(100% - 2 * var(--nc-spacing)));
-      box-shadow: var(--nc-content-shadow);
-      pointer-events: none;
-      z-index: -1;
-    }
+  body::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: clamp(0px, calc((100% - 2 * var(--nc-spacing) - var(--nc-content-width) - 4 * var(--nc-content-shadow-gap)) * 9999), calc(var(--nc-content-width) + 2 * var(--nc-content-shadow-gap)));
+    box-shadow: var(--nc-content-shadow);
+    pointer-events: none;
+    z-index: -1;
   }
 }
 @layer nimble.utilities {
@@ -211,7 +209,23 @@
     max-width: none;
     padding-inline: var(--nc-spacing);
   }
-  .full-bleed {
+  .bleed-edge {
+    grid-column: 1/-1;
+    width: 100%;
+    max-width: clamp(calc(var(--nc-content-width) + 2 * var(--nc-content-shadow-gap)), calc((100% - 2 * var(--nc-spacing) - var(--nc-content-width) - 4 * var(--nc-content-shadow-gap)) * -9999), 100%);
+    margin-inline: auto;
+    box-shadow: none;
+    position: relative;
+  }
+  .bleed-wide {
+    grid-column: 1/-1;
+    box-shadow: none;
+    width: 100%;
+    max-width: 1200px;
+    margin-inline: auto;
+    padding-inline: var(--nc-spacing);
+  }
+  .bleed-full {
     grid-column: 1/-1;
     box-shadow: none;
     position: relative;
@@ -227,14 +241,6 @@
       grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
     }
   }
-  .wide {
-    grid-column: 1/-1;
-    box-shadow: none;
-    width: 100%;
-    max-width: 1200px;
-    margin-inline: auto;
-    padding-inline: var(--nc-spacing);
-  }
 }
 @media print {
   body {
@@ -263,691 +269,690 @@
     margin: 2cm;
   }
 }
-@scope (:root) to (.no-nimble) {
-  @layer nimble.base {
-    h1 {
-      font-size: 2rem;
-      line-height: 1.1;
-      margin-top: 0;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    h2 {
-      font-size: 1.75rem;
-      line-height: 1.15;
-      margin-top: 2rem;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    h3 {
-      font-size: 1.5rem;
-      line-height: 1.2;
-      margin-top: 1.5rem;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    h4 {
-      font-size: 1.25rem;
-      line-height: 1.3;
-      margin-top: 1.5rem;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    h5 {
-      font-size: 1.125rem;
-      line-height: 1.4;
-      margin-top: 1.5rem;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    h6 {
-      font-size: 1rem;
-      line-height: 1.5;
-      margin-top: 1.5rem;
-      margin-bottom: var(--nc-spacing);
-      font-weight: 700;
-      text-wrap: balance;
-    }
-    @media (max-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);
-    }
-    body > :first-child,
-    body > :first-child > :first-child {
-      margin-top: 0;
-    }
-    body > :nth-last-child(1 of :not(script, style, dialog)),
-    body > :nth-last-child(1 of :not(script, style, dialog)) > :last-child {
-      margin-bottom: 0;
-    }
-    ul, ol {
-      padding-inline-start: 1.5em;
-    }
-    :where(li) {
-      margin-bottom: 0.25em;
-    }
-    :where(li) > :where(ul, ol) {
-      margin-bottom: 0;
-    }
-    dt {
-      font-weight: 600;
-    }
-    dd {
-      margin-inline-start: 1.5em;
-      margin-bottom: 0.5em;
-    }
-    blockquote {
-      margin-block: var(--nc-spacing);
-      margin-inline: 0;
-      padding: 0.25em var(--nc-spacing);
-      border-inline-start: 0.25rem solid var(--nc-border);
-      font-style: italic;
-    }
-    :where(blockquote) footer,
-    :where(blockquote) cite {
-      font-style: normal;
-      font-size: 0.9em;
-      color: color-mix(in oklch, var(--nc-text), transparent 40%);
-    }
-    hr {
-      border: none;
-      height: 1px;
-      background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
-      margin: var(--nc-spacing) 0;
-    }
-    mark {
-      padding: 0.1em 0.25em;
-      background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
-      color: light-dark(inherit, oklch(0.95 0.01 85));
-      border-radius: 2px;
-    }
-    address {
-      font-style: normal;
-    }
+@layer nimble.base {
+  :root {
+    --nimble-scope-start: 1 ;
   }
-  @layer nimble.base {
-    :where(a:not([role=button])) {
-      color: var(--nc-primary);
-      text-decoration: underline;
-      text-underline-offset: 0.15em;
-      text-decoration-color: color-mix(in oklch, var(--nc-primary), transparent 50%);
-      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.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);
-      text-decoration-color: var(--nc-primary-hover);
-    }
+}
+@layer nimble.utilities {
+  :root {
+    --nimble-scope-start: 1 ;
   }
-  @layer nimble.base {
-    :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
-      --_btn-padding-v: 0.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;
-      font-size: 1rem;
-      line-height: 1.5;
-      cursor: pointer;
-      text-decoration: none;
-      display: inline-block;
-      text-align: center;
-      margin: 0;
-      transition: background-color 0.2s, border-color 0.2s;
-    }
-    :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
-      margin-block-end: 0.25em;
-    }
-    :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([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;
-      pointer-events: none;
-    }
-    :where([role=group]) {
-      display: inline-flex;
-      margin-bottom: 0.25em;
-    }
-    [role=group] > * {
-      border-radius: 0;
-      margin: 0;
-      position: relative;
-    }
-    [role=group] > * + * {
-      --_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);
-      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;
-    }
+}
+@layer nimble.base {
+  h1 {
+    font-size: 2rem;
+    line-height: 1.1;
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
   }
-  @layer nimble.utilities {
-    .secondary:not(a:not([role=button])) {
-      background-color: var(--nc-secondary);
-      border-color: var(--nc-secondary);
-      color: var(--nc-secondary-contrast);
-    }
-    .secondary:not(a:not([role=button])):hover {
-      background-color: var(--nc-secondary-hover);
-      border-color: var(--nc-secondary-hover);
-    }
-    .secondary:not(a:not([role=button])):focus-visible {
-      box-shadow: 0 0 0 2px var(--nc-secondary-focus);
-    }
-    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:not(a:not([role=button])):hover {
-      background-color: var(--nc-primary-focus);
-      color: var(--nc-primary-hover);
-      border-color: var(--nc-primary-hover);
-    }
+  h2 {
+    font-size: 1.75rem;
+    line-height: 1.15;
+    margin-top: 2rem;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
   }
-  @layer nimble.base {
-    :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);
-      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], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
-    select, textarea) {
-      width: 100%;
-      margin-bottom: var(--nc-spacing);
-    }
-    :where(p, div) > :where(input, select, textarea):nth-last-child(1 of :not(datalist, script, style)) {
-      margin-bottom: 0;
-    }
-    :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:not([type=submit], [type=button], [type=reset]), 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:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=false] + :where(small) {
-      color: var(--nc-valid);
-    }
-    :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=true] + :where(small) {
-      color: var(--nc-invalid);
-    }
-    :where(label) {
-      display: block;
-      margin-bottom: 0.25em;
-    }
-    :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(fieldset) > :nth-last-child(1 of :not(datalist, script, style)),
-    :where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)) > :nth-last-child(1 of :not(datalist, script, style)) {
-      margin-bottom: 0;
-    }
-    :where(legend) {
-      font-weight: 600;
-      padding-inline: 0.25em;
-    }
-    :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;
-      height: 1.25em;
-      border-radius: 1em;
-      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 {
-      content: "";
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: calc(1.25em - 4px);
-      height: calc(1.25em - 4px);
-      border-radius: 50%;
-      background-color: #fff;
-      transition: transform 0.2s;
-    }
-    :where([type=checkbox][role=switch]):checked {
-      background-color: var(--nc-primary);
-    }
-    :where([type=checkbox][role=switch]):checked::before {
-      transform: translateX(1.25em);
-    }
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    margin-top: 1.5rem;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
   }
-  [type=date],
-  [type=month],
-  [type=week],
-  [type=time],
-  [type=datetime-local] {
-    -webkit-appearance: none;
+  h4 {
+    font-size: 1.25rem;
+    line-height: 1.3;
+    margin-top: 1.5rem;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h5 {
+    font-size: 1.125rem;
+    line-height: 1.4;
+    margin-top: 1.5rem;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  h6 {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-top: 1.5rem;
+    margin-bottom: var(--nc-spacing);
+    font-weight: 700;
+    text-wrap: balance;
+  }
+  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
+    margin-top: 0;
+    margin-bottom: var(--nc-spacing);
+  }
+  body > :first-child,
+  body > :first-child > :first-child {
+    margin-top: 0;
+  }
+  body > :nth-last-child(1 of :not(script, style, dialog)),
+  body > :nth-last-child(1 of :not(script, style, dialog)) > :last-child {
+    margin-bottom: 0;
+  }
+  ul, ol {
+    padding-inline-start: 1.5em;
+  }
+  :where(li) {
+    margin-bottom: 0.25em;
+  }
+  :where(li) > :where(ul, ol) {
+    margin-bottom: 0;
+  }
+  dt {
+    font-weight: 600;
+  }
+  dd {
+    margin-inline-start: 1.5em;
+    margin-bottom: 0.5em;
+  }
+  blockquote {
+    margin-block: var(--nc-spacing);
+    margin-inline: 0;
+    padding: 0.25em var(--nc-spacing);
+    border-inline-start: 0.25rem solid var(--nc-border);
+    font-style: italic;
+  }
+  :where(blockquote) footer,
+  :where(blockquote) cite {
+    font-style: normal;
+    font-size: 0.9em;
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
+  }
+  hr {
+    border: none;
+    height: 1px;
+    background-color: color-mix(in oklch, var(--nc-border), transparent 40%);
+    margin: var(--nc-spacing) 0;
+  }
+  mark {
+    padding: 0.1em 0.25em;
+    background-color: light-dark(#fde68a, oklch(0.55 0.12 85));
+    color: light-dark(inherit, oklch(0.95 0.01 85));
+    border-radius: 2px;
+  }
+  address {
+    font-style: normal;
+  }
+}
+@layer nimble.base {
+  :where(a:not([role=button])) {
+    color: var(--nc-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    text-decoration-color: color-mix(in oklch, var(--nc-primary), transparent 50%);
+    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.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);
+    text-decoration-color: var(--nc-primary-hover);
+  }
+}
+@layer nimble.base {
+  :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
+    --_btn-padding-v: 0.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;
+    font-size: 1rem;
+    line-height: 1.5;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s;
+  }
+  :where(button, [type=submit], [type=reset], [type=button], [role=button]) {
+    margin-block-end: 0.25em;
+  }
+  :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([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;
+    pointer-events: none;
+  }
+  :where([role=group]) {
+    display: inline-flex;
+    margin-bottom: 0.25em;
+  }
+  [role=group] > * {
+    border-radius: 0;
+    margin: 0;
+    position: relative;
+  }
+  [role=group] > * + * {
+    --_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);
+    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;
+  }
+}
+@layer nimble.utilities {
+  .secondary:not(a:not([role=button])) {
+    background-color: var(--nc-secondary);
+    border-color: var(--nc-secondary);
+    color: var(--nc-secondary-contrast);
+  }
+  .secondary:not(a:not([role=button])):hover {
+    background-color: var(--nc-secondary-hover);
+    border-color: var(--nc-secondary-hover);
+  }
+  .secondary:not(a:not([role=button])):focus-visible {
+    box-shadow: 0 0 0 2px var(--nc-secondary-focus);
+  }
+  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: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], [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);
+    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], [type=date], [type=month], [type=week], [type=time], [type=datetime-local]),
+  select, textarea) {
+    width: 100%;
+    margin-bottom: var(--nc-spacing);
+  }
+  :where(p, div) > :where(input, select, textarea):nth-last-child(1 of :not(datalist, script, style)) {
+    margin-bottom: 0;
+  }
+  :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:not([type=submit], [type=button], [type=reset]), 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:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=false] + :where(small) {
+    color: var(--nc-valid);
+  }
+  :where(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-invalid=true] + :where(small) {
+    color: var(--nc-invalid);
+  }
+  :where(label) {
+    display: block;
+    margin-bottom: 0.25em;
+  }
+  :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(fieldset) > :nth-last-child(1 of :not(datalist, script, style)),
+  :where(fieldset) > :nth-last-child(1 of :not(datalist, script, style)) > :nth-last-child(1 of :not(datalist, script, style)) {
+    margin-bottom: 0;
+  }
+  :where(legend) {
+    font-weight: 600;
+    padding-inline: 0.25em;
+  }
+  :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;
+    height: 1.25em;
+    border-radius: 1em;
+    background-color: var(--nc-border);
+    position: relative;
+    cursor: pointer;
+    flex-shrink: 0;
+    margin: 0;
+    transition: background-color 0.2s;
   }
-  @layer nimble.base {
-    :where(table) {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    :where(th, td) {
-      padding: 0.5em 0.75em;
-      border-bottom: 1px solid color-mix(in oklch, var(--nc-border), transparent 40%);
-      text-align: start;
-    }
-    :where(thead th, thead td) {
-      font-weight: 600;
-      border-bottom-width: 2px;
-      background-color: var(--nc-surface-2);
-      text-wrap: balance;
-    }
-    :where(figure:has(table)) {
-      overflow-x: auto;
-    }
+  :where([type=checkbox][role=switch])::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(1.25em - 4px);
+    height: calc(1.25em - 4px);
+    border-radius: 50%;
+    background-color: #fff;
+    transition: transform 0.2s;
   }
-  @layer nimble.base {
-    :where(code, kbd, samp) {
-      font-family: var(--nc-font-mono);
-      font-size: 0.875em;
-      background-color: var(--nc-surface-2);
-      border-radius: var(--nc-radius);
-      padding: 0.15em 0.35em;
-    }
-    :where(pre) {
-      background-color: var(--nc-surface-2);
-      border-radius: var(--nc-radius);
-      padding: var(--nc-spacing);
-      overflow-x: auto;
-    }
-    :where(pre code) {
-      background: none;
-      padding: 0;
-      font-size: inherit;
-    }
-    :where(kbd) {
-      border: 1px solid var(--nc-border);
-      border-bottom-width: 2px;
-    }
+  :where([type=checkbox][role=switch]):checked {
+    background-color: var(--nc-primary);
   }
-  @layer nimble.base {
-    :where(img, video, canvas, svg) {
-      max-width: 100%;
-      height: auto;
-    }
-    :where(figure) {
-      margin: 0;
-    }
-    :where(figcaption) {
-      font-size: 0.9em;
-      color: color-mix(in oklch, var(--nc-text), transparent 40%);
-      margin-top: 0.5em;
-    }
+  :where([type=checkbox][role=switch]):checked::before {
+    transform: translateX(1.25em);
   }
-  @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;
-    }
+}
+[type=date],
+[type=month],
+[type=week],
+[type=time],
+[type=datetime-local] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@layer nimble.base {
+  :where(table) {
+    width: 100%;
+    border-collapse: collapse;
   }
-  @layer nimble.base {
-    :where(details) {
-      border: 1px solid var(--nc-border);
-      border-radius: var(--nc-radius);
-      padding: 0 1em;
-    }
-    :where(details) {
-      margin-bottom: 0.5em;
-    }
-    :where(summary) {
-      cursor: pointer;
-      font-weight: 600;
-      margin: 0 -1em;
-      padding: 0.5em 1em;
-      list-style-type: "▶ ";
-    }
-    :where(details[open] > summary) {
-      list-style-type: "▼ ";
-    }
-    :where(summary[role=button]) {
-      display: block;
-      width: auto;
-      margin: 0 -1em;
-      list-style: none;
-    }
-    :where(summary[role=button])::before {
-      content: "▶ ";
-      display: inline-block;
-      transition: transform 0.2s ease;
-      font-size: 0.75em;
-      vertical-align: middle;
-    }
-    :where(details[open] > summary[role=button])::before {
-      transform: rotate(90deg);
-    }
-    :where(details[open]) {
-      padding-bottom: 0.5em;
-    }
+  :where(th, td) {
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid color-mix(in oklch, var(--nc-border), transparent 40%);
+    text-align: start;
+  }
+  :where(thead th, thead td) {
+    font-weight: 600;
+    border-bottom-width: 2px;
+    background-color: var(--nc-surface-2);
+    text-wrap: balance;
+  }
+  :where(figure:has(table)) {
+    overflow-x: auto;
+  }
+}
+@layer nimble.base {
+  :where(code, kbd, samp) {
+    font-family: var(--nc-font-mono);
+    font-size: 0.875em;
+    background-color: var(--nc-surface-2);
+    border-radius: var(--nc-radius);
+    padding: 0.15em 0.35em;
+  }
+  :where(pre) {
+    background-color: var(--nc-surface-2);
+    border-radius: var(--nc-radius);
+    padding: var(--nc-spacing);
+    overflow-x: auto;
+  }
+  :where(pre code) {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+  :where(kbd) {
+    border: 1px solid var(--nc-border);
+    border-bottom-width: 2px;
+  }
+}
+@layer nimble.base {
+  :where(img, video, canvas, svg) {
+    max-width: 100%;
+    height: auto;
+  }
+  :where(figure) {
+    margin: 0;
+  }
+  :where(figcaption) {
+    font-size: 0.9em;
+    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;
   }
-  details :last-child:last-child {
+  :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;
   }
-  @supports selector(details::details-content) {
+}
+@layer nimble.base {
+  :where(details) {
+    border: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius);
+    padding: 0 1em;
+  }
+  :where(details) {
+    margin-bottom: 0.5em;
+  }
+  :where(summary) {
+    cursor: pointer;
+    font-weight: 600;
+    margin: 0 -1em;
+    padding: 0.5em 1em;
+    list-style-type: "▶ ";
+  }
+  :where(details[open] > summary) {
+    list-style-type: "▼ ";
+  }
+  :where(summary[role=button]) {
+    display: block;
+    width: auto;
+    margin: 0 -1em;
+    list-style: none;
+  }
+  :where(summary[role=button])::before {
+    content: "▶ ";
+    display: inline-block;
+    transition: transform 0.2s ease;
+    font-size: 0.75em;
+    vertical-align: middle;
+  }
+  :where(details[open] > summary[role=button])::before {
+    transform: rotate(90deg);
+  }
+  :where(details[open]) {
+    padding-bottom: 0.5em;
+  }
+}
+details :last-child: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: opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
-      opacity: 0;
+      transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease allow-discrete;
+      height: 0;
+      overflow: clip;
     }
     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;
-      }
+      height: auto;
     }
   }
-  @layer nimble.base {
-    :where(dialog) {
-      background-color: var(--nc-surface-4);
-      border: 1px solid var(--nc-border);
-      border-radius: var(--nc-radius);
-      max-width: min(90vw, 40rem);
-      max-height: 85vh;
-      padding: var(--nc-spacing);
-    }
-    :where(dialog[open]) {
-      position: fixed;
-      inset: 0;
-      margin: auto;
-    }
-    :where(dialog:has(> article)) {
-      background: none;
-      border: none;
-      padding: 0;
-    }
-    :where(dialog > article) {
-      margin-bottom: 0;
-    }
-    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;
-      }
-    }
+}
+@layer nimble.base {
+  :where(dialog) {
+    background-color: var(--nc-surface-4);
+    border: 1px solid var(--nc-border);
+    border-radius: var(--nc-radius);
+    max-width: min(90vw, 40rem);
+    max-height: 85vh;
+    padding: var(--nc-spacing);
+  }
+  :where(dialog[open]) {
+    position: fixed;
+    inset: 0;
+    margin: auto;
+  }
+  :where(dialog:has(> article)) {
+    background: none;
+    border: none;
+    padding: 0;
   }
-  @layer nimble.utilities {
-    .striped :where(tbody tr:nth-child(even)) {
-      background-color: var(--nc-surface-2);
-    }
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-      border: 0;
-    }
-    .overflow-auto {
-      overflow: auto;
+  :where(dialog > article) {
+    margin-bottom: 0;
+  }
+  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;
     }
   }
+}
+@layer nimble.utilities {
+  .striped :where(tbody tr:nth-child(even)) {
+    background-color: var(--nc-surface-2);
+  }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
 }