@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-stack.js

@@ -0,0 +1,158 @@
+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";
+/**
+ * Lays its children out in a column or a row, with a gap from the
+ * spacing scale.
+ *
+ * The layout every screen repeats, and the library had no general one:
+ * tt-grid is a responsive grid, tt-toolbar a row with two sides,
+ * tt-button-group joins controls into one unit. So the apps wrote their
+ * own `display: flex; gap: ...` in some 26 files, with the same gap
+ * spelled 0.75rem in one and 12px in the next. A stack can only take a
+ * step of the scale, and because the steps are tokens, a stack also
+ * follows the density modes, which a hand-written 12px never will.
+ *
+ * THE HOST IS THE FLEX CONTAINER. The shadow root holds only a slot, and
+ * a slot is display: contents, so the slotted children become flex items
+ * of the host itself. With no inner wrapper there is nothing to reach
+ * through: a consumer's own `gap` or `flex-wrap` on the element simply
+ * wins, because a rule from outside beats :host.
+ *
+ * No reverse option, on purpose. A row drawn in the opposite order to
+ * its markup is read and tabbed through backwards by keyboard and screen
+ * reader users. Reorder the markup instead.
+ */
+let TTStack = class TTStack extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          All five are reflected. Every style below is a :host([attr]) rule,
+          and a selector matches an attribute, never a property, so without
+          reflection setting one from script would change nothing on screen.
+        */
+        this.orientation = "vertical";
+        this.gap = "medium";
+        // The cross axis (align-items): across a column, up and down a row.
+        this.align = "stretch";
+        // The main axis (justify-content). "between" pushes the first and last
+        // children to the two ends, which is the header row with an action.
+        this.justify = "start";
+        // Lets a row run onto more lines instead of squeezing its children.
+        this.wrap = false;
+    }
+    static { this.styles = css `
+    /*
+      The defaults are written on :host itself, not only behind
+      attributes, so the layout is already right before the first render
+      reflects them, and a value it does not know falls back to the
+      default instead of to no layout at all.
+    */
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-4);
+      align-items: stretch;
+      justify-content: flex-start;
+
+      /* A stack is often a flex or grid item itself, and those refuse to
+         shrink below their content without this. */
+      min-width: 0;
+
+      /*
+        align is also an old HTML attribute, and Chrome still turns it
+        into text-align on ANY element, so align="center" or "end" would
+        realign every line of text inside the stack as well. In a row,
+        where align means top, middle or bottom, that is plainly wrong.
+        inherit beats that leftover rule, and still loses to a text-align
+        a consumer sets on the element.
+      */
+      text-align: inherit;
+    }
+
+    /*
+      The browser's own [hidden] rule is weaker than any author style,
+      so the display: flex above would beat it and hidden would show the
+      stack anyway.
+    */
+    :host([hidden]) {
+      display: none;
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+    }
+
+    :host([gap="none"]) {
+      gap: 0;
+    }
+    :host([gap="small"]) {
+      gap: var(--tt-space-2);
+    }
+    :host([gap="medium"]) {
+      gap: var(--tt-space-4);
+    }
+    :host([gap="large"]) {
+      gap: var(--tt-space-6);
+    }
+
+    :host([align="start"]) {
+      align-items: flex-start;
+    }
+    :host([align="center"]) {
+      align-items: center;
+    }
+    :host([align="end"]) {
+      align-items: flex-end;
+    }
+
+    :host([justify="center"]) {
+      justify-content: center;
+    }
+    :host([justify="end"]) {
+      justify-content: flex-end;
+    }
+    :host([justify="between"]) {
+      justify-content: space-between;
+    }
+
+    :host([wrap]) {
+      flex-wrap: wrap;
+    }
+
+    /* Each child is a flex item, and the same rule applies to it: a long
+       word or a wide child would otherwise push a row past its container
+       rather than shrink. */
+    ::slotted(*) {
+      min-width: 0;
+    }
+  `; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTStack.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTStack.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTStack.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTStack.prototype, "justify", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTStack.prototype, "wrap", void 0);
+TTStack = __decorate([
+    customElement("tt-stack")
+], TTStack);
+export { TTStack };
+//# sourceMappingURL=tt-stack.js.map

