@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/base/_forms.scss

@@ -0,0 +1,110 @@
+@layer base {
+  // Text-like controls: 40px block-size (space-5), border compensated in padding
+  :is(
+    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
+    select
+  ) {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--s4); // 40px
+    padding: calc(var(--s2) - 1px - 0.25rem) var(--s2);
+    font: var(--t-body-s)/var(--t-body-lh) var(--f-ui);
+    background-color: var(--surface-sunken);
+    border: 1px solid var(--border-control);
+    color: var(--text);
+    appearance: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      border-color: var(--primary);
+    }
+
+    &:user-invalid {
+      border-color: var(--danger);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  select {
+    // Restore the native arrow; override appearance above
+    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='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--s2) center;
+    padding-inline-end: var(--s4);
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    padding: calc(var(--s2) - 1px) var(--s2);
+    font: var(--t-body-s)/1.5rem; // rows × 24px stay on the grid var(--f-ui);
+    background-color: var(--surface-sunken);
+    border: 1px solid var(--border-control);
+    color: var(--text);
+    resize: vertical;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+      border-color: var(--primary);
+    }
+
+    &:user-invalid {
+      border-color: var(--danger);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    display: block;
+    font: 500 var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+    color: var(--text);
+  }
+
+  fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--r-md);
+    padding: var(--s3);
+  }
+
+  legend {
+    font-weight: 600;
+    padding-inline: var(--s1);
+  }
+
+  // Base button — 40px height, inherits font
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--s4); // 40px
+    padding: calc(var(--s2) - 1px) var(--s3);
+    font: 500 var(--t-body-s)/var(--t-body-lh) var(--f-ui);
+    border: 1px solid transparent;
+    cursor: pointer;
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:focus-visible {
+      outline: 2px solid var(--focus);
+      outline-offset: 2px;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

package/scss/base/_index.scss

@@ -0,0 +1,7 @@
+@forward 'reset';
+@forward 'typography';
+@forward 'code';
+@forward 'media';
+@forward 'tables';
+@forward 'forms';
+@forward 'interactive';

package/scss/base/_interactive.scss

@@ -0,0 +1,25 @@
+@layer base {
+  details > summary {
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  dialog {
+    background-color: var(--surface-raised);
+    color: var(--text);
+    border: none;
+    border-radius: var(--r-lg);
+    padding: var(--s4);
+    max-inline-size: min(90vw, 560px);
+    box-shadow: var(--sh4);
+
+    &::backdrop {
+      background-color: var(--overlay);
+    }
+  }
+}

package/scss/base/_media.scss

@@ -0,0 +1,28 @@
+@use '../tools/rhythm' as r;
+
+@layer base {
+  img,
+  video {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  figure {
+    margin: 0 0 r.lines(1);
+
+    > img,
+    > video,
+    > pre {
+      margin: 0 0 0.5rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  figcaption {
+    font: var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+    color: var(--c-muted);
+  }
+}

package/scss/base/_reset.scss

@@ -0,0 +1,53 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    // Establishes rlh = 24px (one rhythm line) everywhere.
+    line-height: 1.5rem;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+  }
+
+  body {
+    line-height: 1rem;
+    min-block-size: 100svh;
+    min-width: 320px;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+}

package/scss/base/_tables.scss

@@ -0,0 +1,49 @@
+@use '../tools/rhythm' as r;
+
+@layer base {
+  table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    margin-bottom: r.lines(1);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  caption {
+    font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+    color: var(--c-muted);
+    text-align: start;
+    margin-block-end: var(--s1);
+  }
+
+  th,
+  td {
+    // 1.5rem (24px) line-height + 2 × 0.75rem (12px) padding = 48px (2 lines)
+    // box-shadow used instead of border so the 1px doesn't push rows off the 24px grid
+    padding: calc(var(--s3) / 2) var(--s2);
+    line-height: var(--t-body-sm-lh);
+    text-align: start;
+    vertical-align: top;
+    box-shadow: inset 0 -1px 0 var(--border);
+  }
+
+  th {
+    font-size: var(--t-body-sm-s);
+    font-weight: 600;
+    color: var(--c-muted);
+  }
+
+  td {
+    font-size: var(--t-body-sm-s);
+  }
+
+  // Numeric cells
+  td[data-numeric],
+  td.numeric,
+  td:is([align="right"]) {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+}

package/scss/base/_typography.scss

@@ -0,0 +1,232 @@
+@use '../tools/rhythm' as r;
+@use '../settings' as s;
+@use 'sass:map';
+
+@layer base {
+  :root {
+    font: 1rem var(--f-ui);
+    color: var(--text);
+    background-color: var(--canvas);
+  }
+
+  // Focus ring
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  // Selection
+  ::selection {
+    background-color: var(--selection);
+  }
+
+  // ---------------------------------------------------------------
+  // Headings — each occupies whole rhythm lines; margins above > below
+  // ---------------------------------------------------------------
+
+  h1 {
+    font: 400 var(--t-h1-s)/var(--t-h1-lh) var(--f-prose);
+    letter-spacing: -0.01em;
+    margin-bottom: r.lines(1);
+  }
+
+  h2 {
+    font: 400 var(--t-h2-s)/var(--t-h2-lh) var(--f-prose);
+    letter-spacing: -0.005em;
+    margin-bottom: r.lines(1);
+  }
+
+  h3 {
+    font: 400 var(--t-h3-s)/var(--t-h3-lh) var(--f-prose);
+    margin-bottom: r.lines(1);
+  }
+
+  h4 {
+    font: 600 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+    margin-bottom: r.lines(1);
+  }
+
+  h5 {
+    font: 600 var(--t-h5-s)/var(--t-h5-lh) var(--f-ui);
+    margin-bottom: r.step(1);
+  }
+
+  // h6 box: 16px line-height + 8px margin-bottom = 24px (1 line).
+  // Body text returns to the 24px grid after h6 without JS.
+  h6 {
+    font: 500 var(--t-h6-s)/var(--t-h6-lh) var(--f-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--c-muted);
+    margin-bottom: r.step(1); // 8px — total box = 24px
+  }
+  // Last child of any block container must not add trailing space
+  :is(h1, h2, h3, h4, h5, h6, p, blockquote, dl, ul, ol):last-child {
+    margin-bottom: 0;
+  }
+
+  // ---------------------------------------------------------------
+  // Responsive heading step-down (below md)
+  // display-1 and display-2 step-down handled by consumers via type tokens
+  // ---------------------------------------------------------------
+
+  @media (max-width: map.get(s.$breakpoints, md)) {
+    h1 {
+      font-size: 2.25rem; // 36px — stays larger than h2 (32px)
+      line-height: 3rem;
+    }
+  }
+
+  // ---------------------------------------------------------------
+  // Body text
+  // ---------------------------------------------------------------
+
+  p {
+    line-height: 1.5rem;
+    margin-bottom: r.lines(1);
+  }
+
+  .lead {
+    font: var(--t-lead-s)/var(--t-lead-lh) var(--f-prose);
+  }
+
+  // ---------------------------------------------------------------
+  // Links
+  // ---------------------------------------------------------------
+
+  a {
+    color: var(--link);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--link-hover);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    text-decoration-thickness: 2px;
+  }
+
+  // ---------------------------------------------------------------
+  // Inline elements
+  // ---------------------------------------------------------------
+
+  strong,
+  b {
+    font-weight: 600;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  // line-height: 0 prevents sub/sup from stretching the containing line box
+  sub,
+  sup {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub { bottom: -0.25em; }
+  sup { top: -0.5em; }
+
+  small {
+    font-size: var(--t-body-xs-s);
+    line-height: var(--t-body-xs-lh);
+  }
+
+  mark {
+    background-color: var(--selection);
+    color: inherit;
+    padding-inline: 0.1em;
+  }
+
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+
+  cite {
+    font-style: italic;
+  }
+
+  s,
+  del {
+    text-decoration: line-through;
+    color: var(--c-muted);
+  }
+
+  ins {
+    text-decoration: underline;
+    color: var(--success-text);
+  }
+
+  address {
+    font-style: normal;
+    line-height: 1.5rem;
+  }
+
+  // ---------------------------------------------------------------
+  // Blockquote
+  // border-inline-start / padding-inline-start kept logical — they flip in RTL.
+  // margin-block replaced with physical margin-top / margin-bottom.
+  // ---------------------------------------------------------------
+
+  blockquote {
+    font-family: var(--f-prose);
+    // Border compensation keeps text on the grid
+    border-inline-start: var(--bd3) solid var(--primary);
+    padding-inline-start: calc(var(--s3) - var(--bd3));
+    margin: r.lines(1) 0;
+    color: var(--c-muted);
+  }
+
+  // ---------------------------------------------------------------
+  // Horizontal rule — occupies exactly one rhythm line
+  // ---------------------------------------------------------------
+
+  hr {
+    border: none;
+    height: 1.5rem; // one line
+    background-image: linear-gradient(
+      to bottom,
+      transparent calc(50% - 0.5px),
+      var(--border) calc(50% - 0.5px),
+      var(--border) calc(50% + 0.5px),
+      transparent calc(50% + 0.5px)
+    );
+  }
+
+  // ---------------------------------------------------------------
+  // Lists
+  // padding-inline-start kept logical — list indent should flip in RTL.
+  // ---------------------------------------------------------------
+
+  ul,
+  ol {
+    padding-inline-start: var(--s4); // 32px
+    margin-bottom: r.lines(1);
+  }
+
+  li {
+    line-height: 1.5rem;
+  }
+
+  ol {
+    font-variant-numeric: tabular-nums;
+  }
+
+  dl {
+    margin: 0 0 r.lines(1);
+  }
+
+  dt {
+    font-weight: 600;
+  }
+
+  dd {
+    margin-inline-start: var(--s4); // logical — indent flips in RTL
+    color: var(--c-muted);
+  }
+}

package/scss/blocks/_accordion.scss

@@ -0,0 +1,88 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/rhythm' as r;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'accordion') {
+  @layer blocks {
+    @include b.block('accordion') {
+
+      @include b.element('item') {
+        border-bottom: var(--bd1) solid var(--border);
+
+        &:first-child {
+          border-top: var(--bd1) solid var(--border);
+        }
+      }
+
+      @include b.element('summary') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        padding-top: r.step(1);
+        padding-bottom: calc(#{r.step(1)} - var(--bd1));
+        min-height: calc(#{r.lines(2)} - var(--bd1));
+        cursor: pointer;
+        font-weight: 600;
+
+        .#{s.$prefix}accordion__item:first-child & {
+          padding-top: calc(#{r.step(1)} - var(--bd1));
+          min-height: calc(#{r.lines(2)} - var(--bd1) - var(--bd1));
+        }
+      }
+
+      @include b.element('title') {
+        flex: 1;
+      }
+
+      @include b.element('icon') {
+        font-size: 1em;
+        flex-shrink: 0;
+        transition: transform var(--dur-base) var(--e-standard);
+
+        [open] > .#{s.$prefix}accordion__summary & {
+          transform: rotate(180deg);
+        }
+      }
+
+      @include b.element('content') {
+        padding-bottom: var(--s3);
+      }
+
+      @include b.modifier('flush') {
+        .#{s.$prefix}accordion__item {
+          border-bottom: 0;
+
+          &:first-child {
+            border-top: 0;
+          }
+        }
+
+        .#{s.$prefix}accordion__summary {
+          padding: r.step(1) 0;
+          min-height: r.lines(2);
+        }
+
+        .#{s.$prefix}accordion__item:first-child .#{s.$prefix}accordion__summary {
+          padding-top: r.step(1);
+          min-height: r.lines(2);
+        }
+      }
+
+      @include b.modifier('sm') {
+        .#{s.$prefix}accordion__summary {
+          font-size: var(--t-body-sm-s);
+          line-height: var(--t-body-sm-lh);
+          padding: var(--s-h) 0;
+          min-height: r.lines(1);
+        }
+
+        .#{s.$prefix}accordion__content {
+          font-size: var(--t-body-sm-s);
+          line-height: var(--t-body-sm-lh);
+          padding-bottom: var(--s2);
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_alert.scss

@@ -0,0 +1,101 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/role-engine' as role;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'alert') {
+  @layer blocks {
+    @include b.block('alert') {
+      --_text: var(--info-text);
+      --_subtle: var(--info-subtle);
+      --_fill: var(--info);
+      --_on: var(--on-info);
+      --_border-color: var(--info-border);
+      --border: var(--_border-color);
+
+      display: flex;
+      gap: 0.75rem;
+      padding: 1rem;
+
+      &[hidden] {
+        display: none;
+      }
+      background: var(--_subtle);
+      color: var(--text);
+
+      @include b.element('icon') {
+        line-height: 1.5rem;
+        color: var(--_text);
+      }
+
+      @include b.element('content') {
+        flex: 1;
+        min-width: 0;
+      }
+
+      @include b.element('title') {
+        font: 600 1rem / 1.5rem var(--f-ui);
+        margin-bottom: 0.25rem;
+      }
+
+      @include b.element('body') {
+        font: 400 1rem / 1.5rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('actions') {
+        display: flex;
+        gap: var(--s1);
+        margin-top: var(--s2);
+      }
+
+      @include b.element('dismiss') {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        flex-shrink: 0;
+        padding: 0;
+        border: none;
+        background: none;
+        color: var(--c-muted);
+        cursor: pointer;
+        border-radius: var(--r-sm);
+
+        &:hover {
+          color: var(--text);
+          background-color: color-mix(in srgb, currentColor 10%, transparent);
+        }
+      }
+
+      // Style variants
+      @include b.modifier('solid') {
+        background: var(--_fill);
+        color: var(--_on);
+
+        .#{s.$prefix}alert__icon,
+        .#{s.$prefix}alert__body {
+          color: var(--_on);
+        }
+      }
+
+      @include b.modifier('accent') {
+        border-left: var(--bd3) solid var(--_text);
+        border-radius: 0 var(--r-xs) var(--r-xs) 0;
+      }
+
+      @include b.modifier('banner') {
+        border-radius: 0;
+        padding-inline: var(--s4);
+      }
+
+      @include b.modifier('compact') {
+        padding: var(--s2);
+      }
+
+      // Role modifiers
+      @include role.role-modifiers;
+    }
+  }
+}