@uplynk/lynk-design 1.0.0-beta.2 → 1.0.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uplynk/lynk-design",
   "description": "A library of web components for building web applications with the Uplynk user interface style guide.",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "homepage": "https://lynk.design/",
   "author": "Harley Jessop",
   "license": "SEE LICENSE IN .LICENSE",
@@ -49,13 +49,13 @@
     "start": "node scripts/build.js --serve",
     "build": "node scripts/build.js",
     "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
-    "prepare": "npx playwright install --with-deps",
+    "prepare": "npx playwright install",
     "prepublishOnly": "npm run build",
     "prettier": "prettier --write --log-level=warn .",
     "prettier:check": "prettier --check --log-level=warn .",
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --max-warnings 0 --fix",
-    "create": "plop --plopfile scripts/plop/plopfile.js",
+    "create": "plop --plopfile scripts/plop/plopfile.mjs",
     "test": "web-test-runner --group default",
     "test:component": "web-test-runner -- --watch --group",
     "test:watch": "web-test-runner --watch --group default",
@@ -66,8 +66,8 @@
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
-    "@lit/react": "^1.0.6",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/react": "^1.0.7",
     "@shoelace-style/animations": "^1.2.0",
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
@@ -75,58 +75,57 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
-    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.50.1",
-    "@types/color": "^3.0.3",
+    "@types/color": "^3.0.6",
     "@types/mocha": "^10.0.10",
-    "@types/react": "^18.3.13",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "@web/dev-server-esbuild": "^1.0.3",
+    "@types/react": "^18.3.18",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "bootstrap-icons": "^1.11.3",
     "browser-sync": "^3.0.3",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
     "change-case": "^4.1.2",
     "command-line-args": "^6.0.1",
     "comment-parser": "^1.4.1",
-    "cspell": "^8.16.1",
-    "custom-element-jet-brains-integration": "^1.6.2",
-    "custom-element-vs-code-integration": "^1.4.1",
-    "custom-element-vuejs-integration": "^1.3.3",
+    "cspell": "^8.17.4",
+    "custom-element-jet-brains-integration": "^1.7.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "custom-element-vuejs-integration": "^1.4.0",
     "del": "^8.0.0",
     "download": "^8.0.0",
     "esbuild": "^0.25.0",
     "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "^8.51.0",
+    "eslint": "^9.20.1",
     "eslint-plugin-chai-expect": "^3.1.0",
-    "eslint-plugin-chai-friendly": "^0.7.2",
+    "eslint-plugin-chai-friendly": "^0.7.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-wc": "^2.2.0",
+    "eslint-plugin-wc": "^2.2.1",
     "front-matter": "^4.0.2",
     "get-port": "^7.1.0",
-    "globby": "^14.0.2",
+    "globby": "^14.1.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.4.3",
     "lunr": "^2.3.9",
     "markdown-it-container": "^4.0.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-kbd": "^2.2.2",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-replace-it": "^1.0.0",
-    "npm-check-updates": "^17.1.11",
-    "ora": "^8.1.1",
-    "pascal-case": "^4.0.0",
+    "npm-check-updates": "^17.1.14",
+    "ora": "^8.2.0",
     "plop": "^4.0.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "recursive-copy": "^2.0.14",

package/cdn/chunks/chunk.255IQSP6.js

@@ -1,11 +0,0 @@
-import {
-  LynkTableColumn
-} from "./chunk.CWPVO273.js";
-
-// src/components/table-column/table-column.ts
-var table_column_default = LynkTableColumn;
-LynkTableColumn.define("lynk-col");
-
-export {
-  table_column_default
-};

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

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

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

@@ -1,30 +0,0 @@
-import {
-  LynkInput
-} from "./chunk.SMBQ5KWA.js";
-
-// src/react/lynk-input/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-input";
-LynkInput.define("lynk-input");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkInput,
-  react: React,
-  events: {
-    OnBlur: "on:blur",
-    OnChange: "on:change",
-    OnClear: "on:clear",
-    OnEnter: "on:enter",
-    OnFocus: "on:focus",
-    OnInput: "on:input",
-    OnInvalid: "on:invalid"
-  },
-  displayName: "LynkInput"
-});
-var lynk_input_default = reactWrapper;
-
-export {
-  lynk_input_default
-};

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

@@ -1,25 +0,0 @@
-import {
-  LynkCopyButton
-} from "./chunk.ELX3L5KC.js";
-
-// src/react/lynk-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: {
-    OnCopy: "on:copy",
-    OnError: "on:error"
-  },
-  displayName: "LynkCopyButton"
-});
-var lynk_copy_button_default = reactWrapper;
-
-export {
-  lynk_copy_button_default
-};

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

