@knadh/oat 0.1.0

package/css/dialog.css

@@ -0,0 +1,89 @@
+@layer components {
+  dialog {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    width: 100%;
+    max-width: 32rem;
+    max-height: 85vh;
+    margin: auto;
+    padding: 0;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    box-shadow: var(--shadow-large);
+    overflow: hidden;
+
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 150ms ease,
+      transform 150ms ease,
+      overlay 150ms ease allow-discrete,
+      display 150ms ease allow-discrete;
+
+    &[open] {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+    }
+
+    &::backdrop {
+      background-color: rgb(0 0 0 / 0);
+      transition:
+        background-color 150ms ease,
+        overlay 150ms ease allow-discrete,
+        display 150ms ease allow-discrete;
+    }
+
+    &[open]::backdrop {
+      background-color: rgb(0 0 0 / 0.5);
+    }
+
+    @starting-style {
+      &[open]::backdrop {
+        background-color: rgb(0 0 0 / 0);
+      }
+    }
+
+    & > header,
+    & > form > header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      padding: var(--space-6);
+      padding-bottom: 0;
+
+      & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+        margin-bottom: 0;
+      }
+
+      & > p {
+        font-size: var(--text-7);
+        color: var(--muted-foreground);
+        margin-bottom: 0;
+      }
+    }
+
+    & > p, & > div, & > section,
+    & > form > p, & > form > div, & > form > section {
+      padding: var(--space-6);
+      overflow-y: auto;
+    }
+
+    & > footer,
+    & > form > footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-2);
+      padding: var(--space-6);
+      padding-top: 0;
+    }
+  }
+}

package/css/dropdown.css

@@ -0,0 +1,56 @@
+@layer components {
+  menu[popover] {
+    position: fixed;
+    margin: 0;
+    padding: var(--space-1);
+    min-width: 12rem;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    box-shadow: var(--shadow-medium);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      display 150ms allow-discrete,
+      overlay 150ms allow-discrete;
+
+    &:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      &:popover-open {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+    }
+
+    hr {
+      margin: var(--space-1) 0;
+    }
+  }
+
+  [role="menuitem"] {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    text-align: left;
+    color: var(--foreground);
+    background: none;
+    border: none;
+    border-radius: var(--radius-small);
+    cursor: pointer;
+
+    &:hover, &:focus {
+      background-color: var(--accent);
+      outline: none;
+    }
+  }
+}

package/css/form.css