package/dist/tt-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-stack.js","sourceRoot":"","sources":["../src/tt-stack.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;AAO5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACL;;;;UAIE;QAEF,gBAAW,GAAqB,UAAU,CAAC;QAEA,QAAG,GAAa,QAAQ,CAAC;QAEpE,oEAAoE;QACzB,UAAK,GAAe,SAAS,CAAC;QAEzE,uEAAuE;QACvE,oEAAoE;QACzB,YAAO,GAAiB,OAAO,CAAC;QAE3E,oEAAoE;QACxB,SAAI,GAAG,KAAK,CAAC;IA4F3D,CAAC;aA1FQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFlB,AArFY,CAqFX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAvGD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACC;AAEA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA0B;AAGzB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA+B;AAI9B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAc;AAnB9C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA+GnB"}

package/dist/tt-stat.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import "./tt-card.js";
+export type StatTrend = "positive" | "negative" | "neutral";
+export declare class TTStat extends LitElement {
+    label: string;
+    value: string;
+    delta: string;
+    trend: StatTrend;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-stat": TTStat;
+    }
+}
+//# sourceMappingURL=tt-stat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-stat.d.ts","sourceRoot":"","sources":["../src/tt-stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAE5D,qBACa,MAAO,SAAQ,UAAU;IACR,KAAK,SAAM;IACX,KAAK,SAAM;IACX,KAAK,SAAM;IACX,KAAK,EAAE,SAAS,CAAa;IAEzD,MAAM,CAAC,MAAM,0BA6EX;IAEF,MAAM;CAqBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/tt-stat.js

@@ -0,0 +1,134 @@
+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 "./tt-card.js";
+let TTStat = class TTStat extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.value = "";
+        this.delta = "";
+        this.trend = "neutral";
+    }
+    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;
+    }
+
+    /*
+      A grid stretches the HOST to the tallest stat in the row, but the
+      card inside is an ordinary block and stays content-sized, so a stat
+      without a delta drew a shorter box than its neighbours. tt-card
+      already fills its own host; this makes that host fill ours.
+    */
+    tt-card {
+      height: 100%;
+    }
+
+    .stat {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+
+      /* Take the card's spare height, so a slotted visual given
+         margin-top: auto sits on the bottom edge across a row. */
+      flex: 1;
+    }
+
+    /* A step more room under the label than between value and delta:
+       the label names the number, the delta belongs to it. At one shared
+       4px gap a 24px figure sat right up against its 14px label. */
+    .label {
+      margin-bottom: var(--tt-space-1);
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-muted-foreground);
+    }
+
+    .value {
+      font-size: var(--tt-text-2xl);
+      font-weight: var(--tt-weight-bold);
+      line-height: var(--tt-leading-tight);
+      letter-spacing: -0.02em;
+
+      color: var(--tt-foreground);
+
+      /* Digits share one width, so a row of stats lines up and the
+         number doesn't jitter when it changes. */
+      font-variant-numeric: tabular-nums;
+    }
+
+    .delta {
+      /* One variable drives the colour; each trend overrides just this. */
+      --_color: var(--tt-muted-foreground);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      color: var(--_color);
+    }
+
+    .delta.positive {
+      --_color: var(--tt-success);
+    }
+
+    .delta.negative {
+      --_color: var(--tt-destructive);
+    }
+
+    /* Only applies when something is actually slotted, so an empty
+       visual area adds no spacing. */
+    ::slotted([slot="visual"]) {
+      display: block;
+      margin-top: var(--tt-space-3);
+    }
+  `; }
+    render() {
+        return html `
+      <tt-card part="card">
+        <div class="stat">
+          <div class="label" part="label">${this.label}</div>
+
+          <div class="value" part="value">${this.value}</div>
+
+          ${this.delta
+            ? html `
+                <div class="delta ${this.trend}" part="delta">
+                  ${this.delta}
+                </div>
+              `
+            : ""}
+
+          <slot name="visual"></slot>
+        </div>
+      </tt-card>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTStat.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TTStat.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], TTStat.prototype, "delta", void 0);
+__decorate([
+    property({ type: String })
+], TTStat.prototype, "trend", void 0);
+TTStat = __decorate([
+    customElement("tt-stat")
+], TTStat);
+export { TTStat };
+//# sourceMappingURL=tt-stat.js.map

package/dist/tt-stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-stat.js","sourceRoot":"","sources":["../src/tt-stat.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,cAAc,CAAC;AAKf,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QACuB,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAc,SAAS,CAAC;IAsG3D,CAAC;aApGQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ElB,AA7EY,CA6EX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;4CAG6B,IAAI,CAAC,KAAK;;4CAEV,IAAI,CAAC,KAAK;;YAE1C,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;oCACkB,IAAI,CAAC,KAAK;oBAC1B,IAAI,CAAC,KAAK;;eAEf;YACH,CAAC,CAAC,EAAE;;;;;KAKX,CAAC;IACJ,CAAC;;AAxG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAA8B;AAJ9C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA0GlB"}

