@latty-ds/web 0.9.0 → 0.10.1

package/dist/index.js

@@ -202,61 +202,97 @@ var textStyles = css2`
   /* ── 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;
@@ -295,7 +331,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;
   }
 
@@ -706,6 +742,30 @@ var buttonStyles = css3`
     opacity: 0.8;
   }
 
+  /* 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);
+  }
+
   /* loading */
   .spinner {
     animation: spin 700ms linear infinite;
@@ -871,6 +931,7 @@ var Button = class extends ThemeableElement {
     this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
     this.variant = "primary";
     this.appearance = "filled";
+    this.bordered = false;
     this.size = "md";
     this.disabled = false;
     this.loading = false;
@@ -933,6 +994,9 @@ __decorateClass([
 __decorateClass([
   property5({ reflect: true })
 ], Button.prototype, "appearance", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], Button.prototype, "bordered", 2);
 __decorateClass([
   property5({ reflect: true })
 ], Button.prototype, "size", 2);
@@ -1894,6 +1958,30 @@ var iconButtonStyles = css9`
     --_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%;
@@ -1910,6 +1998,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 = "";
@@ -1956,6 +2045,9 @@ __decorateClass([
 __decorateClass([
   property8({ reflect: true })
 ], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property8({ type: Boolean, reflect: true })
+], IconButton.prototype, "bordered", 2);
 __decorateClass([
   property8({ reflect: true })
 ], IconButton.prototype, "size", 2);
@@ -2078,6 +2170,8 @@ var Dialog = class extends ThemeableElement {
     this.closeOnEscape = true;
     this.uppercase = false;
     this.backdropBlur = false;
+    this.elevation = "4";
+    this.appearance = "filled";
     this.handleKeydown = (event) => {
       if (this.open && this.closeOnEscape && event.key === "Escape") {
         event.preventDefault();
@@ -2155,7 +2249,8 @@ var Dialog = class extends ThemeableElement {
     return html9`
       <div class="backdrop" ?inert=${!this.open} @click=${this.handleBackdropClick} part="backdrop">
         <lt-surface
-          elevation="4"
+          elevation=${this.elevation}
+          appearance=${this.appearance}
           role="dialog"
           aria-modal="true"
           aria-labelledby="dialog-title"
@@ -2222,6 +2317,12 @@ __decorateClass([
 __decorateClass([
   property10({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
 ], Dialog.prototype, "backdropBlur", 2);
+__decorateClass([
+  property10({ reflect: true })
+], Dialog.prototype, "elevation", 2);
+__decorateClass([
+  property10({ reflect: true })
+], Dialog.prototype, "appearance", 2);
 __decorateClass([
   query3("lt-surface")
 ], Dialog.prototype, "dialogElement", 2);
@@ -4744,7 +4845,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) => html14`
@@ -7289,6 +7398,8 @@ var Snackbar = class extends ThemeableElement {
     this.closable = true;
     this.actionLabel = "";
     this.icon = "";
+    this.elevation = "5";
+    this.appearance = "filled";
   }
   /** Shows the snackbar and starts the auto-dismiss timer. */
   show() {
@@ -7341,7 +7452,7 @@ var Snackbar = class extends ThemeableElement {
   render() {
     const iconName = this._resolvedIcon;
     return html24`
-      <lt-surface elevation="5" background=${Snackbar._bgMap[this.variant]}>
+      <lt-surface elevation=${this.elevation} appearance=${this.appearance} background=${Snackbar._bgMap[this.variant]}>
         <div class="inner" role="status" aria-live="polite" part="base">
           ${iconName ? html24`<lt-icon class="variant-icon" name=${iconName} part="icon"></lt-icon>` : ""}
           <span class="message" part="message">
@@ -7388,6 +7499,12 @@ __decorateClass([
 __decorateClass([
   property25({ reflect: true })
 ], Snackbar.prototype, "icon", 2);
+__decorateClass([
+  property25({ reflect: true })
+], Snackbar.prototype, "elevation", 2);
+__decorateClass([
+  property25({ reflect: true })
+], Snackbar.prototype, "appearance", 2);
 Snackbar = __decorateClass([
   customElement24("lt-snackbar")
 ], Snackbar);
@@ -7911,6 +8028,7 @@ var dropdownStyles = [
 
     lt-surface.menu::part(surface) {
       overflow: hidden;
+      padding-block: var(--lt-dropdown-menu-padding, var(--lt-spacing-2));
     }
   `
 ];
@@ -9109,28 +9227,28 @@ var sidepanelStyles = css38`
     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 ────────────── */
@@ -9171,6 +9289,7 @@ var sidepanelStyles = css38`
   .body {
     flex: 1;
     overflow-y: auto;
+    padding: var(--lt-spacing-5);
   }
 
   /* ── Reduced motion ─────────────────────────────────────────────────────── */

package/dist/manifest.json

@@ -430,6 +430,12 @@
         ],
         "default": "filled"
       },
+      {
+        "name": "bordered",
+        "description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`.",
+        "type": "boolean",
+        "default": false
+      },
       {
         "name": "size",
         "description": "Size of the button (affects height, font size, and padding).",
@@ -1114,6 +1120,18 @@
         "description": "Apply a frosted-glass blur effect to the backdrop.",
         "type": "boolean",
         "default": false
+      },
+      {
+        "name": "elevation",
+        "description": "Elevation level of the internal surface, matching `lt-surface`'s scale.",
+        "type": "text",
+        "default": "4"
+      },
+      {
+        "name": "appearance",
+        "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.",
+        "type": "text",
+        "default": "filled"
       }
     ]
   },
@@ -1243,6 +1261,12 @@
         ],
         "default": "ghost"
       },
+      {
+        "name": "bordered",
+        "description": "Adds a variant-colored border on top of the current appearance. A no-op on\n`outlined` (which already has one); adds a border to `filled`/`ghost`.",
+        "type": "boolean",
+        "default": false
+      },
       {
         "name": "size",
         "description": "Size of the button.",
@@ -1954,6 +1978,18 @@
         "description": "Icon to show before the message. Leave empty for auto (shows variant icon for status variants),\nset to `\"none\"` to suppress, or pass any icon name to override.",
         "type": "icon",
         "default": ""
+      },
+      {
+        "name": "elevation",
+        "description": "Elevation level of the internal surface, matching `lt-surface`'s scale.",
+        "type": "text",
+        "default": "5"
+      },
+      {
+        "name": "appearance",
+        "description": "Visual appearance of the internal surface, matching `lt-surface`'s vocabulary.",
+        "type": "text",
+        "default": "filled"
       }
     ]
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/web",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
   "license": "MIT",
   "repository": {
@@ -224,8 +224,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@latty-ds/icons": "0.9.0"
+    "@latty-ds/icons": "0.10.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "8d5627a4a71bb4c7efdf3b754198c6450ce5467f"
+  "gitHead": "f492491c8671b91c1717804f64754980ca563097"
 }