kanto-ds 1.0.0

package/dist/components/core/kt-card/kt-card.d.ts

@@ -0,0 +1,62 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtCardImagePosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * A surface for a block of related content: 12px radius, a 1px border, 24px of
+ * padding and a 20px internal gap.
+ *
+ * Set `clickable` to turn the whole card into a control. Unlike the div-with-a
+ * -click-handler this replaces, a clickable card is reachable by keyboard,
+ * announces itself as a button, and responds to Enter and Space.
+ *
+ * @element kt-card
+ *
+ * @slot - The card body.
+ * @slot header - Above the body.
+ * @slot footer - Below the body.
+ * @slot media - Replaces the `image` attribute for anything that is not a
+ *   plain `<img>` — a chart, a map, a video.
+ *
+ * @csspart base - The card container.
+ * @csspart media - The image or media well.
+ * @csspart body - The header/content/footer column.
+ *
+ * @fires kt-card-click - The card was activated, by pointer or keyboard.
+ *   Only fired when `clickable` is set.
+ */
+export declare class KtCard extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private hasHeader;
+    private hasFooter;
+    /** Makes the card a keyboard-reachable control. */
+    clickable: boolean;
+    /**
+     * Marks the card as chosen — one of a set of filters, a picked plan.
+     *
+     * Pairs with `clickable`: a card the user cannot toggle has no business
+     * looking toggled.
+     */
+    selected: boolean;
+    /** Convenience image. For anything richer, use the `media` slot. */
+    image: string;
+    /** Alternative text for `image`. Empty means decorative. */
+    imageAlt: string;
+    imagePosition: KtCardImagePosition;
+    /** Width (left/right) or height (top/bottom) of the media well. */
+    imageSize: string;
+    /**
+     * The initial `slotchange` is queued as a microtask and can land after the
+     * first render has settled, so read the slots once directly as well.
+     */
+    firstUpdated(): void;
+    private readSlots;
+    private onSlotChange;
+    private activate;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-card': KtCard;
+    }
+}

package/dist/components/core/kt-card/kt-card.js

