@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-navbar.js

@@ -0,0 +1,390 @@
+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, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "./tt-button.js";
+import "./tt-icon.js";
+let TTNavbar = class TTNavbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reflected so :host([sticky]) can match. The stickiness has to live on
+        // the HOST: position:sticky is constrained to its containing block, and
+        // for the inner <header> that block is this element, all 60px of it, so
+        // sticking it there does nothing at all once the page scrolls.
+        //
+        // Opt-in, like every boolean in the library: a boolean attribute can
+        // only switch something ON, so one that defaulted to true could never
+        // be turned off from HTML.
+        this.sticky = false;
+        // A rule along the bottom edge. Opt-in, matching tt-toolbar and
+        // tt-page-header.
+        this.bordered = false;
+        // 48, 60 or 72px. `size` with the library's usual words; it was
+        // `height: thin | default | thick`, a vocabulary used nowhere else.
+        this.size = "medium";
+        this.mobileMenuOpen = false;
+        /**
+         * A soft blurred boundary below the bar instead of a hard rule, for
+         * where content actually scrolls UNDERNEATH it: a landing page, or any
+         * layout where the bar floats over the scroller rather than sitting in
+         * a column above it.
+         *
+         * Not decoration, and not a nicer border. It marks where UI meets
+         * content, so it is wrong on a bar with nothing passing under it, and
+         * it does nothing unless `sticky` is set. Use one per scrolling view.
+         *
+         * Attribute is `scroll-edge`, kebab-case like every multi-word
+         * attribute in the library.
+         */
+        this.scrollEdge = false;
+    }
+    handleMenuToggle() {
+        this.mobileMenuOpen = !this.mobileMenuOpen;
+        this.dispatchEvent(new CustomEvent("tt-menu-toggle", {
+            detail: {
+                open: this.mobileMenuOpen,
+            },
+            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;
+
+      /* Private aliases. Underscore-prefixed so they can never collide
+         with a global --tt-* token a consumer might set. */
+      --_bg: color-mix(in srgb, var(--tt-background) 92%, transparent);
+      --_link: var(--tt-muted-foreground);
+      --_link-hover: var(--tt-foreground);
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    header {
+      box-sizing: border-box;
+
+      /* Anchors the scroll edge below the bar. */
+      position: relative;
+
+      width: 100%;
+
+      /*
+        GRID, NOT FLEX, and this is the whole reason the centre zone is
+        worth having.
+
+        As a flex row the middle zone only got the space the two sides
+        left over, so it was centred in that leftover rather than in the
+        bar. Its offset was exactly (start - end) / 2: with a 419px start
+        and a 76px end the search sat 171px right of centre at every
+        window width, which is what it looked like.
+
+        Three columns with equal side tracks makes the middle column the
+        real middle whatever the sides contain. minmax(0, 1fr) rather
+        than 1fr so a wide side shrinks its own content instead of
+        overflowing into the middle.
+      */
+      display: grid;
+
+      /*
+        The middle track is auto and the sides are equal fr.
+
+        auto gives the middle its content width and lets it fall back to
+        min-content when the bar runs out of room, which is the right
+        order of sacrifice. It must NOT be minmax(0, auto): an fr track
+        absorbs all the free space before an auto one is grown, so a
+        floored auto track never gets more than its minimum and the
+        search sat at 207px no matter how wide the window was.
+      */
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+      align-items: center;
+
+      gap: var(--tt-space-4);
+
+      padding: 0 var(--tt-space-5);
+
+      background: var(--_bg);
+      color: var(--tt-foreground);
+
+      -webkit-backdrop-filter: saturate(180%) blur(12px);
+      backdrop-filter: saturate(180%) blur(12px);
+    }
+
+    .small {
+      height: 48px;
+    }
+
+    .medium {
+      height: 60px;
+    }
+
+    .large {
+      height: 72px;
+    }
+
+    .bordered {
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    /*
+      On the host, not on the header inside it.
+
+      It was on the header, and inside tt-layout that looked fine only
+      because tt-layout wraps the slot in its OWN sticky div. Standalone -
+      the landing page - nothing was sticky and the bar simply scrolled
+      away, because a sticky element cannot travel outside its containing
+      block and the header s block is this 60px host.
+    */
+    :host([sticky]) {
+      position: sticky;
+      top: 0;
+      z-index: var(--tt-z-sticky);
+    }
+
+    /* ---- scroll edge ---- */
+
+    /*
+      A hard rule says "two boxes". A soft edge says "the content
+      continues underneath", which is the truth when the bar floats over
+      a scroller. So the border goes when the edge is on: stacking both
+      draws the line the effect exists to remove.
+    */
+    :host([scroll-edge]) .bordered {
+      border-bottom-color: transparent;
+    }
+
+    /*
+      Sits just below the bar and travels with it, because it is a child
+      of the sticky element. The mask fades the blur out over its own
+      height, so text dissolves as it passes under rather than sliding
+      beneath a line. pointer-events:none, or it would swallow clicks on
+      the first row of content.
+    */
+    .edge {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+
+      height: var(--tt-space-6);
+
+      pointer-events: none;
+
+      -webkit-backdrop-filter: blur(6px);
+      backdrop-filter: blur(6px);
+
+      -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
+      mask-image: linear-gradient(to bottom, #000, transparent);
+    }
+
+    /* Mobile menu button */
+
+    .mobile-menu {
+      display: none;
+      flex-shrink: 0;
+    }
+
+    /* Navbar zones */
+
+    .start,
+    .end {
+      display: flex;
+      align-items: center;
+
+      gap: var(--tt-space-2);
+
+      min-width: 0;
+    }
+
+    .center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      gap: var(--tt-space-1);
+
+      min-width: 0;
+    }
+
+    /*
+      The zones STRETCH to their tracks and align their content inside,
+      rather than being shrink-wrapped with justify-self.
+
+      justify-self: start sizes a grid item to its content and lets it
+      overflow the track, so min-width: 0 never bites and a wide start
+      zone simply sat on top of the middle one. Stretched, the box is
+      exactly its track and the flex row inside does the aligning.
+
+      A bar is one line and clips: it never wraps, and content that does
+      not fit is the consumer's cue to put less in it.
+    */
+    .start {
+      justify-content: flex-start;
+      overflow: hidden;
+    }
+
+    .end {
+      justify-content: flex-end;
+      overflow: hidden;
+    }
+
+    /* Slotted components */
+
+    .start ::slotted(tt-icon),
+    .center ::slotted(tt-icon),
+    .end ::slotted(tt-icon) {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* The control token rather than 36px. A fixed height on the host
+       fought the control inside it, which grows to a touch target under
+       pointer: coarse, and overflowed the box this set. */
+    .start ::slotted(tt-button),
+    .center ::slotted(tt-button),
+    .end ::slotted(tt-button) {
+      height: var(--tt-control-md);
+    }
+
+    .start ::slotted(tt-input),
+    .center ::slotted(tt-input),
+    .end ::slotted(tt-input) {
+      height: var(--tt-control-md);
+    }
+
+    /* Links */
+
+    ::slotted(a) {
+      color: var(--_link);
+
+      text-decoration: none;
+
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+
+      padding: 6px 10px;
+
+      /* A link is a control: md, like tt-menu-item's rows and every
+         button. lg is the card radius. */
+      border-radius: var(--tt-radius);
+
+      transition:
+        color var(--tt-duration-normal) var(--tt-ease),
+        background var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--_link-hover);
+    }
+
+    /* Mobile */
+
+    @media (max-width: 768px) {
+      /*
+        A different set of three. The centre goes away and the menu button
+        appears, so the columns become: button, brand, actions. The brand
+        takes the slack rather than the sides, because there is nothing
+        left to centre and a phone wants the name hard against the button.
+      */
+      header {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+
+        gap: var(--tt-space-2);
+        padding: 0 var(--tt-space-3);
+      }
+
+      .mobile-menu {
+        display: inline-flex;
+      }
+
+      /* display:none removes it from the grid entirely, so it takes no
+         track and the three above line up with what is left. */
+      .center {
+        display: none;
+      }
+    }
+
+  `; }
+    render() {
+        return html `
+      <header
+        part="header"
+        class="
+          ${this.size}
+          ${this.bordered ? "bordered" : ""}
+        "
+      >
+        <!-- Nothing scrolls under a bar that is not sticky, so there is
+             nothing for an edge to mark. -->
+        ${this.scrollEdge && this.sticky
+            ? html `<div class="edge" part="edge" aria-hidden="true"></div>`
+            : nothing}
+
+        <!-- Mobile menu -->
+
+        <tt-button
+          class="mobile-menu"
+          variant="secondary"
+          size="small"
+          label=${this.mobileMenuOpen ? "Close menu" : "Open menu"}
+          expanded=${this.mobileMenuOpen ? "true" : "false"}
+          @tt-button-click=${this.handleMenuToggle}
+        >
+          <tt-icon
+            name=${this.mobileMenuOpen ? "x" : "menu"}
+            size="20px"
+          ></tt-icon>
+        </tt-button>
+
+        <!-- Left -->
+
+        <div class="start" part="start">
+          <slot name="start"></slot>
+        </div>
+
+        <!-- Center -->
+
+        <div class="center" part="center">
+          <slot></slot>
+        </div>
+
+        <!-- Right -->
+
+        <div class="end" part="end">
+          <slot name="end"></slot>
+        </div>
+      </header>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTNavbar.prototype, "sticky", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTNavbar.prototype, "bordered", void 0);
+__decorate([
+    property({ type: String })
+], TTNavbar.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "mobile-menu-open" })
+], TTNavbar.prototype, "mobileMenuOpen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "scroll-edge", reflect: true })
+], TTNavbar.prototype, "scrollEdge", void 0);
+TTNavbar = __decorate([
+    customElement("tt-navbar")
+], TTNavbar);
+export { TTNavbar };
+//# sourceMappingURL=tt-navbar.js.map

