@uplynk/lynk-design 1.10.0 → 1.10.1

package/README.md

@@ -57,3 +57,11 @@ pnpm run create lynk-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
+
+## AI Agent Support
+
+This project is configured to work with AI coding assistants (Amazon Q, Kiro, etc.) through an automatically loaded memory bank system.
+
+See [AI_AGENTS.md](AI_AGENTS.md) for setup details.
+
+---

package/cdn/chunks/chunk.2BXPJ4AV.js

@@ -0,0 +1,11 @@
+import {
+  LynkDrawer
+} from "./chunk.BR4OXTZI.js";
+
+// src/components/drawer/drawer.ts
+var drawer_default = LynkDrawer;
+LynkDrawer.define("lynk-drawer");
+
+export {
+  drawer_default
+};

package/cdn/chunks/chunk.2CAKA43L.js

@@ -0,0 +1,21 @@
+import {
+  LynkPage
+} from "./chunk.I7QY5X5S.js";
+
+// src/react/page/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-page";
+LynkPage.define("lynk-page");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkPage,
+  react: React,
+  events: {},
+  displayName: "LynkPage"
+});
+var page_default = reactWrapper;
+
+export {
+  page_default
+};

package/cdn/chunks/chunk.2V4JLWII.js

@@ -0,0 +1,11 @@
+import {
+  LynkNav
+} from "./chunk.S75WTBPA.js";
+
+// src/components/nav/nav.ts
+var nav_default = LynkNav;
+LynkNav.define("lynk-nav");
+
+export {
+  nav_default
+};

package/cdn/chunks/chunk.2ZOC7DMA.js

@@ -0,0 +1,21 @@
+import {
+  LynkBox
+} from "./chunk.PQMM2ZUZ.js";
+
+// src/react/box/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-box";
+LynkBox.define("lynk-box");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkBox,
+  react: React,
+  events: {},
+  displayName: "LynkBox"
+});
+var box_default = reactWrapper;
+
+export {
+  box_default
+};

package/cdn/chunks/chunk.357B4Z6N.js

@@ -0,0 +1,21 @@
+import {
+  LynkProgressRing
+} from "./chunk.UGTDFQ3Y.js";
+
+// src/react/progress-ring/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-progress-ring";
+LynkProgressRing.define("lynk-progress-ring");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkProgressRing,
+  react: React,
+  events: {},
+  displayName: "LynkProgressRing"
+});
+var progress_ring_default = reactWrapper;
+
+export {
+  progress_ring_default
+};

package/cdn/chunks/chunk.3BGHPYO6.js

@@ -0,0 +1,25 @@
+import {
+  LynkCopyButton
+} from "./chunk.IHTCQ7LX.js";
+
+// src/react/copy-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-copy-button";
+LynkCopyButton.define("lynk-copy-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkCopyButton,
+  react: React,
+  events: {
+    EvCopy: "ev-copy",
+    EvError: "ev-error"
+  },
+  displayName: "LynkCopyButton"
+});
+var copy_button_default = reactWrapper;
+
+export {
+  copy_button_default
+};

package/cdn/chunks/chunk.3CZYA57W.js