@@ -0,0 +1,230 @@
+import { css as f, nothing as r, html as d } from "lit";
+import { state as g, property as a } from "lit/decorators.js";
+import { classMap as n } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { K as m, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as b } from "../../../chunks/events-Bjl5Zmmq.js";
+import { h as p } from "../../../chunks/slots-BPbIdxAJ.js";
+var y = Object.defineProperty, i = (s, e, c, k) => {
+  for (var o = void 0, l = s.length - 1, h; l >= 0; l--)
+    (h = s[l]) && (o = h(e, c, o) || o);
+  return o && y(e, c, o), o;
+};
+class t extends m {
+  constructor() {
+    super(...arguments), this.hasHeader = !1, this.hasFooter = !1, this.clickable = !1, this.selected = !1, this.image = "", this.imageAlt = "", this.imagePosition = "left", this.imageSize = "120px";
+  }
+  static {
+    this.styles = [
+      m.styles,
+      f`
+      :host {
+        display: block;
+      }
+
+      /* No height on the host: a grid or a flex row stretches it already, and
+         forcing 100% made a card in a flex *column* grow to the container
+         instead of to its contents. .card fills whatever the host ends up
+         being, which is what kept equal-height rows working. */
+
+      .card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: var(--padding-card);
+        gap: var(--gap-card);
+        color: var(--text-body);
+        background-color: transparent;
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+        /* Same reason as the fields: an outline-color with nothing to start
+           from animates out of the text colour. */
+        outline: var(--border-width) solid transparent;
+        transition:
+          background-color var(--duration-instant),
+          border-color var(--duration-instant),
+          outline-color var(--duration-instant);
+      }
+
+      .clickable {
+        cursor: pointer;
+      }
+      .clickable:hover {
+        background-color: var(--color-dark-14);
+        border-color: var(--color-dark-24);
+        outline: var(--border-width) solid var(--color-dark-24);
+      }
+      .clickable:active {
+        background-color: var(--color-dark-15);
+        border-color: var(--color-primary-base);
+        outline: var(--border-width) solid var(--color-primary-base);
+      }
+      .clickable:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      /* Selection lives on the inner card, not the host: the radius is here,
+         and an outline only follows a radius the same element declares. */
+      .selected,
+      .selected:hover,
+      .selected:active {
+        background-color: var(--color-primary-soft);
+        border-color: var(--color-primary-base);
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--gap-card);
+        min-width: 0;
+      }
+
+      .content {
+        flex: 1;
+      }
+
+      .media {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      /* --media-size is set inline from the imageSize property; which axis it
+         lands on is the position class's business, not the template's. */
+      .image-left .media,
+      .image-right .media {
+        width: var(--media-size);
+      }
+      .image-top .media,
+      .image-bottom .media {
+        height: var(--media-size);
+      }
+
+      .media ::slotted(*),
+      .media img {
+        display: block;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        border-radius: var(--border-radius);
+      }
+
+      /* Image position drives the flex direction of the card itself. */
+      .image-left {
+        flex-direction: row;
+      }
+      .image-right {
+        flex-direction: row-reverse;
+      }
+      .image-top {
+        flex-direction: column;
+      }
+      .image-bottom {
+        flex-direction: column-reverse;
+      }
+      .image-top .media,
+      .image-bottom .media {
+        width: 100%;
+      }
+
+      /* Collapsed from JS, not from :has(): a wrapper around a <slot> always
+         has one element child — the slot — so :has(*) matches even when
+         nothing was assigned, and the rule never fired. */
+      .header.empty,
+      .footer.empty {
+        display: none;
+      }
+    `
+    ];
+  }
+  /**
+   * The initial `slotchange` is queued as a microtask and can land after the
+   * first render has settled, so read the slots once directly as well.
+   */
+  firstUpdated() {
+    this.readSlots();
+  }
+  readSlots() {
+    const e = this.shadowRoot;
+    this.hasHeader = p(e?.querySelector('slot[name="header"]')), this.hasFooter = p(e?.querySelector('slot[name="footer"]'));
+  }
+  onSlotChange() {
+    this.readSlots();
+  }
+  activate() {
+    this.clickable && b(this, "kt-card-click");
+  }
+  onKeyDown(e) {
+    this.clickable && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.activate()));
+  }
+  render() {
+    const e = !!this.image || this.querySelector('[slot="media"]') !== null;
+    return d`<div
+      part="base"
+      class=${n({
+      card: !0,
+      clickable: this.clickable,
+      selected: this.selected,
+      [`image-${this.imagePosition}`]: e
+    })}
+      role=${this.clickable ? "button" : r}
+      aria-pressed=${this.clickable ? String(this.selected) : r}
+      tabindex=${this.clickable ? 0 : r}
+      @click=${this.activate}
+      @keydown=${this.onKeyDown}
+    >
+      ${e ? d`<div
+              part="media"
+              class="media"
+              style=${u({ "--media-size": this.imageSize })}
+            >
+              <slot name="media">
+                ${this.image ? d`<img src=${this.image} alt=${this.imageAlt} />` : r}
+              </slot>
+            </div>` : r}
+      <div part="body" class="body">
+        <div class=${n({ header: !0, empty: !this.hasHeader })}>
+          <slot name="header" @slotchange=${this.onSlotChange}></slot>
+        </div>
+        <div class="content"><slot></slot></div>
+        <div class=${n({ footer: !0, empty: !this.hasFooter })}>
+          <slot name="footer" @slotchange=${this.onSlotChange}></slot>
+        </div>
+      </div>
+    </div>`;
+  }
+}
+i([
+  g()
+], t.prototype, "hasHeader");
+i([
+  g()
+], t.prototype, "hasFooter");
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "clickable");
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "selected");
+i([
+  a({ type: String })
+], t.prototype, "image");
+i([
+  a({ type: String, attribute: "image-alt" })
+], t.prototype, "imageAlt");
+i([
+  a({ type: String, attribute: "image-position" })
+], t.prototype, "imagePosition");
+i([
+  a({ type: String, attribute: "image-size" })
+], t.prototype, "imageSize");
+v("kt-card", t);
+export {
+  t as KtCard
+};
+//# sourceMappingURL=kt-card.js.map