package/dist/tt-navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-navbar.js","sourceRoot":"","sources":["../src/tt-navbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAKf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,wEAAwE;QACxE,wEAAwE;QACxE,wEAAwE;QACxE,+DAA+D;QAC/D,EAAE;QACF,qEAAqE;QACrE,sEAAsE;QACtE,2BAA2B;QAE3B,WAAM,GAAG,KAAK,CAAC;QAEf,gEAAgE;QAChE,kBAAkB;QAElB,aAAQ,GAAG,KAAK,CAAC;QAEjB,gEAAgE;QAChE,oEAAoE;QAEpE,SAAI,GAAe,QAAQ,CAAC;QAG5B,mBAAc,GAAG,KAAK,CAAC;QAEvB;;;;;;;;;;;;WAYG;QAEH,eAAU,GAAG,KAAK,CAAC;IA4UrB,CAAC;IA1US,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAE3C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,cAAc;aAC1B;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuQlB,AAvQY,CAuQX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;YAIH,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;UAKjC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM;YAC9B,CAAC,CAAC,IAAI,CAAA,yDAAyD;YAC/D,CAAC,CAAC,OAAO;;;;;;;;kBAQD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;qBAC7C,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BAC9B,IAAI,CAAC,gBAAgB;;;mBAG/B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;KAuBhD,CAAC;IACJ,CAAC;;AAxWD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC5B;AAKf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAKjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;gDACpC;AAgBvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClD;AAvCR,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmXpB"}

