@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_input-group.scss

@@ -0,0 +1,95 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'input-group') {
+  @layer blocks {
+    @include b.block('input-group') {
+      display: flex;
+      border-radius: var(--r-xs);
+      outline: var(--bd1) solid var(--border-control);
+      outline-offset: calc(-1 * var(--bd1));
+      background: var(--surface);
+
+      &:focus-within {
+        outline-color: var(--focus);
+        outline-width: 2px;
+        outline-offset: -2px;
+      }
+
+      @include b.element('addon') {
+        height: 2.5rem;
+        padding-inline: 0.75rem;
+        font: 400 0.875rem/2.5rem var(--f-mono);
+        color: var(--c-muted);
+        border-right: var(--bd1) solid var(--border);
+      }
+
+      @include b.element('control') {
+        flex: 1;
+        min-width: 0;
+        border: 0;
+        background: transparent;
+
+        &:focus {
+          outline: none;
+        }
+
+        &::placeholder {
+          color: var(--c-subtle);
+        }
+      }
+
+      // Button inside group
+      & .#{s.$prefix}button {
+        border-radius: 0 var(--r-xs) var(--r-xs) 0;
+      }
+
+      @include b.element('button') {
+        flex-shrink: 0;
+      }
+
+      @include b.element('icon') {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 100%;
+        color: var(--c-muted);
+        pointer-events: none;
+      }
+
+      // Size modifiers
+      @include b.modifier('sm') {
+        .#{s.$prefix}input-group__control {
+          height: 2rem;
+        }
+
+        .#{s.$prefix}input-group__addon {
+          height: 2rem;
+          line-height: 2rem;
+        }
+
+        .#{s.$prefix}input-group__icon {
+          width: 2rem;
+        }
+      }
+
+      @include b.modifier('lg') {
+        .#{s.$prefix}input-group__control {
+          height: 3rem;
+        }
+
+        .#{s.$prefix}input-group__addon {
+          height: 3rem;
+          line-height: 3rem;
+        }
+
+        .#{s.$prefix}input-group__icon {
+          width: 3rem;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_line-item.scss

