@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-button-group.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * Attaches controls into one unit: the corners where they meet flatten,
+ * and their borders collapse onto a single shared edge.
+ *
+ * Use it when the buttons are alternatives to each other, or steps in one
+ * decision. Do NOT use it as a way to save space between unrelated
+ * actions: joining "Reload" to "Checkout" tells the reader they belong
+ * together, and they do not. A plain flex row with a gap is right for
+ * those, which is what tt-toolbar already does.
+ *
+ * HOW IT REACHES INSIDE ITS CHILDREN. Each control's radius lives on an
+ * element in its own shadow root, and ::slotted() only ever matches the
+ * host, never anything within it. So a group cannot restyle a button's
+ * corners directly. What it can do is set a CUSTOM PROPERTY on the host,
+ * because custom properties inherit through the shadow boundary, and each
+ * groupable control reads `--tt-group-radius` for its own radius. The
+ * group sets that per position, and the child applies it.
+ *
+ * Works with tt-button, tt-dropdown-menu, tt-select and tt-input.
+ */
+let TTButtonGroup = class TTButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = "horizontal";
+    }
+    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: inline-flex;
+      font-family: var(--tt-font-sans);
+    }
+
+    .group {
+      display: inline-flex;
+      /* stretch, so a shorter control still meets its neighbour's edges
+         rather than floating in the middle of the row. */
+      align-items: stretch;
+    }
+
+    :host([orientation="vertical"]) .group {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    /*
+      Everything in the middle loses every corner; the two ends keep only
+      their outer ones.
+
+      :not(:only-child) on the end rules is load-bearing. A lone child is
+      first AND last, and the end rules carry a :host([...]) prefix that
+      outranks a bare ::slotted(:only-child), so a group of one came out
+      with the last-child radius: square on the left, round on the right.
+      Excluding it explicitly beats relying on source order against a more
+      specific selector.
+    */
+    ::slotted(*) {
+      --tt-group-radius: 0;
+    }
+
+    ::slotted(:only-child) {
+      --tt-group-radius: var(--tt-radius);
+    }
+
+    :host([orientation="horizontal"]) ::slotted(:first-child:not(:only-child)) {
+      --tt-group-radius: var(--tt-radius) 0 0 var(--tt-radius);
+    }
+
+    :host([orientation="horizontal"]) ::slotted(:last-child:not(:only-child)) {
+      --tt-group-radius: 0 var(--tt-radius) var(--tt-radius) 0;
+    }
+
+    :host([orientation="vertical"]) ::slotted(:first-child:not(:only-child)) {
+      --tt-group-radius: var(--tt-radius) var(--tt-radius) 0 0;
+    }
+
+    :host([orientation="vertical"]) ::slotted(:last-child:not(:only-child)) {
+      --tt-group-radius: 0 0 var(--tt-radius) var(--tt-radius);
+    }
+
+    /*
+      Pull each neighbour back over the previous one's border. Two adjacent
+      1px borders otherwise stack into a 2px seam that reads as a gap
+      rather than a join.
+    */
+    :host([orientation="horizontal"]) ::slotted(:not(:first-child)) {
+      margin-left: -1px;
+    }
+
+    :host([orientation="vertical"]) ::slotted(:not(:first-child)) {
+      margin-top: -1px;
+    }
+
+    /*
+      Whatever is hovered or focused draws its border and its focus ring
+      on top of its neighbours. Without this the overlap above means the
+      NEXT control's border covers the active one's, and the ring gets
+      clipped along the edge where they meet.
+    */
+    ::slotted(:hover),
+    ::slotted(:focus-within) {
+      z-index: 1;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="group" part="group" role="group">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], TTButtonGroup.prototype, "orientation", void 0);
+TTButtonGroup = __decorate([
+    customElement("tt-button-group")
+], TTButtonGroup);
+export { TTButtonGroup };
+//# sourceMappingURL=tt-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-button-group.js","sourceRoot":"","sources":["../src/tt-button-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAEL,gBAAW,GAA8B,YAAY,CAAC;IA6FxD,CAAC;aA3FQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFlB,AAlFY,CAkFX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AA5FD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACY;AAF3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA+FzB"}