package/dist/tt-page-header.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * Title, optional description, optional breadcrumb, and a row of actions
+ * pinned to the right.
+ *
+ * This is the most repeated block in any application: every list, detail
+ * and settings screen opens with it. Without a component, each page
+ * invents slightly different spacing and the product stops feeling like
+ * one thing.
+ *
+ * tt-page owns the page frame and its width. This owns the top of the
+ * content.
+ */
+export declare class TTPageHeader extends LitElement {
+    heading: string;
+    description: string;
+    bordered: boolean;
+    private hasBreadcrumb;
+    static styles: import("lit").CSSResult;
+    private onBreadcrumbChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-page-header": TTPageHeader;
+    }
+}
+//# sourceMappingURL=tt-page-header.d.ts.map

package/dist/tt-page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-page-header.d.ts","sourceRoot":"","sources":["../src/tt-page-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;GAWG;AACH,qBACa,YAAa,SAAQ,UAAU;IACd,OAAO,SAAM;IAEb,WAAW,SAAM;IAIhB,QAAQ,UAAS;IAKrC,OAAO,CAAC,aAAa,CAAS;IAEvC,MAAM,CAAC,MAAM,0BA8EX;IAEF,OAAO,CAAC,kBAAkB;IAa1B,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/tt-page-header.js