package/dist/components/core/kt-card/kt-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-card.js","sources":["../../../../src/components/core/kt-card/kt-card.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { hasAssignedContent } from '#internal/slots';\n\nexport type KtCardImagePosition = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * A surface for a block of related content: 12px radius, a 1px border, 24px of\n * padding and a 20px internal gap.\n *\n * Set `clickable` to turn the whole card into a control. Unlike the div-with-a\n * -click-handler this replaces, a clickable card is reachable by keyboard,\n * announces itself as a button, and responds to Enter and Space.\n *\n * @element kt-card\n *\n * @slot - The card body.\n * @slot header - Above the body.\n * @slot footer - Below the body.\n * @slot media - Replaces the `image` attribute for anything that is not a\n *   plain `<img>` — a chart, a map, a video.\n *\n * @csspart base - The card container.\n * @csspart media - The image or media well.\n * @csspart body - The header/content/footer column.\n *\n * @fires kt-card-click - The card was activated, by pointer or keyboard.\n *   Only fired when `clickable` is set.\n */\nexport class KtCard extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      /* No height on the host: a grid or a flex row stretches it already, and\n         forcing 100% made a card in a flex *column* grow to the container\n         instead of to its contents. .card fills whatever the host ends up\n         being, which is what kept equal-height rows working. */\n\n      .card {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        padding: var(--padding-card);\n        gap: var(--gap-card);\n        color: var(--text-body);\n        background-color: transparent;\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n        /* Same reason as the fields: an outline-color with nothing to start\n           from animates out of the text colour. */\n        outline: var(--border-width) solid transparent;\n        transition:\n          background-color var(--duration-instant),\n          border-color var(--duration-instant),\n          outline-color var(--duration-instant);\n      }\n\n      .clickable {\n        cursor: pointer;\n      }\n      .clickable:hover {\n        background-color: var(--color-dark-14);\n        border-color: var(--color-dark-24);\n        outline: var(--border-width) solid var(--color-dark-24);\n      }\n      .clickable:active {\n        background-color: var(--color-dark-15);\n        border-color: var(--color-primary-base);\n        outline: var(--border-width) solid var(--color-primary-base);\n      }\n      .clickable:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      /* Selection lives on the inner card, not the host: the radius is here,\n         and an outline only follows a radius the same element declares. */\n      .selected,\n      .selected:hover,\n      .selected:active {\n        background-color: var(--color-primary-soft);\n        border-color: var(--color-primary-base);\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .body {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: var(--gap-card);\n        min-width: 0;\n      }\n\n      .content {\n        flex: 1;\n      }\n\n      .media {\n        display: flex;\n        flex: 0 0 auto;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n      }\n\n      /* --media-size is set inline from the imageSize property; which axis it\n         lands on is the position class's business, not the template's. */\n      .image-left .media,\n      .image-right .media {\n        width: var(--media-size);\n      }\n      .image-top .media,\n      .image-bottom .media {\n        height: var(--media-size);\n      }\n\n      .media ::slotted(*),\n      .media img {\n        display: block;\n        width: 100%;\n        height: auto;\n        object-fit: cover;\n        border-radius: var(--border-radius);\n      }\n\n      /* Image position drives the flex direction of the card itself. */\n      .image-left {\n        flex-direction: row;\n      }\n      .image-right {\n        flex-direction: row-reverse;\n      }\n      .image-top {\n        flex-direction: column;\n      }\n      .image-bottom {\n        flex-direction: column-reverse;\n      }\n      .image-top .media,\n      .image-bottom .media {\n        width: 100%;\n      }\n\n      /* Collapsed from JS, not from :has(): a wrapper around a <slot> always\n         has one element child — the slot — so :has(*) matches even when\n         nothing was assigned, and the rule never fired. */\n      .header.empty,\n      .footer.empty {\n        display: none;\n      }\n    `,\n  ];\n\n  @state()\n  private hasHeader = false;\n\n  @state()\n  private hasFooter = false;\n\n  /** Makes the card a keyboard-reachable control. */\n  @property({ type: Boolean, reflect: true })\n  clickable = false;\n\n  /**\n   * Marks the card as chosen — one of a set of filters, a picked plan.\n   *\n   * Pairs with `clickable`: a card the user cannot toggle has no business\n   * looking toggled.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Convenience image. For anything richer, use the `media` slot. */\n  @property({ type: String })\n  image = '';\n\n  /** Alternative text for `image`. Empty means decorative. */\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  @property({ type: String, attribute: 'image-position' })\n  imagePosition: KtCardImagePosition = 'left';\n\n  /** Width (left/right) or height (top/bottom) of the media well. */\n  @property({ type: String, attribute: 'image-size' })\n  imageSize = '120px';\n\n  /**\n   * The initial `slotchange` is queued as a microtask and can land after the\n   * first render has settled, so read the slots once directly as well.\n   */\n  override firstUpdated(): void {\n    this.readSlots();\n  }\n\n  private readSlots(): void {\n    const root = this.shadowRoot;\n    this.hasHeader = hasAssignedContent(root?.querySelector('slot[name=\"header\"]'));\n    this.hasFooter = hasAssignedContent(root?.querySelector('slot[name=\"footer\"]'));\n  }\n\n  private onSlotChange(): void {\n    this.readSlots();\n  }\n\n  private activate(): void {\n    if (this.clickable) emit(this, 'kt-card-click');\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.clickable) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space scrolls the page unless we claim it.\n    event.preventDefault();\n    this.activate();\n  }\n\n  override render(): TemplateResult {\n    const hasMedia = Boolean(this.image) || this.querySelector('[slot=\"media\"]') !== null;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        card: true,\n        clickable: this.clickable,\n        selected: this.selected,\n        [`image-${this.imagePosition}`]: hasMedia,\n      })}\n      role=${this.clickable ? 'button' : nothing}\n      aria-pressed=${this.clickable ? String(this.selected) : nothing}\n      tabindex=${this.clickable ? 0 : nothing}\n      @click=${this.activate}\n      @keydown=${this.onKeyDown}\n    >\n      ${\n        hasMedia\n          ? html`<div\n              part=\"media\"\n              class=\"media\"\n              style=${styleMap({ '--media-size': this.imageSize })}\n            >\n              <slot name=\"media\">\n                ${this.image ? html`<img src=${this.image} alt=${this.imageAlt} />` : nothing}\n              </slot>\n            </div>`\n          : nothing\n      }\n      <div part=\"body\" class=\"body\">\n        <div class=${classMap({ header: true, empty: !this.hasHeader })}>\n          <slot name=\"header\" @slotchange=${this.onSlotChange}></slot>\n        </div>\n        <div class=\"content\"><slot></slot></div>\n        <div class=${classMap({ footer: true, empty: !this.hasFooter })}>\n          <slot name=\"footer\" @slotchange=${this.onSlotChange}></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-card', KtCard);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-card': KtCard;\n  }\n}\n"],"names":["KtCard","KtElement","css","root","hasAssignedContent","emit","event","hasMedia","html","classMap","nothing","styleMap","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/components/core/kt-code/kt-code.d.ts

@@ -0,0 +1,55 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../kt-icon/kt-icon.js';
+/**
+ * A block of code on a recessed surface, with its language and a copy button.
+ *
+ * The element owns the chrome — surface, label, scrolling, copy — and nothing
+ * else. **Highlighting is the caller's**: slot in whatever markup a highlighter
+ * produced, or plain text for none. A design system that bundled a syntax
+ * highlighter would be picking your bundle size and your language set for you.
+ *
+ * ```html
+ * <kt-code language="js">const total = items.length;</kt-code>
+ *
+ * <kt-code language="ts" copy>
+ *   <span class="hljs-keyword">const</span> total = items.length;
+ * </kt-code>
+ * ```
+ *
+ * For a token or an identifier inside a sentence, reach for
+ * `<kt-badge variant="code">` instead — this is for blocks.
+ *
+ * @element kt-code
+ *
+ * @slot - The code. Plain text, or a highlighter's markup.
+ *
+ * @csspart base - The container.
+ * @csspart header - The language row.
+ * @csspart pre - The scrolling `<pre>`.
+ *
+ * @fires kt-copy - The copy button was pressed. `detail: { code }`.
+ */
+export declare class KtCode extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** How long the copy button stays in its confirmed state. */
+    private static readonly COPIED_MS;
+    private copiedTimer;
+    private copied;
+    /** Language label, shown uppercase. Purely informative. */
+    language: string;
+    /** Shows the copy button. */
+    copy: boolean;
+    /** Accessible name for the block, when the language alone is not enough. */
+    label: string;
+    disconnectedCallback(): void;
+    /** The code as plain text, whatever markup it is wrapped in. */
+    get code(): string;
+    private copyToClipboard;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-code': KtCode;
+    }
+}

