@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-toggle-group.js

@@ -0,0 +1,273 @@
+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, queryAssignedElements, } from "lit/decorators.js";
+import "./tt-toggle.js";
+/**
+ * A row of tt-toggle that agree with each other.
+ *
+ * ---------------------------------------------------------------------
+ * `values` IS ALWAYS AN ARRAY, EVEN IN SINGLE MODE.
+ *
+ * The obvious API is `value: string` for single and `values: string[]`
+ * for multiple, which is what most libraries do. It is rejected here.
+ *
+ * A property whose TYPE depends on another property is a property you
+ * have to think about at every call site, and it makes the change event
+ * carry two shapes as well. Every consumer then needs a branch, and half
+ * of them will forget it.
+ *
+ * One shape instead: a single-select group holds an array of zero or one
+ * entries. `values[0] ?? null` is the whole cost, paid once by whoever
+ * actually wants a scalar, and `tt-change` always carries the complete
+ * new array. Same contract as tt-checkbox-group.
+ *
+ * ---------------------------------------------------------------------
+ * WHO OWNS THE SELECTION.
+ *
+ * Both. `values` comes in, and `tt-change` goes out with the whole new
+ * set. The group also keeps that new set itself (Oct 2026). It used to
+ * store nothing and wait for the page to echo `values` back, which
+ * meant a group with no listener (a pasted snippet, a generated
+ * component) started every click from the old set: `multiple` acted
+ * like single, and `allow-empty` cleared instead of selecting. A page
+ * that sets `values` still wins, the same as with a native input.
+ *
+ * But it does WRITE to its children, immediately, in its own handler,
+ * rather than waiting for the page to echo `values` back. That is the
+ * one thing worth understanding here.
+ *
+ * A tt-toggle flips itself when clicked. In single mode that leaves two
+ * pressed toggles for as long as it takes the page to respond, and if
+ * the page ignores the event it leaves them pressed forever. So the
+ * group corrects its children on the spot: the click is the child's, the
+ * ANSWER is the group's.
+ *
+ * That makes it work whether or not the page echoes the value back, and
+ * `updated()` re-applies the same result when it does, which is
+ * idempotent (applying it twice is the same as applying it once).
+ */
+let TTToggleGroup = class TTToggleGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          Off: picking one un-picks the others. A view switcher.
+          On: any number at once. Bold AND italic.
+      
+          A boolean, as on tt-accordion (Oct 2026). It was only the enum below,
+          so the word a developer learned from the accordion did nothing here.
+        */
+        this.multiple = false;
+        /** The older spelling of `multiple`; type="multiple" still works. */
+        this.type = "single";
+        this.values = [];
+        this.disabled = false;
+        /*
+          Names the group for a screen reader. Without it the toggles are
+          announced one after another with nothing saying what they belong to,
+          which for a row of three unlabelled icons is close to useless.
+        */
+        this.label = "";
+        /*
+          Joined is the default: inner corners flatten and neighbouring
+          borders collapse onto a shared edge, because that IS the shape people
+          mean by a toggle group. detached spaces them out, for a row of
+          independent tools that happen to sit together. Named for the
+          non-default state because a boolean attribute can only switch
+          something on; the old attached defaulted to true and could never be
+          turned off from HTML.
+        */
+        this.detached = false;
+        /*
+          In single mode, whether clicking the pressed item clears the
+          selection. Off by default: a view switcher with nothing selected
+          shows nothing, which is never what anyone wanted.
+        */
+        this.allowEmpty = false;
+        /** Writes a selection onto every child. Safe to call repeatedly. */
+        /*
+          The toggles THIS group disabled, so it can give back exactly those.
+      
+          A disabled group disables everything in it. It used to only ever add:
+          disable the group, enable it again, and every toggle stayed dead.
+          Re-enabling ALL of them would be wrong the other way, switching on a
+          toggle the consumer disabled on purpose. Remembering which ones the
+          group touched is right both ways.
+        */
+        this.disabledByGroup = new WeakSet();
+    }
+    handleChange(event) {
+        // Only listen to the toggles, never to something a consumer slotted
+        // in that happens to emit the same event name.
+        const toggle = event.target;
+        if (!toggle || toggle.tagName !== "TT-TOGGLE")
+            return;
+        /*
+          Stopped, and this matters. The child's tt-change and the group's
+          tt-change have DIFFERENT detail shapes, and both bubble. A page
+          listening on the group would otherwise receive two events per
+          click, one of them describing a single toggle and one describing
+          the whole set, and would have to tell them apart by inspecting the
+          detail. Stopping the child's leaves exactly one truth.
+        */
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const clicked = toggle.value;
+        const wasSelected = this.values.includes(clicked);
+        let next;
+        if (!this.multiple && this.type !== "multiple") {
+            next = wasSelected && this.allowEmpty ? [] : [clicked];
+        }
+        else {
+            next = wasSelected
+                ? this.values.filter((v) => v !== clicked)
+                : [...this.values, clicked];
+        }
+        // Correct the children first, then announce. See the class comment:
+        // the click is the child's, the answer is the group's.
+        this.applyTo(next);
+        this.values = next;
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { values: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    applyTo(values) {
+        for (const toggle of this.toggles ?? []) {
+            toggle.pressed = values.includes(toggle.value);
+            if (this.disabled && !toggle.disabled) {
+                toggle.disabled = true;
+                this.disabledByGroup.add(toggle);
+            }
+            else if (!this.disabled && this.disabledByGroup.has(toggle)) {
+                toggle.disabled = false;
+                this.disabledByGroup.delete(toggle);
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has("values") || changed.has("disabled")) {
+            this.applyTo(this.values);
+        }
+    }
+    // Children that arrive later still need the current selection, and
+    // this fires on the first render too, which is what sets the initial
+    // pressed state.
+    handleSlotChange() {
+        this.applyTo(this.values);
+    }
+    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;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .group {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      flex-wrap: wrap;
+    }
+
+    /*
+      Attached mode. The gap goes, the shared edge is collapsed with a
+      negative margin so two 1px borders do not stack into a 2px line,
+      and only the outer corners keep their radius.
+
+      z-index on hover and focus so the active item's border is drawn
+      over its neighbour's rather than under it. Without it, the ring on
+      a middle item is clipped on both sides and looks broken.
+    */
+    .group.attached {
+      gap: 0;
+      flex-wrap: nowrap;
+    }
+
+    .attached ::slotted(tt-toggle:not(:first-child)) {
+      margin-left: -1px;
+    }
+
+    /* Square everything, then give the two ends back their outer
+       corners. Setting a custom property on the slotted host, because
+       the radius itself lives inside that element shadow root and
+       ::slotted() cannot reach across that boundary. */
+    .attached ::slotted(tt-toggle) {
+      --tt-toggle-radius: 0;
+    }
+
+    .attached ::slotted(tt-toggle:first-child) {
+      --tt-toggle-radius: var(--tt-radius) 0 0 var(--tt-radius);
+    }
+
+    .attached ::slotted(tt-toggle:last-child) {
+      --tt-toggle-radius: 0 var(--tt-radius) var(--tt-radius) 0;
+    }
+
+    .attached ::slotted(tt-toggle:only-child) {
+      --tt-toggle-radius: var(--tt-radius);
+    }
+
+    .attached ::slotted(tt-toggle:hover),
+    .attached ::slotted(tt-toggle:focus-within),
+    .attached ::slotted(tt-toggle[pressed]) {
+      z-index: 1;
+    }
+  `; }
+    render() {
+        return html `
+      <div
+        class="group ${this.detached ? "" : "attached"}"
+        part="group"
+        role="group"
+        aria-label=${this.label || "Options"}
+        @tt-change=${this.handleChange}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToggleGroup.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTToggleGroup.prototype, "type", void 0);
+__decorate([
+    property({ type: Array })
+], TTToggleGroup.prototype, "values", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToggleGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTToggleGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTToggleGroup.prototype, "detached", void 0);
+__decorate([
+    queryAssignedElements({ selector: "tt-toggle" })
+], TTToggleGroup.prototype, "toggles", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "allow-empty" })
+], TTToggleGroup.prototype, "allowEmpty", void 0);
+TTToggleGroup = __decorate([
+    customElement("tt-toggle-group")
+], TTToggleGroup);
+export { TTToggleGroup };
+//# sourceMappingURL=tt-toggle-group.js.map