@@ -0,0 +1,105 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'line-item') {
+  @layer blocks {
+    @include b.block('line-item') {
+      display: grid;
+      grid-template-columns: 4rem 1fr auto;
+      gap: 1rem;
+      padding: 1rem 0 calc(1rem - var(--bd1));
+      border-bottom: var(--bd1) solid var(--border);
+      align-items: start;
+
+      &:last-child {
+        border-bottom: 0;
+        padding-bottom: 1rem;
+      }
+
+      @include b.element('media') {
+        width: 4rem;
+        height: 4rem;
+        border-radius: var(--r-xs);
+        background: var(--surface-sunken);
+        display: grid;
+        place-items: center;
+        color: var(--c-subtle);
+        border: var(--bd1) solid var(--border);
+        overflow: hidden;
+
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      @include b.element('body') {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      @include b.element('title') {
+        font: 500 1rem/1.5rem var(--f-ui);
+      }
+
+      @include b.element('meta') {
+        font: 400 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-muted);
+      }
+
+      @include b.element('note') {
+        font: 400 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-subtle);
+      }
+
+      @include b.element('side') {
+        text-align: right;
+      }
+
+      @include b.element('price') {
+        font: 600 1rem/1.5rem var(--f-ui);
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.element('controls') {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        grid-column: 2 / -1;
+      }
+
+      @include b.element('remove') {
+        border: none;
+        background: none;
+        padding: 0;
+        color: var(--c-muted);
+        cursor: pointer;
+        font: 400 1rem/1 var(--f-ui);
+
+        &:hover {
+          color: var(--danger-text);
+        }
+      }
+
+      @include b.modifier('compact') {
+        gap: 0.75rem;
+        padding-block: 0.75rem;
+
+        .#{s.$prefix}line-item__media {
+          width: 3rem;
+          height: 3rem;
+        }
+      }
+
+      @include b.modifier('readonly') {
+        .#{s.$prefix}line-item__remove,
+        .#{s.$prefix}line-item__controls {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_list.scss

@@ -0,0 +1,117 @@
+@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, 'list') {
+  @layer blocks {
+    @include b.block('list') {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      @include b.element('item') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        min-height: r.lines(2);
+        padding: r.step(1) 0;
+
+        &[aria-current="true"] {
+          background-color: var(--primary-subtle);
+          color: var(--primary-text);
+        }
+      }
+
+      @include b.element('icon') {
+        width: 1.5rem;
+        height: 1.5rem;
+        flex-shrink: 0;
+        color: var(--c-muted);
+      }
+
+      @include b.element('media') {
+        flex-shrink: 0;
+      }
+
+      @include b.element('content') {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      @include b.element('title') {
+        font-weight: 600;
+        font-size: var(--t-body-s);
+        line-height: var(--t-body-lh);
+      }
+
+      @include b.element('description') {
+        font-size: var(--t-body-sm-s);
+        line-height: var(--t-body-sm-lh);
+        color: var(--c-muted);
+      }
+
+      @include b.element('meta') {
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+        color: var(--c-subtle);
+      }
+
+      @include b.element('action') {
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      @include b.modifier('divided') {
+        .#{s.$prefix}list__item + .#{s.$prefix}list__item {
+          border-top: var(--bd1) solid var(--border);
+          padding-top: calc(#{r.step(1)} - var(--bd1));
+        }
+      }
+
+      @include b.modifier('bordered') {
+        outline: var(--bd1) solid var(--border);
+        outline-offset: calc(-1 * var(--bd1));
+        border-radius: var(--r-md);
+
+        .#{s.$prefix}list__item {
+          padding-left: var(--s3);
+          padding-right: var(--s3);
+        }
+
+        .#{s.$prefix}list__item + .#{s.$prefix}list__item {
+          border-top: var(--bd1) solid var(--border);
+          padding-top: calc(#{r.step(1)} - var(--bd1));
+        }
+      }
+
+      @include b.modifier('interactive') {
+        .#{s.$prefix}list__item {
+          cursor: pointer;
+          transition: background-color var(--dur-fast) var(--e-standard);
+
+          &:hover {
+            background-color: var(--surface-raised);
+          }
+        }
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}list__item {
+          min-height: 32px;
+          padding-top: var(--s-h);
+          padding-bottom: var(--s-h);
+        }
+      }
+
+      @include b.modifier('spacious') {
+        .#{s.$prefix}list__item {
+          min-height: 64px;
+          padding-top: r.step(2);
+          padding-bottom: r.step(2);
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_media.scss

@@ -0,0 +1,105 @@
+@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, 'media') {
+  @layer blocks {
+    @include b.block('media') {
+      position: relative;
+      margin-bottom: r.lines(1);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      @include b.element('frame') {
+        border-radius: var(--radius);
+        overflow: hidden;
+        background: var(--surface-sunken);
+        outline: var(--bd1) solid var(--border);
+        outline-offset: calc(-1 * var(--bd1));
+        margin-bottom: 0.5rem;
+      }
+
+      @include b.element('img') {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--_fit, cover);
+      }
+
+      @include b.element('caption') {
+        font: 400 0.875rem/1.5rem var(--f-ui);
+        color: var(--c-muted);
+        display: flex;
+        gap: 0.5rem;
+
+        b {
+          font: 500 0.75rem/1.5rem var(--f-mono);
+          letter-spacing: 0.04em;
+          color: var(--c-subtle);
+          text-transform: uppercase;
+        }
+      }
+
+      @include b.element('credit') {
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+        color: var(--c-subtle);
+      }
+
+      // Ratio modifiers
+      @include b.modifier('ratio-1x1')  { .#{s.$prefix}media__frame { aspect-ratio: 1 / 1; } }
+      @include b.modifier('ratio-4x3')  { .#{s.$prefix}media__frame { aspect-ratio: 4 / 3; } }
+      @include b.modifier('ratio-3x2')  { .#{s.$prefix}media__frame { aspect-ratio: 3 / 2; } }
+      @include b.modifier('ratio-16x9') { .#{s.$prefix}media__frame { aspect-ratio: 16 / 9; } }
+      @include b.modifier('ratio-21x9') { .#{s.$prefix}media__frame { aspect-ratio: 21 / 9; } }
+
+      // Fit modifiers
+      @include b.modifier('cover')   { --_fit: cover; }
+      @include b.modifier('contain') { --_fit: contain; }
+
+      // Layout modifiers
+      @include b.modifier('wide') {
+        max-width: var(--container-wide);
+        margin-inline: auto;
+      }
+
+      @include b.modifier('float-start') {
+        float: left;
+        margin-right: var(--s3);
+        margin-bottom: var(--s1);
+        max-width: 50%;
+      }
+
+      @include b.modifier('float-end') {
+        float: right;
+        margin-left: var(--s3);
+        margin-bottom: var(--s1);
+        max-width: 50%;
+      }
+
+      @include b.modifier('rounded') {
+        .#{s.$prefix}media__frame {
+          border-radius: var(--r-lg);
+        }
+      }
+
+      @include b.modifier('bordered') {
+        .#{s.$prefix}media__frame {
+          outline: var(--bd1) solid var(--border);
+          outline-offset: calc(-1 * var(--bd1));
+        }
+      }
+
+      @include b.modifier('bleed') {
+        max-width: none;
+        margin-inline: calc(-1 * var(--gutter, 0px));
+
+        .#{s.$prefix}media__frame {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_menu.scss

@@ -0,0 +1,191 @@
+@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, 'menu') {
+  @layer blocks {
+    @include b.block('menu') {
+      --_item-height: 40px;
+      --_fill: var(--primary);
+      --_text: var(--text);
+      --_border-color: var(--border);
+
+      font: var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      ul, ol {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      @include b.element('group') {
+        &:not(:first-child) {
+          margin-top: var(--s2);
+          padding-top: calc(var(--s2) - var(--bd1));
+          border-top: var(--bd1) solid var(--_border-color);
+        }
+      }
+
+      @include b.element('heading') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--c-subtle);
+        padding: var(--s1) var(--s2);
+      }
+
+      @include b.element('item') {
+        list-style: none;
+      }
+
+      @include b.element('link') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        min-height: var(--_item-height);
+        padding: var(--s-h) var(--s2);
+        border-radius: var(--r-md);
+        color: var(--c-muted);
+        text-decoration: none;
+        font-weight: 500;
+        transition: background-color var(--dur-fast) var(--e-standard),
+                    color var(--dur-fast) var(--e-standard);
+
+        &:hover {
+          background-color: var(--surface-raised);
+          color: var(--_text);
+        }
+
+        &[aria-current="page"],
+        &[aria-current="true"] {
+          background-color: var(--primary-subtle);
+          color: var(--_fill);
+          font-weight: 600;
+        }
+
+        &[aria-expanded="true"] {
+          color: var(--_text);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--focus);
+          outline-offset: -2px;
+        }
+      }
+
+      @include b.element('icon') {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+        opacity: 0.7;
+      }
+
+      @include b.element('label') {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      @include b.element('badge') {
+        font: var(--t-meta-s)/1 var(--f-mono);
+        padding: 2px 6px;
+        border-radius: var(--r-pill);
+        background: var(--primary-subtle);
+        color: var(--primary-text);
+        font-weight: 600;
+      }
+
+      @include b.element('shortcut') {
+        font: var(--t-meta-s) var(--f-mono);
+        color: var(--c-subtle);
+        margin-left: auto;
+      }
+
+      @include b.element('submenu') {
+        list-style: none;
+        padding: 0 0 0 var(--s4);
+        margin: 0;
+
+        .#{s.$prefix}menu__link[aria-expanded="false"] + & {
+          display: none;
+        }
+
+        .#{s.$prefix}menu__link[aria-expanded="true"] + & {
+          display: block;
+        }
+      }
+
+      @include b.element('divider') {
+        height: 0;
+        margin: var(--s1) 0;
+        border-top: var(--bd1) solid var(--_border-color);
+      }
+
+      @include b.modifier('compact') {
+        --_item-height: 32px;
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+      }
+
+      @include b.modifier('rail') {
+        .#{s.$prefix}menu__link {
+          justify-content: center;
+          padding-inline: var(--s1);
+        }
+
+        .#{s.$prefix}menu__label,
+        .#{s.$prefix}menu__badge,
+        .#{s.$prefix}menu__shortcut {
+          display: none;
+        }
+
+        .#{s.$prefix}menu__heading {
+          font-size: 0;
+          padding: var(--s-h);
+          min-height: 0;
+        }
+      }
+
+      @include b.modifier('toc') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+
+        .#{s.$prefix}menu__link {
+          min-height: 32px;
+          border-radius: 0;
+          padding-left: var(--s3);
+          border-left: 2px solid transparent;
+
+          &[aria-current="page"],
+          &[aria-current="true"] {
+            background: none;
+            border-left-color: var(--_fill);
+            color: var(--_fill);
+          }
+        }
+      }
+
+      @include b.modifier('pills') {
+        .#{s.$prefix}menu__link {
+          border-radius: var(--r-pill);
+
+          &[aria-current="page"],
+          &[aria-current="true"] {
+            background-color: var(--_fill);
+            color: var(--on-primary);
+          }
+        }
+      }
+
+      @include role.role-modifiers;
+    }
+  }
+}

package/scss/blocks/_meta.scss

@@ -0,0 +1,59 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'meta') {
+  @layer blocks {
+    @include b.block('meta') {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--s1);
+      font: 0.75rem/1rem var(--f-mono);
+      letter-spacing: 0.02em;
+      color: var(--c-muted);
+
+      @include b.element('item') {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--s-h);
+      }
+
+      @include b.element('icon') {
+        width: 1em;
+        height: 1em;
+        flex-shrink: 0;
+      }
+
+      @include b.element('link') {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+          color: var(--link);
+          text-decoration: underline;
+        }
+      }
+
+      @include b.element('separator') {
+        color: var(--c-subtle);
+        user-select: none;
+
+        &::before {
+          content: '\00B7';
+        }
+      }
+
+      @include b.modifier('sm') {
+        font-size: var(--t-meta-s);
+        line-height: var(--t-meta-lh);
+      }
+
+      @include b.modifier('stacked') {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+      }
+    }
+  }
+}