package/dist/components/core/kt-code/kt-code.js

@@ -0,0 +1,155 @@
+import { css as b, nothing as i, html as s } from "lit";
+import { state as u, property as d } from "lit/decorators.js";
+import { K as l, d as v } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../kt-icon/kt-icon.js";
+var y = Object.defineProperty, r = (c, o, p, f) => {
+  for (var e = void 0, a = c.length - 1, n; a >= 0; a--)
+    (n = c[a]) && (e = n(o, p, e) || e);
+  return e && y(o, p, e), e;
+};
+const t = class h extends l {
+  constructor() {
+    super(...arguments), this.copied = !1, this.language = "", this.copy = !1, this.label = "";
+  }
+  static {
+    this.styles = [
+      l.styles,
+      b`
+      :host {
+        display: block;
+      }
+
+      .base {
+        overflow: hidden;
+        background: var(--surface-code);
+        border: var(--border-width) solid var(--border-code);
+        border-radius: var(--border-radius);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-button);
+        padding: 6px 8px 6px 14px;
+        border-bottom: var(--border-width) solid var(--border-code);
+      }
+
+      .language {
+        color: var(--color-text-500);
+        font: var(--font-normal-small);
+        letter-spacing: 1px;
+        text-transform: uppercase;
+      }
+
+      .copy {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        background: transparent;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition:
+          color var(--duration-instant),
+          background-color var(--duration-instant);
+      }
+
+      .copy:hover {
+        color: var(--text-body);
+        background: var(--surface-raised);
+      }
+
+      .copy:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 1px;
+      }
+
+      .copied {
+        color: var(--color-success-base);
+      }
+
+      pre {
+        margin: 0;
+        padding: 14px;
+        overflow-x: auto;
+        scrollbar-width: thin;
+      }
+
+      code {
+        font: var(--font-code-regular);
+        color: var(--text-code);
+      }
+
+      /* A block with no header should not leave a stray rule behind. */
+      .bare pre {
+        padding-top: 14px;
+      }
+    `
+    ];
+  }
+  static {
+    this.COPIED_MS = 1600;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.copiedTimer !== void 0 && clearTimeout(this.copiedTimer);
+  }
+  /** The code as plain text, whatever markup it is wrapped in. */
+  get code() {
+    return (this.textContent ?? "").replace(/^\n+|\n+$/g, "");
+  }
+  async copyToClipboard() {
+    try {
+      await navigator.clipboard.writeText(this.code), this.copied = !0, this.copiedTimer !== void 0 && clearTimeout(this.copiedTimer), this.copiedTimer = setTimeout(() => {
+        this.copied = !1;
+      }, h.COPIED_MS);
+    } catch {
+    }
+    g(this, "kt-copy", { code: this.code });
+  }
+  render() {
+    const o = !!this.language || this.copy;
+    return s`<div part="base" class=${o ? "base" : "base bare"}>
+      ${o ? s`<div part="header" class="header">
+              <span class="language">${this.language}</span>
+              ${this.copy ? s`<button
+                      type="button"
+                      class=${this.copied ? "copy copied" : "copy"}
+                      aria-label=${this.copied ? "Copied" : "Copy code"}
+                      @click=${this.copyToClipboard}
+                    >
+                      <kt-icon name=${this.copied ? "check" : "copy"} size="14"></kt-icon>
+                      ${this.copied ? "Copied" : "Copy"}
+                    </button>` : i}
+            </div>` : i}
+
+      <pre
+        part="pre"
+        tabindex="0"
+        aria-label=${this.label || i}
+      ><code><slot></slot></code></pre>
+    </div>`;
+  }
+};
+r([
+  u()
+], t.prototype, "copied");
+r([
+  d({ type: String })
+], t.prototype, "language");
+r([
+  d({ type: Boolean })
+], t.prototype, "copy");
+r([
+  d({ type: String })
+], t.prototype, "label");
+let m = t;
+v("kt-code", m);
+export {
+  m as KtCode
+};
+//# sourceMappingURL=kt-code.js.map