package/dist/tt-toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toggle-group.js","sourceRoot":"","sources":["../src/tt-toggle-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EACL,QAAQ,EACR,aAAa,EACb,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,gBAAgB,CAAC;AAIxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL;;;;;;UAME;QAC0C,aAAQ,GAAG,KAAK,CAAC;QAE7D,qEAAqE;QAC1B,SAAI,GAAoB,QAAQ,CAAC;QAEjD,WAAM,GAAa,EAAE,CAAC;QAEL,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;UAIE;QAC0B,UAAK,GAAG,EAAE,CAAC;QAEvC;;;;;;;;UAQE;QAC2B,aAAQ,GAAG,KAAK,CAAC;QAK9C;;;;UAIE;QACqD,eAAU,GAAG,KAAK,CAAC;QA+C1E,oEAAoE;QACpE;;;;;;;;UAQE;QACM,oBAAe,GAAG,IAAI,OAAO,EAAY,CAAC;IA6GpD,CAAC;IApKS,YAAY,CAAC,KAAY;QAC/B,oEAAoE;QACpE,+CAA+C;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkB,CAAC;QACxC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK,WAAW;YAAE,OAAO;QAEtD;;;;;;;UAOE;QACF,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;QAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAElD,IAAI,IAAc,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC/C,IAAI,GAAG,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC;gBAC1C,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAChC,CAAC;QAED,oEAAoE;QACpE,uDAAuD;QACvD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAcO,OAAO,CAAC,MAAgB;QAC9B,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC;YACxC,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAE/C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACtC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC9D,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,mEAAmE;IACnE,qEAAqE;IACrE,iBAAiB;IACT,gBAAgB;QACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiElB,AAjEY,CAiEX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;;;qBAGjC,IAAI,CAAC,KAAK,IAAI,SAAS;qBACvB,IAAI,CAAC,YAAY;;4BAEV,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;;AAxM2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAGlB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkC;AAEjD;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAuB;AAEL;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAOjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AAWV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AAGtC;IADP,qBAAqB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;8CACpB;AAO0B;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iDAAoB;AA3C/D,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAiNzB"}