@@ -0,0 +1,145 @@
+import {
+  tab_styles_default
+} from "./chunk.NQNOX3X7.js";
+import {
+  LynkIconButton
+} from "./chunk.ABKEYXOM.js";
+import {
+  i,
+  u
+} from "./chunk.DPRXQ2HT.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  o
+} from "./chunk.4NGU7LWD.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  e
+} from "./chunk.HISHZWHF.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.V6GISJ4A.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/tab/tab.component.ts
+var id = 0;
+var LynkTab = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.attrId = ++id;
+    this.componentId = `lynk-tab-${this.attrId}`;
+    this.panel = "";
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "tab");
+  }
+  handleCloseClick() {
+    this.emit("ev-close");
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleActiveChange() {
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    if (this.disabled && !this.active) {
+      this.tabIndex = -1;
+    } else {
+      this.tabIndex = 0;
+    }
+  }
+  /** Sets focus to the tab. */
+  focus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  blur() {
+    this.tab.blur();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? i`a` : i`div`;
+    this.id = this.id.length > 0 ? this.id : this.componentId;
+    return u`
+      <${tag}
+        part="base"
+        href=${o(isLink ? this.href : void 0)}
+        rel=${o(isLink ? this.rel : void 0)}
+        class=${e({
+      tab: true,
+      "tab--active": this.active,
+      "tab--closable": this.closable,
+      "tab--disabled": this.disabled
+    })}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+        <slot></slot>
+        ${this.closable ? u`
+                <lynk-icon-button
+                  part="close-button"
+                  exportparts="base:close-button__base"
+                  name="x-lg"
+                  library="system"
+                  label=${this.localize.term("close")}
+                  class="tab__close-button"
+                  @click=${this.handleCloseClick}
+                  tabindex="-1"
+                ></lynk-icon-button>
+              ` : ""}
+      </${tag}>
+    `;
+  }
+};
+LynkTab.styles = [component_styles_default, tab_styles_default];
+LynkTab.dependencies = { "lynk-icon-button": LynkIconButton };
+__decorateClass([
+  e2(".tab")
+], LynkTab.prototype, "tab", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkTab.prototype, "panel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkTab.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean })
+], LynkTab.prototype, "closable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkTab.prototype, "disabled", 2);
+__decorateClass([
+  n()
+], LynkTab.prototype, "href", 2);
+__decorateClass([
+  n()
+], LynkTab.prototype, "rel", 2);
+__decorateClass([
+  watch("active")
+], LynkTab.prototype, "handleActiveChange", 1);
+__decorateClass([
+  watch("disabled")
+], LynkTab.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkTab
+};

package/cdn/chunks/chunk.3D7LBLLG.js

@@ -0,0 +1,21 @@
+import {
+  LynkTabPanel
+} from "./chunk.K5JCYV5W.js";
+
+// src/react/tab-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-tab-panel";
+LynkTabPanel.define("lynk-tab-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTabPanel,
+  react: React,
+  events: {},
+  displayName: "LynkTabPanel"
+});
+var tab_panel_default = reactWrapper;
+
+export {
+  tab_panel_default
+};

package/cdn/chunks/chunk.3GUYHYCO.js

@@ -0,0 +1,33 @@
+import {
+  LynkSelect
+} from "./chunk.4SNCT7ZE.js";
+
+// src/react/select/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-select";
+LynkSelect.define("lynk-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkSelect,
+  react: React,
+  events: {
+    EvChange: "ev-change",
+    EvClear: "ev-clear",
+    EvInput: "ev-input",
+    EvFocus: "ev-focus",
+    EvBlur: "ev-blur",
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide",
+    EvInvalid: "ev-invalid"
+  },
+  displayName: "LynkSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};

package/cdn/chunks/chunk.3I5SIDTO.js

@@ -0,0 +1,79 @@
+import {
+  accordion_styles_default
+} from "./chunk.IUD2SOTF.js";
+import {
+  e
+} from "./chunk.HISHZWHF.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.V6GISJ4A.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/accordion/accordion.component.ts
+var LynkAccordion = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.multiple = false;
+  }
+  getAllPanels() {
+    return [...this.querySelectorAll("lynk-panel")];
+  }
+  handlePanelToggle(event) {
+    const target = event.target.closest("lynk-panel");
+    const panels = this.getAllPanels();
+    if (target.disabled) {
+      return;
+    }
+    if (!this.multiple) {
+      panels.forEach((panel) => panel.expanded = panel === target);
+    }
+  }
+  /** Expands all panels. */
+  expandAll() {
+    const panels = this.getAllPanels();
+    panels.forEach((panel) => panel.expanded = true);
+  }
+  /** Collapses all panels */
+  collapseAll() {
+    const panels = this.getAllPanels();
+    panels.forEach((panel) => panel.expanded = false);
+  }
+  render() {
+    return x`
+      <slot
+        part="base"
+        class=${e({
+      accordion: true,
+      "accordion--square": this.shape === "square",
+      "accordion--flush": this.density === "flush",
+      "accordion--compact": this.density === "compact",
+      "accordion--comfy": this.density === "comfy"
+    })}
+        @ev-expand=${this.handlePanelToggle}
+      ></slot>
+    `;
+  }
+};
+LynkAccordion.styles = [component_styles_default, accordion_styles_default];
+__decorateClass([
+  n({ type: Boolean })
+], LynkAccordion.prototype, "multiple", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkAccordion.prototype, "density", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkAccordion.prototype, "shape", 2);
+
+export {
+  LynkAccordion
+};

