@tartaguti/ui-components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-input.d.ts","sourceRoot":"","sources":["../src/tt-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAyBrD,MAAM,MAAM,iBAAiB,GACzB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,YAAY,GACZ,aAAa,GACb,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,OAAO,GACP,KAAK,GACL,KAAK,GACL,MAAM,GACN,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,CAAC;AAgBb,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,CAAC;AAIX,qBACa,OAAQ,SAAQ,UAAU;IAGrC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAG3C,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAagC,IAAI,SAAM;IAGrD,IAAI,EAAE,SAAS,CAAU;IAezB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAGjC,IAAI,EAAE,SAAS,CAAY;IAM3B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,KAAK,SAAM;IAUX,WAAW,UAAS;IAEpB,OAAO,CAAC,OAAO,CAAuB;IAEtC,IAAI,IAAI,2BAEP;IACD,IAAI,QAAQ,kBAEX;IAID,aAAa;IAIb,cAAc;IAId,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,cAAc;IAS/B,OAAO,CAAC,aAAa;IAiBrB,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,YAAY;IAYpB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAU5B,OAAO,CAAC,YAAY;IAOpB,MAAM,CAAC,MAAM,4BA0OV;IAEH,MAAM;CAqEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/tt-input.js

@@ -0,0 +1,476 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { property, customElement } from "lit/decorators.js";
+import { srOnly } from "./sr-only.js";
+let uid = 0;
+let TTInput = class TTInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        this.label = "";
+        this.placeholder = "";
+        this.value = "";
+        // Field name under which the value is submitted with the form.
+        /*
+          Reflected, and it has to be.
+      
+          A form-associated custom element is submitted under its name CONTENT
+          ATTRIBUTE, not its JS property. Without reflect, setting .name = "x"
+          from script leaves the attribute absent and the field vanishes from
+          FormData with no error anywhere. It only appeared to work because
+          every call site so far wrote name="x" in markup, which sets the
+          attribute directly.
+        */
+        this.name = "";
+        this.type = "text";
+        this.size = "medium";
+        // Reflected, as on every other control, so tt-input[disabled] works as
+        // a selector. tt-modal's focus trap skips :not([disabled]) controls,
+        // and without the attribute it never could.
+        this.disabled = false;
+        this.required = false;
+        this.fullWidth = false;
+        this.error = "";
+        /*
+          Keeps the label for screen readers while taking it off screen. Same
+          contract as tt-checkbox: for a field whose purpose is obvious to the
+          eye (a search box with an icon, a chat composer) but would otherwise
+          have no name at all. A placeholder is not a name: it vanishes as soon
+          as anyone types.
+        */
+        this.labelHidden = false;
+        this.inputId = `tt-input-${++uid}`;
+    }
+    // Participate in native <form> submission, validation and reset.
+    // Without this the shadow-DOM <input> is invisible to FormData.
+    static { this.formAssociated = true; }
+    get form() {
+        return this.internals.form;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    // Exposed so tt-form (and any consumer) can validate without reaching
+    // into internals. Form-associated elements do not get these for free.
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFormState();
+    }
+    updated(changed) {
+        if (changed.has("value") || changed.has("required")) {
+            this.syncFormState();
+        }
+    }
+    // Reports both the value and whether it satisfies `required`. Without
+    // setValidity the field submits happily while empty, which is what this
+    // component did until tests caught it.
+    syncFormState() {
+        this.internals.setFormValue(this.value);
+        const missing = this.required && this.value.trim() === "";
+        if (missing) {
+            this.internals.setValidity({ valueMissing: true }, "Please fill in this field.", this.renderRoot?.querySelector("input") ?? undefined);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    // Called by the browser when the containing form is reset.
+    formResetCallback() {
+        this.value = "";
+    }
+    // Called by the browser when the form state is restored (bfcache, autofill).
+    formStateRestoreCallback(state) {
+        this.value = state ?? "";
+    }
+    handleInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.dispatchEvent(new CustomEvent("tt-input", {
+            detail: {
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleChange() {
+        this.dispatchEvent(new CustomEvent("tt-change", {
+            detail: {
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    focus(options) {
+        this.renderRoot?.querySelector("input")?.focus(options);
+    }
+    /*
+      A click on the box's padding, or on a decorative prefix icon, focuses
+      the input. The whole field used to sit inside the <label>, which did
+      this for free, and also swept everything else in the box into the
+      field's NAME. See render().
+    */
+    focusFromBox(event) {
+        const target = event.target;
+        if (target === event.currentTarget || target.closest('[aria-hidden="true"]')) {
+            this.focus();
+        }
+    }
+    static { this.styles = [srOnly, css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      /*
+        A grid or flex item defaults to min-width: auto, which floors it at
+        its MIN-CONTENT width rather than letting it shrink.
+
+        For most fields that is harmless. For type="date" the min-content
+        width is the whole dd/mm/yyyy mask plus the picker icon, so in a
+        1fr 1fr row the date field pushed its own column past its share,
+        the field beside it shrank to compensate, and the pair stopped
+        lining up with the full-width fields above. The date looked like it
+        had wandered left, which it had.
+
+        Every field component carries this now, because any of them can end
+        up as a grid item and the failure is silent until a layout looks
+        subtly wrong.
+      */
+      min-width: 0;
+
+      display: inline-block;
+      width: auto;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    :host([full-width]) {
+      display: block;
+      width: 100%;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+    }
+
+    label {
+      font-size: var(--tt-text-sm);
+      font-weight: var(--tt-weight-medium);
+      letter-spacing: -0.005em;
+
+      color: var(--tt-foreground);
+    }
+
+    .req {
+      margin-left: 2px;
+      color: var(--tt-destructive);
+    }
+
+    /*
+      The BORDER lives on this wrapper, not on the input, so slotted
+      content can sit inside the field rather than beside it. A search
+      icon or a currency symbol belongs within the box it labels; bolting
+      a separate control on next to it reads as two controls.
+    */
+    .control {
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-2);
+
+      width: 100%;
+      box-sizing: border-box;
+
+      border: 1px solid var(--tt-input);
+      /* 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(--tt-radius));
+
+      background: var(--tt-field);
+      color: var(--tt-foreground);
+
+      transition: border-color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    .control:hover:not(.disabled):not(.error) {
+      border-color: var(--tt-border-strong);
+    }
+
+    /*
+      focus-within, not focus. The input no longer carries the border, so
+      the ring has to come from the wrapper when anything inside it takes
+      focus, including a slotted clear button.
+    */
+    .control:focus-within {
+      border-color: var(--tt-ring);
+
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: calc(var(--tt-ring-width) * -1);
+    }
+
+    .control.disabled {
+      background: var(--tt-muted);
+      color: var(--tt-muted-foreground);
+      cursor: not-allowed;
+    }
+
+    /*
+      Stripped bare. The wrapper owns the box now, so the input owning any
+      of it again would draw a second one inside the first.
+    */
+    input {
+      flex: 1;
+      min-width: 0;
+
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: inherit;
+
+      font-family: inherit;
+      font-size: inherit;
+    }
+
+    input:focus {
+      outline: none;
+    }
+
+    input::placeholder {
+      color: var(--tt-muted-foreground);
+    }
+
+    /*
+      Date and time fields.
+
+      The browser draws its own editor and picker button inside the input,
+      and neither of them respects the box this component set up. Chrome
+      pads ::-webkit-datetime-edit internally, which pushes the text off the
+      baseline every other field in the row sits on, and it gives the picker
+      button its own margin, so the icon lands short of the field's right
+      padding instead of flush with it. Next to a plain input or a number
+      field the whole row reads as misaligned.
+
+      Stripping both back to zero puts the text and the icon on exactly the
+      edges .control already defines. The picker icon itself needs no
+      recolouring: tokens.css sets color-scheme, so the browser draws it
+      light or dark to match on its own.
+    */
+    input::-webkit-datetime-edit {
+      padding: 0;
+    }
+
+    input::-webkit-datetime-edit-fields-wrapper {
+      padding: 0;
+    }
+
+    input::-webkit-calendar-picker-indicator {
+      /* auto rather than a fixed value, so it sits at the right edge
+         whether or not the field also has a suffix slotted in. */
+      margin: 0;
+      margin-inline-start: auto;
+      padding: 0;
+
+      cursor: pointer;
+
+      /* Matches the weight of a tt-icon in the same row, which is drawn at
+         the muted foreground rather than at full contrast. */
+      opacity: 0.6;
+
+      transition: opacity var(--tt-duration-fast) var(--tt-ease);
+    }
+
+    input::-webkit-calendar-picker-indicator:hover {
+      opacity: 1;
+    }
+
+    input:disabled {
+      color: inherit;
+      cursor: not-allowed;
+    }
+
+    /* Slots are display:contents by default, so an empty one adds no box
+       and costs no gap. Nothing to hide when unused. */
+    ::slotted(*) {
+      flex: 0 0 auto;
+      color: var(--tt-muted-foreground);
+    }
+
+    /* min-height, not height: the field still grows for a slotted button
+       or a taller font, it simply never sits below the control size. */
+    .small {
+      min-height: var(--tt-control-sm);
+      padding: 0 11px;
+      font-size: var(--tt-text-sm);
+    }
+
+    .medium {
+      min-height: var(--tt-control-md);
+      padding: 0 13px;
+      font-size: var(--tt-text-sm);
+    }
+
+    .large {
+      min-height: var(--tt-control-lg);
+      padding: 0 16px;
+      font-size: var(--tt-text-md);
+    }
+
+    .error {
+      border-color: var(--tt-destructive);
+    }
+
+    .error:hover:not(.disabled),
+    .error:focus-within {
+      border-color: var(--tt-destructive);
+    }
+
+    /* An invalid field still gets a ring, in the destructive colour, so
+       the ring carries the error instead of a second glow doing it. */
+    .error:focus-within {
+      outline-color: var(--tt-destructive);
+    }
+
+    .error-text {
+      color: var(--tt-destructive);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+    }
+
+    /* iOS zooms the viewport when a focused field is under 16px. */
+    @media (max-width: 480px) {
+      .small,
+      .medium,
+      .large {
+        font-size: 16px;
+      }
+    }
+
+  `]; }
+    render() {
+        const errorId = this.error ? `${this.inputId}-error` : undefined;
+        /*
+          The <label> holds the label TEXT and nothing else.
+    
+          It used to wrap the whole field: the prefix and suffix slots and the
+          error message too. A <label>'s whole content becomes the input's
+          accessible name, so a slotted clear button made the field's name
+          "Email Clear search", and an error was read twice, once as the name
+          and once as the description. Worse, with no label set, tt-search's
+          field was named just "Clear search".
+        */
+        return html `
+      <div class="field">
+        ${this.label
+            ? html `
+              <label
+                for=${this.inputId}
+                part="label"
+                class=${this.labelHidden ? "sr-only" : ""}
+              >
+                ${this.label}
+                ${this.required
+                ? html `<span class="req" aria-hidden="true">*</span>`
+                : ""}
+              </label>
+            `
+            : ""}
+
+        <div
+          part="control"
+          class="control ${this.size} ${this.error ? "error" : ""} ${this
+            .disabled
+            ? "disabled"
+            : ""}"
+          @click=${this.focusFromBox}
+        >
+          <slot name="prefix"></slot>
+
+          <input
+            part="input"
+            id=${this.inputId}
+            .value=${this.value}
+            name=${this.name}
+            placeholder=${this.placeholder}
+            type=${this.type}
+            autocomplete=${ifDefined(this.autocomplete)}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${ifDefined(errorId)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+
+          <slot name="suffix"></slot>
+        </div>
+
+        ${this.error
+            ? html `
+              <span id=${ifDefined(errorId)} class="error-text" role="alert">
+                ${this.error}
+              </span>
+            `
+            : null}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], TTInput.prototype, "label", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTInput.prototype, "name", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "type", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "autocomplete", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTInput.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "full-width", reflect: true })
+], TTInput.prototype, "fullWidth", void 0);
+__decorate([
+    property()
+], TTInput.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "label-hidden", reflect: true })
+], TTInput.prototype, "labelHidden", void 0);
+TTInput = __decorate([
+    customElement("tt-input")
+], TTInput);
+export { TTInput };
+//# sourceMappingURL=tt-input.js.map

package/dist/tt-input.js.map

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

package/dist/tt-kbd.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+export type KbdSize = "small" | "medium";
+/**
+ * A keyboard key, as printed in documentation and menus.
+ *
+ * Renders a real `<kbd>`, which is the element the HTML spec defines for
+ * "user input from a keyboard". A styled `<span>` looks identical and
+ * tells a screen reader nothing, so this is one of the rare cases where
+ * picking the right tag IS the accessibility work.
+ *
+ * Presentational only. It displays a key, it never listens for one.
+ *
+ * ---------------------------------------------------------------------
+ * ON `keys`.
+ *
+ * A combination is one idea, so it is one element:
+ *
+ *   <tt-kbd keys="Ctrl+K"></tt-kbd>
+ *
+ * splits on "+" and renders a separator between the parts. Writing three
+ * elements and two literal plus signs in the markup instead would leave
+ * the separator's spacing to whoever typed it, and it would be different
+ * on every page by the end of the month.
+ *
+ * The default slot is the escape hatch for anything that is not a
+ * plus-separated combination, an arrow glyph say.
+ */
+export declare class TTKbd extends LitElement {
+    keys: string;
+    size: KbdSize;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-kbd": TTKbd;
+    }
+}
+//# sourceMappingURL=tt-kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-kbd.d.ts","sourceRoot":"","sources":["../src/tt-kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,KAAM,SAAQ,UAAU;IACP,IAAI,SAAM;IAEK,IAAI,EAAE,OAAO,CAAY;IAEpE,MAAM,CAAC,MAAM,0BAsEX;IAEF,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/tt-kbd.js

@@ -0,0 +1,145 @@
+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";
+/**
+ * A keyboard key, as printed in documentation and menus.
+ *
+ * Renders a real `<kbd>`, which is the element the HTML spec defines for
+ * "user input from a keyboard". A styled `<span>` looks identical and
+ * tells a screen reader nothing, so this is one of the rare cases where
+ * picking the right tag IS the accessibility work.
+ *
+ * Presentational only. It displays a key, it never listens for one.
+ *
+ * ---------------------------------------------------------------------
+ * ON `keys`.
+ *
+ * A combination is one idea, so it is one element:
+ *
+ *   <tt-kbd keys="Ctrl+K"></tt-kbd>
+ *
+ * splits on "+" and renders a separator between the parts. Writing three
+ * elements and two literal plus signs in the markup instead would leave
+ * the separator's spacing to whoever typed it, and it would be different
+ * on every page by the end of the month.
+ *
+ * The default slot is the escape hatch for anything that is not a
+ * plus-separated combination, an arrow glyph say.
+ */
+let TTKbd = class TTKbd extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.keys = "";
+        this.size = "medium";
+    }
+    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;
+      vertical-align: middle;
+      max-width: 100%;
+    }
+
+    .kbd {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--tt-space-1);
+
+      font-family: var(--tt-font-sans);
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      min-width: 1.5em;
+      padding: 0 var(--tt-space-2);
+
+      /* The height comes from a control token rather than from padding,
+         so a key beside an input lines up with it, and so the density
+         modes and the coarse-pointer block remap it for free. */
+      height: calc(var(--tt-control-sm) * 0.72);
+
+      font-family: var(--tt-font-mono);
+      font-size: var(--tt-text-xs);
+      font-weight: var(--tt-weight-medium);
+
+      /* A key is not a paragraph. An inherited body line-height adds
+         invisible space above and below the glyph and the key comes out
+         taller than it looks. Same trap as tt-badge. */
+      line-height: 1;
+      white-space: nowrap;
+
+      color: var(--tt-muted-foreground);
+      background: var(--tt-muted);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-sm);
+
+      /* One hairline under the key. This is the whole illusion of a
+         physical key, and one pixel is enough: a real shadow here reads
+         as a floating card rather than as a keycap. */
+      box-shadow: 0 1px 0 var(--tt-border);
+    }
+
+    :host([size="small"]) kbd {
+      height: calc(var(--tt-control-sm) * 0.6);
+      padding: 0 var(--tt-space-1);
+      font-size: 0.6875rem;
+    }
+
+    .sep {
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+      opacity: 0.6;
+    }
+  `; }
+    render() {
+        /*
+          Filter after splitting, so "Ctrl++" (the plus key) does not produce
+          an empty key between two separators.
+        */
+        const parts = this.keys
+            .split("+")
+            .map((k) => k.trim())
+            .filter(Boolean);
+        if (parts.length === 0) {
+            return html `<span class="kbd"
+        ><kbd part="key"><slot></slot></kbd
+      ></span>`;
+        }
+        return html `
+      <span class="kbd">
+        ${parts.map((key, i) => html `
+            ${i > 0 ? html `<span class="sep" aria-hidden="true">+</span>` : ""}
+            <kbd part="key">${key}</kbd>
+          `)}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTKbd.prototype, "keys", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTKbd.prototype, "size", void 0);
+TTKbd = __decorate([
+    customElement("tt-kbd")
+], TTKbd);
+export { TTKbd };
+//# sourceMappingURL=tt-kbd.js.map

package/dist/tt-kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-kbd.js","sourceRoot":"","sources":["../src/tt-kbd.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QACuB,SAAI,GAAG,EAAE,CAAC;QAEK,SAAI,GAAY,QAAQ,CAAC;IAqGtE,CAAC;aAnGQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsElB,AAtEY,CAsEX;IAEF,MAAM;QACJ;;;UAGE;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI;aACpB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;aACpB,MAAM,CAAC,OAAO,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA;;eAEF,CAAC;QACZ,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,GAAG,CACT,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;cACZ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,CAAC,CAAC,CAAC,EAAE;8BAChD,GAAG;WACtB,CACF;;KAEJ,CAAC;IACJ,CAAC;;AAtG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAW;AAEK;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAA0B;AAHzD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAwGjB"}