@latty-ds/web 0.5.0 → 0.7.0

package/dist/components/button/index.js

@@ -266,7 +266,7 @@ var buttonStyles = css`
 import { html } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
 
-// src/components/spinner/spineer.styles.ts
+// src/components/spinner/spinner.styles.ts
 import { css as css2 } from "lit";
 var spinnerStyles = css2`
   :host {

package/dist/components/combobox/index.js

@@ -1836,7 +1836,9 @@ var Combobox = class extends ThemeableElement {
     const inputWrap = this.shadowRoot.querySelector(".input-wrap");
     const dropdown = this.shadowRoot.querySelector(".dropdown");
     if (inputWrap && dropdown) {
-      this._floatingCleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      const cleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      if (this.open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
   }
   closeDropdown() {

package/dist/components/date-input/index.js

@@ -2723,8 +2723,11 @@ var DateInput = class extends ThemeableElement {
     const btn = this.shadowRoot?.querySelector("#field-btn");
     const dropdown = this.shadowRoot?.querySelector(".dropdown");
     if (btn && dropdown) {
-      this._floatingCleanup = await openFloating(btn, dropdown);
+      const cleanup = await openFloating(btn, dropdown);
+      if (this._open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
+    if (!this._open) return;
     this._cleanupClickOutside = createClickOutsideHandler(this, () => this._closeDropdown());
   }
   _closeDropdown() {

package/dist/components/dropdown/index.js

@@ -1723,7 +1723,8 @@ var Dropdown = class extends ThemeableElement {
       const menu = this.shadowRoot.querySelector("lt-surface.menu");
       if (menu) {
         openFloating(triggerEl, menu, { placement: this.placement }).then((cleanup) => {
-          this._floatingCleanup = cleanup;
+          if (this.open) this._floatingCleanup = cleanup;
+          else cleanup();
         });
       }
       requestAnimationFrame(() => this._items()[0]?.focus());
@@ -1766,7 +1767,7 @@ var Dropdown = class extends ThemeableElement {
         popover="manual"
         appearance="outlined"
         elevation="2"
-        background-color="--lt-bg-default"
+        background="--lt-bg-default"
         role="menu"
         aria-hidden=${this.open ? "false" : "true"}
       >

package/dist/components/list/index.js

@@ -169,6 +169,14 @@ var listItemStyles = css2`
     gap: var(--lt-spacing-2);
   }
 
+  /* Keep the slotted content as a single flex item so rich inline markup
+     (strong, code, multiple text runs) flows as normal prose instead of each
+     node becoming its own shrunk flex item. min-width: 0 lets it wrap. */
+  .content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   lt-icon {
     flex-shrink: 0;
     color: var(--lt-color-neutral-500);
@@ -192,7 +200,7 @@ var ListItem = class extends ThemeableElement {
     return html`
       <div class="inner">
         ${this.iconStart ? html`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing}
-        <slot></slot>
+        <span class="content"><slot></slot></span>
         ${this.iconEnd ? html`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing}
       </div>
     `;

package/dist/components/select/index.js

@@ -2024,7 +2024,8 @@ var Select = class extends ThemeableElement {
       const selectTrigger = this.shadowRoot.querySelector(".select-trigger");
       const listbox = this.shadowRoot.querySelector("lt-surface.dropdown");
       openFloating(selectTrigger, listbox, { matchWidth: true }).then((cleanup) => {
-        this._floatingCleanup = cleanup;
+        if (this.isOpen) this._floatingCleanup = cleanup;
+        else cleanup();
       });
     } else {
       this.removeAttribute("open");

package/dist/components/spinner/index.js

@@ -37,7 +37,7 @@ __decorateClass([
 // src/components/spinner/spinner.ts
 import { customElement, property as property2 } from "lit/decorators.js";
 
-// src/components/spinner/spineer.styles.ts
+// src/components/spinner/spinner.styles.ts
 import { css } from "lit";
 var spinnerStyles = css`
   :host {

package/dist/index.cjs

@@ -2000,7 +2000,7 @@ var buttonStyles = i`
   }
 `;
 
-// src/components/spinner/spineer.styles.ts
+// src/components/spinner/spinner.styles.ts
 var spinnerStyles = i`
   :host {
     --lt-spinner-size: var(--lt-spacing-4, 1rem);
@@ -3593,6 +3593,14 @@ var listItemStyles = i`
     gap: var(--lt-spacing-2);
   }
 
+  /* Keep the slotted content as a single flex item so rich inline markup
+     (strong, code, multiple text runs) flows as normal prose instead of each
+     node becoming its own shrunk flex item. min-width: 0 lets it wrap. */
+  .content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   lt-icon {
     flex-shrink: 0;
     color: var(--lt-color-neutral-500);
@@ -3616,7 +3624,7 @@ var ListItem = class extends ThemeableElement {
     return T`
       <div class="inner">
         ${this.iconStart ? T`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : A}
-        <slot></slot>
+        <span class="content"><slot></slot></span>
         ${this.iconEnd ? T`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : A}
       </div>
     `;
@@ -5819,7 +5827,8 @@ var Select = class extends ThemeableElement {
       const selectTrigger = this.shadowRoot.querySelector(".select-trigger");
       const listbox = this.shadowRoot.querySelector("lt-surface.dropdown");
       openFloating(selectTrigger, listbox, { matchWidth: true }).then((cleanup) => {
-        this._floatingCleanup = cleanup;
+        if (this.isOpen) this._floatingCleanup = cleanup;
+        else cleanup();
       });
     } else {
       this.removeAttribute("open");
@@ -9228,7 +9237,8 @@ var Dropdown = class extends ThemeableElement {
       const menu = this.shadowRoot.querySelector("lt-surface.menu");
       if (menu) {
         openFloating(triggerEl, menu, { placement: this.placement }).then((cleanup) => {
-          this._floatingCleanup = cleanup;
+          if (this.open) this._floatingCleanup = cleanup;
+          else cleanup();
         });
       }
       requestAnimationFrame(() => this._items()[0]?.focus());
@@ -9271,7 +9281,7 @@ var Dropdown = class extends ThemeableElement {
         popover="manual"
         appearance="outlined"
         elevation="2"
-        background-color="--lt-bg-default"
+        background="--lt-bg-default"
         role="menu"
         aria-hidden=${this.open ? "false" : "true"}
       >
@@ -11953,8 +11963,11 @@ var DateInput = class extends ThemeableElement {
     const btn = this.shadowRoot?.querySelector("#field-btn");
     const dropdown = this.shadowRoot?.querySelector(".dropdown");
     if (btn && dropdown) {
-      this._floatingCleanup = await openFloating(btn, dropdown);
+      const cleanup = await openFloating(btn, dropdown);
+      if (this._open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
+    if (!this._open) return;
     this._cleanupClickOutside = createClickOutsideHandler(this, () => this._closeDropdown());
   }
   _closeDropdown() {
@@ -12330,7 +12343,9 @@ var Combobox = class extends ThemeableElement {
     const inputWrap = this.shadowRoot.querySelector(".input-wrap");
     const dropdown = this.shadowRoot.querySelector(".dropdown");
     if (inputWrap && dropdown) {
-      this._floatingCleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      const cleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      if (this.open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
   }
   closeDropdown() {

package/dist/index.d.ts

@@ -3,35 +3,10 @@
  *
  * A collection of reusable, accessible web components built with Lit.
  *
- * Available components:
- * - Accordion: Collapsible content using native details/summary
- * - Alert: TODO: describe the Alert component
- * - Button: Interactive button with multiple variants and loading states
- * - Calendar: TODO: describe the Calendar component
- * - Checkbox: Checkbox input with support for indeterminate state
- * - ColorInput: TODO: describe the ColorInput component
- * - Dialog: Modal dialog with backdrop and accessibility features
- * - Dropdown: TODO: describe the Dropdown component
- * - Header: TODO: describe the Header component
- * - IconButton: Accessible icon-only button with ghost, filled, and outlined appearances
- * - Image: TODO: describe the Image component
- * - Link: TODO: describe the Link component
- * - List: Ordered and unordered lists with customizable marker colors
- * - Radio: Radio button for single selection within a group
- * - RadioGroup: Container for managing radio button groups
- * - Switch: Toggle switch with sliding animation
- * - Spinner: Loading indicator with customizable size and color
- * - Textfield: Text input with validation states and password toggle
- * - Select: Dropdown select with customizable options and variants
- * - SidePanel: TODO: describe the SidePanel component
- * - Slider: TODO: describe the Slider component
- * - Snackbar: TODO: describe the Snackbar component
- * - Surface: Container component with elevation and surface styling
- * - Tab: Individual tab element for use within tab groups
- * - TabGroup: Container for managing tabbed interfaces
- * - Table: Data table with sorting and responsive design
- * - Text: TODO: describe the Text component
- * - Tooltip: Floating label anchored to a trigger element
+ * Importing this entry point registers every `lt-*` custom element (see the
+ * `export *` list below for the full set). Each component also has its own
+ * module under `./components/<name>` for granular imports. Per-component docs
+ * live at https://latty-ds — and in each component's source JSDoc.
  *
  * @packageDocumentation
  *

package/dist/index.js

@@ -695,7 +695,7 @@ var buttonStyles = css3`
 import { html as html3 } from "lit";
 import { customElement as customElement3, property as property4 } from "lit/decorators.js";
 
-// src/components/spinner/spineer.styles.ts
+// src/components/spinner/spinner.styles.ts
 import { css as css4 } from "lit";
 var spinnerStyles = css4`
   :host {
@@ -2280,6 +2280,14 @@ var listItemStyles = css12`
     gap: var(--lt-spacing-2);
   }
 
+  /* Keep the slotted content as a single flex item so rich inline markup
+     (strong, code, multiple text runs) flows as normal prose instead of each
+     node becoming its own shrunk flex item. min-width: 0 lets it wrap. */
+  .content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   lt-icon {
     flex-shrink: 0;
     color: var(--lt-color-neutral-500);
@@ -2303,7 +2311,7 @@ var ListItem = class extends ThemeableElement {
     return html10`
       <div class="inner">
         ${this.iconStart ? html10`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : nothing3}
-        <slot></slot>
+        <span class="content"><slot></slot></span>
         ${this.iconEnd ? html10`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : nothing3}
       </div>
     `;
@@ -4524,7 +4532,8 @@ var Select = class extends ThemeableElement {
       const selectTrigger = this.shadowRoot.querySelector(".select-trigger");
       const listbox = this.shadowRoot.querySelector("lt-surface.dropdown");
       openFloating(selectTrigger, listbox, { matchWidth: true }).then((cleanup) => {
-        this._floatingCleanup = cleanup;
+        if (this.isOpen) this._floatingCleanup = cleanup;
+        else cleanup();
       });
     } else {
       this.removeAttribute("open");
@@ -7899,7 +7908,8 @@ var Dropdown = class extends ThemeableElement {
       const menu = this.shadowRoot.querySelector("lt-surface.menu");
       if (menu) {
         openFloating(triggerEl, menu, { placement: this.placement }).then((cleanup) => {
-          this._floatingCleanup = cleanup;
+          if (this.open) this._floatingCleanup = cleanup;
+          else cleanup();
         });
       }
       requestAnimationFrame(() => this._items()[0]?.focus());
@@ -7942,7 +7952,7 @@ var Dropdown = class extends ThemeableElement {
         popover="manual"
         appearance="outlined"
         elevation="2"
-        background-color="--lt-bg-default"
+        background="--lt-bg-default"
         role="menu"
         aria-hidden=${this.open ? "false" : "true"}
       >
@@ -10686,8 +10696,11 @@ var DateInput = class extends ThemeableElement {
     const btn = this.shadowRoot?.querySelector("#field-btn");
     const dropdown = this.shadowRoot?.querySelector(".dropdown");
     if (btn && dropdown) {
-      this._floatingCleanup = await openFloating(btn, dropdown);
+      const cleanup = await openFloating(btn, dropdown);
+      if (this._open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
+    if (!this._open) return;
     this._cleanupClickOutside = createClickOutsideHandler(this, () => this._closeDropdown());
   }
   _closeDropdown() {
@@ -11068,7 +11081,9 @@ var Combobox = class extends ThemeableElement {
     const inputWrap = this.shadowRoot.querySelector(".input-wrap");
     const dropdown = this.shadowRoot.querySelector(".dropdown");
     if (inputWrap && dropdown) {
-      this._floatingCleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      const cleanup = await openFloating(inputWrap, dropdown, { matchWidth: true });
+      if (this.open) this._floatingCleanup = cleanup;
+      else cleanup();
     }
   }
   closeDropdown() {

package/dist/manifest.json

@@ -200,6 +200,64 @@
       }
     ]
   },
+  "lt-alert": {
+    "members": [
+      {
+        "name": "variant",
+        "description": "Visual style.",
+        "type": "select",
+        "options": [
+          "default",
+          "success",
+          "warning",
+          "error",
+          "info"
+        ],
+        "default": "default"
+      },
+      {
+        "name": "appearance",
+        "description": "Visual treatment. `filled` uses a tinted background with border, `outlined` uses a white background with border, `solid` uses a solid color background with no border.",
+        "type": "select",
+        "options": [
+          "filled",
+          "outlined",
+          "solid"
+        ],
+        "default": "filled"
+      },
+      {
+        "name": "title",
+        "description": "Optional bold heading above the body content.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "icon",
+        "description": "Icon to show before the body. 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": "closable",
+        "description": "Show a dismiss button. Clicking it fires lt-close and removes the element.",
+        "type": "boolean",
+        "default": false
+      },
+      {
+        "name": "background",
+        "description": "Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600).",
+        "type": "color",
+        "default": ""
+      },
+      {
+        "name": "uppercase",
+        "description": "Renders the title in small caps with wider letter spacing.",
+        "type": "boolean",
+        "default": false
+      }
+    ]
+  },
   "lt-avatar": {
     "members": [
       {
@@ -260,64 +318,6 @@
       }
     ]
   },
-  "lt-alert": {
-    "members": [
-      {
-        "name": "variant",
-        "description": "Visual style.",
-        "type": "select",
-        "options": [
-          "default",
-          "success",
-          "warning",
-          "error",
-          "info"
-        ],
-        "default": "default"
-      },
-      {
-        "name": "appearance",
-        "description": "Visual treatment. `filled` uses a tinted background with border, `outlined` uses a white background with border, `solid` uses a solid color background with no border.",
-        "type": "select",
-        "options": [
-          "filled",
-          "outlined",
-          "solid"
-        ],
-        "default": "filled"
-      },
-      {
-        "name": "title",
-        "description": "Optional bold heading above the body content.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "icon",
-        "description": "Icon to show before the body. 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": "closable",
-        "description": "Show a dismiss button. Clicking it fires lt-close and removes the element.",
-        "type": "boolean",
-        "default": false
-      },
-      {
-        "name": "background",
-        "description": "Background color override. Accepts a hex value (#1a1a2e) or a CSS token name (--lt-color-primary-600).",
-        "type": "color",
-        "default": ""
-      },
-      {
-        "name": "uppercase",
-        "description": "Renders the title in small caps with wider letter spacing.",
-        "type": "boolean",
-        "default": false
-      }
-    ]
-  },
   "lt-badge": {
     "members": [
       {
@@ -1533,6 +1533,56 @@
       }
     ]
   },
+  "lt-radio-group": {
+    "members": [
+      {
+        "name": "label",
+        "description": "Label for the radio group.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "name",
+        "description": "Name attribute applied to all radio buttons in the group.\nEnsures only one radio can be selected at a time.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "value",
+        "description": "Currently selected value in the group.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "orientation",
+        "description": "Layout orientation of the radio buttons.",
+        "type": "select",
+        "options": [
+          "vertical",
+          "horizontal"
+        ],
+        "default": "vertical"
+      },
+      {
+        "name": "helper-text",
+        "description": "Helper text displayed below the radio group.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "error",
+        "description": "Whether the radio group is in an error state.",
+        "type": "boolean",
+        "default": false
+      },
+      {
+        "name": "required",
+        "description": "Whether selection is required.",
+        "type": "boolean",
+        "default": false
+      }
+    ]
+  },
   "lt-radio": {
     "members": [
       {
@@ -1607,56 +1657,6 @@
       }
     ]
   },
-  "lt-radio-group": {
-    "members": [
-      {
-        "name": "label",
-        "description": "Label for the radio group.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "name",
-        "description": "Name attribute applied to all radio buttons in the group.\nEnsures only one radio can be selected at a time.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "value",
-        "description": "Currently selected value in the group.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "orientation",
-        "description": "Layout orientation of the radio buttons.",
-        "type": "select",
-        "options": [
-          "vertical",
-          "horizontal"
-        ],
-        "default": "vertical"
-      },
-      {
-        "name": "helper-text",
-        "description": "Helper text displayed below the radio group.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "error",
-        "description": "Whether the radio group is in an error state.",
-        "type": "boolean",
-        "default": false
-      },
-      {
-        "name": "required",
-        "description": "Whether selection is required.",
-        "type": "boolean",
-        "default": false
-      }
-    ]
-  },
   "lt-select": {
     "members": [
       {
@@ -2050,6 +2050,37 @@
       }
     ]
   },
+  "lt-tab-group": {
+    "members": [
+      {
+        "name": "value",
+        "description": "Currently selected tab value.",
+        "type": "text",
+        "default": ""
+      },
+      {
+        "name": "appearance",
+        "description": "Visual appearance of the tab group.",
+        "type": "select",
+        "options": [
+          "default",
+          "pills"
+        ],
+        "default": "default"
+      },
+      {
+        "name": "size",
+        "description": "Size of the tabs.",
+        "type": "select",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "default": "md"
+      }
+    ]
+  },
   "lt-tab-panel": {
     "members": [
       {
@@ -2111,37 +2142,6 @@
       }
     ]
   },
-  "lt-tab-group": {
-    "members": [
-      {
-        "name": "value",
-        "description": "Currently selected tab value.",
-        "type": "text",
-        "default": ""
-      },
-      {
-        "name": "appearance",
-        "description": "Visual appearance of the tab group.",
-        "type": "select",
-        "options": [
-          "default",
-          "pills"
-        ],
-        "default": "default"
-      },
-      {
-        "name": "size",
-        "description": "Size of the tabs.",
-        "type": "select",
-        "options": [
-          "sm",
-          "md",
-          "lg"
-        ],
-        "default": "md"
-      }
-    ]
-  },
   "lt-table": {
     "members": [
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/web",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Web Components for the Latty design system — framework-agnostic UI components built with Lit",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/penhold3r/latty-ds.git",
     "directory": "packages/web"
   },
-  "homepage": "https://penhold3r.github.io/latty-ds",
+  "homepage": "https://latty-ds.com",
   "keywords": [
     "design-system",
     "web-components",
@@ -224,8 +224,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@latty-ds/icons": "0.5.0"
+    "@latty-ds/icons": "0.7.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "e2fcd96cf67d8f9780970cbd16fd96a3e3915995"
+  "gitHead": "40d5903d30b50455ed244d5f0fd75fbd84934c46"
 }