@uplynk/lynk-design 1.10.0 → 1.11.0

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.22BGNSEM.js

@@ -0,0 +1,11 @@
+import {
+  LynkDialog
+} from "./chunk.UC5WW6P5.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = LynkDialog;
+LynkDialog.define("lynk-dialog");
+
+export {
+  dialog_default
+};

package/cdn/chunks/chunk.235QVOM5.js

@@ -0,0 +1,91 @@
+import {
+  i
+} from "./chunk.BW3AXSF6.js";
+
+// src/components/progress-bar/progress-bar.styles.ts
+var progress_bar_styles_default = i`
+  :host {
+    --height: 1rem;
+    --track-color: var(--lynk-color-neutral-200);
+    --indicator-color: var(--lynk-color-primary-600);
+    --label-color: var(--lynk-color-neutral-0);
+
+    display: block;
+  }
+
+  .progress-bar {
+    position: relative;
+    background-color: var(--track-color);
+    height: var(--height);
+    border-radius: var(--lynk-border-radius-pill);
+    box-shadow: inset var(--lynk-shadow-small);
+    overflow: hidden;
+  }
+
+  .progress-bar__indicator {
+    height: 100%;
+    font-family: var(--lynk-font-sans);
+    font-size: 12px;
+    font-weight: var(--lynk-font-weight-normal);
+    background-color: var(--indicator-color);
+    color: var(--label-color);
+    text-align: center;
+    line-height: var(--height);
+    white-space: nowrap;
+    overflow: hidden;
+    transition:
+      400ms width,
+      400ms background-color;
+    user-select: none;
+  }
+
+  /* Indeterminate */
+  .progress-bar--indeterminate .progress-bar__indicator {
+    position: absolute;
+    animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+  }
+
+  .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+    animation-name: indeterminate-rtl;
+  }
+
+  @media (forced-colors: active) {
+    .progress-bar {
+      outline: solid 1px SelectedItem;
+      background-color: var(--lynk-color-neutral-0);
+    }
+
+    .progress-bar__indicator {
+      outline: solid 1px SelectedItem;
+      background-color: SelectedItem;
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      left: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      left: 100%;
+      width: 50%;
+    }
+  }
+
+  @keyframes indeterminate-rtl {
+    0% {
+      right: -50%;
+      width: 50%;
+    }
+    75%,
+    100% {
+      right: 100%;
+      width: 50%;
+    }
+  }
+`;
+
+export {
+  progress_bar_styles_default
+};

package/cdn/chunks/chunk.246NQEKT.js