package/dist/tt-switch.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+/**
+ * A switch, not a checkbox. Use it for a setting that takes effect
+ * immediately ("Email notifications on"). Use tt-checkbox for something
+ * confirmed later by a submit ("I accept the terms").
+ */
+export declare class TTSwitch extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: string;
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    labelFirst: boolean;
+    labelHidden: boolean;
+    private control;
+    private switchId;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    updated(changed: PropertyValues): void;
+    private syncFormState;
+    private toggle;
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-switch": TTSwitch;
+    }
+}
+//# sourceMappingURL=tt-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-switch.d.ts","sourceRoot":"","sources":["../src/tt-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C;;;;GAIG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAYA,IAAI,SAAM;IACzC,KAAK,SAAQ;IACb,KAAK,SAAM;IAEqB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAIN,UAAU,UAAS;IAK1E,WAAW,UAAS;IAEH,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,QAAQ,CAAwB;IAExC,IAAI,IAAI,2BAEP;IACD,IAAI,QAAQ,kBAEX;IAID,aAAa;IAIb,cAAc;IAId,iBAAiB;IAKjB,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO,EAAE,cAAc;IAM/B,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,MAAM;IAcd,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM,CAAC,MAAM,4BAyGV;IAEH,MAAM;CA6BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-switch.js

@@ -0,0 +1,254 @@
+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, query } from "lit/decorators.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+/**
+ * A switch, not a checkbox. Use it for a setting that takes effect
+ * immediately ("Email notifications on"). Use tt-checkbox for something
+ * confirmed later by a submit ("I accept the terms").
+ */
+let TTSwitch = class TTSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        /*
+          Reflected, and it has to be.
+      
+          A form-associated custom element is submitted under its name CONTENT
+          ATTRIBUTE, not its JS property. Without reflect, setting .name = "x"
+          from script leaves the attribute absent and the field vanishes from
+          FormData with no error anywhere. It only appeared to work because
+          every call site so far wrote name="x" in markup, which sets the
+          attribute directly.
+        */
+        this.name = "";
+        this.value = "on";
+        this.label = "";
+        this.checked = false;
+        this.disabled = false;
+        // Label on the left rather than the right. Settings lists usually read
+        // better with the control aligned down the right edge.
+        this.labelFirst = false;
+        // Named for a screen reader, invisible on screen. Same contract as the
+        // other form controls. Without a label a switch is just "switch, off".
+        this.labelHidden = false;
+        this.switchId = `tt-switch-${++uid}`;
+    }
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    // Exposed so tt-form (and any consumer) can validate without reaching
+    // into internals. Form-associated elements do not get these for free.
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    updated(changed) {
+        if (changed.has("checked") || changed.has("value")) {
+            this.syncFormState();
+        }
+    }
+    syncFormState() {
+        // Off submits nothing at all, like an unchecked checkbox.
+        this.internals.setFormValue(this.checked ? this.value : null);
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    focus(options) {
+        this.control?.focus(options);
+    }
+    static { this.styles = [srOnly, 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-block;
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    :host([disabled]) {
+      opacity: var(--tt-opacity-disabled);
+    }
+
+    .row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-3);
+    }
+
+    .row.label-first {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    /*
+      A real button with role="switch". Native HTML has no switch element,
+      so the role plus aria-checked is what tells a screen reader what
+      this is. A styled div would announce nothing.
+    */
+    button {
+      position: relative;
+      flex: 0 0 auto;
+
+      width: 36px;
+      height: 20px;
+      padding: 0;
+
+      border: none;
+      border-radius: var(--tt-radius-full);
+
+      background: var(--tt-input);
+
+      cursor: pointer;
+
+      transition: background var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+    }
+
+    button[aria-checked="true"] {
+      background: var(--tt-primary);
+    }
+
+    button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+
+      width: 16px;
+      height: 16px;
+
+      /*
+        Off: white in BOTH modes, the one constant that contrasts with the
+        track in both. It used to be --tt-field, the field surface, which
+        is dark in dark mode: a dark thumb on a dark track, so every switch
+        that was off looked like an empty slot. On: the text colour of the
+        fill, the same pair a primary button uses, so it reads on a dark
+        fill in light mode and a light one in dark mode or any brand.
+      */
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-white);
+      box-shadow: var(--tt-elevation-1);
+
+      transition:
+        transform var(--tt-duration-normal) var(--tt-ease),
+        background var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    button[aria-checked="true"] .thumb {
+      transform: translateX(16px);
+      background: var(--tt-primary-foreground);
+    }
+
+    .text {
+      font-size: var(--tt-text-sm);
+      color: var(--tt-foreground);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    :host([disabled]) .text {
+      cursor: not-allowed;
+    }
+
+  `]; }
+    render() {
+        return html `
+      <div class="row ${this.labelFirst ? "label-first" : ""}">
+        <button
+          part="control"
+          id=${this.switchId}
+          type="button"
+          role="switch"
+          aria-checked=${this.checked ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this.toggle}
+        >
+          <span class="thumb"></span>
+        </button>
+
+        ${this.label
+            ? html `
+              <label
+                class="text ${this.labelHidden ? "sr-only" : ""}"
+                for=${this.switchId}
+                part="label"
+              >
+                ${this.label}
+              </label>
+            `
+            : ""}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTSwitch.prototype, "name", void 0);
+__decorate([
+    property()
+], TTSwitch.prototype, "value", void 0);
+__decorate([
+    property()
+], TTSwitch.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-first" })
+], TTSwitch.prototype, "labelFirst", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTSwitch.prototype, "labelHidden", void 0);
+__decorate([
+    query("button")
+], TTSwitch.prototype, "control", void 0);
+TTSwitch = __decorate([
+    customElement("tt-switch")
+], TTSwitch);
+export { TTSwitch };
+//# sourceMappingURL=tt-switch.js.map