package/dist/tt-button.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+export type ButtonSize = "small" | "medium" | "large";
+export type ButtonType = "button" | "submit" | "reset";
+export type ButtonCurrent = "page" | "step" | "location" | "date" | "time" | "true";
+export declare class TTButton extends LitElement {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    fullWidth: boolean;
+    pill: boolean;
+    type: ButtonType;
+    label: string;
+    current: ButtonCurrent | "";
+    expanded: "true" | "false" | "";
+    private iconOnly;
+    protected firstUpdated(): void;
+    private handleSlotChange;
+    private detectIconOnly;
+    private handleClick;
+    static styles: import("lit").CSSResult;
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-button": TTButton;
+    }
+}
+//# sourceMappingURL=tt-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-button.d.ts","sourceRoot":"","sources":["../src/tt-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAWtD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAIvD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpF,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAY;IAG5B,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAMhB,SAAS,UAAS;IAYlB,IAAI,UAAS;IAGb,IAAI,EAAE,UAAU,CAAY;IAW5B,KAAK,SAAM;IAYX,OAAO,EAAE,aAAa,GAAG,EAAE,CAAM;IAcjC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,EAAE,CAAM;IAMrC,OAAO,CAAC,QAAQ,CAAS;IAQzB,SAAS,CAAC,YAAY;IAKtB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,WAAW;IAWnB,MAAM,CAAC,MAAM,0BA4SX;IAIF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAc5B,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/tt-button.js

