@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-component-doc.js

@@ -0,0 +1,585 @@
+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 "./tt-page.js";
+import "./tt-section.js";
+import "./tt-preview.js";
+import "./tt-example.js";
+import "./tt-code-block.js";
+import "./tt-table.js";
+import "./tt-icon.js";
+// "attribute" is optional on a row and renders as a dash when absent:
+// arrays and objects have no attribute, only a property.
+const PROP_COLUMNS = [
+    { key: "name", label: "Property" },
+    { key: "attribute", label: "Attribute", code: true },
+    { key: "type", label: "Type", code: true },
+    { key: "default", label: "Default", code: true },
+];
+const EVENT_COLUMNS = [
+    { key: "name", label: "Event", code: true },
+    { key: "description", label: "Description" },
+];
+const METHOD_COLUMNS = [
+    { key: "name", label: "Method", code: true },
+    { key: "description", label: "Description" },
+];
+const SLOT_COLUMNS = [
+    { key: "name", label: "Slot", code: true },
+    { key: "description", label: "Description" },
+];
+const PART_COLUMNS = [
+    { key: "name", label: "Part", code: true },
+    { key: "description", label: "Description" },
+];
+const CSS_PROPERTY_COLUMNS = [
+    { key: "name", label: "Custom property", code: true },
+    { key: "default", label: "Default", code: true },
+    { key: "description", label: "Description" },
+];
+const KEY_COLUMNS = [
+    { key: "keys", label: "Key", code: true },
+    { key: "action", label: "Action" },
+];
+let TTComponentDoc = class TTComponentDoc extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Named `heading` rather than `title` so it cannot collide with the
+        // global HTML title attribute (which renders a native tooltip).
+        this.heading = "";
+        this.description = "";
+        this.code = "";
+        this.props = [];
+        this.events = [];
+        /*
+          Public methods. There was nowhere to put them, so focus(),
+          checkValidity(), tt-form's submit() and the rest existed only in the
+          source: public API a reader of these pages could not discover.
+        */
+        this.methods = [];
+        this.slots = [];
+        this.parts = [];
+        // Custom properties a consumer may set on the element to restyle it,
+        // the token-level counterpart of parts.
+        this.cssProperties = [];
+        // The import line for this component.
+        this.importPath = "";
+        /*
+          Everything below is optional. A section appears only once it has
+          something to put in it, so the sixty-odd docs that predate these fields
+          render exactly as they did before.
+        */
+        // Composition skeleton for a multi-element component, as markup.
+        this.anatomy = "";
+        this.examples = [];
+        this.guidelines = null;
+        this.accessibility = null;
+        this.related = [];
+    }
+    /*
+      The page does not know how the app routes, so it announces the doc that
+      was asked for and lets whoever owns navigation act on it. Same rule as
+      every other component here: report the intent, do not assume the effect.
+    */
+    openDoc(doc) {
+        this.dispatchEvent(new CustomEvent("tt-doc-link", {
+            detail: { doc },
+            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;
+
+      --_max: 880px;
+
+      color: var(--tt-foreground);
+      font-family: var(--tt-font-sans);
+
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .wrap {
+      max-width: var(--_max);
+      margin: 0 auto;
+
+      padding: var(--tt-space-12) var(--tt-space-6);
+
+      box-sizing: border-box;
+    }
+
+    tt-section {
+      display: block;
+    }
+
+    tt-preview {
+      display: block;
+      overflow-x: auto;
+    }
+
+    /*
+      Examples are the long tail of the page, so they get more air between
+      them than the sections above. Anything tighter and two adjacent
+      examples read as one.
+    */
+    .examples {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-10);
+    }
+
+    .guidelines {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: var(--tt-space-5);
+    }
+
+    .guide {
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      background: var(--tt-card);
+
+      padding: var(--tt-space-5);
+    }
+
+    /*
+      A hairline of colour on the leading edge, not a tinted card. Full
+      colour fills would fight the previews for attention, and this page is
+      read top to bottom in one pass.
+    */
+    .guide.use {
+      border-left: 3px solid var(--tt-success);
+    }
+
+    .guide.avoid {
+      border-left: 3px solid var(--tt-destructive);
+    }
+
+    .guide h3 {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      margin: 0 0 var(--tt-space-4);
+
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-semibold);
+
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    .guide.use h3 {
+      color: var(--tt-success);
+    }
+
+    .guide.avoid h3 {
+      color: var(--tt-destructive);
+    }
+
+    .guide ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-3);
+    }
+
+    .guide li {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--tt-space-2);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+
+      color: var(--tt-muted-foreground);
+    }
+
+    .guide li tt-icon {
+      flex: none;
+
+      /* Optically centres the tick on the first line of text. */
+      margin-top: 3px;
+    }
+
+    .guide.use li tt-icon {
+      color: var(--tt-success);
+    }
+
+    .guide.avoid li tt-icon {
+      color: var(--tt-destructive);
+    }
+
+    .notes {
+      margin: var(--tt-space-5) 0 0;
+      padding-left: var(--tt-space-5);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+
+      color: var(--tt-muted-foreground);
+    }
+
+    /* Related: chips that route inside the app, so no href to hand out. */
+    .related {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--tt-space-2);
+    }
+
+    .related button {
+      display: inline-flex;
+      align-items: baseline;
+      gap: var(--tt-space-2);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-full);
+
+      padding: var(--tt-space-2) var(--tt-space-4);
+
+      background: var(--tt-card);
+
+      font: inherit;
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+
+      color: var(--tt-foreground);
+
+      cursor: pointer;
+
+      transition:
+        background var(--tt-duration-fast) var(--tt-ease),
+        border-color var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    .related button:hover {
+      background: var(--tt-muted);
+      border-color: var(--tt-muted-foreground);
+    }
+
+    .related button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .related .reason {
+      font-weight: var(--tt-weight-regular);
+      color: var(--tt-muted-foreground);
+    }
+
+    @media (max-width: 768px) {
+      .wrap {
+        padding: var(--tt-space-8) var(--tt-space-5);
+      }
+
+      .guidelines {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .examples {
+        gap: var(--tt-space-8);
+      }
+    }
+
+    @media (max-width: 480px) {
+      .wrap {
+        padding: var(--tt-space-6) var(--tt-space-4);
+      }
+    }
+
+  `; }
+    renderGuidelines() {
+        const use = this.guidelines?.use ?? [];
+        const avoid = this.guidelines?.avoid ?? [];
+        if (!use.length && !avoid.length)
+            return "";
+        return html `
+      <tt-section heading="When to use it">
+        <div class="guidelines">
+          ${use.length
+            ? html `
+                <div class="guide use">
+                  <h3>
+                    <tt-icon name="check-circle" size="14px"></tt-icon>
+                    Reach for it
+                  </h3>
+
+                  <ul>
+                    ${use.map((line) => html `
+                        <li>
+                          <tt-icon name="check" size="14px"></tt-icon>
+                          <span>${line}</span>
+                        </li>
+                      `)}
+                  </ul>
+                </div>
+              `
+            : ""}
+          ${avoid.length
+            ? html `
+                <div class="guide avoid">
+                  <h3>
+                    <tt-icon name="x-circle" size="14px"></tt-icon>
+                    Use something else
+                  </h3>
+
+                  <ul>
+                    ${avoid.map((line) => html `
+                        <li>
+                          <tt-icon name="x" size="14px"></tt-icon>
+                          <span>${line}</span>
+                        </li>
+                      `)}
+                  </ul>
+                </div>
+              `
+            : ""}
+        </div>
+      </tt-section>
+    `;
+    }
+    renderAccessibility() {
+        const keys = this.accessibility?.keys ?? [];
+        const notes = this.accessibility?.notes ?? [];
+        if (!keys.length && !notes.length)
+            return "";
+        return html `
+      <tt-section
+        heading="Accessibility"
+        description="What the component already handles, so you do not rebuild it."
+      >
+        ${keys.length
+            ? html `
+              <tt-table
+                .columns=${KEY_COLUMNS}
+                .rows=${keys.map(({ keys, action }) => ({ keys, action }))}
+              ></tt-table>
+            `
+            : ""}
+        ${notes.length
+            ? html `
+              <ul class="notes">
+                ${notes.map((note) => html `<li>${note}</li>`)}
+              </ul>
+            `
+            : ""}
+      </tt-section>
+    `;
+    }
+    render() {
+        return html `
+      <div class="wrap">
+        <tt-page heading=${this.heading} description=${this.description}>
+          <tt-section heading="Preview">
+            <tt-preview>
+              <slot name="preview"></slot>
+            </tt-preview>
+          </tt-section>
+
+          ${this.importPath
+            ? html `
+                <tt-section heading="Import">
+                  <tt-code-block show-line-numbers
+                    .code=${this.importPath}
+                    language="javascript"
+                  ></tt-code-block>
+                </tt-section>
+              `
+            : ""}
+
+          <tt-section heading="Usage">
+            <tt-code-block show-line-numbers .code=${this.code} language="html"></tt-code-block>
+          </tt-section>
+
+          ${this.renderGuidelines()}
+          ${this.anatomy
+            ? html `
+                <tt-section
+                  heading="Anatomy"
+                  description="The pieces and how they nest."
+                >
+                  <tt-code-block show-line-numbers
+                    .code=${this.anatomy}
+                    language="html"
+                  ></tt-code-block>
+                </tt-section>
+              `
+            : ""}
+          ${this.examples.length
+            ? html `
+                <tt-section
+                  heading="Examples"
+                  description="Every one is live. Switch to Code for the markup behind it."
+                >
+                  <div class="examples">
+                    ${this.examples.map((example) => html `
+                        <tt-example
+                          heading=${example.title}
+                          description=${example.description ?? ""}
+                          .code=${example.code}
+                          language=${example.language ?? "html"}
+                          align=${example.align ?? "center"}
+                        >
+                          ${example.preview}
+                        </tt-example>
+                      `)}
+                  </div>
+                </tt-section>
+              `
+            : ""}
+
+          <tt-section heading="Properties">
+            <tt-table .columns=${PROP_COLUMNS} .rows=${this.props}></tt-table>
+          </tt-section>
+
+          ${this.events.length
+            ? html `
+                <tt-section heading="Events">
+                  <tt-table
+                    .columns=${EVENT_COLUMNS}
+                    .rows=${this.events}
+                  ></tt-table>
+                </tt-section>
+              `
+            : ""}
+          ${this.methods.length
+            ? html `
+                <tt-section heading="Methods">
+                  <tt-table
+                    .columns=${METHOD_COLUMNS}
+                    .rows=${this.methods}
+                  ></tt-table>
+                </tt-section>
+              `
+            : ""}
+          ${this.slots.length
+            ? html `
+                <tt-section heading="Slots">
+                  <tt-table
+                    .columns=${SLOT_COLUMNS}
+                    .rows=${this.slots}
+                  ></tt-table>
+                </tt-section>
+              `
+            : ""}
+          ${this.parts.length
+            ? html `
+                <tt-section
+                  heading="CSS Parts"
+                  description="Style these from outside with ::part(name)."
+                >
+                  <tt-table
+                    .columns=${PART_COLUMNS}
+                    .rows=${this.parts}
+                  ></tt-table>
+                </tt-section>
+              `
+            : ""}
+          ${this.cssProperties.length
+            ? html `
+                <tt-section
+                  heading="CSS Custom Properties"
+                  description="Set these on the element, or on any ancestor: custom properties inherit through the shadow boundary."
+                >
+                  <tt-table
+                    .columns=${CSS_PROPERTY_COLUMNS}
+                    .rows=${this.cssProperties}
+                  ></tt-table>
+                </tt-section>
+              `
+            : ""}
+          ${this.renderAccessibility()}
+          ${this.related.length
+            ? html `
+                <tt-section
+                  heading="Related"
+                  description="What usually shows up alongside this one."
+                >
+                  <div class="related">
+                    ${this.related.map((link) => html `
+                        <button @click=${() => this.openDoc(link.doc)}>
+                          ${link.label}
+                          ${link.reason
+                ? html `<span class="reason">${link.reason}</span>`
+                : ""}
+                        </button>
+                      `)}
+                  </div>
+                </tt-section>
+              `
+            : ""}
+        </tt-page>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTComponentDoc.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTComponentDoc.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], TTComponentDoc.prototype, "code", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "props", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "events", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "methods", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "slots", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "parts", void 0);
+__decorate([
+    property({ type: Array, attribute: "css-properties" })
+], TTComponentDoc.prototype, "cssProperties", void 0);
+__decorate([
+    property({ type: String, attribute: "import-path" })
+], TTComponentDoc.prototype, "importPath", void 0);
+__decorate([
+    property({ type: String })
+], TTComponentDoc.prototype, "anatomy", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "examples", void 0);
+__decorate([
+    property({ type: Object })
+], TTComponentDoc.prototype, "guidelines", void 0);
+__decorate([
+    property({ type: Object })
+], TTComponentDoc.prototype, "accessibility", void 0);
+__decorate([
+    property({ type: Array })
+], TTComponentDoc.prototype, "related", void 0);
+TTComponentDoc = __decorate([
+    customElement("tt-component-doc")
+], TTComponentDoc);
+export { TTComponentDoc };
+//# sourceMappingURL=tt-component-doc.js.map

