@collectivetrait/lineaui 0.0.0-stage → 1.0.0

package/scss/blocks/_modal.scss

@@ -0,0 +1,156 @@
+@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, 'modal') {
+  @layer blocks {
+    @include b.block('modal') {
+      --_max-width: min(90vw, 560px);
+
+      position: relative;
+      background-color: var(--surface-raised);
+      color: var(--text);
+      border: none;
+      border-radius: var(--r-xs);
+      padding: 0;
+      max-inline-size: var(--_max-width);
+      box-shadow: var(--sh4);
+      overflow: visible;
+
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity var(--dur-base) var(--e-exit),
+                  transform var(--dur-base) var(--e-exit),
+                  overlay var(--dur-base) var(--e-exit) allow-discrete,
+                  display var(--dur-base) var(--e-exit) allow-discrete;
+
+      @starting-style {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+
+      &:not([open]) {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+
+      &::backdrop {
+        background-color: var(--overlay);
+        opacity: 1;
+        transition: opacity var(--dur-base) var(--e-exit),
+                    overlay var(--dur-base) var(--e-exit) allow-discrete,
+                    display var(--dur-base) var(--e-exit) allow-discrete;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+
+      &:not([open])::backdrop {
+        opacity: 0;
+      }
+
+      @include b.element('close') {
+        position: absolute;
+        top: var(--s2);
+        right: var(--s2);
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: none;
+        background: none;
+        color: var(--c-muted);
+        cursor: pointer;
+        border-radius: var(--r-md);
+        flex-shrink: 0;
+
+        &:hover {
+          color: var(--text);
+          background-color: var(--surface-raised);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--focus);
+          outline-offset: -2px;
+        }
+      }
+
+      @include b.element('header') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        padding: var(--s4) calc(var(--s4) + 32px) 0 var(--s4);
+      }
+
+      @include b.element('title') {
+        font: 600 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+      }
+
+      @include b.element('body') {
+        padding: var(--s4);
+        overflow-y: auto;
+
+        > p:first-child,
+        > h1:first-child,
+        > h2:first-child,
+        > h3:first-child,
+        > h4:first-child,
+        > h5:first-child,
+        > h6:first-child {
+          margin-top: 0;
+        }
+      }
+
+      @include b.element('footer') {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--s2);
+        padding: var(--s4);
+        padding-top: 0;
+      }
+
+      @include b.modifier('sm') { --_max-width: min(90vw, 400px); }
+      @include b.modifier('md') { --_max-width: min(90vw, 560px); }
+      @include b.modifier('lg') { --_max-width: min(90vw, 800px); }
+      @include b.modifier('full') {
+        --_max-width: 100vw;
+        max-block-size: 100vh;
+        border-radius: 0;
+      }
+
+      @include b.modifier('scroll-body') {
+        max-block-size: min(90vh, 600px);
+        display: flex;
+        flex-direction: column;
+
+        .#{s.$prefix}modal__body {
+          flex: 1;
+          overflow-y: auto;
+        }
+      }
+
+      @include b.modifier('center') {
+        text-align: center;
+
+        .#{s.$prefix}modal__footer {
+          justify-content: center;
+        }
+      }
+
+      @include b.modifier('danger') {
+        .#{s.$prefix}modal__title {
+          color: var(--danger-text);
+        }
+      }
+    }
+  }
+}

package/scss/blocks/_navbar.scss