@@ -0,0 +1,483 @@
+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, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+let TTButton = class TTButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "primary";
+        this.size = "medium";
+        this.disabled = false;
+        this.loading = false;
+        // Reflected so the :host([full-width]) rule can match. Every multi-word
+        // property names its attribute in kebab-case explicitly; Lit's default
+        // would be the lowercased `fullwidth`.
+        this.fullWidth = false;
+        /*
+          Fully round ends. Reflected so the :host([pill]) rule can match.
+      
+          A boolean rather than a shape="pill" scale, because there are only two
+          answers and the second one has no name worth arguing about. It sets
+          --_radius, the same variable the size classes set, so it stays behind
+          --tt-group-radius: a pill inside a tt-button-group still flattens its
+          inner corners, which is what keeps the group looking like one control.
+        */
+        this.pill = false;
+        this.type = "button";
+        /*
+          The accessible name, for a button whose whole content is an icon.
+      
+          It has to live here rather than as aria-label on the host, because the
+          host is a plain custom element with no role: assistive tech reads the
+          inner <button>, and an aria-label on the outside never reaches it. An
+          icon-only button without this is announced as just "button".
+        */
+        this.label = "";
+        /*
+          Marks this button as the current one in a set: the page you are on in
+          tt-pagination, the step you are at in a wizard. Forwarded to the inner
+          <button> for the same reason as label: an aria-current on the host
+          never reaches what assistive tech reads.
+      
+          Not named ariaCurrent, which every Element already has; shadowing a
+          built-in DOM member breaks the element type.
+        */
+        this.current = "";
+        /*
+          Whether the thing this button opens is open: a menu, a drawer, a
+          collapsible panel. Forwarded to the inner <button> as aria-expanded,
+          for the same reason as label and current: on the host it reaches
+          nothing. tt-navbar's menu button set aria-expanded on the host and a
+          screen reader never heard whether the menu was open.
+      
+          A string, not a boolean, because there are THREE states: "true",
+          "false", and "" for a button that opens nothing, which must carry no
+          aria-expanded at all. A boolean cannot say the third.
+        */
+        this.expanded = "";
+        // Set from slotchange, not asked for as a prop. There is no CSS
+        // selector for "this slot has assigned nodes", and a caller who has to
+        // remember a flag will forget it.
+        this.iconOnly = false;
+    }
+    /*
+      Also checked on first render. slotchange fires only when something is
+      assigned, so a button whose default slot is EMPTY from the start
+      (one-line markup, or a design loaded with only an icon) never heard
+      one and stayed the wide, padded shape of a text button.
+    */
+    firstUpdated() {
+        const slot = this.renderRoot.querySelector("slot:not([name])");
+        if (slot)
+            this.detectIconOnly(slot);
+    }
+    handleSlotChange(event) {
+        this.detectIconOnly(event.target);
+    }
+    detectIconOnly(slot) {
+        // Whitespace-only text nodes are not content. Without the trim, the
+        // newline between the tags counts as a label and nothing is ever
+        // detected as icon-only.
+        const hasText = slot
+            .assignedNodes({ flatten: true })
+            .some((node) => (node.textContent ?? "").trim().length > 0);
+        this.iconOnly = !hasText;
+    }
+    handleClick() {
+        if (this.disabled || this.loading)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-button-click", {
+            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: inline-block;
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    :host([full-width]) {
+      display: block;
+    }
+
+    button {
+      position: relative;
+
+      /*
+        flex, not inline-flex. The host is already the inline box; an
+        inline-flex button inside it sat on a LINE inside the host, and a
+        line is at least as tall as the inherited line-height. In a
+        paragraph with line-height 2 the host grew to 36px around a 32px
+        button, so it no longer lined up with a tt-input beside it. A
+        block-level button makes no line, so the host is exactly the
+        button's height wherever it sits.
+      */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      /* Part of the size ramp, not a constant. A large button used to
+         carry the same 8px icon gap as a small one, so scaling the button
+         did not scale the space inside it and the proportions drifted. */
+      gap: var(--_gap);
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border: 1px solid transparent;
+      /* tt-button-group flattens this per position, so controls that
+         sit together share one edge instead of stacking two. */
+      border-radius: var(--tt-group-radius, var(--_radius));
+
+      /*
+        NO vertical padding. The size classes set min-height from
+        --tt-control-*, and vertical padding fights it: 14px text plus
+        10px top and bottom is ~37px, which already exceeds the 36px
+        control height, so min-height never applied and neither the
+        density modes nor the pointer:coarse touch block did anything to
+        buttons. Pad horizontally, let min-height do the vertical.
+      */
+      padding: 0 var(--tt-space-4);
+
+      font-family: inherit;
+      font-size: var(--tt-text-sm);
+      line-height: 1;
+      font-weight: 550;
+      letter-spacing: -0.01em;
+
+      cursor: pointer;
+      user-select: none;
+
+      transition:
+        background var(--tt-duration-normal) var(--tt-ease),
+        border-color var(--tt-duration-normal) var(--tt-ease),
+        box-shadow var(--tt-duration-normal) var(--tt-ease),
+        transform var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    button:active:not(:disabled):not(.is-loading) {
+      transform: scale(0.97);
+    }
+
+    button:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    /* Variants */
+
+    .primary {
+      background: var(--tt-primary);
+      color: var(--tt-primary-foreground);
+      border-color: var(--tt-primary);
+    }
+
+    .primary:hover:not(:disabled):not(.is-loading) {
+      background: color-mix(
+        in srgb,
+        var(--tt-primary) 88%,
+        var(--tt-foreground)
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--tt-primary) 88%,
+        var(--tt-foreground)
+      );
+    }
+
+    .secondary {
+      background: var(--tt-secondary);
+      color: var(--tt-secondary-foreground);
+      border-color: var(--tt-border);
+    }
+
+    .secondary:hover:not(:disabled):not(.is-loading) {
+      background: var(--tt-accent);
+      border-color: var(--tt-border);
+    }
+
+    /*
+      Ghost: no surface of its own until you touch it.
+
+      The gap this fills is every button that sits ON something rather
+      than in a form - a card's corner actions, a toolbar, an icon button
+      in a header. secondary has a border and a fill, so three of them in
+      a card corner read as three boxes competing with the content they
+      are attached to. This one is invisible at rest and only appears
+      under the pointer.
+
+      Muted at rest so it stays subordinate, full foreground on hover so
+      it does not look disabled once you are on it.
+    */
+    .ghost {
+      background: transparent;
+      color: var(--tt-muted-foreground);
+      border-color: transparent;
+    }
+
+    .ghost:hover:not(:disabled):not(.is-loading) {
+      background: var(--tt-accent);
+      color: var(--tt-foreground);
+    }
+
+    .danger {
+      background: var(--tt-destructive);
+      color: var(--tt-destructive-foreground);
+      border-color: var(--tt-destructive);
+    }
+
+    .danger:hover:not(:disabled):not(.is-loading) {
+      background: color-mix(
+        in srgb,
+        var(--tt-destructive) 88%,
+        var(--tt-foreground)
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--tt-destructive) 88%,
+        var(--tt-foreground)
+      );
+    }
+
+    /* Sizes */
+
+    /*
+      --tt-icon-size is set here rather than on ::slotted(tt-icon), because
+      custom properties inherit THROUGH the shadow boundary and a selector
+      cannot. tt-icon reads it, so a small button gets small icons with no
+      coordination at the call site.
+    */
+    /*
+      One size sets one bundle: height, padding, gap, icon size, radius and
+      type. Picking any of those independently is how a design system drifts,
+      because the ratios between them are the thing that has to hold.
+
+      Icon sizes are the same 14 / 16 / 18 as before, now expressed in units
+      so they move with --tt-unit rather than staying frozen in px while
+      everything around them scales.
+
+      Radius grows with the box: a 40px-tall button with a 32px button's
+      corner reads as tight. Both are floored well below the height, so
+      neither ever becomes a pill by accident.
+    */
+    .small {
+      min-height: var(--tt-control-sm);
+      padding: 0 var(--tt-space-3);
+      /* text-sm, not text-xs. A small button used to be 12px while a
+         small tt-input beside it was 14px, and the pair read as two
+         different sizes rather than one row. */
+      font-size: var(--tt-text-sm);
+      --_gap: calc(var(--tt-unit) * 1.5); /* 6px */
+      --_radius: var(--tt-radius-md);
+      --tt-icon-size: calc(var(--tt-unit) * 3.5); /* 14px */
+    }
+
+    /* 16px sides, was 20. At 20 a 36px button was wider than it was
+       tall by more than its label needed, and an icon plus a word read
+       as a loose row rather than one control. */
+    .medium {
+      min-height: var(--tt-control-md);
+      padding: 0 var(--tt-space-4);
+      --_gap: calc(var(--tt-unit) * 2); /* 8px */
+      --_radius: var(--tt-radius-md);
+      --tt-icon-size: calc(var(--tt-unit) * 4); /* 16px */
+    }
+
+    .large {
+      min-height: var(--tt-control-lg);
+      padding: 0 var(--tt-space-6);
+      font-size: var(--tt-text-md);
+      --_gap: calc(var(--tt-unit) * 2.5); /* 10px */
+      --_radius: var(--tt-radius-lg);
+      --tt-icon-size: calc(var(--tt-unit) * 4.5); /* 18px */
+    }
+
+    /*
+      After the size classes on purpose. Each of those sets --_radius, so
+      this has to come later to win, and it overrides only the radius: a
+      pill keeps its size's height, padding and icon scale.
+
+      An icon-only pill lands on a circle, which is the right answer and
+      needs no separate rule.
+    */
+    :host([pill]) button {
+      --_radius: var(--tt-radius-full);
+    }
+
+    /*
+      Icon-only: square, not a wide pill.
+
+      Horizontal padding sized for a word leaves a lone icon floating in
+      the middle of a 56px box. Detected from the slot rather than asked
+      for as a prop, so a caller cannot forget to set it.
+    */
+    .icon-only {
+      padding: 0;
+      width: var(--tt-control-md);
+    }
+
+    .icon-only.small {
+      width: var(--tt-control-sm);
+    }
+
+    .icon-only.large {
+      width: var(--tt-control-lg);
+    }
+
+    /* States */
+
+    button:disabled {
+      opacity: var(--tt-opacity-disabled);
+      cursor: not-allowed;
+    }
+
+    /* Looks disabled, but is not: see the comment in render(). */
+    button.is-loading {
+      opacity: var(--tt-opacity-disabled);
+      cursor: progress;
+      color: transparent;
+    }
+
+    /* Spinner */
+
+    .spinner {
+      position: absolute;
+
+      width: 16px;
+      height: 16px;
+
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--tt-radius-full);
+
+      color: inherit;
+
+      animation: spin var(--tt-duration-spin) linear infinite;
+    }
+
+    .primary .spinner,
+    .danger .spinner {
+      color: var(--tt-primary-foreground);
+    }
+
+    .secondary .spinner {
+      color: var(--tt-secondary-foreground);
+    }
+
+    ::slotted(tt-icon) {
+      flex: 0 0 auto;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Durations are handled centrally in tokens.css, including slowing the
+       spinner. This is only here for the press transform, which is a state
+       rather than a transition and so survives a zeroed duration: without
+       this the button would still jump on every click. */
+    @media (prefers-reduced-motion: reduce) {
+      button:active:not(:disabled):not(.is-loading) {
+        transform: none;
+      }
+    }
+  `; }
+    // Focus has to be forwarded: focusing the host focuses nothing, since the
+    // control lives in the shadow root. Same as tt-slider and tt-input.
+    focus(options) {
+        this.renderRoot?.querySelector("button")?.focus(options);
+    }
+    /*
+      LOADING IS NOT DISABLED.
+  
+      It used to be: loading set the native `disabled` too. A disabled button
+      cannot hold focus, so pressing Save on the keyboard moved focus to
+      <body> the instant the request started, and a keyboard user had to
+      find their way back from the top of the page. aria-disabled says "not
+      available" to a screen reader while focus stays put, and handleClick
+      already ignores clicks while loading.
+    */
+    render() {
+        return html `
+      <button
+        part="button"
+        @click=${this.handleClick}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-disabled=${ifDefined(this.loading ? "true" : undefined)}
+        aria-busy=${this.loading ? "true" : "false"}
+        aria-expanded=${ifDefined(this.expanded || undefined)}
+        aria-label=${this.label || nothing}
+        aria-current=${ifDefined(this.current || undefined)}
+        class="${this.variant} ${this.size} ${this.loading
+            ? "is-loading"
+            : ""} ${this.iconOnly ? "icon-only" : ""}"
+      >
+        ${this.loading
+            ? html `<span class="spinner" aria-hidden="true"></span>`
+            : ""}
+
+        <slot name="icon"></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+
+        <!-- A trailing icon gets its own slot rather than being ordered by
+             hand, because a chevron or an external-link mark belongs after
+             the label and slot order is fixed. -->
+        <slot name="icon-end"></slot>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "full-width", reflect: true })
+], TTButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTButton.prototype, "pill", void 0);
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "current", void 0);
+__decorate([
+    property({ type: String })
+], TTButton.prototype, "expanded", void 0);
+__decorate([
+    state()
+], TTButton.prototype, "iconOnly", void 0);
+TTButton = __decorate([
+    customElement("tt-button")
+], TTButton);
+export { TTButton };
+//# sourceMappingURL=tt-button.js.map