package/dist/tt-component-doc.js.map

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

package/dist/tt-confirm.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+import "./tt-modal.js";
+import "./tt-button.js";
+export interface ConfirmOptions {
+    heading: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+}
+/**
+ * Confirmation dialog with a promise-based API. Mount one near the app
+ * root, then anywhere else:
+ *
+ *   if (await confirm({ heading: "Delete request?", danger: true })) {
+ *     ...
+ *   }
+ *
+ * The promise is the point. The alternative is a dialog component plus
+ * open state plus two event handlers plus a variable remembering what you
+ * were about to do, spread across every caller. Here the decision reads
+ * as one line, in the order it happens.
+ */
+export declare class TTConfirm extends LitElement {
+    private pending?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private returnFocus;
+    ask(options: ConfirmOptions): Promise<boolean>;
+    private settle;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Ask for confirmation from anywhere. Requires a <tt-confirm> mounted in
+ * the page. Resolves false if none is mounted, so a missing dialog can
+ * never silently confirm a destructive action.
+ */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-confirm": TTConfirm;
+    }
+}
+//# sourceMappingURL=tt-confirm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-confirm.d.ts","sourceRoot":"","sources":["../src/tt-confirm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD;;;;;;;;;;;;GAYG;AACH,qBACa,SAAU,SAAQ,UAAU;IAC9B,OAAO,CAAC,OAAO,CAAC,CAAiB;IAE1C,iBAAiB;IAKjB,oBAAoB;IAmBpB,OAAO,CAAC,WAAW,CAA4B;IAE/C,GAAG,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IAuB9C,OAAO,CAAC,MAAM;IAWd,MAAM,CAAC,MAAM,0BAcX;IAEF,MAAM;CAmCP;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CASjE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}