package/dist/tt-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-switch.js","sourceRoot":"","sources":["../src/tt-switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,IAAI,GAAG,GAAG,CAAC,CAAC;AAEZ;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGG,cAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAE3C;;;;;;;;;UASE;QACyC,SAAI,GAAG,EAAE,CAAC;QACzC,UAAK,GAAG,IAAI,CAAC;QACb,UAAK,GAAG,EAAE,CAAC;QAEqB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QAE7D,uEAAuE;QACvE,uDAAuD;QACA,eAAU,GAAG,KAAK,CAAC;QAE1E,uEAAuE;QACvE,uEAAuE;QAEvE,gBAAW,GAAG,KAAK,CAAC;QAIZ,aAAQ,GAAG,aAAa,EAAE,GAAG,EAAE,CAAC;IAqM1C,CAAC;aArOQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAkC7B,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IACD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,sEAAsE;IACtE,sEAAsE;IACtE,aAAa;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,wBAAwB,CAAC,KAAa;QACpC,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IACtC,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAEO,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,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACpD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC;aAEM,WAAM,GAAG,CAAC,MAAM,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyG3B,CAAC,AAzGW,CAyGV;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;;;eAG7C,IAAI,CAAC,QAAQ;;;yBAGH,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,MAAM;;;;;UAKpB,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;8BAEc,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;sBACzC,IAAI,CAAC,QAAQ;;;kBAGjB,IAAI,CAAC,KAAK;;aAEf;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAtN0C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAW;AACzC;IAAX,QAAQ,EAAE;uCAAc;AACb;IAAX,QAAQ,EAAE;uCAAY;AAEqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAIN;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;4CAAoB;AAK1E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAClD;AAEK;IAAxB,KAAK,CAAC,QAAQ,CAAC;yCAAqC;AA/B1C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsOpB"}

package/dist/tt-switcher.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-button.js";
+import "./tt-code-block.js";
+export interface SwitcherItem {
+    title: string;
+    description?: string;
+    code?: string;
+    language?: string;
+}
+export declare class TTSwitcher extends LitElement {
+    items: SwitcherItem[];
+    activeIndex: number;
+    updated(changed: PropertyValues): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-switcher": TTSwitcher;
+    }
+}
+//# sourceMappingURL=tt-switcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-switcher.d.ts","sourceRoot":"","sources":["../src/tt-switcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,UAAW,SAAQ,UAAU;IAExC,KAAK,EAAE,YAAY,EAAE,CAAM;IAG3B,WAAW,SAAK;IAIhB,OAAO,CAAC,OAAO,EAAE,cAAc;IAU/B,MAAM,CAAC,MAAM,0BAsHX;IAEF,MAAM;CAmDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}