@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-avatar.js

@@ -0,0 +1,169 @@
+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 { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+/**
+ * Image with an initials fallback. The fallback is the entire point:
+ * logos and profile photos fail to load constantly, and a broken image
+ * icon is the difference between a product that looks maintained and one
+ * that does not.
+ */
+let TTAvatar = class TTAvatar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.src = "";
+        // Used for the initials and for the alt text.
+        this.name = "";
+        this.size = "medium";
+        this.square = false;
+        this.failed = false;
+    }
+    // Reset the failure flag when a new src arrives, or a broken image
+    // would poison every later one.
+    updated(changed) {
+        if (changed.has("src"))
+            this.failed = false;
+    }
+    /*
+      First letters of the first and last words: "Adriatik Logistics" -> AL,
+      "Ana" -> A. Two letters is the most that fits legibly at small sizes.
+    */
+    get initials() {
+        const words = this.name.trim().split(/\s+/).filter(Boolean);
+        if (words.length === 0)
+            return "?";
+        const first = words[0][0];
+        const last = words.length > 1 ? words[words.length - 1][0] : "";
+        return (first + last).toUpperCase();
+    }
+    /*
+      A stable colour per name, so the same company is always the same
+      shade. Hashing the string means no state and no lookup table, and it
+      stays consistent across reloads and machines.
+    */
+    get tone() {
+        let hash = 0;
+        for (const char of this.name) {
+            hash = (hash * 31 + char.charCodeAt(0)) % 360;
+        }
+        return hash;
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: inline-flex;
+      flex: 0 0 auto;
+
+      --_size: 40px;
+      --_text: var(--tt-text-sm);
+    }
+
+    :host([size="small"]) {
+      --_size: 28px;
+      --_text: var(--tt-text-xs);
+    }
+
+    :host([size="large"]) {
+      --_size: 64px;
+      --_text: var(--tt-text-lg);
+    }
+
+    .avatar {
+      position: relative;
+      overflow: hidden;
+
+      width: var(--_size);
+      height: var(--_size);
+
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-muted);
+    }
+
+    :host([square]) .avatar {
+      border-radius: var(--tt-radius);
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .initials {
+      display: grid;
+      place-content: center;
+
+      width: 100%;
+      height: 100%;
+
+      /* oklch from a hashed hue: consistent lightness and chroma across
+         every name, so no avatar is unreadably dark or washed out. */
+      background: oklch(0.72 0.11 var(--_hue));
+      color: oklch(0.25 0.06 var(--_hue));
+
+      font-size: var(--_text);
+      font-weight: var(--tt-weight-semibold);
+      letter-spacing: 0.02em;
+      user-select: none;
+    }
+  `; }
+    render() {
+        const showImage = this.src && !this.failed;
+        return html `
+      <div class="avatar" part="avatar">
+        ${showImage
+            ? html `
+              <img
+                part="image"
+                src=${this.src}
+                alt=${this.name}
+                loading="lazy"
+                decoding="async"
+                @error=${() => (this.failed = true)}
+              />
+            `
+            : html `
+              <div
+                class="initials"
+                part="initials"
+                style=${`--_hue:${this.tone}`}
+                role="img"
+                aria-label=${this.name || "Unknown"}
+              >
+                ${this.initials}
+              </div>
+            `}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTAvatar.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], TTAvatar.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTAvatar.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTAvatar.prototype, "square", void 0);
+__decorate([
+    state()
+], TTAvatar.prototype, "failed", void 0);
+TTAvatar = __decorate([
+    customElement("tt-avatar")
+], TTAvatar);
+export { TTAvatar };
+//# sourceMappingURL=tt-avatar.js.map

package/dist/tt-avatar.js.map

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

package/dist/tt-badge.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+export type BadgeVariant = "neutral" | "success" | "warning" | "danger";
+export type BadgeSize = "small" | "medium";
+/**
+ * A small status label. Presentational only: it displays state, it never
+ * owns it.
+ *
+ * THREE THINGS THAT WERE WRONG AND ARE WORTH KNOWING.
+ *
+ * line-height was 1.5. On a pill that is not a paragraph, an inherited
+ * body line-height adds invisible space above and below the text, so the
+ * badge came out taller than it looked and sat off-centre next to a name.
+ * A pill sets line-height: 1 and gets its height from padding, which is
+ * the only way the height is predictable.
+ *
+ * neutral was --tt-muted-foreground mixed 14% into transparent, which is
+ * a grey wash of a grey. Neutral is the most common variant and it looked
+ * like a rendering mistake. It now uses the real muted surface.
+ *
+ * white-space: nowrap with no escape meant a long label pushed its way
+ * out of whatever contained it. It still refuses to wrap, because a badge
+ * that wraps stops being a badge, but it now truncates instead of
+ * overflowing.
+ */
+export declare class TTBadge extends LitElement {
+    variant: BadgeVariant;
+    size: BadgeSize;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-badge": TTBadge;
+    }
+}
+//# sourceMappingURL=tt-badge.d.ts.map