package/dist/tt-button.js.map

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

package/dist/tt-card.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+export type CardVariant = "default" | "outlined" | "elevated";
+export type CardPadding = "none" | "small" | "medium" | "large";
+export type CardRadius = "none" | "small" | "medium" | "large" | "xlarge";
+export declare class TTCard extends LitElement {
+    variant: CardVariant;
+    padding: CardPadding;
+    radius: CardRadius;
+    clickable: boolean;
+    inline: boolean;
+    heading: string;
+    description: string;
+    headingLevel: number;
+    private hasHeaderSlot;
+    private hasActions;
+    static styles: import("lit").CSSResult;
+    private onKeydown;
+    private onSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-card": TTCard;
+    }
+}
+//# sourceMappingURL=tt-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-card.d.ts","sourceRoot":"","sources":["../src/tt-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1E,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,EAAE,WAAW,CAAa;IAMjC,OAAO,EAAE,WAAW,CAAY;IAGhC,MAAM,EAAE,UAAU,CAAY;IAG9B,SAAS,UAAS;IAKlB,MAAM,UAAS;IAUf,OAAO,SAAM;IAGb,WAAW,SAAM;IAKjB,YAAY,SAAK;IAKR,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,0BA4RX;IAEF,OAAO,CAAC,SAAS,CAYf;IAEF,OAAO,CAAC,YAAY;IAgBpB,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}