package/cdn/chunks/chunk.3JZSJDZZ.js

@@ -0,0 +1,104 @@
+import {
+  button_group_styles_default
+} from "./chunk.UDC5JBAR.js";
+import {
+  LynkElement,
+  e,
+  n,
+  r
+} from "./chunk.V6GISJ4A.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/button-group/button-group.component.ts
+var LynkButtonGroup = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.gapped = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        if (!this.gapped) {
+          button.toggleAttribute("data-lynk-button-group__button", true);
+          button.toggleAttribute("data-lynk-button-group__button--first", index === 0);
+          button.toggleAttribute(
+            "data-lynk-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.toggleAttribute("data-lynk-button-group__button--last", index === slottedElements.length - 1);
+        }
+        button.toggleAttribute(
+          "data-lynk-button-group__button--radio",
+          button.tagName.toLowerCase() === "lynk-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class="button-group"
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+LynkButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  e("slot")
+], LynkButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], LynkButtonGroup.prototype, "label", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkButtonGroup.prototype, "gapped", 2);
+function findButton(el) {
+  var _a;
+  const selector = "lynk-button, lynk-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  LynkButtonGroup
+};

package/cdn/chunks/chunk.3MBLJTVO.js

@@ -0,0 +1,35 @@
+import {
+  thead_styles_default
+} from "./chunk.TATKUZDI.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.V6GISJ4A.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/thead/thead.component.ts
+var LynkThead = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.sticky = false;
+  }
+  render() {
+    return x` <slot></slot> `;
+  }
+};
+LynkThead.styles = [component_styles_default, thead_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkThead.prototype, "sticky", 2);
+
+export {
+  LynkThead
+};

package/cdn/chunks/chunk.3QEZU2SP.js

@@ -0,0 +1,25 @@
+import {
+  LynkTabGroup
+} from "./chunk.4ASMOVFB.js";
+
+// src/react/tab-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-tab-group";
+LynkTabGroup.define("lynk-tab-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTabGroup,
+  react: React,
+  events: {
+    EvTabShow: "ev-tab-show",
+    EvTabHide: "ev-tab-hide"
+  },
+  displayName: "LynkTabGroup"
+});
+var tab_group_default = reactWrapper;
+
+export {
+  tab_group_default
+};

package/cdn/chunks/chunk.43X36NPQ.js

@@ -0,0 +1,27 @@
+import {
+  LynkPopover
+} from "./chunk.ICB4P4MV.js";
+
+// src/react/popover/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-popover";
+LynkPopover.define("lynk-popover");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkPopover,
+  react: React,
+  events: {
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide"
+  },
+  displayName: "LynkPopover"
+});
+var popover_default = reactWrapper;
+
+export {
+  popover_default
+};

package/cdn/chunks/chunk.45F7A6TX.js

@@ -0,0 +1,25 @@
+import {
+  LynkRadio
+} from "./chunk.F34ACSZ4.js";
+
+// src/react/radio/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-radio";
+LynkRadio.define("lynk-radio");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkRadio,
+  react: React,
+  events: {
+    EvBlur: "ev-blur",
+    EvFocus: "ev-focus"
+  },
+  displayName: "LynkRadio"
+});
+var radio_default = reactWrapper;
+
+export {
+  radio_default
+};

package/cdn/chunks/chunk.47HPZOKP.js

@@ -0,0 +1,46 @@
+import {
+  split_styles_default
+} from "./chunk.B24F6TAV.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.V6GISJ4A.js";
+import {
+  component_styles_default
+} from "./chunk.PPTT4KUQ.js";
+import {
+  x
+} from "./chunk.FL72WS63.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/split/split.component.ts
+var LynkSplit = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.column = false;
+    this.reverse = false;
+    this.gap = "var(--lynk-spacing-small)";
+  }
+  render() {
+    return x` <slot part="base" class="split" style="--gap: ${this.gap};"></slot> `;
+  }
+};
+LynkSplit.styles = [component_styles_default, split_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "column", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "reverse", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkSplit.prototype, "align", 2);
+__decorateClass([
+  n({ type: String, reflect: true })
+], LynkSplit.prototype, "gap", 2);
+
+export {
+  LynkSplit
+};