package/dist/tt-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-badge.d.ts","sourceRoot":"","sources":["../src/tt-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACM,OAAO,EAAE,YAAY,CAAa;IAElC,IAAI,EAAE,SAAS,CAAY;IAEtE,MAAM,CAAC,MAAM,0BAgFX;IAEF,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-badge.js

@@ -0,0 +1,135 @@
+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 { LitElement, html, css } from "lit";
+import { property, customElement } from "lit/decorators.js";
+/**
+ * A small status label. Presentational only: it displays state, it never
+ * owns it.
+ *
+ * THREE THINGS THAT WERE WRONG AND ARE WORTH KNOWING.
+ *
+ * line-height was 1.5. On a pill that is not a paragraph, an inherited
+ * body line-height adds invisible space above and below the text, so the
+ * badge came out taller than it looked and sat off-centre next to a name.
+ * A pill sets line-height: 1 and gets its height from padding, which is
+ * the only way the height is predictable.
+ *
+ * neutral was --tt-muted-foreground mixed 14% into transparent, which is
+ * a grey wash of a grey. Neutral is the most common variant and it looked
+ * like a rendering mistake. It now uses the real muted surface.
+ *
+ * white-space: nowrap with no escape meant a long label pushed its way
+ * out of whatever contained it. It still refuses to wrap, because a badge
+ * that wraps stops being a badge, but it now truncates instead of
+ * overflowing.
+ */
+let TTBadge = class TTBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "neutral";
+        this.size = "medium";
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: inline-flex;
+      /* So a badge in a tight row shrinks and truncates rather than
+         forcing its container wider. */
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .badge {
+      --_color: var(--tt-muted-foreground);
+      --_surface: color-mix(in srgb, var(--_color) 13%, transparent);
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-1);
+
+      min-width: 0;
+      max-width: 100%;
+
+      padding: 4px var(--tt-space-2);
+      border-radius: var(--tt-radius-full);
+
+      background: var(--_surface);
+      color: var(--_color);
+
+      font-family: var(--tt-font-sans);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      letter-spacing: 0.005em;
+
+      /* 1, not the body leading. See the note above: a pill gets its
+         height from padding, or the height is unpredictable. */
+      line-height: 1;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    :host([size="small"]) .badge {
+      padding: 3px 7px;
+      font-size: 0.6875rem;
+    }
+
+    /*
+      Neutral gets a real surface rather than a mix of grey into nothing.
+      It is the default and by far the most used, so it has to look
+      deliberate rather than washed out.
+    */
+    .neutral {
+      --_surface: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+    }
+
+    .success {
+      --_color: var(--tt-success);
+    }
+    .warning {
+      --_color: var(--tt-warning);
+    }
+    .danger {
+      --_color: var(--tt-destructive);
+    }
+
+    /* An icon inside a badge sizes to the badge, not to the 16px default,
+       because --tt-icon-size inherits through the boundary. */
+    :host {
+      --tt-icon-size: 12px;
+    }
+
+    ::slotted(tt-icon) {
+      flex: 0 0 auto;
+    }
+  `; }
+    render() {
+        return html `
+      <span class="badge ${this.variant}" part="badge">
+        <slot></slot>
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTBadge.prototype, "size", void 0);
+TTBadge = __decorate([
+    customElement("tt-badge")
+], TTBadge);
+export { TTBadge };
+//# sourceMappingURL=tt-badge.js.map

package/dist/tt-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-badge.js","sourceRoot":"","sources":["../src/tt-badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAK5D;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACsC,YAAO,GAAiB,SAAS,CAAC;QAElC,SAAI,GAAc,QAAQ,CAAC;IA2FxE,CAAC;aAzFQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFlB,AAhFY,CAgFX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,OAAO;;;KAGlC,CAAC;IACJ,CAAC;;AA5F0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAmC;AAElC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA4B;AAH3D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8FnB"}

package/dist/tt-breadcrumbs.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+export interface Crumb {
+    label: string;
+    href?: string;
+}
+/**
+ * Trail showing where the current page sits. Emits a navigation event
+ * rather than following links itself, so it works with a client router,
+ * a server one, or neither.
+ */
+export declare class TTBreadcrumbs extends LitElement {
+    items: Crumb[];
+    private navigate;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-breadcrumbs": TTBreadcrumbs;
+    }
+}
+//# sourceMappingURL=tt-breadcrumbs.d.ts.map

package/dist/tt-breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-breadcrumbs.d.ts","sourceRoot":"","sources":["../src/tt-breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,KAAK,EAAE,KAAK,EAAE,CAAM;IAE/C,OAAO,CAAC,QAAQ;IAkBhB,MAAM,CAAC,MAAM,0BA2DX;IAEF,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/tt-breadcrumbs.js