package/dist/tt-toggle.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from "lit";
+export type ToggleSize = "small" | "medium" | "large";
+/**
+ * A button that stays down.
+ *
+ * Bold, italic, underline. Grid view or list view. A filter that is on.
+ * Anything whose state is visible in the control itself rather than
+ * somewhere else on the page.
+ *
+ * ---------------------------------------------------------------------
+ * NOT A CHECKBOX AND NOT A SWITCH, AND THE DIFFERENCE IS NOT COSMETIC.
+ *
+ *   tt-checkbox  a value being collected, confirmed later by a submit.
+ *                It has a label beside it and it lives in a form.
+ *   tt-switch    a setting that takes effect immediately. Reads as a
+ *                sentence: "Email notifications, on".
+ *   tt-toggle    a tool that is currently selected. Usually an icon,
+ *                usually in a row of siblings, and its meaning comes
+ *                from what it does to something else.
+ *
+ * They carry different ARIA too, which is the real tell: a checkbox is
+ * `aria-checked`, a toggle is `aria-pressed`. A screen reader announces
+ * "pressed" rather than "checked", and that is the correct sentence for
+ * a bold button.
+ *
+ * ---------------------------------------------------------------------
+ * IT FLIPS ITSELF, UNLESS IT IS IN A GROUP.
+ *
+ * On its own it toggles and announces, the same shape as tt-switch. That
+ * is the only sensible default for a control that has nothing
+ * coordinating it.
+ *
+ * Inside tt-toggle-group the group writes `pressed` back onto every
+ * child after any change, so the group's answer is the one that lasts.
+ * That is deliberate: single-select needs someone to un-press the
+ * previous choice, and only the group can know which one that was.
+ */
+export declare class TTToggle extends LitElement {
+    pressed: boolean;
+    disabled: boolean;
+    size: ToggleSize;
+    value: string;
+    label: string;
+    private toggle;
+    static styles: import("lit").CSSResult;
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-toggle": TTToggle;
+    }
+}
+//# sourceMappingURL=tt-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toggle.d.ts","sourceRoot":"","sources":["../src/tt-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,QAAS,SAAQ,UAAU;IACM,OAAO,UAAS;IAEhB,QAAQ,UAAS;IAElB,IAAI,EAAE,UAAU,CAAY;IAG3C,KAAK,SAAM;IAOX,KAAK,SAAM;IAEvC,OAAO,CAAC,MAAM;IAcd,MAAM,CAAC,MAAM,0BA0HX;IAIF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM;CAcP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-toggle.js

