@aurodesignsystem-dev/auro-formkit 0.0.0-pr1460.2 → 0.0.0-pr1464.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1460.2",
+  "version": "0.0.0-pr1464.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -63,14 +63,14 @@
     "test": "npm run test:wtr && npm run test:frameworks",
     "test:local": "npm run test:wtr; npm run test:frameworks; npm run test:dashboard",
     "test:dashboard": "node test/coverage/generate-dashboard.mjs",
-    "test:force": "turbo run test --force",
+    "test:force": "turbo run test --force --continue",
     "test:framework:react": "turbo run test:framework --filter=@aurodesignsystem/react-framework",
     "test:framework:report:react": "npm run test:framework:report -w apps/react-framework",
     "test:framework:report:svelte": "npm run test:framework:report -w apps/svelte-framework",
     "test:framework:svelte": "turbo run test:framework --filter=@aurodesignsystem/svelte-framework",
     "test:frameworks": "turbo run test:framework --filter=@aurodesignsystem/react-framework --filter=@aurodesignsystem/svelte-framework",
     "test:watch": "turbo run test:watch",
-    "test:wtr": "turbo run test --concurrency=3",
+    "test:wtr": "turbo run test --concurrency=3 --continue",
     "test:wtr:force": "npm run test:wtr -- --force",
     "update-stories": "node ./packages/utils/update-stories.js",
     "test:global": "wtr --config \"./packages/config/src/web-test-runner.config-global.mjs\" --coverage --port 7725",
@@ -79,13 +79,34 @@
   "dependencies": {
     "@lit/context": "^1.1.6",
     "@lit/reactive-element": "^2.1.2",
+    "lit-element": "^4.1.1",
+    "lit-html": "^3.2.1",
     "lit": "^3.3.2"
   },
   "optionalDependencies": {
     "@rolldown/binding-linux-x64-gnu": "*",
     "@rollup/rollup-linux-x64-gnu": "*"
   },
+  "overrides": {
+    "minimatch@<=3.1.3": "~3.1.4",
+    "stylelint-order": "^8.1.1",
+    "@noticeable/sass-render": {
+      "sass": "$sass"
+    },
+    "serialize-javascript": "^7.0.5",
+    "undici@<=6.23.0": "^6.24.0",
+    "@rollup/plugin-terser": "^1.0.0"
+  },
   "devDependencies": {
+    "@alaskaairux/icons": "^5.14.0",
+    "@aurodesignsystem/auro-header": "^5.0.0",
+    "@aurodesignsystem/auro-icon": "^9.1.1",
+    "@aurodesignsystem/auro-popover": "^6.0.0",
+    "@floating-ui/dom": "^1.6.13",
+    "@popperjs/core": "^2.11.8",
+    "date-fns": "^4.1.0",
+    "focus-visible": "^5.2.1",
+    "imask": "^7.6.1",
     "@aurodesignsystem/auro-accordion": "^6.1.3",
     "@aurodesignsystem/auro-button": "^12.3.2",
     "@aurodesignsystem/auro-dialog": "^4.1.1",
@@ -108,6 +129,7 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/compat": "^2.0.5",
     "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^13.1.5",
@@ -131,7 +153,6 @@
     "compression": "^1.8.1",
     "concat": "^1.0.3",
     "concurrently": "^9.2.1",
-    "copyfiles": "^2.4.1",
     "core-js": "^3.49.0",
     "eslint": "^10.2.1",
     "eslint-plugin-jsdoc": "^62.9.0",
@@ -142,14 +163,22 @@
     "mockdate": "^3.0.5",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
+    "@playwright/test": "^1.59.1",
     "playwright": "^1.59.1",
     "postcss": "^8.5.10",
     "postcss-custom-properties": "^15.0.1",
     "postcss-discard-comments": "^7.0.7",
+    "postcss-selector-replace": "^1.0.2",
     "prettier": "^3.8.3",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "globals": "^17.4.0",
+    "monocart-reporter": "^2.10.1",
+    "rollup": "^4.45.1",
+    "rollup-plugin-serve": "^3.0.0",
     "sass": "^1.99.0",
     "semantic-release": "^25.0.3",
     "shadow-dom-testing-library": "^1.13.1",
+    "sinon": "^21.0.0",
     "storybook": "^10.3.5",
     "storybook-addon-pseudo-states": "^10.3.5",
     "storybook-addon-tag-badges": "^3.1.0",
@@ -160,8 +189,12 @@
     "stylelint-order": "^8.1.1",
     "stylelint-scss": "^7.0.0",
     "turbo": "^2.9.6",
+    "@types/node": "^24.12.0",
     "typescript": "^6.0.3",
+    "vite": "^8.0.5",
     "vitest": "^4.1.5",
+    "@noticeable/sass-render": "^3.0.0",
+    "web-component-analyzer": "^2.0.0",
     "whatwg-fetch": "^3.6.20",
     "yaml-lint": "^1.7.0",
     "rehype-highlight": "^7.0.2",

package/components/combobox/demo/api.js

@@ -1,39 +0,0 @@
-/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-
-import { focusExample } from '../apiExamples/focus';
-import { resetStateExample } from '../apiExamples/reset-state';
-import { setupExternalSelectionExample } from '../apiExamples/external-selection';
-import { valueExample } from '../apiExamples/value';
-import { inDialogExample } from '../apiExamples/in-dialog';
-import { inDrawerExample } from '../apiExamples/in-drawer';
-import { persistentExample } from '../apiExamples/persistent';
-import { swapValueExample } from '../apiExamples/swap-value';
-
-import { AuroCombobox } from '../src/auro-combobox.js';
-import '../../menu/src/registered.js';
-
-AuroCombobox.register();
-
-export function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    focusExample();
-    resetStateExample();
-    setupExternalSelectionExample();
-    valueExample();
-    inDialogExample();
-    inDrawerExample();
-    persistentExample();
-    swapValueExample();
-  } catch (err) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}
-