package/dist/components/core/kt-code/kt-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-code.js","sources":["../../../../src/components/core/kt-code/kt-code.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../kt-icon/kt-icon.js';\n\n/**\n * A block of code on a recessed surface, with its language and a copy button.\n *\n * The element owns the chrome — surface, label, scrolling, copy — and nothing\n * else. **Highlighting is the caller's**: slot in whatever markup a highlighter\n * produced, or plain text for none. A design system that bundled a syntax\n * highlighter would be picking your bundle size and your language set for you.\n *\n * ```html\n * <kt-code language=\"js\">const total = items.length;</kt-code>\n *\n * <kt-code language=\"ts\" copy>\n *   <span class=\"hljs-keyword\">const</span> total = items.length;\n * </kt-code>\n * ```\n *\n * For a token or an identifier inside a sentence, reach for\n * `<kt-badge variant=\"code\">` instead — this is for blocks.\n *\n * @element kt-code\n *\n * @slot - The code. Plain text, or a highlighter's markup.\n *\n * @csspart base - The container.\n * @csspart header - The language row.\n * @csspart pre - The scrolling `<pre>`.\n *\n * @fires kt-copy - The copy button was pressed. `detail: { code }`.\n */\nexport class KtCode extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .base {\n        overflow: hidden;\n        background: var(--surface-code);\n        border: var(--border-width) solid var(--border-code);\n        border-radius: var(--border-radius);\n      }\n\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-button);\n        padding: 6px 8px 6px 14px;\n        border-bottom: var(--border-width) solid var(--border-code);\n      }\n\n      .language {\n        color: var(--color-text-500);\n        font: var(--font-normal-small);\n        letter-spacing: 1px;\n        text-transform: uppercase;\n      }\n\n      .copy {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 8px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        background: transparent;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n        transition:\n          color var(--duration-instant),\n          background-color var(--duration-instant);\n      }\n\n      .copy:hover {\n        color: var(--text-body);\n        background: var(--surface-raised);\n      }\n\n      .copy:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 1px;\n      }\n\n      .copied {\n        color: var(--color-success-base);\n      }\n\n      pre {\n        margin: 0;\n        padding: 14px;\n        overflow-x: auto;\n        scrollbar-width: thin;\n      }\n\n      code {\n        font: var(--font-code-regular);\n        color: var(--text-code);\n      }\n\n      /* A block with no header should not leave a stray rule behind. */\n      .bare pre {\n        padding-top: 14px;\n      }\n    `,\n  ];\n\n  /** How long the copy button stays in its confirmed state. */\n  private static readonly COPIED_MS = 1600;\n\n  private copiedTimer: ReturnType<typeof setTimeout> | undefined;\n\n  @state()\n  private copied = false;\n\n  /** Language label, shown uppercase. Purely informative. */\n  @property({ type: String })\n  language = '';\n\n  /** Shows the copy button. */\n  @property({ type: Boolean })\n  copy = false;\n\n  /** Accessible name for the block, when the language alone is not enough. */\n  @property({ type: String })\n  label = '';\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n  }\n\n  /** The code as plain text, whatever markup it is wrapped in. */\n  get code(): string {\n    return (this.textContent ?? '').replace(/^\\n+|\\n+$/g, '');\n  }\n\n  private async copyToClipboard(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(this.code);\n      this.copied = true;\n\n      if (this.copiedTimer !== undefined) clearTimeout(this.copiedTimer);\n      this.copiedTimer = setTimeout(() => {\n        this.copied = false;\n      }, KtCode.COPIED_MS);\n    } catch {\n      // Denied permission, or an insecure origin. Nothing useful to show, and\n      // failing loudly over a convenience button helps no one.\n    }\n    emit(this, 'kt-copy', { code: this.code });\n  }\n\n  override render(): TemplateResult {\n    const hasHeader = Boolean(this.language) || this.copy;\n\n    return html`<div part=\"base\" class=${hasHeader ? 'base' : 'base bare'}>\n      ${\n        hasHeader\n          ? html`<div part=\"header\" class=\"header\">\n              <span class=\"language\">${this.language}</span>\n              ${\n                this.copy\n                  ? html`<button\n                      type=\"button\"\n                      class=${this.copied ? 'copy copied' : 'copy'}\n                      aria-label=${this.copied ? 'Copied' : 'Copy code'}\n                      @click=${this.copyToClipboard}\n                    >\n                      <kt-icon name=${this.copied ? 'check' : 'copy'} size=\"14\"></kt-icon>\n                      ${this.copied ? 'Copied' : 'Copy'}\n                    </button>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n\n      <pre\n        part=\"pre\"\n        tabindex=\"0\"\n        aria-label=${this.label || nothing}\n      ><code><slot></slot></code></pre>\n    </div>`;\n  }\n}\n\ndefineElement('kt-code', KtCode);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-code': KtCode;\n  }\n}\n"],"names":["_KtCode","KtElement","css","emit","hasHeader","html","nothing","__decorateClass","state","property","KtCode","defineElement"],"mappings":";;;;;;;;;;AAmCO,MAAMA,IAAN,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAsFL,KAAQ,SAAS,IAIjB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,QAAQ;AAAA,EAAA;AAAA,EAjGR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA2EF;AAAA,EAGA,OAAA;AAAA,SAAwB,YAAY;AAAA,EAAA;AAAA,EAmB3B,uBAA6B;AACpC,UAAM,qBAAA,GACF,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW;AAAA,EACnE;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,YAAQ,KAAK,eAAe,IAAI,QAAQ,cAAc,EAAE;AAAA,EAC1D;AAAA,EAEA,MAAc,kBAAiC;AAC7C,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,KAAK,IAAI,GAC7C,KAAK,SAAS,IAEV,KAAK,gBAAgB,UAAW,aAAa,KAAK,WAAW,GACjE,KAAK,cAAc,WAAW,MAAM;AAClC,aAAK,SAAS;AAAA,MAChB,GAAGF,EAAO,SAAS;AAAA,IACrB,QAAQ;AAAA,IAGR;AACA,IAAAG,EAAK,MAAM,WAAW,EAAE,MAAM,KAAK,MAAM;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,UAAMC,IAAY,EAAQ,KAAK,YAAa,KAAK;AAEjD,WAAOC,2BAA8BD,IAAY,SAAS,WAAW;AAAA,QAEjEA,IACIC;AAAA,uCAC2B,KAAK,QAAQ;AAAA,gBAEpC,KAAK,OACDA;AAAA;AAAA,8BAEU,KAAK,SAAS,gBAAgB,MAAM;AAAA,mCAC/B,KAAK,SAAS,WAAW,WAAW;AAAA,+BACxC,KAAK,eAAe;AAAA;AAAA,sCAEb,KAAK,SAAS,UAAU,MAAM;AAAA,wBAC5C,KAAK,SAAS,WAAW,MAAM;AAAA,iCAEnCC,CACN;AAAA,sBAEFA,CACN;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKe,KAAK,SAASA,CAAO;AAAA;AAAA;AAAA,EAGxC;AACF;AAxEUC,EAAA;AAAA,EADPC,EAAA;AAAM,GArFIR,EAsFH,WAAA,QAAA;AAIRO,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzFfT,EA0FX,WAAA,UAAA;AAIAO,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA7FhBT,EA8FX,WAAA,MAAA;AAIAO,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjGfT,EAkGX,WAAA,OAAA;AAlGK,IAAMU,IAANV;AAgKPW,EAAc,WAAWD,CAAM;"}