@@ -0,0 +1,227 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+@use '../tools/rhythm' as r;
+@use '../tools/role-engine' as role;
+
+$navbar-collapse-bp: md !default;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'navbar') {
+  @layer blocks {
+    @include b.block('navbar') {
+      --_height: var(--s4);
+      --_bg: var(--surface);
+      --_text: var(--text);
+      --_border-color: var(--border);
+      --_fill: var(--primary);
+
+      position: relative;
+      background-color: var(--_bg);
+      color: var(--_text);
+      z-index: 100;
+
+      @include b.element('inner') {
+        display: flex;
+        align-items: center;
+        gap: var(--s3);
+        max-width: var(--container-wide);
+        margin-inline: auto;
+        padding-inline: var(--gutter);
+        min-height: var(--_height);
+      }
+
+      @include b.element('brand') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        font: 700 var(--t-h4-s)/var(--t-h4-lh) var(--f-ui);
+        text-decoration: none;
+        color: inherit;
+        flex-shrink: 0;
+      }
+
+      @include b.element('nav') {
+        display: flex;
+        align-items: center;
+        gap: var(--s-h);
+        flex: 1;
+      }
+
+      @include b.element('item') {
+        list-style: none;
+      }
+
+      @include b.element('link') {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--s1);
+        padding: var(--s1) var(--s2);
+        min-height: r.lines(2);
+        font: 500 var(--t-body-sm-s)/var(--t-body-sm-lh) var(--f-ui);
+        color: var(--c-muted);
+        text-decoration: none;
+        transition: color var(--dur-fast) var(--e-standard);
+
+        &:hover {
+          color: var(--_text);
+        }
+
+        &[aria-current="page"] {
+          color: var(--primary-text);
+        }
+      }
+
+      @include b.element('actions') {
+        display: flex;
+        align-items: center;
+        gap: var(--s2);
+        margin-left: auto;
+      }
+
+      @include b.element('toggle') {
+        display: none;
+        appearance: none;
+        background: none;
+        border: none;
+        padding: var(--s1);
+        cursor: pointer;
+        color: inherit;
+        border-radius: var(--r-md);
+
+        &:hover {
+          background-color: var(--surface-raised);
+        }
+      }
+
+      @include b.element('panel') {
+        display: none;
+      }
+
+      @media (max-width: #{map.get(s.$breakpoints, $navbar-collapse-bp)}) {
+        &__toggle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-left: auto;
+        }
+
+        &__nav {
+          display: none;
+        }
+
+        &__actions {
+          display: none;
+        }
+
+        &__panel {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: var(--_bg);
+          padding: var(--s2) var(--gutter);
+          box-shadow: var(--sh3);
+          z-index: 99;
+          display: none;
+          opacity: 0;
+          transform: translateY(-8px);
+          transition: opacity var(--dur-base) var(--e-exit),
+                      transform var(--dur-base) var(--e-exit),
+                      display var(--dur-base) var(--e-exit) allow-discrete;
+
+          &[aria-hidden="false"] {
+            display: block;
+            opacity: 1;
+            transform: translateY(0);
+            transition: opacity var(--dur-base) var(--e-enter),
+                        transform var(--dur-base) var(--e-enter),
+                        display var(--dur-base) var(--e-enter) allow-discrete;
+
+            @starting-style {
+              opacity: 0;
+              transform: translateY(-8px);
+            }
+          }
+        }
+
+        &__panel .#{s.$prefix}navbar__link {
+          display: flex;
+          width: 100%;
+          padding: var(--s2) var(--s3);
+          border-radius: var(--r-md);
+
+          &:hover {
+            background-color: var(--surface-raised);
+          }
+        }
+
+        // Backdrop overlay
+        &:has(.#{s.$prefix}navbar__panel[aria-hidden="false"])::before {
+          content: '';
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: var(--overlay);
+          z-index: 98;
+        }
+      }
+
+      @include b.modifier('actions-visible') {
+        @media (max-width: #{map.get(s.$breakpoints, $navbar-collapse-bp)}) {
+          .#{s.$prefix}navbar__actions {
+            display: flex;
+          }
+        }
+      }
+
+      @include b.modifier('sticky') {
+        position: sticky;
+        top: 0;
+      }
+
+      @include b.modifier('transparent') {
+        --_bg: transparent;
+        border-bottom: 0;
+
+        &.is-stuck {
+          --_bg: var(--surface);
+          border-bottom: var(--bd1) solid var(--_border-color);
+          transition: background-color var(--dur-base) var(--e-standard);
+        }
+      }
+
+      @include b.modifier('bordered') {
+        border-bottom: var(--bd1) solid var(--_border-color);
+
+        .#{s.$prefix}navbar__inner {
+          min-height: calc(var(--_height) - var(--bd1));
+        }
+      }
+
+      @include b.modifier('center') {
+        .#{s.$prefix}navbar__nav {
+          justify-content: center;
+        }
+      }
+
+      @include b.modifier('compact') {
+        --_height: var(--s4);
+
+        .#{s.$prefix}navbar__link {
+          min-height: r.lines(1);
+        }
+      }
+
+      @include role.role-modifiers;
+    }
+
+    @media (max-width: #{map.get(s.$breakpoints, $navbar-collapse-bp)}) {
+      html.#{s.$prefix}navbar-open {
+        overflow: hidden;
+      }
+    }
+  }
+}