package/components/combobox/demo/api.min.js

@@ -1,106 +0,0 @@
-import { s as swapValueExample } from './swap-value.min.js';
-import { A as AuroCombobox } from './registered.min.js';
-
-function focusExample() {
-  const focusExample = document.querySelector('#focusExample');
-  const focusExampleBtnElem = document.querySelector('#focusExampleBtn');
-
-  focusExampleBtnElem.addEventListener('click', () => {
-    focusExample.focus();
-  });
-}
-
-function resetStateExample() {
-  const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
-    elem.reset();
-  });
-}
-
-function setupExternalSelectionExample() {
-  const combobox = document.getElementById('externalSelectionExample');
-  const iataCodes = ['sea', 'lax', 'jfk', 'ord', 'sfo'];
-
-  combobox.addEventListener('input', () => {
-    const input = combobox.inputValue?.toLowerCase();
-    const matchIndex = iataCodes.indexOf(input);
-
-    if (matchIndex !== -1) {
-      combobox.updateActiveOption(matchIndex);
-    }
-  });
-}
-
-function valueExample() {
-  const valueExample = document.querySelector('#valueExample');
-
-  document.querySelector('#valueValidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Oranges';
-  });
-
-  document.querySelector('#valueInvalidExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'Dragon Fruit';
-  });
-
-  document.querySelector('#valueUndefinedExampleBtn').addEventListener('click', () => {
-    valueExample.value = undefined;
-  });
-}
-
-function inDialogExample() {
-  document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
-    const dialog = document.querySelector("#combobox-dialog");
-    dialog.open = true;
-  });
-}
-
-function inDrawerExample() {
-  document.querySelector("#combobox-drawer-opener").addEventListener("click", () => {
-    const drawer = document.querySelector("#combobox-drawer");
-    if (drawer.hasAttribute('open')) {
-      drawer.removeAttribute('open');
-    } else {
-      drawer.setAttribute('open', true);
-    }
-  });
-}
-
-function persistentExample() {
-  const persistentExample = document.querySelector('#persistent');
-
-  persistentExample.addEventListener('addNewAddress', () => {
-    console.warn('addNewAddress event fired');
-    alert(`addNewAddress event fired`);
-  });
-}
-
-/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-
-
-AuroCombobox.register();
-
-function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    focusExample();
-    resetStateExample();
-    setupExternalSelectionExample();
-    valueExample();
-    inDialogExample();
-    inDrawerExample();
-    persistentExample();
-    swapValueExample();
-  } catch (err) {
-    if (initCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}
-
-export { initExamples };

package/components/combobox/demo/install.html

@@ -1,50 +0,0 @@
-<!--
-  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-  See LICENSE in the project root for license information.
-
-  HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/install.md
-
-  With the exception of adding custom elements if needed for the demo.
-
-  ----------------------- DO NOT EDIT -----------------------------
-
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-combobox | Install</title>
-
-    <!-- highlight.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
-
-    <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-
-    <!-- Demo Specific Styles -->
-    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
-  </head>
-  <body class="auro-markdown">
-    <main></main>
-
-    <script type="module">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./install.md');
-    </script>
-
-    <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
-  </body>
-</html>