@@ -0,0 +1,126 @@
+import {
+  card_styles_default
+} from "./chunk.ISSARA6Y.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.JWQPGO7M.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/card/card.component.ts
+var LynkCard = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "footer",
+      "header",
+      "image",
+      "image-top-start",
+      "image-top-end",
+      "image-bottom-start",
+      "image-bottom-end"
+    );
+    this.appearance = "outlined";
+    this.stealth = false;
+    this.size = "inherit";
+    this.interactive = false;
+    this.active = false;
+    this.pulse = false;
+    this.aspectRatio = "16:9";
+  }
+  render() {
+    const hasAnyImageSlot = this.hasSlotController.test("image") || this.hasSlotController.test("image-top-start") || this.hasSlotController.test("image-top-end") || this.hasSlotController.test("image-bottom-start") || this.hasSlotController.test("image-bottom-end");
+    const hasAnyContentSlot = this.hasSlotController.test("header") || this.hasSlotController.test("[default]") || this.hasSlotController.test("footer");
+    return x`
+      <div
+        part="base"
+        class=${e({
+      card: true,
+      // Modifiers
+      "card--interactive": this.interactive,
+      "card--active": this.active,
+      "card--stealth": this.stealth,
+      "card--pulse": this.pulse,
+      // States
+      "card--primary": this.state === "primary",
+      "card--accent": this.state === "accent",
+      "card--danger": this.state === "danger",
+      "card--success": this.state === "success",
+      "card--neutral": this.state === "neutral",
+      "card--warning": this.state === "warning",
+      "card--info": this.state === "info",
+      // Sizes
+      "card--small": this.size === "small",
+      "card--medium": this.size === "medium",
+      "card--large": this.size === "large",
+      // Slots
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header"),
+      "card--image-only": hasAnyImageSlot && !hasAnyContentSlot
+    })}
+      >
+        ${hasAnyImageSlot ? x`
+              <div part="image-block" class="card__image-block ${`aspect--${this.aspectRatio.replace(/[:.]/g, "-")}`}">
+                <div part="image" class="card__image">
+                  <slot name="image"></slot>
+                </div>
+
+                <slot name="image-top-start" part="image-top-start" class="card__image-top-start"></slot>
+                <slot name="image-top-end" part="image-top-end" class="card__image-top-end"></slot>
+                <slot name="image-bottom-start" part="image-bottom-start" class="card__image-bottom-start"></slot>
+                <slot name="image-bottom-end" part="image-bottom-end" class="card__image-bottom-end"></slot>
+              </div>
+            ` : ""}
+        ${this.hasSlotController.test("header") ? x`<slot name="header" part="header" class="card__header"></slot>` : ""}
+        ${this.hasSlotController.test("[default]") ? x`<slot part="body" class="card__body"></slot>` : ""}
+        ${this.hasSlotController.test("footer") ? x`<slot name="footer" part="footer" class="card__footer"></slot>` : ""}
+      </div>
+    `;
+  }
+};
+LynkCard.styles = [component_styles_default, card_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "appearance", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "stealth", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkCard.prototype, "state", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "interactive", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "active", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkCard.prototype, "pulse", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "aspect-ratio" })
+], LynkCard.prototype, "aspectRatio", 2);
+
+export {
+  LynkCard
+};

package/cdn/chunks/chunk.24IBFOQG.js

@@ -0,0 +1,11 @@
+import {
+  LynkProgressBar
+} from "./chunk.6G2YBCAK.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = LynkProgressBar;
+LynkProgressBar.define("lynk-progress-bar");
+
+export {
+  progress_bar_default
+};

package/cdn/chunks/chunk.26S4PQXV.js

@@ -0,0 +1,131 @@
+import {
+  truncate_default
+} from "./chunk.CUERI7SQ.js";
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.6PXGXP25.js";
+import {
+  o
+} from "./chunk.XQGSWNOO.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.JWQPGO7M.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+var LynkBreadcrumbItem = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "lynk-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (hasDropdown) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? x`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${o(this.target ? this.target : void 0)}"
+                rel=${o(this.target ? this.rel : void 0)}
+              >
+                <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+              </a>
+            ` : ""}
+        ${this.renderType === "button" ? x`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+              </button>
+            ` : ""}
+        ${this.renderType === "dropdown" ? x`
+              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                <lynk-truncate><slot @slotchange=${this.handleSlotChange}></slot></lynk-truncate>
+              </div>
+            ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+LynkBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+LynkBreadcrumbItem.dependencies = { "lynk-truncate": truncate_default };
+__decorateClass([
+  e2("slot:not([name])")
+], LynkBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  n()
+], LynkBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], LynkBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], LynkBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], LynkBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  LynkBreadcrumbItem
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkAutoGrid
+} from "./chunk.KTIG2NYU.js";
+
+// src/components/auto-grid/auto-grid.ts
+var auto_grid_default = LynkAutoGrid;
+LynkAutoGrid.define("lynk-auto-grid");
+
+export {
+  auto_grid_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkWisp
+} from "./chunk.GDNUPCCX.js";
+
+// src/components/wisp/wisp.ts
+var wisp_default = LynkWisp;
+LynkWisp.define("lynk-wisp");
+
+export {
+  wisp_default
+};

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

@@ -0,0 +1,35 @@
+import {
+  LynkCombobox
+} from "./chunk.VASDVGXL.js";
+
+// src/react/combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-combobox";
+LynkCombobox.define("lynk-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkCombobox,
+  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",
+    EvError: "ev-error",
+    EvAddOption: "ev-add-option"
+  },
+  displayName: "LynkCombobox"
+});
+var combobox_default = reactWrapper;
+
+export {
+  combobox_default
+};