@uplynk/lynk-design 1.9.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.36B2CW6U.js

@@ -0,0 +1,347 @@
+import {
+  i
+} from "./chunk.FL72WS63.js";
+
+// src/components/range/range.styles.ts
+var range_styles_default = i`
+  :host {
+    --thumb-size: 16px;
+    --thumb-color: var(--lynk-color-primary);
+    --thumb-border: 0 0 0 2px var(--lynk-color-neutral-50);
+    --tooltip-offset: 8px;
+    --track-color-active: var(--lynk-color-primary);
+    --track-color-inactive: var(--lynk-color-neutral-200);
+    --track-active-offset: 0%;
+    --track-height: 6px;
+    --tick-color: var(--lynk-color-neutral-200);
+    --tick-label-color: var(--lynk-color-neutral);
+    --tick-width: 2px;
+    --tick-height: 8px;
+    --tick-selected-color: var(--lynk-color-primary);
+    --marker-width: 0.1875em;
+    --marker-height: 0.1875em;
+    display: block;
+  }
+
+  :host([state='error']) {
+    --thumb-color: var(--lynk-color-danger);
+    --track-color-active: var(--lynk-color-danger);
+  }
+
+  :host([state='warning']) {
+    --thumb-color: var(--lynk-color-warning);
+    --track-color-active: var(--lynk-color-warning);
+  }
+
+  :host([state='success']) {
+    --thumb-color: var(--lynk-color-success);
+    --track-color-active: var(--lynk-color-success);
+  }
+
+  :host([size='small']) {
+    --track-height: 4px;
+    --thumb-size: 12px;
+  }
+
+  :host([size='large']) {
+    --track-height: 8px;
+    --thumb-size: 20px;
+  }
+
+  :host([orientation='vertical']) {
+    display: inline-block;
+  }
+
+  :host([orientation='vertical']) lynk-form-field,
+  :host([orientation='vertical']) lynk-form-field::part(base),
+  :host([orientation='vertical']) lynk-form-field::part(control-wrapper),
+  :host([orientation='vertical']) lynk-form-field::part(control) {
+    height: 100%;
+  }
+
+  .range {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .range--vertical {
+    flex-direction: row;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .range__native-input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .range__wrapper {
+    --percent: 0%;
+    position: relative;
+    width: 100%;
+    height: var(--thumb-size);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .range--vertical .range__wrapper {
+    width: var(--thumb-size);
+    height: 100%;
+  }
+
+  .range__track {
+    position: absolute;
+    width: 100%;
+    height: var(--track-height);
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--track-color-inactive);
+    border-radius: 2px;
+  }
+
+  .range--vertical .range__track {
+    width: var(--track-height);
+    height: 100%;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+  }
+
+  .range__track-active {
+    position: absolute;
+    height: var(--track-height);
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--track-color-active);
+    border-radius: 2px;
+    left: max(var(--track-active-offset), 0%);
+    width: calc(var(--percent) - max(var(--track-active-offset), 0%));
+    will-change: width, height;
+  }
+
+  .range--rtl .range__track-active {
+    left: auto;
+    right: max(var(--track-active-offset), 0%);
+  }
+
+  .range--vertical .range__track-active {
+    width: var(--track-height);
+    height: calc(var(--percent) - max(var(--track-active-offset), 0%));
+    left: 50%;
+    top: auto;
+    bottom: max(var(--track-active-offset), 0%);
+    transform: translateX(-50%);
+  }
+
+  .range__thumb {
+    position: absolute;
+    z-index: 2;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    top: 50%;
+    left: var(--percent);
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    box-shadow: var(--thumb-border);
+    transition:
+      background-color var(--lynk-transition-fast),
+      border-color var(--lynk-transition-fast),
+      box-shadow var(--lynk-transition-fast);
+    cursor: grab;
+    outline: none;
+    will-change: left, bottom;
+  }
+
+  .range--rtl .range__thumb {
+    left: auto;
+    right: var(--percent);
+    transform: translate(50%, -50%);
+  }
+
+  .range--vertical .range__thumb {
+    left: 50%;
+    top: auto;
+    bottom: var(--percent);
+    transform: translate(-50%, 50%);
+  }
+
+  .range__thumb:active {
+    cursor: grabbing;
+  }
+
+  .range:not(.range--disabled) .range__thumb:hover {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 25%, transparent);
+  }
+
+  .range:not(.range--disabled) .range__thumb:focus-visible {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
+  }
+
+  .range:not(.range--disabled) .range__thumb:active {
+    box-shadow:
+      var(--thumb-border),
+      0 0 0 8px color-mix(in oklab, var(--thumb-color) 50%, transparent);
+  }
+
+  .range--disabled .range__wrapper,
+  .range--readonly .range__wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .range--disabled .range__thumb,
+  .range--readonly .range__thumb {
+    cursor: not-allowed;
+  }
+
+  /* Ticks */
+  .range__ticks {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: var(--tick-height);
+    margin-top: var(--lynk-spacing-2x-small);
+    pointer-events: none;
+  }
+
+  .range--vertical .range__ticks {
+    flex-direction: column;
+    width: var(--tick-height);
+    height: 100%;
+    margin-top: 0;
+    margin-left: var(--lynk-spacing-2x-small);
+  }
+
+  .range__tick {
+    position: absolute;
+    left: var(--offset);
+    transform: translateX(-50%);
+  }
+
+  .range--rtl .range__tick {
+    left: initial;
+    right: var(--offset);
+  }
+
+  .range--vertical .range__tick {
+    left: 0;
+    bottom: var(--offset);
+    transform: translateY(50%);
+  }
+
+  .range__tick::before {
+    width: var(--tick-width);
+    height: var(--tick-height);
+    border-radius: 1px;
+    background-color: var(--tick-color);
+    content: '';
+    top: calc(var(--tick-height) * -0.5);
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .range--vertical .range__tick::before {
+    width: var(--tick-height);
+    height: var(--tick-width);
+    left: calc(var(--tick-height) * -0.5);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .range__tick-label {
+    display: block;
+    pointer-events: auto;
+    cursor: pointer;
+    margin-top: 2px;
+    color: var(--tick-label-color);
+    font-family: var(--lynk-tooltip-font-family);
+    font-size: var(--lynk-font-size-small);
+  }
+
+  .range--vertical .range__tick-label {
+    margin-top: 0;
+    margin-left: var(--lynk-spacing-x-small);
+  }
+
+  .range--disabled .range__tick-label {
+    cursor: not-allowed;
+  }
+
+  .range__tick--selected.range__tick::before {
+    background-color: var(--tick-selected-color);
+  }
+
+  .range__tick--selected .range__tick-label {
+    color: var(--tick-selected-color);
+  }
+
+  .range__references {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--lynk-spacing-2x-small);
+  }
+
+  .range--vertical .range__references {
+    flex-direction: column;
+    margin-top: 0;
+    margin-left: 4px;
+  }
+
+  .range__references ::slotted(*) {
+    color: var(--lynk-input-help-text-color);
+    font-size: var(--lynk-input-help-text-font-size);
+    line-height: 1;
+  }
+
+  /* Markers */
+  .range__markers {
+    pointer-events: none;
+  }
+
+  .range__marker {
+    z-index: 2;
+    position: absolute;
+    display: inline-block;
+    width: var(--marker-width);
+    height: var(--marker-height);
+    border-radius: 50%;
+    background-color: var(--lynk-color-black);
+  }
+
+  .range__marker:first-of-type,
+  .range__marker:last-of-type {
+    display: none;
+  }
+
+  .range__marker {
+    top: calc(50% - var(--marker-height) / 2);
+    left: calc(var(--position) - var(--marker-width) / 2);
+  }
+
+  .range--vertical .range__marker {
+    top: calc(var(--position) - var(--marker-height) / 2);
+    left: calc(50% - var(--marker-width) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .range__track,
+    .range__track-active,
+    .range__thumb {
+      border: solid 1px transparent;
+    }
+  }
+`;
+
+export {
+  range_styles_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
+};