@@ -0,0 +1,232 @@
+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";
+import { ifDefined } from "lit/directives/if-defined.js";
+/**
+ * A button that stays down.
+ *
+ * Bold, italic, underline. Grid view or list view. A filter that is on.
+ * Anything whose state is visible in the control itself rather than
+ * somewhere else on the page.
+ *
+ * ---------------------------------------------------------------------
+ * NOT A CHECKBOX AND NOT A SWITCH, AND THE DIFFERENCE IS NOT COSMETIC.
+ *
+ *   tt-checkbox  a value being collected, confirmed later by a submit.
+ *                It has a label beside it and it lives in a form.
+ *   tt-switch    a setting that takes effect immediately. Reads as a
+ *                sentence: "Email notifications, on".
+ *   tt-toggle    a tool that is currently selected. Usually an icon,
+ *                usually in a row of siblings, and its meaning comes
+ *                from what it does to something else.
+ *
+ * They carry different ARIA too, which is the real tell: a checkbox is
+ * `aria-checked`, a toggle is `aria-pressed`. A screen reader announces
+ * "pressed" rather than "checked", and that is the correct sentence for
+ * a bold button.
+ *
+ * ---------------------------------------------------------------------
+ * IT FLIPS ITSELF, UNLESS IT IS IN A GROUP.
+ *
+ * On its own it toggles and announces, the same shape as tt-switch. That
+ * is the only sensible default for a control that has nothing
+ * coordinating it.
+ *
+ * Inside tt-toggle-group the group writes `pressed` back onto every
+ * child after any change, so the group's answer is the one that lasts.
+ * That is deliberate: single-select needs someone to un-press the
+ * previous choice, and only the group can know which one that was.
+ */
+let TTToggle = class TTToggle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.pressed = false;
+        this.disabled = false;
+        this.size = "medium";
+        // What this toggle is called when it reports to a group.
+        this.value = "";
+        /*
+          Required when the content is an icon and nothing else. A button whose
+          only child is an SVG has no accessible name, so a screen reader
+          announces "button" and the user is told nothing at all.
+        */
+        this.label = "";
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.pressed = !this.pressed;
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { value: this.value, pressed: this.pressed },
+            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: inline-flex;
+
+      /* So a group can lift the hovered or pressed item above its
+         neighbour when their borders are collapsed onto one edge.
+         z-index does nothing on a statically positioned element. */
+      position: relative;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--tt-space-2);
+
+      box-sizing: border-box;
+      height: var(--tt-control-md);
+      min-width: var(--tt-control-md);
+      padding: 0 var(--tt-space-3);
+
+      border: 1px solid var(--tt-border);
+
+      /* Read through a property so tt-toggle-group can flatten the inner
+         corners of a segmented row. ::slotted() cannot reach this rule,
+         it only styles the host, but a custom property set on the host
+         inherits into here. Same channel idea as tt-sidebar. */
+      border-radius: var(--tt-toggle-radius, var(--tt-radius));
+      background: transparent;
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+
+      cursor: pointer;
+      user-select: none;
+
+      /* Fast. A tool being selected should feel like a key press, not
+         like a page transition. */
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease-out),
+        border-color var(--tt-duration-fast) var(--tt-ease-out),
+        color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    /* text-sm, not text-xs, for the same reason as tt-button's small
+       size: at 12px a small toggle beside a small button or field read
+       as a different size of control rather than one row. */
+    :host([size="small"]) button {
+      height: var(--tt-control-sm);
+      min-width: var(--tt-control-sm);
+      padding: 0 var(--tt-space-3);
+      font-size: var(--tt-text-sm);
+    }
+
+    :host([size="large"]) button {
+      height: var(--tt-control-lg);
+      min-width: var(--tt-control-lg);
+      padding: 0 var(--tt-space-4);
+    }
+
+    button:hover:not(:disabled) {
+      background: var(--tt-accent);
+      color: var(--tt-accent-foreground);
+    }
+
+    /*
+      The pressed state has to be obviously different from hover, or a
+      row of toggles becomes unreadable the moment the pointer is
+      anywhere near it. Hover is the accent surface; pressed is the
+      accent surface AND a border that agrees with it, which is a
+      difference you can still see while hovering a pressed item.
+
+      The border is --tt-border-strong, not the text colour. Full
+      foreground drew a black (in dark mode, white) frame round the
+      chosen item, which read as a focus ring rather than a selection.
+      The strong border still clears 3:1 against the surface, so the
+      state does not rest on the fill alone.
+    */
+    :host([pressed]) button {
+      background: var(--tt-accent);
+      border-color: var(--tt-border-strong);
+      color: var(--tt-accent-foreground);
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    :host([pressed]) button:hover:not(:disabled) {
+      background: color-mix(
+        in oklab,
+        var(--tt-accent) 80%,
+        var(--tt-foreground)
+      );
+    }
+
+    /* The token file's one focus recipe. This control has a border, so
+       the offset is negated and the ring is drawn OVER it: a ring
+       sitting outside a bordered control reads as a second border with a
+       gap, and the control looks like it grew. */
+    button:focus-visible {
+      border-color: var(--tt-ring);
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    button:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    ::slotted(tt-icon) {
+      flex-shrink: 0;
+    }
+  `; }
+    // Focus has to be forwarded: focusing the host focuses nothing, since the
+    // control lives in the shadow root. Same as tt-slider and tt-input.
+    focus(options) {
+        this.renderRoot?.querySelector("button")?.focus(options);
+    }
+    render() {
+        return html `
+      <button
+        part="button"
+        type="button"
+        aria-pressed=${this.pressed ? "true" : "false"}
+        aria-label=${ifDefined(this.label || undefined)}
+        ?disabled=${this.disabled}
+        @click=${this.toggle}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToggle.prototype, "pressed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTToggle.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], TTToggle.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTToggle.prototype, "label", void 0);
+TTToggle = __decorate([
+    customElement("tt-toggle")
+], TTToggle);
+export { TTToggle };
+//# sourceMappingURL=tt-toggle.js.map

package/dist/tt-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toggle.js","sourceRoot":"","sources":["../src/tt-toggle.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;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACuC,YAAO,GAAG,KAAK,CAAC;QAEhB,aAAQ,GAAG,KAAK,CAAC;QAElB,SAAI,GAAe,QAAQ,CAAC;QAEvE,yDAAyD;QAC7B,UAAK,GAAG,EAAE,CAAC;QAEvC;;;;UAIE;QAC0B,UAAK,GAAG,EAAE,CAAC;IAgKzC,CAAC;IA9JS,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACpD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HlB,AA1HY,CA0HX;IAEF,0EAA0E;IAC1E,oEAAoE;IACpE,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACxE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBACjC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;oBACnC,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,MAAM;;;;KAIvB,CAAC;IACJ,CAAC;;AA7K2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAEhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAElB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA6B;AAG3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AAOX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AAf5B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+KpB"}

package/dist/tt-toolbar.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+/**
+ * The row above a list: something to filter with on the left, actions on
+ * the right, and a gap between them that collapses when the row wraps.
+ *
+ * This is the third copy of the same flex row in this repo, which is the
+ * point at which a pattern earns a component. Directory, Members and Shop
+ * each had their own, and each had drifted: different gaps, different
+ * wrap behaviour, and a hand-rolled spacer div in two of them.
+ *
+ * Pure layout. It has no idea what is in it, so a search box, a segmented
+ * control or a count all work without it knowing.
+ */
+export declare class TTToolbar extends LitElement {
+    bordered: boolean;
+    stack: boolean;
+    align: "center" | "start";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-toolbar": TTToolbar;
+    }
+}
+//# sourceMappingURL=tt-toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toolbar.d.ts","sourceRoot":"","sources":["../src/tt-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,UAAU;IAGK,QAAQ,UAAS;IAKjB,KAAK,UAAS;IAKf,KAAK,EAAE,QAAQ,GAAG,OAAO,CACzD;IAEX,MAAM,CAAC,MAAM,0BA4FX;IAEF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}