package/scss/blocks/_order-summary.scss

@@ -0,0 +1,92 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'order-summary') {
+  @layer blocks {
+    @include b.block('order-summary') {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+
+      @include b.element('header') {
+        font: 600 1.125rem/1.5rem var(--f-ui);
+        color: var(--text);
+      }
+
+      @include b.element('items') {
+        display: flex;
+        flex-direction: column;
+      }
+
+      @include b.element('row') {
+        display: flex;
+        justify-content: space-between;
+        font: 400 1rem/1.5rem var(--f-ui);
+        color: var(--c-muted);
+        font-variant-numeric: tabular-nums;
+
+        > :last-child {
+          color: var(--text);
+        }
+      }
+
+      @include b.element('label') {
+        color: var(--c-muted);
+      }
+
+      @include b.element('value') {
+        color: var(--text);
+        font-variant-numeric: tabular-nums;
+      }
+
+      @include b.element('discount') {
+        > :last-child {
+          color: var(--success-text);
+        }
+      }
+
+      @include b.element('coupon') {
+        display: flex;
+        gap: var(--s2);
+        align-items: center;
+      }
+
+      @include b.element('total') {
+        display: flex;
+        justify-content: space-between;
+        padding-top: calc(1.5rem - var(--bd1));
+        border-top: var(--bd1) solid var(--border);
+        font: 600 1.25rem/1.5rem var(--f-ui);
+        font-variant-numeric: tabular-nums;
+        margin-bottom: 1.5rem;
+      }
+
+      @include b.element('note') {
+        font: 400 0.875rem/1.5rem var(--f-ui);
+        color: var(--c-subtle);
+      }
+
+      @include b.element('actions') {
+        display: flex;
+        flex-direction: column;
+        gap: var(--s2);
+      }
+
+      @include b.modifier('sticky') {
+        position: sticky;
+        top: var(--s3);
+      }
+
+      @include b.modifier('sunken') {
+        background-color: var(--surface-sunken);
+        padding: var(--s4);
+        border-radius: var(--r-md);
+      }
+
+      @include b.modifier('compact') {
+        gap: 0.25rem;
+      }
+    }
+  }
+}