package/dist/components/core/kt-icon/kt-icon.d.ts

@@ -0,0 +1,44 @@
+import { nothing, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../../icons/defaults.js';
+/**
+ * A Lucide icon, resolved from the registry by name.
+ *
+ * The icon inherits `currentColor`, so it is coloured by setting `color` on
+ * the element or on any ancestor — there is no colour attribute to keep in
+ * sync with the surrounding text.
+ *
+ * Unknown names render nothing but still occupy their box, so a typo shifts no
+ * layout while you find it in the console.
+ *
+ * @element kt-icon
+ *
+ * @csspart svg - The `<svg>` root.
+ *
+ * @example
+ * ```html
+ * <kt-icon name="search"></kt-icon>
+ * <kt-icon name="trash-2" size="16" label="Delete"></kt-icon>
+ * ```
+ */
+export declare class KtIcon extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Icon name, kebab-case: `chevron-down`, `circle-alert`. */
+    name: string;
+    /** Width and height in pixels. */
+    size: number;
+    /** Stroke width passed to the SVG. */
+    strokeWidth: number;
+    /**
+     * Accessible name. Set it when the icon carries meaning on its own; leave it
+     * off — the default — when adjacent text already says what this is, and the
+     * icon is hidden from assistive technology.
+     */
+    label: string;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-icon': KtIcon;
+    }
+}