@@ -1,25 +0,0 @@
-import {
-  LynkIcon
-} from "./chunk.TMG7EC4H.js";
-
-// src/react/lynk-icon/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-icon";
-LynkIcon.define("lynk-icon");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkIcon,
-  react: React,
-  events: {
-    OnLoad: "on:load",
-    OnError: "on:error"
-  },
-  displayName: "LynkIcon"
-});
-var lynk_icon_default = reactWrapper;
-
-export {
-  lynk_icon_default
-};

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

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

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

@@ -1,241 +0,0 @@
-import {
-  form_field_styles_default
-} from "./chunk.QLHEZZN2.js";
-import {
-  getTabbableBoundary
-} from "./chunk.LXDTFLWU.js";
-import {
-  LynkTooltip
-} from "./chunk.RSSYUIME.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  LynkIcon
-} from "./chunk.TMG7EC4H.js";
-import {
-  e
-} from "./chunk.3RBSSBZT.js";
-import {
-  LynkElement,
-  e as e2,
-  n,
-  r
-} from "./chunk.MJWJPWY7.js";
-import {
-  component_styles_default
-} from "./chunk.RBCZP5WV.js";
-import {
-  x
-} from "./chunk.OOP2EFQH.js";
-import {
-  __decorateClass
-} from "./chunk.W27M6RDR.js";
-
-// src/components/form-field/form-field.component.ts
-var LynkFormField = class extends LynkElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label");
-    this.hasFocus = false;
-    this.state = "default";
-    this.size = "medium";
-    this.label = "";
-    this.id = "";
-    this.helpText = "";
-    this.helpTip = "";
-    this.required = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    if (!this.containingElement) {
-      this.containingElement = this;
-    }
-  }
-  firstUpdated() {
-    this.addOpenListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeOpenListeners();
-  }
-  addOpenListeners() {
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("on:focus");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("on:blur");
-  }
-  handleLabelClick() {
-    this.focus();
-  }
-  handleDefaultSlotChange() {
-    this.manageAccessibleTarget();
-  }
-  handleDocumentKeyDown(event) {
-    if (event.key === "Tab") {
-      setTimeout(() => {
-        var _a, _b, _c;
-        const activeElement = ((_a = this.containingElement) == null ? void 0 : _a.getRootNode()) instanceof ShadowRoot ? (_c = (_b = document.activeElement) == null ? void 0 : _b.shadowRoot) == null ? void 0 : _c.activeElement : document.activeElement;
-        if (!this.containingElement || (activeElement == null ? void 0 : activeElement.closest(this.containingElement.tagName.toLowerCase())) !== this.containingElement) {
-          this.blur();
-        }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this && this.containingElement && !path.includes(this.containingElement)) {
-      this.blur();
-    }
-  }
-  //
-  // Slotted elements can be arbitrary content or form elements, but we need to link them to the label with `aria-labelledby`.
-  // This must be applied to the "accessible element" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible element could be a slotted form element,
-  // a child of the slotted element, or an element in the slotted element's shadow root.
-  //
-  // To determine this, we assume the first tabbable element in the element slot is the "accessible element."
-  //
-  manageAccessibleTarget() {
-    const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
-    const accessibleTarget = assignedElements.find((el) => getTabbableBoundary(el).start);
-    if (accessibleTarget) {
-      this.target = accessibleTarget;
-      this.target.setAttribute("aria-label", this.label);
-    }
-  }
-  /** Sets focus on the control. */
-  focus(options) {
-    var _a;
-    if (this.target && typeof ((_a = this.target) == null ? void 0 : _a.focus) === "function") {
-      this.target.focus(options);
-    }
-    this.handleFocus();
-  }
-  /** Removes focus from the control. */
-  blur() {
-    var _a;
-    if (this.target && typeof ((_a = this.target) == null ? void 0 : _a.blur) === "function") {
-      this.target.blur();
-    }
-    this.handleBlur();
-  }
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label");
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
-    const hasHelpTipSlot = this.hasSlotController.test("help-tip");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const hasHelpTip = this.helpTip ? true : !!hasHelpTipSlot;
-    return x`
-      <fieldset
-        part="base"
-        class=${e({
-      "form-field": true,
-      "form-field--small": this.size === "small",
-      "form-field--medium": this.size === "medium",
-      "form-field--large": this.size === "large",
-      "form-field--has-label": hasLabel,
-      "form-field--has-help-text": hasHelpText,
-      "form-field--has-error": this.state === "error" || this.hasAttribute("data-user-invalid"),
-      "form-field--has-warning": this.state === "warning",
-      "form-field--has-success": this.state === "success",
-      "form-field--focused": this.hasFocus
-    })}
-      >
-        <label
-          id="label"
-          part="label"
-          class=${e({
-      "form-field__label": true
-    })}
-          aria-hidden=${hasLabel ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-
-          ${this.required ? x`
-                <lynk-tooltip content="Required" hoist>
-                  <lynk-icon style="font-size: 9px;" name="asterisk" library="system"></lynk-icon>
-                </lynk-tooltip>
-              ` : ""}
-          ${hasHelpTip ? x`
-                <lynk-tooltip hoist>
-                  <div slot="content">
-                    <slot name="help-tip">${this.helpTip}</slot>
-                  </div>
-                  <lynk-icon style="font-size: 11px;" name="question-fill" library="system"></lynk-icon>
-                </lynk-tooltip>
-              ` : ""}
-        </label>
-
-        <slot
-          part="control"
-          class="form-field__control"
-          @click=${this.focus}
-          @slotchange=${this.handleDefaultSlotChange}
-        ></slot>
-
-        <div
-          part="help-text"
-          id="help-text"
-          class="form-field__help-text"
-          aria-hidden=${hasHelpText ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
-  }
-};
-LynkFormField.styles = [component_styles_default, form_field_styles_default];
-LynkFormField.dependencies = {
-  "lynk-icon": LynkIcon,
-  "lynk-tooltip": LynkTooltip
-};
-__decorateClass([
-  e2("slot:not([name])")
-], LynkFormField.prototype, "defaultSlot", 2);
-__decorateClass([
-  r()
-], LynkFormField.prototype, "hasFocus", 2);
-__decorateClass([
-  n({ attribute: false })
-], LynkFormField.prototype, "containingElement", 2);
-__decorateClass([
-  n({ reflect: true })
-], LynkFormField.prototype, "state", 2);
-__decorateClass([
-  n({ reflect: true })
-], LynkFormField.prototype, "size", 2);
-__decorateClass([
-  n()
-], LynkFormField.prototype, "label", 2);
-__decorateClass([
-  n()
-], LynkFormField.prototype, "id", 2);
-__decorateClass([
-  n({ attribute: "help-text" })
-], LynkFormField.prototype, "helpText", 2);
-__decorateClass([
-  n({ attribute: "help-tip" })
-], LynkFormField.prototype, "helpTip", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], LynkFormField.prototype, "required", 2);
-
-export {
-  LynkFormField
-};

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

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

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

@@ -1,58 +0,0 @@
-import {
-  i
-} from "./chunk.OOP2EFQH.js";
-
-// src/components/accordion/accordion.styles.ts
-var accordion_styles_default = i`
-  :host {
-    display: contents;
-    --spacing: var(--lynk-spacing-small);
-    --divider: 1px solid var(--lynk-color-neutral-200);
-  }
-
-  .accordion {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing);
-  }
-
-  .accordion--flush {
-    gap: 0;
-  }
-
-  .accordion--flush::slotted(lynk-panel),
-  .accordion--square::slotted(lynk-panel) {
-    --border-radius: 0;
-  }
-
-  .accordion--flush::slotted(lynk-panel:first-child) {
-    --border-radius: var(--lynk-border-radius-medium) var(--lynk-border-radius-medium) 0 0;
-  }
-
-  .accordion--flush::slotted(lynk-panel:last-child) {
-    --border-radius: 0 0 var(--lynk-border-radius-medium) var(--lynk-border-radius-medium);
-  }
-
-  .accordion--flush::slotted(lynk-panel) {
-    border-top: var(--divider);
-  }
-  .accordion--flush::slotted(lynk-panel:first-child) {
-    border-top: none;
-  }
-
-  .accordion--compact {
-    gap: var(--lynk-spacing-x-small);
-  }
-
-  .accordion--comfy {
-    gap: var(--lynk-spacing-medium);
-  }
-
-  .accordion--rounded::slotted(lynk-panel) {
-    --border-radius: var(--lynk-border-radius-large);
-  }
-`;
-
-export {
-  accordion_styles_default
-};

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

@@ -1,24 +0,0 @@
-import {
-  LynkMenu
-} from "./chunk.TLZFKX7A.js";
-
-// src/react/lynk-menu/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "lynk-menu";
-LynkMenu.define("lynk-menu");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: LynkMenu,
-  react: React,
-  events: {
-    OnSelect: "on:select"
-  },
-  displayName: "LynkMenu"
-});
-var lynk_menu_default = reactWrapper;
-
-export {
-  lynk_menu_default
-};

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

@@ -1,11 +0,0 @@
-import {
-  LynkMenuLabel
-} from "./chunk.USM3IPDF.js";
-
-// src/components/menu-label/menu-label.ts
-var menu_label_default = LynkMenuLabel;
-LynkMenuLabel.define("lynk-menu-label");
-
-export {
-  menu_label_default
-};

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

@@ -1,11 +0,0 @@
-import {
-  LynkBadge
-} from "./chunk.44FUYF3B.js";
-
-// src/components/badge/badge.ts
-var badge_default = LynkBadge;
-LynkBadge.define("lynk-badge");
-
-export {
-  badge_default
-};

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

@@ -1,16 +0,0 @@
-import {
-  i
-} from "./chunk.OOP2EFQH.js";
-
-// src/components/breadcrumb/breadcrumb.styles.ts
-var breadcrumb_styles_default = i`
-  .breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-`;
-
-export {
-  breadcrumb_styles_default
-};