@tartaguti/ui-components 0.1.0 → 0.3.0

package/dist/tt-dock-item.js

@@ -0,0 +1,270 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { safeUrl } from "./safe-url.js";
+/**
+ * One target in a tt-dock: an icon over a short label, a link or a button.
+ *
+ * ---------------------------------------------------------------------
+ * THE DOCK KEEPS THE STATE, THE ITEM ONLY ASKS.
+ *
+ * A click sends `tt-dock-select` and changes nothing here. The dock
+ * hears it, moves `active` (the current page) and sends its own
+ * `tt-dock-select`. Only the
+ * dock can know that choosing one item un-chooses another, the same
+ * reason tt-accordion owns its items' open state.
+ *
+ * ---------------------------------------------------------------------
+ * HOW THE DOCK STYLES IT.
+ *
+ * The dock decides the shape (a bar, a floating pill, a column) and
+ * whether labels show. It says so through inherited custom properties
+ * (`--tt-dock-item-*`, `--tt-dock-label-*`), read below with the
+ * bar's values as fallbacks, so an item has no props for any of it and
+ * one used outside a dock still looks right.
+ */
+let TTDockItem = class TTDockItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The current page, announced as aria-current="page". The dock moves
+         * it when an item is chosen; set it for the start.
+         */
+        this.active = false;
+        this.disabled = false;
+        /** Makes the item a link. Empty: a button that tells your app it was chosen. */
+        this.href = "";
+        /** Names this item in `tt-dock-select`. Empty: the label text is sent. */
+        this.value = "";
+    }
+    /** Focuses the link or button inside. */
+    focus(options) {
+        this.control?.focus(options);
+    }
+    get text() {
+        return (this.textContent ?? "").trim();
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // A link opened in a new tab or window is not a choice made here.
+        if (this.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey))
+            return;
+        this.dispatchEvent(new CustomEvent("tt-dock-select", {
+            detail: { value: this.value || this.text },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /*
+      With the label hidden (the dock's labels-hidden), a mouse still gets
+      the name as a hint. Asked at the moment the pointer arrives, from the
+      label's own style, because only the dock knows whether labels show.
+      A screen reader never needs it: the label is still there for it.
+    */
+    onPointerEnter() {
+        const control = this.control;
+        const label = this.labelEl;
+        if (!control || !label)
+            return;
+        const hidden = getComputedStyle(label).position === "absolute";
+        if (hidden && this.text)
+            control.setAttribute("title", this.text);
+        else
+            control.removeAttribute("title");
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      min-width: 0;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .item {
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--tt-space-1);
+
+      box-sizing: border-box;
+      width: 100%;
+      /* The target: 56px with a label, 48px without (the dock sets it).
+         Both clear 44px, and 48px on a touch screen. */
+      min-width: var(--tt-dock-item-min-width, 4rem);
+      min-height: var(--tt-dock-item-height, 3.5rem);
+      padding: var(--tt-space-1) var(--tt-space-2);
+
+      border: 0;
+      border-radius: var(--tt-dock-item-radius, var(--tt-radius-lg));
+      background: none;
+      color: var(--tt-muted-foreground);
+
+      font: inherit;
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+      line-height: var(--tt-leading-tight);
+      text-decoration: none;
+
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      /* A long press on a link would open the phone's link menu. */
+      -webkit-touch-callout: none;
+
+      transition: color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    /* Inset, so a ring at the end of a row is not cut off by the row. */
+    .item:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    /*
+      The indicator: a pill behind the icon, the shape a current item
+      takes (as in Material's navigation bar). Behind the icon only, so
+      the target can be wide while the mark stays small and steady.
+    */
+    .icon {
+      position: relative;
+
+      display: grid;
+      place-items: center;
+
+      width: var(--tt-dock-indicator-width, 3.5rem);
+      max-width: 100%;
+      height: 2rem;
+
+      border-radius: var(--tt-radius-full);
+
+      --tt-icon-size: 1.375rem;
+
+      transition: background var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    .label {
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      /* Hidden by the dock's labels-hidden: off screen, still the name. */
+      position: var(--tt-dock-label-position, static);
+      width: var(--tt-dock-label-size, auto);
+      height: var(--tt-dock-label-size, auto);
+      clip-path: var(--tt-dock-label-clip, none);
+    }
+
+    .active {
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-semibold);
+    }
+
+    .active .icon {
+      background: var(--tt-accent);
+    }
+
+    .item:active:not(.disabled) .icon {
+      background: var(--tt-accent);
+    }
+
+    @media (hover: hover) {
+      .item:hover:not(.disabled) {
+        color: var(--tt-foreground);
+      }
+
+      .item:hover:not(.disabled):not(.active) .icon {
+        background: var(--tt-muted);
+      }
+    }
+
+    .disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    ::slotted(tt-icon) {
+      flex-shrink: 0;
+    }
+  `; }
+    render() {
+        const classes = `item ${this.active ? "active" : ""} ${this.disabled ? "disabled" : ""}`;
+        const current = this.active ? "page" : undefined;
+        const inner = html `
+      <span class="icon" part="icon">
+        <slot name="icon"></slot>
+      </span>
+      <span class="label" part="label"><slot></slot></span>
+    `;
+        if (this.href) {
+            // An unsafe address never reaches the DOM: the item is then a link with no href.
+            const href = this.disabled ? null : safeUrl(this.href);
+            return html `
+        <a
+          class=${classes}
+          part="item"
+          href=${ifDefined(href ?? undefined)}
+          aria-current=${ifDefined(current)}
+          aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
+          @click=${this.onClick}
+          @pointerenter=${this.onPointerEnter}
+          >${inner}</a
+        >
+      `;
+        }
+        return html `
+      <button
+        type="button"
+        class=${classes}
+        part="item"
+        ?disabled=${this.disabled}
+        aria-current=${ifDefined(current)}
+        @click=${this.onClick}
+        @pointerenter=${this.onPointerEnter}
+      >
+        ${inner}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTDockItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTDockItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], TTDockItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], TTDockItem.prototype, "value", void 0);
+__decorate([
+    query(".item")
+], TTDockItem.prototype, "control", void 0);
+__decorate([
+    query(".label")
+], TTDockItem.prototype, "labelEl", void 0);
+TTDockItem = __decorate([
+    customElement("tt-dock-item")
+], TTDockItem);
+export { TTDockItem };
+//# sourceMappingURL=tt-dock-item.js.map

package/dist/tt-dock-item.js.map

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

package/dist/tt-dock.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+import "./tt-scroller.js";
+import "./tt-dock-item.js";
+export type DockVariant = "bar" | "floating";
+export type DockPosition = "bottom" | "top" | "left" | "right";
+/**
+ * A few big targets on one edge of the screen: a phone's tab bar, a
+ * floating dock on a desktop, or a column down the side. Holds
+ * tt-dock-item children and renders a <nav>.
+ *
+ * ---------------------------------------------------------------------
+ * WHY A DOCK IS NOT A NAVBAR.
+ *
+ * A navbar is the top of a site: a brand, links, actions, all sizes. A
+ * dock is three to five equal targets in thumb reach. Different job,
+ * different shape, so a different component.
+ *
+ * ---------------------------------------------------------------------
+ * IT TAKES ITS OWN SPACE, SO IT NEVER COVERS THE PAGE.
+ *
+ * It is sticky: it sits where you put it and pins to that edge of
+ * whatever scrolls (the window, a preview frame, a builder canvas,
+ * tt-layout's page). Put a bottom dock last, a top dock first, and a
+ * side dock beside the content in a row, where it is one screen tall
+ * like a sticky sidebar. Being in the flow is what keeps the last line
+ * of content clear of it: at the end of the page the dock sits after
+ * the content, not over it.
+ *
+ * ---------------------------------------------------------------------
+ * THE DOCK OWNS WHICH ITEM IS CURRENT.
+ *
+ * An item's click only asks (tt-dock-select from the item). The dock
+ * moves `active` to it, off the others, and sends its own
+ * tt-dock-select, so a dock with no listener (a pasted snippet, a
+ * generated component) still shows the right current page, and a page
+ * hears one event, not two. A page that sets `active` itself still wins.
+ *
+ * @fires tt-dock-select - An item was chosen and is now the current one. detail: { value }.
+ */
+export declare class TTDock extends LitElement {
+    /** bar: across the whole edge. floating: a pill held off the edge. */
+    variant: DockVariant;
+    /** The edge it sits on. Top and bottom lay the items in a row; left and right in a column. */
+    position: DockPosition;
+    /** Icons only. Each label stays as the item's name for a screen reader, and a hint for a mouse. */
+    labelsHidden: boolean;
+    /** Names the navigation for a screen reader, beside any other on the page. */
+    label: string;
+    private items;
+    private onSelect;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-dock": TTDock;
+    }
+}
+//# sourceMappingURL=tt-dock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-dock.d.ts","sourceRoot":"","sources":["../src/tt-dock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,mBAAmB,CAAC;AAG3B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,UAAU,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,sEAAsE;IAC3B,OAAO,EAAE,WAAW,CAAS;IAExE,8FAA8F;IACnD,QAAQ,EAAE,YAAY,CAAY;IAE7E,mGAAmG;IAC3B,YAAY,UAAS;IAE7F,8EAA8E;IAClD,KAAK,SAAM;IAEc,OAAO,CAAC,KAAK,CAAgB;IAOlF,OAAO,CAAC,QAAQ,CAed;IAEF,MAAM,CAAC,MAAM,0BA6NX;IAEF,MAAM;CAsBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/tt-dock.js