package/dist/components/core/kt-icon/kt-icon.js

@@ -0,0 +1,85 @@
+import { css as f, html as c, nothing as l } from "lit";
+import { property as n } from "lit/decorators.js";
+import { K as m, d as u } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { g as v } from "../../../chunks/registry-X4LS9J5K.js";
+var w = Object.defineProperty, o = (i, e, r, h) => {
+  for (var t = void 0, a = i.length - 1, d; a >= 0; a--)
+    (d = i[a]) && (t = d(e, r, t) || t);
+  return t && w(e, r, t), t;
+};
+const g = "http://www.w3.org/2000/svg", p = /* @__PURE__ */ new Set();
+function y([i, e]) {
+  const r = document.createElementNS(g, i);
+  for (const [h, t] of Object.entries(e))
+    t !== void 0 && r.setAttribute(h, String(t));
+  return r;
+}
+class s extends m {
+  constructor() {
+    super(...arguments), this.name = "", this.size = 24, this.strokeWidth = 2, this.label = "";
+  }
+  static {
+    this.styles = [
+      m.styles,
+      f`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        vertical-align: middle;
+        color: inherit;
+      }
+
+      svg {
+        display: block;
+      }
+    `
+    ];
+  }
+  render() {
+    const e = v(this.name);
+    return e ? c`<svg
+      part="svg"
+      xmlns=${g}
+      width=${this.size}
+      height=${this.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${this.strokeWidth}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      role=${this.label ? "img" : l}
+      aria-label=${this.label || l}
+      aria-hidden=${this.label ? l : "true"}
+    >
+      ${e.map(y)}
+    </svg>` : (this.name && !p.has(this.name) && (p.add(this.name), console.warn(
+      `<kt-icon>: no icon registered as "${this.name}". Register it with registerIcons({ ... }) from "kanto-ds/icons".`
+    )), c`<svg
+        part="svg"
+        width=${this.size}
+        height=${this.size}
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      ></svg>`);
+  }
+}
+o([
+  n({ type: String, reflect: !0 })
+], s.prototype, "name");
+o([
+  n({ type: Number, reflect: !0 })
+], s.prototype, "size");
+o([
+  n({ type: Number, attribute: "stroke-width" })
+], s.prototype, "strokeWidth");
+o([
+  n({ type: String })
+], s.prototype, "label");
+u("kt-icon", s);
+export {
+  s as KtIcon
+};
+//# sourceMappingURL=kt-icon.js.map