@@ -0,0 +1,144 @@
+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 { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { safeUrl } from "./safe-url.js";
+/**
+ * Trail showing where the current page sits. Emits a navigation event
+ * rather than following links itself, so it works with a client router,
+ * a server one, or neither.
+ */
+let TTBreadcrumbs = class TTBreadcrumbs extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    navigate(crumb, event) {
+        if (!crumb.href)
+            return;
+        // Let modified clicks through: ctrl, cmd and middle-click should open
+        // a new tab, which is what the browser already does with a real href.
+        if (event.metaKey || event.ctrlKey || event.shiftKey)
+            return;
+        event.preventDefault();
+        this.dispatchEvent(new CustomEvent("tt-navigate", {
+            detail: { href: crumb.href, label: crumb.label },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    ol {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: var(--tt-space-2);
+
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+      min-width: 0;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      overflow-wrap: anywhere;
+    }
+
+    a:hover {
+      color: var(--tt-foreground);
+      text-decoration: underline;
+    }
+
+    a:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    .current {
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-medium);
+    }
+
+    .sep {
+      color: var(--tt-border);
+      user-select: none;
+    }
+  `; }
+    render() {
+        return html `
+      <nav aria-label="Breadcrumb" part="nav">
+        <ol part="list">
+          ${this.items.map((crumb, index) => {
+            const isLast = index === this.items.length - 1;
+            const href = crumb.href ? safeUrl(crumb.href) : null;
+            return html `
+              <li>
+                ${index > 0
+                ? html `<span class="sep" aria-hidden="true">/</span>`
+                : ""}
+
+                ${isLast || !href
+                ? html `
+                      <!-- aria-current tells a screen reader which one is
+                           the page you are actually on. Only the LAST: a
+                           middle crumb with no link is just a label, and
+                           marking it too announced two current pages. -->
+                      <span
+                        class="current"
+                        aria-current=${ifDefined(isLast ? "page" : undefined)}
+                      >
+                        ${crumb.label}
+                      </span>
+                    `
+                : html `
+                      <a
+                        href=${href}
+                        @click=${(e) => this.navigate(crumb, e)}
+                      >
+                        ${crumb.label}
+                      </a>
+                    `}
+              </li>
+            `;
+        })}
+        </ol>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTBreadcrumbs.prototype, "items", void 0);
+TTBreadcrumbs = __decorate([
+    customElement("tt-breadcrumbs")
+], TTBreadcrumbs);
+export { TTBreadcrumbs };
+//# sourceMappingURL=tt-breadcrumbs.js.map

package/dist/tt-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-breadcrumbs.js","sourceRoot":"","sources":["../src/tt-breadcrumbs.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQxC;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACsB,UAAK,GAAY,EAAE,CAAC;IA2HjD,CAAC;IAzHS,QAAQ,CAAC,KAAY,EAAE,KAAiB;QAC9C,IAAI,CAAC,KAAK,CAAC,IAAI;YAAE,OAAO;QAExB,sEAAsE;QACtE,sEAAsE;QACtE,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ;YAAE,OAAO;QAE7D,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;YAChD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DlB,AA3DY,CA2DX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAErD,OAAO,IAAI,CAAA;;kBAEL,KAAK,GAAG,CAAC;gBACT,CAAC,CAAC,IAAI,CAAA,+CAA+C;gBACrD,CAAC,CAAC,EAAE;;kBAEJ,MAAM,IAAI,CAAC,IAAI;gBACf,CAAC,CAAC,IAAI,CAAA;;;;;;;uCAOe,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;;0BAEnD,KAAK,CAAC,KAAK;;qBAEhB;gBACH,CAAC,CAAC,IAAI,CAAA;;+BAEO,IAAI;iCACF,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;;0BAEjD,KAAK,CAAC,KAAK;;qBAEhB;;aAER,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;;AA1H0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAqB;AADpC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA4HzB"}

package/dist/tt-button-group.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * Attaches controls into one unit: the corners where they meet flatten,
+ * and their borders collapse onto a single shared edge.
+ *
+ * Use it when the buttons are alternatives to each other, or steps in one
+ * decision. Do NOT use it as a way to save space between unrelated
+ * actions: joining "Reload" to "Checkout" tells the reader they belong
+ * together, and they do not. A plain flex row with a gap is right for
+ * those, which is what tt-toolbar already does.
+ *
+ * HOW IT REACHES INSIDE ITS CHILDREN. Each control's radius lives on an
+ * element in its own shadow root, and ::slotted() only ever matches the
+ * host, never anything within it. So a group cannot restyle a button's
+ * corners directly. What it can do is set a CUSTOM PROPERTY on the host,
+ * because custom properties inherit through the shadow boundary, and each
+ * groupable control reads `--tt-group-radius` for its own radius. The
+ * group sets that per position, and the child applies it.
+ *
+ * Works with tt-button, tt-dropdown-menu, tt-select and tt-input.
+ */
+export declare class TTButtonGroup extends LitElement {
+    orientation: "horizontal" | "vertical";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-button-group": TTButtonGroup;
+    }
+}
+//# sourceMappingURL=tt-button-group.d.ts.map

package/dist/tt-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-button-group.d.ts","sourceRoot":"","sources":["../src/tt-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD,MAAM,CAAC,MAAM,0BAkFX;IAEF,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}