package/scss/blocks/_page-header.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, 'page-header') {
+  @layer blocks {
+    @include b.block('page-header') {
+      margin-bottom: r.lines(2);
+
+      @include b.element('breadcrumb') {
+        margin-bottom: var(--s2);
+      }
+
+      @include b.element('eyebrow') {
+        font: var(--t-meta-s)/var(--t-meta-lh) var(--f-mono);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 500;
+        color: var(--c-muted);
+        margin-bottom: var(--s1);
+      }
+
+      @include b.element('title') {
+        font: 400 var(--t-h1-s)/var(--t-h1-lh) var(--f-prose);
+        letter-spacing: -0.01em;
+        text-wrap: balance;
+        margin-top: 0;
+      }
+
+      @include b.element('lead') {
+        font: var(--t-lead-s)/var(--t-lead-lh) var(--f-prose);
+        color: var(--c-muted);
+        margin-top: var(--s2);
+        max-width: 44rem;
+      }
+
+      @include b.element('meta') {
+        margin-top: var(--s2);
+      }
+
+      @include b.element('actions') {
+        display: flex;
+        gap: var(--s2);
+        margin-top: var(--s3);
+      }
+
+      @include b.element('tabs') {
+        margin-top: var(--s3);
+        border-bottom: var(--bd1) solid var(--border);
+      }
+
+      @include b.modifier('hero') {
+        margin-bottom: r.lines(3);
+
+        .#{s.$prefix}page-header__title {
+          font-size: var(--t-display-2-s);
+          line-height: var(--t-display-2-lh);
+        }
+      }
+
+      @include b.modifier('compact') {
+        margin-bottom: r.lines(1);
+
+        .#{s.$prefix}page-header__title {
+          font: 600 var(--t-h3-s)/var(--t-h3-lh) var(--f-ui);
+        }
+      }
+
+      @include b.modifier('center') {
+        text-align: center;
+
+        .#{s.$prefix}page-header__lead {
+          margin-inline: auto;
+        }
+
+        .#{s.$prefix}page-header__actions {
+          justify-content: center;
+        }
+      }
+
+      @include b.modifier('bordered') {
+        padding-bottom: calc(#{r.lines(1)} - var(--bd1));
+        border-bottom: var(--bd1) solid var(--border);
+      }
+    }
+  }
+}

package/scss/blocks/_pagination.scss

@@ -0,0 +1,110 @@
+@use 'sass:list';
+@use '../settings' as s;
+@use '../tools/bem' as b;
+
+@if list.length(s.$blocks) == 0 or list.index(s.$blocks, 'pagination') {
+  @layer blocks {
+    @include b.block('pagination') {
+
+      @include b.element('list') {
+        display: flex;
+        gap: 0.25rem;
+        list-style: none;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 0;
+        margin: 0;
+      }
+
+      @include b.element('link') {
+        display: inline-grid;
+        place-items: center;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        padding-inline: 0.5rem;
+        border-radius: var(--r-md);
+        font: 500 0.875rem/1.25rem var(--f-mono);
+        color: var(--c-muted);
+        text-decoration: none;
+
+        &:hover {
+          background: var(--surface-raised);
+          color: var(--text);
+        }
+
+        &[aria-current="page"] {
+          background: var(--primary-subtle);
+          color: var(--primary-text);
+          border: var(--bd1) solid var(--primary-text);
+        }
+
+        &[aria-disabled="true"] {
+          color: var(--c-subtle);
+          pointer-events: none;
+        }
+      }
+
+      @include b.element('ellipsis') {
+        color: var(--c-subtle);
+        padding-inline: 0.5rem;
+      }
+
+      @include b.element('summary') {
+        font: 400 0.875rem/1.25rem var(--f-ui);
+        color: var(--c-muted);
+        padding-inline: 0.5rem;
+      }
+
+      @include b.modifier('sm') {
+        .#{s.$prefix}pagination__link {
+          min-width: 2rem;
+          height: 2rem;
+        }
+      }
+
+      @include b.modifier('simple') {
+        .#{s.$prefix}pagination__list {
+          justify-content: space-between;
+        }
+
+        .#{s.$prefix}pagination__link {
+          border-radius: 0;
+
+          &:hover {
+            background: none;
+          }
+        }
+      }
+
+      @include b.modifier('compact') {
+        .#{s.$prefix}pagination__link {
+          border-radius: 0;
+
+          &:hover {
+            background: none;
+          }
+        }
+      }
+
+      @include b.modifier('text') {
+        .#{s.$prefix}pagination__link {
+          border-radius: 0;
+          color: var(--link);
+
+          &:hover {
+            background: none;
+            color: var(--link-hover);
+            text-decoration: underline;
+          }
+
+          &[aria-current="page"] {
+            background: none;
+            border: 0;
+            color: var(--text);
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+}