diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa50dc7..a0d3dea 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,4 +10,4 @@ const compat = new FlatCompat({
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});
-export default [...compat.extends("@aurodesignsystem/eslint-config")];
\ No newline at end of file
+export default [...compat.extends("@aurodesignsystem/eslint-config")];
diff --git a/package-lock.json b/package-lock.json
index 83ae860..2050aec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,12 @@
"hasInstallScript": true,
"license": "Apache-2.0",
"dependencies": {
+ "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
"chalk": "^5.2.0",
"lit": "^3.1.4",
"typescript": "^5.5.3"
},
"devDependencies": {
- "@alaskaairux/icons": "^4.41.1",
"@aurodesignsystem/auro-library": "^2.6.0",
"@aurodesignsystem/design-tokens": "^4.8.0",
"@aurodesignsystem/eslint-config": "^1.3.1",
@@ -63,7 +63,6 @@
"node": "^18 || ^20"
},
"peerDependencies": {
- "@alaskaairux/icons": "^4.34.2",
"@aurodesignsystem/design-tokens": "^4.3.1",
"@aurodesignsystem/webcorestylesheets": "^5.0.6"
}
@@ -103,8 +102,8 @@
"version": "4.41.1",
"resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.41.1.tgz",
"integrity": "sha512-XI0bHWM0HGzNoHX1JzGUVlwX3YafqWI3ruEhsugI5DzFyec/zTlgf2/3IA0CBNyhroaU/WyXuPAPlIq1b509aA==",
- "dev": true,
"hasInstallScript": true,
+ "peer": true,
"dependencies": {
"chalk": "4.1.2",
"svgo": "^3.2.0"
@@ -117,7 +116,7 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
+ "peer": true,
"dependencies": {
"color-convert": "^2.0.1"
},
@@ -132,7 +131,7 @@
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
- "dev": true,
+ "peer": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
@@ -148,7 +147,7 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
+ "peer": true,
"dependencies": {
"color-name": "~1.1.4"
},
@@ -160,13 +159,13 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true
+ "peer": true
},
"node_modules/@alaskaairux/icons/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
+ "peer": true,
"dependencies": {
"has-flag": "^4.0.0"
},
@@ -174,6 +173,24 @@
"node": ">=8"
}
},
+ "node_modules/@aurodesignsystem/auro-icon": {
+ "version": "5.0.0-beta.1",
+ "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.0-beta.1.tgz",
+ "integrity": "sha512-E1dth3K8JiViAdMtNb6ZESPZxIj8pQVlAoozsw6LAAIimWtEay4Mo2Mp22RByIWv2oK/ro3KuAwcyqiSotmQgQ==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "chalk": "^5.3.0",
+ "lit": "^3.1.3"
+ },
+ "engines": {
+ "node": "^18.x || ^20.x"
+ },
+ "peerDependencies": {
+ "@alaskaairux/icons": "^4.36.0",
+ "@aurodesignsystem/design-tokens": "^4.3.1",
+ "@aurodesignsystem/webcorestylesheets": "^5.0.8"
+ }
+ },
"node_modules/@aurodesignsystem/auro-library": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-library/-/auro-library-2.6.0.tgz",
@@ -193,7 +210,6 @@
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.8.0.tgz",
"integrity": "sha512-CEhUuz1IhfxC94R+3hXBvP33rA8GtJ6JWDKcqMe15rjkSgpwDm5IxPbKEuUI16BJ4tDZCNPc+OULUcIFXprCbA==",
- "dev": true,
"hasInstallScript": true,
"dependencies": {
"chalk": "^5.3.0"
@@ -284,7 +300,6 @@
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.1.1.tgz",
"integrity": "sha512-HEwZQTV2/clC9Ty42gpoXfR8rR0VUJjunZNAKJX78X48f0YKVGg4fFX+nVDZH7xklHelb2q+9bPSgc12IVCBPA==",
- "dev": true,
"hasInstallScript": true,
"dependencies": {
"chalk": "^5.3.0"
@@ -2654,7 +2669,7 @@
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
- "dev": true,
+ "peer": true,
"engines": {
"node": ">=10.13.0"
}
@@ -3432,7 +3447,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
- "dev": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
@@ -3754,7 +3768,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
- "dev": true,
"engines": {
"node": ">=8"
},
@@ -3766,7 +3779,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
- "dev": true
+ "peer": true
},
"node_modules/bottleneck": {
"version": "2.19.5",
@@ -3788,7 +3801,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
- "dev": true,
"dependencies": {
"fill-range": "^7.1.1"
},
@@ -4116,7 +4128,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
- "dev": true,
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
@@ -5138,7 +5149,7 @@
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
- "dev": true,
+ "peer": true,
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
@@ -5154,7 +5165,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
- "dev": true,
+ "peer": true,
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
@@ -5168,7 +5179,7 @@
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
- "dev": true,
+ "peer": true,
"dependencies": {
"domelementtype": "^2.3.0"
},
@@ -5183,7 +5194,7 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
- "dev": true,
+ "peer": true,
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
@@ -5197,7 +5208,7 @@
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
- "dev": true,
+ "peer": true,
"engines": {
"node": ">=0.12"
},
@@ -5209,7 +5220,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
- "dev": true,
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
@@ -5222,7 +5232,7 @@
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
- "dev": true,
+ "peer": true,
"engines": {
"node": ">= 6"
},
@@ -5246,7 +5256,7 @@
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
- "dev": true,
+ "peer": true,
"dependencies": {
"css-tree": "~2.2.0"
},
@@ -5259,7 +5269,7 @@
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
- "dev": true,
+ "peer": true,
"dependencies": {
"mdn-data": "2.0.28",
"source-map-js": "^1.0.1"
@@ -5273,7 +5283,7 @@
"version": "2.0.28",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
- "dev": true
+ "peer": true
},
"node_modules/dargs": {
"version": "8.1.0",
@@ -5605,7 +5615,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -6706,7 +6715,6 @@
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
- "dev": true,
"dependencies": {
"to-regex-range": "^5.0.1"
},
@@ -6907,7 +6915,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
- "dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
@@ -7122,7 +7129,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
- "dev": true,
"dependencies": {
"is-glob": "^4.0.1"
},
@@ -7352,7 +7358,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true,
"engines": {
"node": ">=8"
}
@@ -7667,8 +7672,7 @@
"node_modules/immutable": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
- "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
- "dev": true
+ "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
},
"node_modules/import-fresh": {
"version": "3.3.0",
@@ -7890,7 +7894,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
- "dev": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
@@ -8035,7 +8038,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -8068,7 +8070,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
- "dev": true,
"dependencies": {
"is-extglob": "^2.1.1"
},
@@ -8114,7 +8115,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
- "dev": true,
"engines": {
"node": ">=0.12.0"
}
@@ -9223,8 +9223,7 @@
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
- "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
- "dev": true
+ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"node_modules/media-typer": {
"version": "0.3.0",
@@ -9806,7 +9805,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -12808,7 +12806,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
- "dev": true,
+ "peer": true,
"dependencies": {
"boolbase": "^1.0.0"
},
@@ -13237,14 +13235,12 @@
"node_modules/picocolors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
- "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
- "dev": true
+ "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
},
"node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
- "dev": true,
"engines": {
"node": ">=8.6"
},
@@ -13919,7 +13915,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
- "dev": true,
"dependencies": {
"picomatch": "^2.2.1"
},
@@ -14292,7 +14287,6 @@
"version": "1.77.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
"integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
- "dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
@@ -14930,7 +14924,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -15560,7 +15553,7 @@
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz",
"integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==",
- "dev": true,
+ "peer": true,
"dependencies": {
"@trysound/sax": "0.2.0",
"commander": "^7.2.0",
@@ -15585,7 +15578,7 @@
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
- "dev": true,
+ "peer": true,
"engines": {
"node": ">= 10"
}
@@ -15892,7 +15885,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
- "dev": true,
"dependencies": {
"is-number": "^7.0.0"
},
diff --git a/package.json b/package.json
index 79fa29e..6762dd5 100644
--- a/package.json
+++ b/package.json
@@ -21,17 +21,16 @@
"node": "^18 || ^20"
},
"dependencies": {
+ "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
"chalk": "^5.2.0",
"lit": "^3.1.4",
"typescript": "^5.5.3"
},
"peerDependencies": {
- "@alaskaairux/icons": "^4.34.2",
"@aurodesignsystem/design-tokens": "^4.3.1",
"@aurodesignsystem/webcorestylesheets": "^5.0.6"
},
"devDependencies": {
- "@alaskaairux/icons": "^4.41.1",
"@aurodesignsystem/auro-library": "^2.6.0",
"@aurodesignsystem/design-tokens": "^4.8.0",
"@aurodesignsystem/eslint-config": "^1.3.1",
@@ -135,7 +134,7 @@
"web components"
],
"scripts": {
- "build": "npm-run-all build:sass sass:render types",
+ "build": "npm-run-all build:version build:sass sass:render types",
"build:test": "npm-run-all test linters",
"build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
"build:ci": "npm-run-all sweep build:release",
@@ -145,13 +144,14 @@
"build:sass": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
"build:sass:demo": "sass --no-source-map demo:demo",
"build:sass:component": "sass --no-source-map src:src",
+ "build:version": "node scripts/version.mjs",
"build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples --exec npm run build:dev:assets",
"bundler": "rollup -c",
"bundler:test": "rollup -c -w",
"scssLint": "stylelint \"./src/**/*.scss\"",
"dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'",
"dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
- "esLint": "eslint src/auro-*.js",
+ "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
"linters": "npm-run-all scssLint esLint",
"preCommit": "node scripts/pre-commit.mjs",
"postCss:component": "node ./scripts/postCss.mjs",
diff --git a/scripts/version.mjs b/scripts/version.mjs
new file mode 100644
index 0000000..a8dbf6b
--- /dev/null
+++ b/scripts/version.mjs
@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
diff --git a/src/auro-alert.js b/src/auro-alert.js
index 294a04f..c9edcec 100644
--- a/src/auro-alert.js
+++ b/src/auro-alert.js
@@ -3,14 +3,14 @@
// ---------------------------------------------------------------------
-import { html } from "lit";
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+
+import { html } from 'lit/static-html.js';
import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs';
-// Import Icons
-import error from '@alaskaairux/icons/dist/icons/alert/error-stroke.mjs';
-import warning from '@alaskaairux/icons/dist/icons/alert/warning-stroke.mjs';
-import information from '@alaskaairux/icons/dist/icons/alert/information-stroke.mjs';
-import success from '@alaskaairux/icons/dist/icons/interface/check-stroke.mjs';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion';
import styleCss from "./style-css.js";
import colorCss from "./color-css.js";
@@ -25,6 +25,15 @@ import tokensCss from "./tokens-css.js";
* @slot - Provide text for the alert. If using multiple lines, separate each line with `` tags.
*/
export class AuroAlert extends AuroElement {
+ constructor() {
+ super();
+
+ /**
+ * Generate unique names for dependency components.
+ */
+ const versioning = new AuroDependencyVersioning();
+ this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+ }
// function to define props used within the scope of this component
static get properties() {
@@ -44,6 +53,13 @@ export class AuroAlert extends AuroElement {
role: {
type: String,
reflect: true
+ },
+
+ /**
+ * @private
+ */
+ iconTag: {
+ type: String
}
};
}
@@ -58,16 +74,15 @@ export class AuroAlert extends AuroElement {
/**
* @private
- * @param {string} svgContent - The imported svg icon.
+ * @param {string} category - The category of the icon.
+ * @param {string} name - The name of the icon.
* @returns {string} - The html template for the icon.
*/
- generateIconHtml(svgContent) {
- const dom = new DOMParser().parseFromString(svgContent, 'text/html'),
- svg = dom.body.firstChild;
-
+ generateIconHtml(category, name) {
return this.noIcon
? html``
- : html`
${svg}
`;
+ : html`<${this.iconTag} customSize customColor category="${category}" name="${name}">`;
+
}
// function that renders the HTML and CSS into the scope of the component
@@ -78,23 +93,16 @@ export class AuroAlert extends AuroElement {
case undefined:
break;
case "error":
- output = this.generateIconHtml(error.svg);
- this.role = "alert";
- this.typeStr = "Error.";
+ output = this.generateIconHtml("alert", "error-stroke");
break;
case "success":
- output = this.generateIconHtml(success.svg);
- this.role = "alert";
- this.typeStr = "Success.";
+ output = this.generateIconHtml("interface", "check-stroke");
break;
case "warning":
- output = this.generateIconHtml(warning.svg);
- this.role = "alert";
- this.typeStr = "Warning.";
+ output = this.generateIconHtml("alert", "warning-stroke");
break;
case "information":
- output = this.generateIconHtml(information.svg);
- this.typeStr = "Informational notice.";
+ output = this.generateIconHtml("alert", "information-stroke");
break;
default:
break;
diff --git a/src/color.scss b/src/color.scss
index fdc86e1..42e1897 100644
--- a/src/color.scss
+++ b/src/color.scss
@@ -12,7 +12,7 @@
color: var(--ds-auro-alert-text-color);
}
-svg {
+[auro-icon] {
color: var(--ds-auro-alert-icon-color);
}
diff --git a/src/iconVersion.js b/src/iconVersion.js
new file mode 100644
index 0000000..7a34a78
--- /dev/null
+++ b/src/iconVersion.js
@@ -0,0 +1 @@
+export default '5.0.0-beta.1'
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index 610c63b..7d863f1 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -23,8 +23,7 @@
border-left-width: var(--ds-size-100, $ds-size-100);
}
-.icon {
- display: flex;
+[auro-icon] {
width: var(--ds-size-300, $ds-size-300);
height: var(--ds-size-300, $ds-size-300);
margin-right: var(--ds-size-100, $ds-size-100);
diff --git a/src/tokens.scss b/src/tokens.scss
index 0e657a3..ec32263 100644
--- a/src/tokens.scss
+++ b/src/tokens.scss
@@ -1,6 +1,8 @@
+@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
:host {
- --ds-auro-alert-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
- --ds-auro-alert-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+ --ds-auro-alert-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
+ --ds-auro-alert-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
--ds-auro-alert-icon-color: transparent;
- --ds-auro-alert-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+ --ds-auro-alert-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
}
diff --git a/test/auro-alert.test.js b/test/auro-alert.test.js
index d3ec48a..05c537f 100644
--- a/test/auro-alert.test.js
+++ b/test/auro-alert.test.js
@@ -20,13 +20,12 @@ describe('auro-alert', () => {
`);
const root = el.shadowRoot;
- const svg = root.querySelector('svg');
- const title = svg.querySelector('title');
- const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+ const icon = root.querySelector('[auro-icon="true"]');
+ const category = icon.getAttribute('category');
+ const iconName = icon.getAttribute('name');
- await expect(el.role).to.equal("alert");
- await expect(title.innerHTML).to.equal("");
- await expect(hiddenContent.innerHTML).to.contain("Error.");
+ await expect(category).to.equal("alert");
+ await expect(iconName).to.equal("error-stroke");
});
it('sets auro-alert to warning style', async () => {
@@ -35,13 +34,12 @@ describe('auro-alert', () => {
`);
const root = el.shadowRoot;
- const svg = root.querySelector('svg');
- const title = svg.querySelector('title');
- const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+ const icon = root.querySelector('[auro-icon="true"]');
+ const category = icon.getAttribute('category');
+ const iconName = icon.getAttribute('name');
- await expect(el.role).to.equal("alert");
- await expect(title.innerHTML).to.equal("");
- await expect(hiddenContent.innerHTML).to.contain("Warning.");
+ await expect(category).to.equal("alert");
+ await expect(iconName).to.equal("warning-stroke");
});
it('sets auro-alert to success style', async () => {
@@ -50,13 +48,12 @@ describe('auro-alert', () => {
`);
const root = el.shadowRoot;
- const svg = root.querySelector('svg');
- const title = svg.querySelector('title');
- const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+ const icon = root.querySelector('[auro-icon="true"]');
+ const category = icon.getAttribute('category');
+ const iconName = icon.getAttribute('name');
- await expect(el.role).to.equal("alert");
- await expect(title.innerHTML).to.equal("");
- await expect(hiddenContent.innerHTML).to.contain("Success.");
+ await expect(category).to.equal("interface");
+ await expect(iconName).to.equal("check-stroke");
});
@@ -66,25 +63,12 @@ describe('auro-alert', () => {
`);
const root = el.shadowRoot;
- const svg = root.querySelector('svg');
- const title = svg.querySelector('title');
- const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+ const icon = root.querySelector('[auro-icon="true"]');
+ const category = icon.getAttribute('category');
+ const iconName = icon.getAttribute('name');
- await expect(el.role).to.be.undefined;
- await expect(title.innerHTML).to.equal("");
- await expect(hiddenContent.innerHTML).to.contain("Informational notice.");
- });
-
- it('sets auro-alert to noIcon style', async () => {
- const el = await fixture(html`
-
- `);
-
- const root = el.shadowRoot;
- const hiddenContent = root.querySelector('.util_displayHiddenVisually');
-
- await expect(el.role).to.be.undefined;
- await expect(hiddenContent.innerHTML).to.contain("Informational notice.");
+ await expect(category).to.equal("alert");
+ await expect(iconName).to.equal("information-stroke");
});
it('auro-alert is accessible', async () => {