@@ -0,0 +1,244 @@
+@layer base {
+  label {
+    display: block;
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+
+    &:has(input:where([type=checkbox], [type=radio])) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-weight: var(--font-normal);
+    }
+  }
+
+  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
+    width: 100%;
+    margin-top: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    line-height: var(--leading-normal);
+    background-color: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    border-radius: var(--radius-medium);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--ring);
+      box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);
+    }
+
+    &:disabled {
+      background-color: var(--muted);
+    }
+
+    &:is([aria-invalid=true], :user-invalid) {
+      border-color: var(--danger);
+
+      &:focus {
+        box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / 0.2);
+      }
+    }
+  }
+
+  textarea {
+    height: auto;
+    min-height: 5rem;
+    padding: var(--space-3);
+    resize: vertical;
+  }
+
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--space-2) center;
+    padding-right: var(--space-6);
+  }
+
+  input:where([type=checkbox], [type=radio]) {
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    background-color: var(--background);
+    border: 1px solid var(--input);
+    transition: background-color var(--transition-fast), border-color var(--transition-fast);
+
+    &:checked {
+      background-color: var(--primary);
+      border-color: var(--primary);
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+  }
+
+  input[type=checkbox] {
+    border-radius: var(--radius-small);
+
+    &:checked {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+      background-size: 0.75rem;
+    }
+
+    &[role=switch] {
+      --switch-height: calc(var(--bar-height) * 3);
+      --switch-inset: 2px;
+      --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);
+
+      width: calc(var(--switch-height) * 2);
+      height: var(--switch-height);
+      border-radius: var(--radius-full);
+      background-color: var(--input);
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: var(--switch-inset);
+        transform: translateY(-50%);
+        width: var(--switch-thumb);
+        height: var(--switch-thumb);
+        background-color: var(--background);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition);
+        box-shadow: var(--shadow-small);
+      }
+
+      &:checked {
+        background-color: var(--primary);
+        background-image: none;
+
+        &::before {
+          transform: translateY(-50%) translateX(var(--switch-height));
+        }
+      }
+    }
+  }
+
+  input[type=radio] {
+    border-radius: var(--radius-full);
+
+    &:checked {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
+      background-size: 100%;
+    }
+  }
+
+  :where(input:where([type=checkbox], [type=radio], [type=range]), select):not(:disabled),
+  label:has(input:where([type=checkbox], [type=radio]):not(:disabled)) {
+    cursor: pointer;
+  }
+
+  input[type=range] {
+    width: 100%;
+    height: var(--bar-height);
+    appearance: none;
+    background: var(--muted);
+    border-radius: var(--radius-full);
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border-radius: var(--radius-full);
+      transition: transform var(--transition-fast);
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border: none;
+      border-radius: var(--radius-full);
+    }
+  }
+
+  fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
+  }
+
+  legend {
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    padding: 0 var(--space-2);
+  }
+}
+
+@layer components {
+  fieldset.group {
+    display: flex;
+    align-items: stretch;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    & > :is(input, textarea, select) {
+      flex: 1;
+      margin-top: 0;
+      border-right: 0;
+    }
+
+    & > :is(input, textarea, select, button) {
+      border-radius: 0;
+      &:first-child {
+        border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+      }
+      
+      &:last-child {
+        border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+      }
+    }
+
+    & > legend {
+      float: inline-start;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--space-3);
+      line-height: var(--leading-normal);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      background-color: var(--muted);
+      border: 1px solid var(--input);
+      border-inline-end: none;
+      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+    }
+  }
+
+  [data-field] {
+    margin-bottom: var(--space-4);
+
+    /* Hint text that succeeds an input with aria-describedby */
+    [data-hint], .error {
+      font-size: var(--text-8);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      margin-top: var(--space-1);
+    }
+
+    .error {
+      display: none;
+    }
+
+    /* Reveal error on data-field="error" */
+    &[data-field="error"] .error {
+      display: block;
+      color: var(--danger);
+    }
+  }
+}

package/css/grid.css

@@ -0,0 +1,57 @@
+@layer components {
+  :root {
+    --grid-cols: 12;
+    --grid-gap: 1.5rem;
+    --container-max: 1280px;
+    --container-pad: 1rem;
+  }
+
+  .container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin-inline: auto;
+    padding-inline: var(--container-pad);
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    gap: var(--grid-gap);
+    width: 100%;
+  }
+
+  /* Column spans using CSS custom property */
+  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
+  
+  .col-1  { --span: 1; }
+  .col-2  { --span: 2; }
+  .col-3  { --span: 3; }
+  .col-4  { --span: 4; }
+  .col-5  { --span: 5; }
+  .col-6  { --span: 6; }
+  .col-7  { --span: 7; }
+  .col-8  { --span: 8; }
+  .col-9  { --span: 9; }
+  .col-10 { --span: 10; }
+  .col-11 { --span: 11; }
+  .col-12 { --span: 12; }
+
+  /* Offsets via grid-column-start */
+  .offset-1  { grid-column-start: 2; }
+  .offset-2  { grid-column-start: 3; }
+  .offset-3  { grid-column-start: 4; }
+  .offset-4  { grid-column-start: 5; }
+  .offset-5  { grid-column-start: 6; }
+  .offset-6  { grid-column-start: 7; }
+
+  .col-end {
+    grid-column-start: span var(--span, 1);
+    grid-column-end: -1;
+  }
+
+  /* Responsive: stack on mobile */
+  @media (max-width: 768px) {
+    .row { --grid-cols: 4; --grid-gap: 1rem; }
+    .col, [class*="col-"] { --span: 4; } /* full width */
+  }
+}

