@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-chart.js

@@ -0,0 +1,332 @@
+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, query } from "lit/decorators.js";
+import { Chart, registerables } from "chart.js";
+import { srOnly } from "./sr-only.js";
+// Registered once for the module, not per instance.
+Chart.register(...registerables);
+let TTChart = class TTChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = "bar";
+        this.labels = [];
+        this.series = [];
+        this.legend = false;
+        this.stacked = false;
+        // Chart.js draws to a canvas, which is one opaque box to a screen
+        // reader. This is the only description it will ever get.
+        this.label = "";
+        /*
+          Frames spent waiting for the design tokens to become readable. Bounded
+          so a genuinely missing stylesheet degrades to a drawn chart rather
+          than an empty box that retries forever.
+        */
+        this.waited = 0;
+    }
+    token(name) {
+        return getComputedStyle(this).getPropertyValue(name).trim();
+    }
+    get palette() {
+        return [
+            this.token("--tt-chart-1"),
+            this.token("--tt-chart-2"),
+            this.token("--tt-chart-3"),
+            this.token("--tt-chart-4"),
+            this.token("--tt-chart-5"),
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Watch the dark class and the theme preset on <html> and repaint.
+        // Canvas will not restyle itself the way inherited custom properties
+        // would, so a theme switch left the chart in the old colours.
+        this.themeObserver = new MutationObserver(() => this.rebuild());
+        this.themeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class", "data-theme"],
+        });
+        /*
+          Reconnected after a move: drag and drop, or reparenting into a modal.
+          disconnectedCallback destroyed the chart, and firstUpdated, which
+          built it, only ever runs once per element. Without this the canvas
+          stays blank for the rest of the element's life. hasUpdated is false
+          on the very first connect, which firstUpdated already covers.
+        */
+        if (this.hasUpdated) {
+            this.rebuild();
+            this.observeSize();
+        }
+    }
+    disconnectedCallback() {
+        this.themeObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+        // Chart.js holds listeners and an animation loop. Without destroy()
+        // every navigation leaks one chart.
+        this.chart?.destroy();
+        this.chart = undefined;
+        super.disconnectedCallback();
+    }
+    /*
+      Size only. The first build happens in updated(), which runs right
+      after this in the same cycle and already sees every property as
+      changed. Building here as well created a chart and destroyed it again
+      on every mount.
+    */
+    firstUpdated() {
+        this.observeSize();
+    }
+    // Chart.js measures its container. Inside a shadow root, inside flex
+    // or grid, that measurement is often wrong on first paint, so drive
+    // resizing explicitly instead of trusting responsive: true.
+    observeSize() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => this.chart?.resize());
+        this.resizeObserver.observe(this);
+    }
+    updated(changed) {
+        if (changed.has("type") ||
+            changed.has("labels") ||
+            changed.has("series") ||
+            changed.has("legend") ||
+            changed.has("stacked")) {
+            this.rebuild();
+        }
+    }
+    rebuild() {
+        // Also reached from a pending animation frame. A chart built after the
+        // element left the page is never destroyed: disconnectedCallback has
+        // already run, so its Chart.js listeners and animation loop leak.
+        if (!this.canvas || !this.isConnected)
+            return;
+        const palette = this.palette;
+        /*
+          DO NOT PAINT BEFORE THE TOKENS RESOLVE.
+    
+          A canvas is pixels. Whatever colour it is given is baked in, and it
+          will not restyle itself when a stylesheet arrives later the way
+          inherited custom properties would. Chart.js also substitutes its own
+          blue-red-orange defaults for any colour it is handed as an empty
+          string, so building early does not leave a chart waiting to be
+          corrected, it leaves a confidently wrong one.
+    
+          And a stylesheet really can arrive after the first paint: a dev
+          server injects CSS at runtime, and a late <link> does the same in
+          production. So wait a frame and look again.
+    
+          This is what made every chart render in Chart.js blue, and what made
+          a doughnut come out in one flat colour: its per-slice array of empty
+          strings is not a value Chart.js substitutes a palette for.
+        */
+        if (!palette[0] && this.waited < 30) {
+            this.waited += 1;
+            requestAnimationFrame(() => this.rebuild());
+            return;
+        }
+        this.chart?.destroy();
+        const grid = this.token("--tt-border");
+        const text = this.token("--tt-muted-foreground");
+        const surface = this.token("--tt-popover");
+        const surfaceText = this.token("--tt-popover-foreground");
+        // What a pie's slices are cut apart against. The card, not the
+        // popover: this is the surface the chart SITS on, not the one its
+        // tooltip is drawn on, and the two only happen to match today.
+        const sliceGap = this.token("--tt-card");
+        /*
+          The typeface, resolved the same way as the colours. Chart.js draws
+          its own text in Helvetica unless told otherwise, so every axis label
+          and tooltip was in a different face from the page around it. The
+          size stays a plain 12, the --tt-text-xs size: a canvas wants pixels
+          and the token is in rem.
+        */
+        const font = {
+            family: this.token("--tt-font-sans") || undefined,
+            size: 12,
+        };
+        /*
+          WHICH AXIS THE PALETTE RUNS ALONG depends on the chart type, and
+          getting it wrong is why a pie used to come out in one flat colour.
+    
+          A line or a bar compares SERIES, so one colour per dataset is right
+          and every point in that dataset shares it. A pie, doughnut or polar
+          area has a single dataset whose SLICES are the things being
+          compared, so the colour has to vary per data point. Indexing by the
+          dataset there gives every slice palette[0] and the chart stops
+          saying anything at all.
+        */
+        const sliced = this.type === "pie" ||
+            this.type === "doughnut" ||
+            this.type === "polarArea";
+        const config = {
+            type: this.type,
+            data: {
+                labels: this.labels,
+                datasets: this.series.map((s, i) => ({
+                    label: s.label,
+                    data: s.data,
+                    backgroundColor: sliced
+                        ? s.data.map((_, j) => palette[j % palette.length])
+                        : palette[i % palette.length],
+                    /*
+                      Slices are separated by the gap between them, so their border
+                      is the surface behind the chart rather than their own fill.
+                      Chart.js defaults this to white, which draws five white hairs
+                      across a dark theme.
+                    */
+                    borderColor: sliced ? sliceGap : palette[i % palette.length],
+                    borderWidth: 2,
+                    tension: 0.3,
+                    pointRadius: 3,
+                    borderRadius: 4,
+                })),
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                /*
+                  "index" means "everything at this x", which is what you want on
+                  a bar or a line and meaningless on a pie, where there is no x.
+                  A slice is found by pointing at it.
+                */
+                interaction: sliced
+                    ? { intersect: true, mode: "nearest" }
+                    : { intersect: false, mode: "index" },
+                plugins: {
+                    legend: {
+                        display: this.legend,
+                        labels: { color: text, boxWidth: 12, boxHeight: 12, font },
+                    },
+                    tooltip: {
+                        backgroundColor: surface,
+                        titleColor: surfaceText,
+                        bodyColor: surfaceText,
+                        borderColor: grid,
+                        borderWidth: 1,
+                        padding: 10,
+                        titleFont: { ...font, weight: "bold" },
+                        bodyFont: font,
+                        displayColors: true,
+                    },
+                },
+                /*
+                  No scales on a pie. It has no axes, and Chart.js draws whatever
+                  scales it is handed, so passing these unconditionally ruled a
+                  doughnut with a 0-to-1 y-axis and an x-axis underneath it.
+                */
+                scales: sliced
+                    ? {}
+                    : {
+                        x: {
+                            stacked: this.stacked,
+                            grid: { display: false },
+                            ticks: { color: text, font },
+                            border: { color: grid },
+                        },
+                        y: {
+                            stacked: this.stacked,
+                            beginAtZero: true,
+                            grid: { color: grid },
+                            ticks: { color: text, font },
+                            border: { display: false },
+                        },
+                    },
+            },
+        };
+        this.chart = new Chart(this.canvas, config);
+    }
+    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: block;
+      width: 100%;
+      height: 280px;
+    }
+
+    /* Chart.js sizes the canvas from this box, so it needs real
+       dimensions rather than being sized by its own content. */
+    .wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    canvas {
+      display: block;
+    }
+  `,
+    ]; }
+    render() {
+        return html `
+      <div class="wrap" part="wrap">
+        <!-- Never an empty name: role="img" with no name is an image a
+             screen reader announces as nothing. Same fallback idea as
+             tt-sparkline's "Trend". -->
+        <canvas
+          part="canvas"
+          role="img"
+          aria-label=${this.label || "Chart"}
+        ></canvas>
+      </div>
+
+      <!-- sr-only on a wrapper, not on the table: a table ignores
+           width: 1px and overflow: hidden and grows to fit its cells,
+           so a "hidden" table stuck out and scrolled the page sideways. -->
+      <div class="sr-only">
+        <table>
+          <caption>${this.label || "Chart data"}</caption>
+          <thead>
+            <tr>
+              <th>Label</th>
+              ${this.series.map((s) => html `<th>${s.label}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.labels.map((label, i) => html `
+                <tr>
+                  <th>${label}</th>
+                  ${this.series.map((s) => html `<td>${s.data[i]}</td>`)}
+                </tr>
+              `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTChart.prototype, "type", void 0);
+__decorate([
+    property({ type: Array })
+], TTChart.prototype, "labels", void 0);
+__decorate([
+    property({ type: Array })
+], TTChart.prototype, "series", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTChart.prototype, "legend", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTChart.prototype, "stacked", void 0);
+__decorate([
+    property({ type: String })
+], TTChart.prototype, "label", void 0);
+__decorate([
+    query("canvas")
+], TTChart.prototype, "canvas", void 0);
+TTChart = __decorate([
+    customElement("tt-chart")
+], TTChart);
+export { TTChart };
+//# sourceMappingURL=tt-chart.js.map

package/dist/tt-chart.js.map

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

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

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+import "./tt-checkbox.js";
+/** The same shape as tt-radio-group's and tt-select's options. */
+export interface CheckboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/** A plain string is shorthand for an option whose label is its value. */
+export type CheckboxGroupOption = string | CheckboxOption;
+export declare class TTCheckboxGroup extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    label: string;
+    labelHidden: boolean;
+    options: CheckboxGroupOption[];
+    values: string[];
+    disabled: boolean;
+    error: string;
+    orientation: "horizontal" | "vertical";
+    private groupId;
+    get form(): HTMLFormElement | null;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    updated(changed: PropertyValues): void;
+    private syncFormState;
+    private toggle;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-checkbox-group": TTCheckboxGroup;
+    }
+}
+//# sourceMappingURL=tt-checkbox-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-checkbox-group.d.ts","sourceRoot":"","sources":["../src/tt-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,kBAAkB,CAAC;AAE1B,kEAAkE;AAClE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,0EAA0E;AAC1E,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,cAAc,CAAC;AAO1D,qBACa,eAAgB,SAAQ,UAAU;IAI7C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAYA,IAAI,SAAM;IAIzB,KAAK,SAAM;IAKvC,WAAW,UAAS;IAKO,OAAO,EAAE,mBAAmB,EAAE,CAAM;IACpC,MAAM,EAAE,MAAM,EAAE,CAAM;IAKL,QAAQ,UAAS;IAIjC,KAAK,SAAM;IAOvC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAc;IAEpD,OAAO,CAAC,OAAO,CAAgC;IAE/C,IAAI,IAAI,2BAEP;IAED,iBAAiB;IAKjB,iBAAiB;IAajB,OAAO,CAAC,OAAO,EAAE,cAAc;IAW/B,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,MAAM;IA8Bd,MAAM,CAAC,MAAM,4BA2CV;IAEH,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/tt-checkbox-group.js

@@ -0,0 +1,243 @@
+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";
+import { live } from "lit/directives/live.js";
+import { srOnly } from "./sr-only.js";
+import "./tt-checkbox.js";
+const toOption = (option) => typeof option === "string" ? { value: option, label: option } : option;
+let uid = 0;
+let TTCheckboxGroup = class TTCheckboxGroup 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 = "";
+        // The group's name, visible above it. `label`, as on every other form
+        // control (it was `heading` here and on tt-radio-group only).
+        this.label = "";
+        // Hides the label but keeps it as the group's name, as on every other
+        // form control.
+        this.labelHidden = false;
+        // Strings or { value, label, disabled }. Objects are what tt-radio-group
+        // and tt-select take, so a list built for one works here; strings stay
+        // as the shorthand they always were.
+        this.options = [];
+        this.values = [];
+        // Reflected like every other control's. Disables each box rather than
+        // fading the group: a tt-checkbox fades itself, and fading both would
+        // multiply the two opacities.
+        this.disabled = false;
+        // A message about the group as a whole ("Pick at least one"), shown
+        // under it and tied to it, as on tt-radio-group.
+        this.error = "";
+        // Which way the options run. `orientation`, as on tt-button-group and
+        // the cards (it was `direction: row | column` here only). Vertical by
+        // default since Oct 2026, the same as tt-radio-group: four of the five
+        // uses in this repo were already overriding a horizontal default.
+        this.orientation = "vertical";
+        this.groupId = `tt-checkbox-group-${++uid}`;
+    }
+    // Form-associated as a GROUP. The inner checkboxes carry no name, so
+    // without this the selection never reaches FormData and every page has
+    // to mirror it in state. Read it back with data.getAll(name).
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    formResetCallback() {
+        // Cleared here, then announced, so a page that mirrors `values` hears
+        // about it and one that does not still gets an empty group.
+        this.values = [];
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { values: [] },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changed) {
+        if (changed.has("values") || changed.has("name")) {
+            this.syncFormState();
+        }
+    }
+    /*
+      A multi-select submits one entry per selected value under the same
+      name, which is what setFormValue does when given a FormData rather
+      than a string. The server then reads them all with getAll(name).
+    */
+    syncFormState() {
+        if (!this.name)
+            return;
+        if (this.values.length === 0) {
+            this.internals.setFormValue(null);
+            return;
+        }
+        const data = new FormData();
+        for (const value of this.values) {
+            data.append(this.name, value);
+        }
+        this.internals.setFormValue(data);
+    }
+    toggle(option, event) {
+        // The inner tt-checkbox also emits "tt-change", and it bubbles and is
+        // composed. Without this it would carry on past the group to the page,
+        // arriving after ours with a detail that has no `values`, and overwrite
+        // the selection with undefined. A composite consumes its children's
+        // events and speaks for them.
+        event.stopPropagation();
+        const next = this.values.includes(option)
+            ? this.values.filter((v) => v !== option)
+            : [...this.values, option];
+        /*
+          Kept here as well as announced. The boxes already show the new
+          state, so a group that waited for the page to echo `values` back
+          worked only when someone was listening: without a listener the next
+          click started from the old set, and the form submitted that.
+          A page can still set `values` whenever it likes.
+        */
+        this.values = next;
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: { values: next },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    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: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--tt-space-3);
+    }
+
+    :host([orientation="vertical"]) .group {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--tt-space-2);
+    }
+
+    /* Above the options in both orientations, as on tt-radio-group. It
+       used to sit inline as the first item of a horizontal row. */
+    .heading {
+      margin-bottom: var(--tt-space-2);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--tt-muted-foreground);
+    }
+
+    .error-text {
+      margin-top: var(--tt-space-2);
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+  `]; }
+    render() {
+        const labelId = `${this.groupId}-label`;
+        const errorId = `${this.groupId}-error`;
+        return html `
+      ${this.label
+            ? html `<div
+            class="heading ${this.labelHidden ? "sr-only" : ""}"
+            part="label"
+            id=${labelId}
+          >
+            ${this.label}
+          </div>`
+            : ""}
+
+      <!-- Named by the visible label rather than an aria-label copy of
+           it, which read the label twice: once as the name, once as the
+           group's first piece of text. -->
+      <div
+        class="group"
+        part="group"
+        role="group"
+        aria-labelledby=${ifDefined(this.label ? labelId : undefined)}
+        aria-invalid=${ifDefined(this.error ? "true" : undefined)}
+        aria-describedby=${ifDefined(this.error ? errorId : undefined)}
+      >
+        ${this.options.map(toOption).map((option) => html `
+            <!-- live(): a box ticks itself when clicked. If the page then
+                 refuses the change (sets values back, say to cap the
+                 choices), the value Lit last wrote has not changed, so a
+                 plain binding would write nothing and leave the box ticked.
+                 live() compares with the box's REAL state instead. -->
+            <tt-checkbox
+              label=${option.label}
+              .checked=${live(this.values.includes(option.value))}
+              ?disabled=${this.disabled || Boolean(option.disabled)}
+              @tt-change=${(e) => this.toggle(option.value, e)}
+            ></tt-checkbox>
+          `)}
+      </div>
+
+      ${this.error
+            ? html `<div class="error-text" part="error" id=${errorId} role="alert">
+            ${this.error}
+          </div>`
+            : ""}
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTCheckboxGroup.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TTCheckboxGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTCheckboxGroup.prototype, "labelHidden", void 0);
+__decorate([
+    property({ type: Array })
+], TTCheckboxGroup.prototype, "options", void 0);
+__decorate([
+    property({ type: Array })
+], TTCheckboxGroup.prototype, "values", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTCheckboxGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTCheckboxGroup.prototype, "error", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTCheckboxGroup.prototype, "orientation", void 0);
+TTCheckboxGroup = __decorate([
+    customElement("tt-checkbox-group")
+], TTCheckboxGroup);
+export { TTCheckboxGroup };
+//# sourceMappingURL=tt-checkbox-group.js.map

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

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

package/dist/tt-checkbox.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+export declare class TTCheckbox extends LitElement {
+    static formAssociated: boolean;
+    private internals;
+    name: string;
+    value: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    label: string;
+    labelHidden: boolean;
+    error: string;
+    private inputId;
+    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 handleChange;
+    focus(options?: FocusOptions): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-checkbox": TTCheckbox;
+    }
+}
+//# sourceMappingURL=tt-checkbox.d.ts.map