@latty-ds/web 0.8.1 → 0.10.0

package/dist/components/icon-button/icon-button.d.ts

@@ -36,6 +36,12 @@ export declare class IconButton extends ThemeableElement {
      * @default 'ghost'
      */
     appearance: IconButtonAppearance;
+    /**
+     * Adds a variant-colored border on top of the current appearance. A no-op on
+     * `outlined` (which already has one); adds a border to `filled`/`ghost`.
+     * @default false
+     */
+    bordered: boolean;
     /**
      * Size of the button.
      * @default 'md'

package/dist/components/icon-button/index.js

@@ -255,6 +255,30 @@ var iconButtonStyles = css`
     --_active-bg: var(--lt-bg-info-subtle);
   }
 
+  /* bordered — adds a border on top of whatever appearance is active; a no-op on
+     outlined, which already sets the same border color. */
+  :host([bordered][variant='primary']) {
+    --_border-color: var(--lt-border-primary-strong);
+  }
+  :host([bordered][variant='secondary']) {
+    --_border-color: var(--lt-border-secondary-strong);
+  }
+  :host([bordered][variant='neutral']) {
+    --_border-color: var(--lt-border-strong);
+  }
+  :host([bordered][variant='success']) {
+    --_border-color: var(--lt-border-success-strong);
+  }
+  :host([bordered][variant='warning']) {
+    --_border-color: var(--lt-border-warning-strong);
+  }
+  :host([bordered][variant='error']) {
+    --_border-color: var(--lt-border-error-strong);
+  }
+  :host([bordered][variant='info']) {
+    --_border-color: var(--lt-border-info-strong);
+  }
+
   /* round shape */
   :host([round]) [part='base'] {
     border-radius: 50%;
@@ -304,6 +328,7 @@ var IconButton = class extends ThemeableElement {
     this.label = "";
     this.variant = "neutral";
     this.appearance = "ghost";
+    this.bordered = false;
     this.size = "md";
     this.disabled = false;
     this.href = "";
@@ -350,6 +375,9 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "bordered", 2);
 __decorateClass([
   property2({ reflect: true })
 ], IconButton.prototype, "size", 2);

package/dist/components/list/index.js

@@ -43,7 +43,7 @@ import { css } from "lit";
 var listStyles = css`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
     --list-marker-color: var(--lt-color-neutral-500);
   }
 

package/dist/components/pagination/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var paginationStyles = css`
   :host {
     display: inline-flex;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   nav {

package/dist/components/radio/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var radioStyles = css`
   :host {
     display: inline-block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-wrapper {

package/dist/components/radio-group/index.js

@@ -42,7 +42,7 @@ import { css } from "lit";
 var radioGroupStyles = css`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .radio-group {
@@ -111,67 +111,103 @@ var textStyles = css2`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -210,7 +246,7 @@ var textStyles = css2`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 

package/dist/components/select/index.js

@@ -1432,7 +1432,7 @@ var selectStyles = [
   css2`
     :host {
       display: inline-block;
-      font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+      font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
       position: relative;
       width: 100%;
     }
@@ -1657,7 +1657,7 @@ import { css as css3 } from "lit";
 var surfaceStyles = css3`
   :host {
     display: block;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   .surface {
@@ -1757,67 +1757,103 @@ var textStyles = css4`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -1856,7 +1892,7 @@ var textStyles = css4`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 
@@ -2071,7 +2107,15 @@ var Select = class extends ThemeableElement {
             </span>
             <lt-icon class="icon-end" name="caret-down"></lt-icon>
           </div>
-          <lt-surface class="dropdown" popover="manual" elevation="2" role="listbox">
+          <lt-surface
+            class="dropdown"
+            popover="manual"
+            elevation="2"
+            appearance="outlined"
+            background="--lt-bg-default"
+            role="listbox"
+            part="listbox"
+          >
             <div class="options-container">
               ${this.options.map(
       (option) => html3`

package/dist/components/sidepanel/index.js

@@ -75,28 +75,28 @@ var sidepanelStyles = css`
     inset-block: 0;
     left: 0;
     transform: translateX(-100%);
-    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 4px 0 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='right']) [part='panel'] {
     inset-block: 0;
     right: 0;
     transform: translateX(100%);
-    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, -4px 0 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='top']) [part='panel'] {
     inset-inline: 0;
     top: 0;
     transform: translateY(-100%);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
   }
 
   :host([anchor='bottom']) [part='panel'] {
     inset-inline: 0;
     bottom: 0;
     transform: translateY(100%);
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--lt-sidepanel-shadow, 0 -4px 24px rgba(0, 0, 0, 0.12));
   }
 
   /* ── Open state — must come after anchors to win the cascade ────────────── */
@@ -137,6 +137,7 @@ var sidepanelStyles = css`
   .body {
     flex: 1;
     overflow-y: auto;
+    padding: var(--lt-spacing-5);
   }
 
   /* ── Reduced motion ─────────────────────────────────────────────────────── */
@@ -386,6 +387,30 @@ var iconButtonStyles = css3`
     --_active-bg: var(--lt-bg-info-subtle);
   }
 
+  /* bordered — adds a border on top of whatever appearance is active; a no-op on
+     outlined, which already sets the same border color. */
+  :host([bordered][variant='primary']) {
+    --_border-color: var(--lt-border-primary-strong);
+  }
+  :host([bordered][variant='secondary']) {
+    --_border-color: var(--lt-border-secondary-strong);
+  }
+  :host([bordered][variant='neutral']) {
+    --_border-color: var(--lt-border-strong);
+  }
+  :host([bordered][variant='success']) {
+    --_border-color: var(--lt-border-success-strong);
+  }
+  :host([bordered][variant='warning']) {
+    --_border-color: var(--lt-border-warning-strong);
+  }
+  :host([bordered][variant='error']) {
+    --_border-color: var(--lt-border-error-strong);
+  }
+  :host([bordered][variant='info']) {
+    --_border-color: var(--lt-border-info-strong);
+  }
+
   /* round shape */
   :host([round]) [part='base'] {
     border-radius: 50%;
@@ -435,6 +460,7 @@ var IconButton = class extends ThemeableElement {
     this.label = "";
     this.variant = "neutral";
     this.appearance = "ghost";
+    this.bordered = false;
     this.size = "md";
     this.disabled = false;
     this.href = "";
@@ -481,6 +507,9 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "bordered", 2);
 __decorateClass([
   property2({ reflect: true })
 ], IconButton.prototype, "size", 2);
@@ -525,67 +554,103 @@ var textStyles = css4`
   [part='base'] {
     margin: 0;
     color: inherit;
-    font-family: var(--lt-typography-fontFamily, 'Hanken Grotesk', sans-serif);
+    font-family: var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif);
   }
 
   /* ── Display ─────────────────────────────────────────────────────────── */
 
   :host([variant='display-2xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2.5rem, 6vw, 4.5rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-xl']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 5vw, 3.75rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.1;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='display-lg']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: var(--lt-text-weight, 200);
     line-height: 1.15;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   /* ── Headings ─────────────────────────────────────────────────────────── */
 
   :host([variant='h1']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: -0.02em;
+    letter-spacing: var(--lt-text-tracking, -0.02em);
   }
 
   :host([variant='h2']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.25;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--lt-text-tracking, -0.01em);
   }
 
   :host([variant='h3']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.3;
   }
 
   :host([variant='h4']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.25rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.35;
   }
 
   :host([variant='h5']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1.125rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
   }
 
   :host([variant='h6']) [part='base'] {
+    font-family: var(
+      --lt-typography-fontFamilyHeading,
+      var(--lt-typography-fontFamilyPrimary, 'Hanken Grotesk', sans-serif)
+    );
     font-size: 1rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.4;
@@ -624,7 +689,7 @@ var textStyles = css4`
     font-size: 0.6875rem;
     font-weight: var(--lt-text-weight, 600);
     line-height: 1.2;
-    letter-spacing: 0.08em;
+    letter-spacing: var(--lt-text-tracking, 0.08em);
     text-transform: uppercase;
   }
 

package/dist/components/sidepanel/sidepanel.d.ts

@@ -14,6 +14,8 @@ import '../text/text';
  * @part header - The header bar (contains label and close button)
  * @part close-button - The close button inside the header
  * @part body - The scrollable content area wrapping the default slot
+ *
+ * @cssprop [--lt-sidepanel-shadow] - Overrides the panel's box-shadow, for all anchor positions.
  */
 export declare class SidePanel extends ThemeableElement {
     static styles: import("lit").CSSResult[];