package/css/progress.css

@@ -0,0 +1,75 @@
+@layer base {
+  progress {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background-color: var(--muted);
+
+    &::-webkit-progress-bar {
+      background-color: var(--muted);
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+      transition: width var(--transition);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+    }
+  }
+
+  meter {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: var(--muted);
+
+    &::-webkit-meter-bar {
+      background: var(--muted);
+      border: none;
+      border-radius: var(--radius-full);
+      height: var(--bar-height);
+    }
+
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: var(--success);
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: var(--warning);
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: var(--danger);
+    }
+
+    &::-moz-meter-bar {
+      background: var(--success);
+      border-radius: var(--radius-full);
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: var(--warning);
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: var(--danger);
+    }
+  }
+}

package/css/sidebar.css

@@ -0,0 +1,177 @@
+@layer components {
+  :root {
+    --topnav-height: var(--space-12);
+    --sidebar-width: 14rem;
+  }
+
+  [data-sidebar-layout] {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    min-height: 100dvh;
+    gap: var(--space-4);
+
+    &:has(nav[data-topnav]) {
+      > aside[data-sidebar] {
+        top: var(--topnav-height);
+        height: calc(100dvh - var(--topnav-height));
+      }
+
+      /* <main> immediately after top-nav, adjust for topnav height */
+      > main {
+        min-width: 0;
+        margin-top: calc(var(--topnav-height));
+
+        /* Offset #anchor scrolling to not go behind the topnav. */
+        [id] {
+          scroll-margin-top: calc(var(--topnav-height) + var(--space-6));
+        }
+      }
+    }
+
+    > aside[data-sidebar] {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      height: 100dvh;
+      align-self: start;
+      background-color: var(--background);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      width: var(--sidebar-width);
+
+      > header {
+        flex-shrink: 0;
+        padding: var(--space-3);
+      }
+
+      > footer {
+        flex-shrink: 0;
+        margin-top: auto;
+        padding: var(--space-3);
+      }
+
+      > nav {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--space-3) var(--space-2);
+      }
+
+      nav {
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-1);
+
+          li {
+            margin: 0;
+          }
+        }
+
+        a {
+          display: flex;
+          gap: var(--space-2);
+          padding: var(--space-1) var(--space-3);
+          font-size: var(--text-7);
+          color: var(--foreground);
+          text-decoration: none;
+          border-radius: var(--radius-small);
+          transition: background-color var(--transition-fast);
+
+          &:hover, &[aria-current] {
+            background-color: var(--accent);
+          }
+        }
+      }
+
+      details {
+        border: none;
+        overflow: visible;
+
+        & + details { margin-top: 0; }
+        &[open] summary { border-bottom: none; }
+        > ul { margin-left: var(--space-4); padding: var(--space-1) 0; }
+      }
+
+      summary {
+        justify-content: flex-start;
+        gap: var(--space-2);
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--text-7);
+        font-weight: var(--font-medium);
+        color: var(--foreground);
+        border-radius: var(--radius-small);
+
+        &::after {
+          width: 0.75rem;
+          height: 0.75rem;
+          margin-inline-start: auto;
+        }
+      }
+    }
+  }
+
+  nav[data-topnav] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 5;
+    min-height: var(--topnav-height);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-4);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    box-shadow: var(--shadow-small);
+  }
+
+  [data-sidebar-toggle],
+  [data-sidebar-header] {
+    display: none;
+  }
+
+  [data-sidebar-toggle] {
+    padding: 0 var(--space-1);
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+    cursor: pointer;
+  }
+
+  @media (max-width: 768px) {
+    [data-sidebar-layout] {
+      grid-template-columns: 1fr;
+
+      > aside[data-sidebar] {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100dvh;
+        width: 16rem;
+        transform: translateX(-100%);
+        transition: transform var(--transition);
+        box-shadow: var(--shadow-large);
+      }
+
+      &[data-sidebar-open] > aside[data-sidebar] {
+        transform: translateX(0);
+      }
+    }
+
+    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-header] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--border);
+    }
+  }
+}