@@ -0,0 +1,166 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+/**
+ * Title, optional description, optional breadcrumb, and a row of actions
+ * pinned to the right.
+ *
+ * This is the most repeated block in any application: every list, detail
+ * and settings screen opens with it. Without a component, each page
+ * invents slightly different spacing and the product stops feeling like
+ * one thing.
+ *
+ * tt-page owns the page frame and its width. This owns the top of the
+ * content.
+ */
+let TTPageHeader = class TTPageHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.description = "";
+        // Divider underneath. Useful on list screens, usually wrong on a
+        // detail screen where a card follows immediately.
+        this.bordered = false;
+        // Whether anything is in the breadcrumb slot. Its row carries the space
+        // under it, and no CSS selector can see slotted content, so an empty
+        // row pushed the title 8px below the actions it shares a line with.
+        this.hasBreadcrumb = false;
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--tt-space-5);
+      flex-wrap: wrap;
+    }
+
+    .bordered {
+      padding-bottom: var(--tt-space-5);
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    .text {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .breadcrumb {
+      margin-bottom: var(--tt-space-2);
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    h1 {
+      margin: 0;
+
+      font-family: var(--tt-font-display);
+      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);
+      overflow-wrap: anywhere;
+    }
+
+    p {
+      margin: var(--tt-space-2) 0 0;
+      max-width: 62ch;
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-relaxed);
+      color: var(--tt-muted-foreground);
+    }
+
+    /* Actions keep their size and sit at the right. flex-wrap on the
+       parent drops them onto their own line when space runs out, rather
+       than squashing the title. */
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+      flex-shrink: 0;
+      flex-wrap: wrap;
+    }
+
+    ::slotted([slot="breadcrumb"]) {
+      margin: 0;
+    }
+
+    @media (max-width: 480px) {
+      .actions {
+        width: 100%;
+      }
+    }
+  `; }
+    onBreadcrumbChange(event) {
+        const slot = event.target;
+        // Whitespace between tags is not content.
+        this.hasBreadcrumb = slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.textContent ?? "").trim() !== "");
+    }
+    render() {
+        return html `
+      <div class="header ${this.bordered ? "bordered" : ""}" part="header">
+        <div class="text">
+          <!-- Always rendered, so the slot exists and reports
+               slotchange; hidden while it is empty. -->
+          <div class="breadcrumb" ?hidden=${!this.hasBreadcrumb}>
+            <slot
+              name="breadcrumb"
+              @slotchange=${this.onBreadcrumbChange}
+            ></slot>
+          </div>
+
+          <h1 part="heading">${this.heading}</h1>
+
+          ${this.description
+            ? html `<p part="description">${this.description}</p>`
+            : ""}
+
+          <slot></slot>
+        </div>
+
+        <div class="actions" part="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTPageHeader.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTPageHeader.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTPageHeader.prototype, "bordered", void 0);
+__decorate([
+    state()
+], TTPageHeader.prototype, "hasBreadcrumb", void 0);
+TTPageHeader = __decorate([
+    customElement("tt-page-header")
+], TTPageHeader);
+export { TTPageHeader };
+//# sourceMappingURL=tt-page-header.js.map

package/dist/tt-page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-page-header.js","sourceRoot":"","sources":["../src/tt-page-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;;;GAWG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACuB,YAAO,GAAG,EAAE,CAAC;QAEb,gBAAW,GAAG,EAAE,CAAC;QAE7C,iEAAiE;QACjE,kDAAkD;QACrB,aAAQ,GAAG,KAAK,CAAC;QAE9C,wEAAwE;QACxE,qEAAqE;QACrE,oEAAoE;QACnD,kBAAa,GAAG,KAAK,CAAC;IA2HzC,CAAC;aAzHQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ElB,AA9EY,CA8EX;IAEM,kBAAkB,CAAC,KAAY;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,0CAA0C;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI;aACtB,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAChC,IAAI,CACH,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;YACnC,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CACzC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;4CAId,CAAC,IAAI,CAAC,aAAa;;;4BAGnC,IAAI,CAAC,kBAAkB;;;;+BAIpB,IAAI,CAAC,OAAO;;YAE/B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,WAAW,MAAM;YACrD,CAAC,CAAC,EAAE;;;;;;;;;KASX,CAAC;IACJ,CAAC;;AArI2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AAIhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAkB;AAK7B;IAAhB,KAAK,EAAE;mDAA+B;AAZ5B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAuIxB"}

package/dist/tt-page.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class TTPage extends LitElement {
+    heading: string;
+    description: string;
+    width: "narrow" | "default" | "wide" | "full";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-page": TTPage;
+    }
+}
+//# sourceMappingURL=tt-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-page.d.ts","sourceRoot":"","sources":["../src/tt-page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,MAAO,SAAQ,UAAU;IAIpC,OAAO,SAAM;IAGb,WAAW,SAAM;IAMjB,KAAK,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAa;IAE1D,MAAM,CAAC,MAAM,0BAgHX;IAEF,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}