@uibit/text-clamp 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# Text Clamp
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/text-clamp)
+
+Text Clamp constrains long, multi-line text blocks to a designated maximum line count. When the text exceeds the boundary, the component inserts an inline ellipsis and an interactive toggle (e.g. "More" / "Less") to expand or collapse the content dynamically without page navigation.
+
+## Value Delivery
+
+- **Clean Dashboard Density** – Keeps user interface cards, card feeds, or list view items uniform in size by hiding excessive copy by default.
+- **Accurate Recalculation** – Uses a ResizeObserver behind the scenes to recalculate text constraints automatically when viewport widths or container dimensions change.
+- **Smooth Layout Integration** – Respects nested HTML templates, allowing styled inline text (bolding, links, lists) to be truncated correctly without breaking markup structure.
+
+## Ideal Applications
+
+- **Review Feeds** – Showing customer ratings or feedback remarks where some responses are extremely long.
+- **Blog & Article Previews** – Displaying uniform description snippets in card lists or search results.
+- **Biographies & Descriptions** – Managing profiles or catalog details on structured page grids.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,239 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./text-clamp"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextClamp",
+          "declaration": {
+            "name": "TextClamp",
+            "module": "./text-clamp"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; font-size: var(--uibit-text-clamp-font-size, inherit); font-weight: var(--uibit-text-clamp-font-weight, inherit); color: var(--uibit-text-clamp-color, inherit); font-family: var(--uibit-text-clamp-font-family, inherit); line-height: var(--uibit-text-clamp-line-height, var(--uibit-line-height-normal, 1.5)); } /* Hide the source slot — it's only used for slotchange detection */ .source { display: none; } .content { overflow: hidden; } .content.clamped { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .toggle { display: inline; background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--uibit-text-clamp-toggle-color, currentColor); font-weight: var(--uibit-text-clamp-toggle-font-weight, var(--uibit-font-weight-semibold, 600)); cursor: pointer; text-decoration: var(--uibit-text-clamp-toggle-decoration, underline); text-underline-offset: 0.15em; } .toggle:focus-visible { outline: 0.125rem solid var(--uibit-text-clamp-focus-color, #000000); outline-offset: 0.125rem; border-radius: 0.125rem; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/text-clamp.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Clamps slotted content to an exact line count. When content overflows the\nclamped height a \"More\" toggle appears inline at the truncation point.\nClicking it expands the block; clicking \"Less\" collapses it again.\n\nUses a ResizeObserver to recalculate on every container-width change.",
+          "name": "TextClamp",
+          "cssProperties": [
+            {
+              "description": "Font size",
+              "name": "--uibit-text-clamp-font-size",
+              "default": "inherit"
+            },
+            {
+              "description": "Font weight",
+              "name": "--uibit-text-clamp-font-weight",
+              "default": "inherit"
+            },
+            {
+              "description": "Text color",
+              "name": "--uibit-text-clamp-color",
+              "default": "inherit"
+            },
+            {
+              "description": "Font family",
+              "name": "--uibit-text-clamp-font-family",
+              "default": "inherit"
+            },
+            {
+              "description": "Line height (unitless recommended)",
+              "name": "--uibit-text-clamp-line-height",
+              "default": "1.5"
+            },
+            {
+              "description": "Toggle button color",
+              "name": "--uibit-text-clamp-toggle-color",
+              "default": "currentColor"
+            },
+            {
+              "description": "Toggle button font weight",
+              "name": "--uibit-text-clamp-toggle-font-weight",
+              "default": "600"
+            },
+            {
+              "description": "Toggle button text decoration",
+              "name": "--uibit-text-clamp-toggle-decoration",
+              "default": "underline"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The text content to clamp (HTML is preserved)",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "lines",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "Maximum number of lines to show when collapsed.",
+              "attribute": "lines"
+            },
+            {
+              "kind": "field",
+              "name": "_expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_overflows",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_contentEl",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_resize",
+              "privacy": "protected",
+              "default": "new ResizeController(this, { target: () => this._contentEl, callback: () => this._measure(), })"
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_measure",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_applyClamp",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_toggle",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ expanded: boolean }"
+              },
+              "description": "Fired when expanded/collapsed state changes",
+              "name": "toggle"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "lines",
+              "type": {
+                "text": "number"
+              },
+              "default": "3",
+              "description": "Maximum number of lines to show when collapsed.",
+              "fieldName": "lines"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-text-clamp",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TextClamp",
+          "declaration": {
+            "name": "TextClamp",
+            "module": "src/text-clamp.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-text-clamp",
+          "declaration": {
+            "name": "TextClamp",
+            "module": "src/text-clamp.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TextClamp",
+            "module": "src/text-clamp.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,32 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, numberAttribute } from '@angular/core';
+import '@uibit/text-clamp';
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+
+@Component({
+  selector: 'uibit-text-clamp',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(toggle)': 'toggle.emit($event)'
+  }
+})
+export class NgxTextClamp {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.lines = this.lines();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement._resize = this._resize();
+      }
+    });
+  }
+
+  readonly lines = input<number, any>(3, { transform: numberAttribute });
+  readonly _resize = input<any, any>(new ResizeController(this, { target: () => this._contentEl, callback: () => this._measure(), }));
+
+  readonly toggle = output<CustomEvent<{ expanded: boolean }>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-text-clamp': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/text-clamp');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'preact';
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-clamp': JSX.HTMLAttributes<HTMLElementClass> & {
+      lines?: number;
+      _resize?: any;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/text-clamp';
+
+export const TextClamp = component$<any>((props) => {
+  return (
+    <uibit-text-clamp {...props}>
+      <Slot />
+    </uibit-text-clamp>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-text-clamp': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      lines?: number;
+      _resize?: any;
+      onToggle?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js';
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-clamp': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              lines?: number;
+      _resize?: any;
+      "on:toggle"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,13 @@
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-text-clamp': HTMLElementClass & {
+    lines?: number;
+    _resize?: any;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import '@uibit/text-clamp';
+  import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+  
+  let {
+    lines = undefined,
+      _resize = undefined,
+      children
+  } = $props<{
+    children?: any;
+    lines?: number;
+    _resize?: any;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && lines !== undefined) {
+      elementRef.lines = lines;
+    }
+    if (elementRef && _resize !== undefined) {
+      elementRef._resize = _resize;
+    }
+  });
+  
+</script>
+
+<uibit-text-clamp bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-text-clamp>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,25 @@
+import { defineComponent, h } from 'vue';
+import type { TextClamp as HTMLElementClass } from '@uibit/text-clamp';
+import '@uibit/text-clamp';
+
+export const TextClamp = defineComponent({
+  name: 'TextClamp',
+  props: {
+    lines: { type: [String, Number, Boolean, Array, Object] as any },
+    _resize: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['toggle'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onToggle'] = (event: Event) => {
+        emit('toggle', event);
+      };
+
+      return h('uibit-text-clamp', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, TextClamp } from './text-clamp';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default, TextClamp } from './text-clamp';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,SAAS,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4ClB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    font-size: var(--uibit-text-clamp-font-size, inherit);
+    font-weight: var(--uibit-text-clamp-font-weight, inherit);
+    color: var(--uibit-text-clamp-color, inherit);
+    font-family: var(--uibit-text-clamp-font-family, inherit);
+    line-height: var(--uibit-text-clamp-line-height, var(--uibit-line-height-normal, 1.5));
+  }
+
+  /* Hide the source slot — it's only used for slotchange detection */
+  .source {
+    display: none;
+  }
+
+  .content {
+    overflow: hidden;
+  }
+
+  .content.clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .toggle {
+    display: inline;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--uibit-text-clamp-toggle-color, currentColor);
+    font-weight: var(--uibit-text-clamp-toggle-font-weight, var(--uibit-font-weight-semibold, 600));
+    cursor: pointer;
+    text-decoration: var(--uibit-text-clamp-toggle-decoration, underline);
+    text-underline-offset: 0.15em;
+  }
+
+  .toggle:focus-visible {
+    outline: 0.125rem solid var(--uibit-text-clamp-focus-color, #000000);
+    outline-offset: 0.125rem;
+    border-radius: 0.125rem;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAC"}

package/dist/text-clamp.d.ts

@@ -0,0 +1,38 @@
+import { UIBitElement, ResizeController } from '@uibit/core';
+/**
+ * Clamps slotted content to an exact line count. When content overflows the
+ * clamped height a "More" toggle appears inline at the truncation point.
+ * Clicking it expands the block; clicking "Less" collapses it again.
+ *
+ * Uses a ResizeObserver to recalculate on every container-width change.
+ *
+ * @slot - The text content to clamp (HTML is preserved)
+ *
+ * @fires {{ expanded: boolean }} toggle - Fired when expanded/collapsed state changes
+ *
+ * @cssprop [--uibit-text-clamp-font-size=inherit] - Font size
+ * @cssprop [--uibit-text-clamp-font-weight=inherit] - Font weight
+ * @cssprop [--uibit-text-clamp-color=inherit] - Text color
+ * @cssprop [--uibit-text-clamp-font-family=inherit] - Font family
+ * @cssprop [--uibit-text-clamp-line-height=1.5] - Line height (unitless recommended)
+ * @cssprop [--uibit-text-clamp-toggle-color=currentColor] - Toggle button color
+ * @cssprop [--uibit-text-clamp-toggle-font-weight=600] - Toggle button font weight
+ * @cssprop [--uibit-text-clamp-toggle-decoration=underline] - Toggle button text decoration
+ */
+export declare class TextClamp extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Maximum number of lines to show when collapsed. */
+    lines: number;
+    private _expanded;
+    private _overflows;
+    private _contentEl;
+    protected _resize: ResizeController;
+    updated(changed: Map<string, unknown>): void;
+    private _onSlotChange;
+    private _measure;
+    private _applyClamp;
+    private _toggle;
+    render(): import("lit").TemplateResult<1>;
+}
+export default TextClamp;
+//# sourceMappingURL=text-clamp.d.ts.map

package/dist/text-clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-clamp.d.ts","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI5E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,sDAAsD;IAC1B,KAAK,SAAK;IAE7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAEjB,OAAO,CAAC,UAAU,CAAe;IAEpD,SAAS,CAAC,OAAO,mBAGd;IAEH,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAGpC;IAED,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,QAAQ;IA4BhB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,OAAO;IAKf,MAAM,oCA2BL;CACF;eAEc,SAAS"}

package/dist/text-clamp.js

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, UIBitElement, ResizeController } from '@uibit/core';
+import { property, query, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Clamps slotted content to an exact line count. When content overflows the
+ * clamped height a "More" toggle appears inline at the truncation point.
+ * Clicking it expands the block; clicking "Less" collapses it again.
+ *
+ * Uses a ResizeObserver to recalculate on every container-width change.
+ *
+ * @slot - The text content to clamp (HTML is preserved)
+ *
+ * @fires {{ expanded: boolean }} toggle - Fired when expanded/collapsed state changes
+ *
+ * @cssprop [--uibit-text-clamp-font-size=inherit] - Font size
+ * @cssprop [--uibit-text-clamp-font-weight=inherit] - Font weight
+ * @cssprop [--uibit-text-clamp-color=inherit] - Text color
+ * @cssprop [--uibit-text-clamp-font-family=inherit] - Font family
+ * @cssprop [--uibit-text-clamp-line-height=1.5] - Line height (unitless recommended)
+ * @cssprop [--uibit-text-clamp-toggle-color=currentColor] - Toggle button color
+ * @cssprop [--uibit-text-clamp-toggle-font-weight=600] - Toggle button font weight
+ * @cssprop [--uibit-text-clamp-toggle-decoration=underline] - Toggle button text decoration
+ */
+let TextClamp = class TextClamp extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Maximum number of lines to show when collapsed. */
+        this.lines = 3;
+        this._expanded = false;
+        this._overflows = false;
+        this._resize = new ResizeController(this, {
+            target: () => this._contentEl,
+            callback: () => this._measure(),
+        });
+    }
+    static { this.styles = styles; }
+    updated(changed) {
+        if (changed.has('lines'))
+            this._measure();
+        if (changed.has('_expanded'))
+            this._applyClamp();
+    }
+    _onSlotChange() {
+        this._measure();
+    }
+    _measure() {
+        const el = this._contentEl;
+        if (!el)
+            return;
+        // Unconstrain to get natural scroll height
+        el.style.removeProperty('-webkit-line-clamp');
+        el.style.removeProperty('display');
+        el.style.removeProperty('-webkit-box-orient');
+        el.style.removeProperty('overflow');
+        el.classList.remove('clamped');
+        const fullH = el.scrollHeight;
+        // Apply clamp to measure clamped height
+        el.classList.add('clamped');
+        el.style.webkitLineClamp = String(this.lines);
+        const clampedH = el.getBoundingClientRect().height;
+        const overflows = fullH > Math.round(clampedH) + 1;
+        this._overflows = overflows;
+        if (!overflows || this._expanded) {
+            el.classList.remove('clamped');
+            el.style.removeProperty('-webkit-line-clamp');
+        }
+    }
+    _applyClamp() {
+        const el = this._contentEl;
+        if (!el)
+            return;
+        if (this._expanded) {
+            el.classList.remove('clamped');
+            el.style.removeProperty('-webkit-line-clamp');
+        }
+        else if (this._overflows) {
+            el.classList.add('clamped');
+            el.style.webkitLineClamp = String(this.lines);
+        }
+    }
+    _toggle() {
+        this._expanded = !this._expanded;
+        this.dispatchCustomEvent('toggle', { expanded: this._expanded });
+    }
+    render() {
+        return html `
+      <div class="content" part="content">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      ${this._overflows ? html `
+        <div class="toggle-container" part="toggle-container">
+          ${this._expanded ? html `
+            <slot name="less" @click=${this._toggle}>
+              <button
+                class="toggle"
+                part="toggle"
+                aria-expanded="true"
+              >Less</button>
+            </slot>
+          ` : html `
+            <slot name="more" @click=${this._toggle}>
+              <button
+                class="toggle"
+                part="toggle"
+                aria-expanded="false"
+              >… More</button>
+            </slot>
+          `}
+        </div>
+      ` : ''}
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], TextClamp.prototype, "lines", void 0);
+__decorate([
+    state()
+], TextClamp.prototype, "_expanded", void 0);
+__decorate([
+    state()
+], TextClamp.prototype, "_overflows", void 0);
+__decorate([
+    query('.content')
+], TextClamp.prototype, "_contentEl", void 0);
+TextClamp = __decorate([
+    customElement('uibit-text-clamp')
+], TextClamp);
+export { TextClamp };
+export default TextClamp;
+//# sourceMappingURL=text-clamp.js.map

package/dist/text-clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-clamp.js","sourceRoot":"","sources":["../src/text-clamp.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type TextClamp from './text-clamp';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-text-clamp': TextClamp;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,cAAc,CAAC;AAE1C,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,SAAS,CAAC;KACjC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@uibit/text-clamp",
+  "version": "0.1.0",
+  "description": "Clamps slotted text to an exact line count via a lines attribute. When content overflows, a More/Less toggle appears inline. A ResizeObserver recalculates overflow on every viewport resize so the clamp is always mathematically correct.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "clamp",
+    "read-more",
+    "truncate",
+    "text",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/text-clamp"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "text-clamp",
+    "title": "Text Clamp",
+    "category": "Text",
+    "tagName": "uibit-text-clamp"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}