@@ -0,0 +1,337 @@
+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 { customElement, property, queryAssignedElements } from "lit/decorators.js";
+import "./tt-scroller.js";
+import "./tt-dock-item.js";
+const sideways = (position) => position === "left" || position === "right";
+/**
+ * A few big targets on one edge of the screen: a phone's tab bar, a
+ * floating dock on a desktop, or a column down the side. Holds
+ * tt-dock-item children and renders a <nav>.
+ *
+ * ---------------------------------------------------------------------
+ * WHY A DOCK IS NOT A NAVBAR.
+ *
+ * A navbar is the top of a site: a brand, links, actions, all sizes. A
+ * dock is three to five equal targets in thumb reach. Different job,
+ * different shape, so a different component.
+ *
+ * ---------------------------------------------------------------------
+ * IT TAKES ITS OWN SPACE, SO IT NEVER COVERS THE PAGE.
+ *
+ * It is sticky: it sits where you put it and pins to that edge of
+ * whatever scrolls (the window, a preview frame, a builder canvas,
+ * tt-layout's page). Put a bottom dock last, a top dock first, and a
+ * side dock beside the content in a row, where it is one screen tall
+ * like a sticky sidebar. Being in the flow is what keeps the last line
+ * of content clear of it: at the end of the page the dock sits after
+ * the content, not over it.
+ *
+ * ---------------------------------------------------------------------
+ * THE DOCK OWNS WHICH ITEM IS CURRENT.
+ *
+ * An item's click only asks (tt-dock-select from the item). The dock
+ * moves `active` to it, off the others, and sends its own
+ * tt-dock-select, so a dock with no listener (a pasted snippet, a
+ * generated component) still shows the right current page, and a page
+ * hears one event, not two. A page that sets `active` itself still wins.
+ *
+ * @fires tt-dock-select - An item was chosen and is now the current one. detail: { value }.
+ */
+let TTDock = class TTDock extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** bar: across the whole edge. floating: a pill held off the edge. */
+        this.variant = "bar";
+        /** The edge it sits on. Top and bottom lay the items in a row; left and right in a column. */
+        this.position = "bottom";
+        /** Icons only. Each label stays as the item's name for a screen reader, and a hint for a mouse. */
+        this.labelsHidden = false;
+        /** Names the navigation for a screen reader, beside any other on the page. */
+        this.label = "";
+        /*
+          An item asks; the dock answers. The chosen item becomes the current
+          one and the others stop being it, then one tt-dock-select from the
+          dock. The item's own is stopped, so a page hears it once.
+        */
+        this.onSelect = (event) => {
+            const item = event.target;
+            if (!this.items.includes(item))
+                return;
+            event.stopPropagation();
+            for (const other of this.items)
+                other.active = other === item;
+            const { value } = event.detail;
+            this.dispatchEvent(new CustomEvent("tt-dock-select", {
+                detail: { value },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+
+      /* Pinned to the edge it sits on (below), over the content that
+         scrolls under it. */
+      position: sticky;
+      bottom: 0;
+      z-index: var(--tt-z-sticky);
+
+      /* In a row beside the content: never squeezed by it. */
+      flex-shrink: 0;
+      min-width: 0;
+
+      color: var(--tt-foreground);
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* In a column at least a screen tall (an app's page, tt-layout's
+       content), a bottom dock goes to its end even when the page above
+       is short. An auto margin is 0 anywhere else. */
+    :host([position="bottom"]) {
+      margin-top: auto;
+    }
+
+    :host([position="top"]) {
+      top: 0;
+      bottom: auto;
+    }
+
+    /* A column one screen tall beside the content, like a sticky
+       sidebar: the builder sets the screen's height on its canvas. */
+    :host([position="left"]),
+    :host([position="right"]) {
+      top: 0;
+      bottom: auto;
+      align-self: flex-start;
+      height: var(--tt-viewport-height, 100dvh);
+    }
+
+    /* ---- the bar, or the clear region a pill floats in ---- */
+
+    .dock {
+      box-sizing: border-box;
+      display: flex;
+      margin: 0;
+
+      /* Sizes for the items, inherited into their shadow roots. A target
+         of 56px with a label, 48px without: both clear 44px, and 48px on
+         a touch screen. */
+      --tt-dock-item-min-width: 4rem;
+      --tt-dock-item-height: 3.5rem;
+      --tt-dock-indicator-width: 3.5rem;
+    }
+
+    .horizontal {
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .vertical {
+      flex-direction: column;
+      justify-content: flex-start;
+      height: 100%;
+    }
+
+    .labels-hidden {
+      --tt-dock-item-min-width: 3rem;
+      --tt-dock-item-height: 3rem;
+      --tt-dock-indicator-width: 2.5rem;
+      --tt-dock-label-position: absolute;
+      --tt-dock-label-size: 1px;
+      --tt-dock-label-clip: inset(50%);
+    }
+
+    /* A bar: the surface across the whole edge, clear of the notch and
+       the home indicator on the edge it touches. */
+    .bar {
+      background: var(--tt-card);
+    }
+
+    .bar.bottom {
+      border-top: 1px solid var(--tt-border);
+      padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
+        env(safe-area-inset-left, 0px);
+    }
+
+    .bar.top {
+      border-bottom: 1px solid var(--tt-border);
+      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0
+        env(safe-area-inset-left, 0px);
+    }
+
+    .bar.left {
+      border-right: 1px solid var(--tt-border);
+      padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px)
+        env(safe-area-inset-left, 0px);
+    }
+
+    .bar.right {
+      border-left: 1px solid var(--tt-border);
+      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
+        env(safe-area-inset-bottom, 0px) 0;
+    }
+
+    /* Floating: the region is clear and only the pill takes clicks, so
+       content scrolling past the pill's sides stays usable. */
+    .floating {
+      --_inset: var(--tt-space-3);
+      --tt-dock-item-radius: var(--tt-radius-full);
+
+      pointer-events: none;
+    }
+
+    .floating.bottom {
+      padding: var(--tt-space-2) calc(var(--_inset) + env(safe-area-inset-right, 0px))
+        calc(var(--_inset) + env(safe-area-inset-bottom, 0px))
+        calc(var(--_inset) + env(safe-area-inset-left, 0px));
+    }
+
+    .floating.top {
+      padding: calc(var(--_inset) + env(safe-area-inset-top, 0px))
+        calc(var(--_inset) + env(safe-area-inset-right, 0px)) var(--tt-space-2)
+        calc(var(--_inset) + env(safe-area-inset-left, 0px));
+    }
+
+    .floating.left {
+      justify-content: center;
+      padding: var(--_inset) var(--tt-space-2) var(--_inset)
+        calc(var(--_inset) + env(safe-area-inset-left, 0px));
+    }
+
+    .floating.right {
+      justify-content: center;
+      padding: var(--_inset) calc(var(--_inset) + env(safe-area-inset-right, 0px)) var(--_inset)
+        var(--tt-space-2);
+    }
+
+    /* ---- the surface: the bar's content box, or the pill ---- */
+
+    .surface {
+      display: flex;
+      min-width: 0;
+      min-height: 0;
+    }
+
+    .bar .surface {
+      flex: 1;
+    }
+
+    .vertical .surface {
+      flex-direction: column;
+    }
+
+    /* The second elevation rung: a raised surface paired with its shadow. */
+    .floating .surface {
+      pointer-events: auto;
+      box-sizing: border-box;
+      max-width: 100%;
+      max-height: 100%;
+      padding: var(--tt-space-1);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-full);
+      background: var(--tt-popover);
+      box-shadow: var(--tt-elevation-2);
+    }
+
+    /* ---- the items ---- */
+
+    /* A row is a tt-scroller: more items than fit scroll sideways, with
+       no scrollbar and a fade on the side that has more. */
+    .row {
+      flex: 1 1 auto;
+      min-width: 0;
+      /* The scroller keeps room above and below for a focus ring that
+         sticks out. An item's ring is inset, so that room is not needed,
+         and left alone it hangs below the bar and lengthens the page. */
+      overflow: clip;
+    }
+
+    /* On a wide bar the items keep to a phone's spread, centred. */
+    .bar .row {
+      max-width: 40rem;
+      margin-inline: auto;
+    }
+
+    /* A column scrolls down. Its scrollbar stays: a desktop wheel scrolls
+       it, and nothing else would say there is more. */
+    .column {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+      min-height: 0;
+      padding: var(--tt-space-2);
+      overflow-x: hidden;
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+
+    .floating .column {
+      padding: 0;
+    }
+
+    /* A bar shares its width out equally; a pill and a column take each
+       item at its own size. Items never shrink below a target. */
+    .bar.horizontal ::slotted(*) {
+      flex: 1 1 0;
+      min-width: var(--tt-dock-item-min-width);
+    }
+
+    .floating.horizontal ::slotted(*),
+    .vertical ::slotted(*) {
+      flex: 0 0 auto;
+    }
+  `; }
+    render() {
+        const vertical = sideways(this.position);
+        const classes = `dock ${this.variant} ${this.position} ${vertical ? "vertical" : "horizontal"} ${this.labelsHidden ? "labels-hidden" : ""}`;
+        const slot = html `<slot></slot>`;
+        const items = vertical
+            ? html `<div class="column" part="row">${slot}</div>`
+            : html `<tt-scroller class="row" part="row" gap="none" controls>${slot}</tt-scroller>`;
+        return html `
+      <nav
+        class=${classes}
+        part="dock"
+        aria-label=${this.label || nothing}
+        @tt-dock-select=${this.onSelect}
+      >
+        <div class="surface" part="surface">${items}</div>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTDock.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTDock.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "labels-hidden" })
+], TTDock.prototype, "labelsHidden", void 0);
+__decorate([
+    property({ type: String })
+], TTDock.prototype, "label", void 0);
+__decorate([
+    queryAssignedElements({ selector: "tt-dock-item" })
+], TTDock.prototype, "items", void 0);
+TTDock = __decorate([
+    customElement("tt-dock")
+], TTDock);
+export { TTDock };
+//# sourceMappingURL=tt-dock.js.map

package/dist/tt-dock.js.map

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