diff --git a/demo/api.html b/demo/api.html index 137dee8..c4ae1dc 100644 --- a/demo/api.html +++ b/demo/api.html @@ -48,7 +48,6 @@ - diff --git a/demo/api.md b/demo/api.md index 517fac7..c685e06 100644 --- a/demo/api.md +++ b/demo/api.md @@ -8,7 +8,6 @@ | Attribute | Type | Description | |-----------|-----------|--------------------------------------------------| | [md](#md) | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. | -| [onDark](#onDark) | `Boolean` | Sets close icon to white for dark backgrounds | | [sm](#sm) | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. | ## Properties @@ -16,6 +15,7 @@ | Property | Attribute | Type | Default | Description | |------------------|---------------|---------------|---------|--------------------------------------------------| | [modal](#modal) | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) | +| [onDark](#onDark) | `onDark` | `Boolean` | | Sets close icon to white for dark backgrounds | | [open](#open) | `open` | `Boolean` | | Sets state of dialog to open | | [triggerElement](#triggerElement) | | `HTMLElement` | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. | | [unformatted](#unformatted) | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content | @@ -733,9 +733,8 @@ The component may be restyled using the following code sample and changing the v --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default}); --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12); --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1); - --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, #{$ds-color-icon-primary-default}); - --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5); + --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); } ``` diff --git a/demo/index.html b/demo/index.html index 3e99e3f..beb4571 100644 --- a/demo/index.html +++ b/demo/index.html @@ -51,7 +51,6 @@ - diff --git a/docs/api.md b/docs/api.md index 8e7df2e..ef9ec51 100644 --- a/docs/api.md +++ b/docs/api.md @@ -5,7 +5,6 @@ | Attribute | Type | Description | |-----------|-----------|--------------------------------------------------| | `md` | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. | -| `onDark` | `Boolean` | Sets close icon to white for dark backgrounds | | `sm` | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. | ## Properties @@ -13,6 +12,7 @@ | Property | Attribute | Type | Default | Description | |------------------|---------------|---------------|---------|--------------------------------------------------| | `modal` | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) | +| `onDark` | `onDark` | `Boolean` | | Sets close icon to white for dark backgrounds | | `open` | `open` | `Boolean` | | Sets state of dialog to open | | `triggerElement` | | `HTMLElement` | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. | | `unformatted` | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content | 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 1965953..73ef0e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { + "@aurodesignsystem/auro-button": "^7.3.0-beta.3", + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "chalk": "^5.3.0", "lit": "^3.1.4" }, @@ -95,7 +97,6 @@ "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, "dependencies": { "chalk": "4.1.2", @@ -109,7 +110,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -124,7 +124,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -140,7 +139,6 @@ "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, "dependencies": { "color-name": "~1.1.4" }, @@ -151,14 +149,12 @@ "node_modules/@alaskaairux/icons/node_modules/color-name": { "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 + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "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, "dependencies": { "has-flag": "^4.0.0" }, @@ -166,6 +162,42 @@ "node": ">=8" } }, + "node_modules/@aurodesignsystem/auro-button": { + "version": "7.3.0-beta.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-7.3.0-beta.3.tgz", + "integrity": "sha512-vmlVujRtbE5M6QjvisU1/PRkvzfaKi3NtolJvlzbu6yiiPLThPZYbXk8ST7p0hDa8PdvJjIZACXkIogHe0Mf9g==", + "hasInstallScript": true, + "dependencies": { + "@aurodesignsystem/auro-loader": "^2.1.0-beta.2", + "chalk": "^5.3.0", + "lit": "^3.1.4" + }, + "engines": { + "node": "^18 || ^20" + }, + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.3.0", + "@aurodesignsystem/webcorestylesheets": "^5.0.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", @@ -181,11 +213,27 @@ "node": "^18 || ^20" } }, + "node_modules/@aurodesignsystem/auro-loader": { + "version": "2.1.0-beta.2", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-loader/-/auro-loader-2.1.0-beta.2.tgz", + "integrity": "sha512-7x2bjYuROEdZhGWg51uhqsK6DtoEmiBshgmADfdMRZLOwjkC+8YYFtDlMTN50B0K4MauVHEQ+7p82lOzFAfEdg==", + "hasInstallScript": true, + "dependencies": { + "chalk": "^5.3.0", + "lit": "^3.1.4" + }, + "engines": { + "node": "^18.x || ^20.x " + }, + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.3.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.8" + } + }, "node_modules/@aurodesignsystem/design-tokens": { "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" @@ -276,7 +324,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" @@ -761,6 +808,18 @@ "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@eslint-community/regexpp": { "version": "4.11.0", "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz", @@ -771,14 +830,14 @@ } }, "node_modules/@eslint/config-array": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.16.0.tgz", - "integrity": "sha512-/jmuSd74i4Czf1XXn7wGRWZCuyaUZ330NH1Bek0Pplatt4Sy1S5haN21SCLLdbeKslQ+S0wEJ+++v5YibSi+Lg==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.0.tgz", + "integrity": "sha512-A68TBu6/1mHHuc5YJL0U0VVeGNiklLAL6rRmhTCP2B5XjWLMnrX+HkO+IAXyHvks5cyyY1jjK5ITPQ1HGS2EVA==", "dev": true, "dependencies": { "@eslint/object-schema": "^2.1.4", "debug": "^4.3.1", - "minimatch": "^3.0.5" + "minimatch": "^3.1.2" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -830,9 +889,9 @@ "dev": true }, "node_modules/@eslint/js": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.5.0.tgz", - "integrity": "sha512-A7+AOT2ICkodvtsWnxZP4Xxk3NbZ3VMHd8oihydLRGrJgqqdEz1qSeEgXYyT/Cu8h1TWWsQRejIx48mtjZ5y1w==", + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.6.0.tgz", + "integrity": "sha512-D9B0/3vNg44ZeWbYMpBoXqNP4j6eQD5vNwIlGAuFRRzK/WtT/jvDQW3Bi9kkf3PMDMlM7Yi+73VLUsn5bJcl8A==", "dev": true, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -2234,7 +2293,6 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "dev": true, "engines": { "node": ">=10.13.0" } @@ -2963,18 +3021,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/ansi-escapes/node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -3006,7 +3052,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" @@ -3332,7 +3377,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" }, @@ -3343,8 +3387,7 @@ "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/bottleneck": { "version": "2.19.5", @@ -3366,7 +3409,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" }, @@ -3694,7 +3736,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", @@ -4726,7 +4767,6 @@ "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, "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -4742,7 +4782,6 @@ "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, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -4756,7 +4795,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -4771,7 +4809,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -4785,7 +4822,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -4797,7 +4833,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" @@ -4810,7 +4845,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true, "engines": { "node": ">= 6" }, @@ -4834,7 +4868,6 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "dev": true, "dependencies": { "css-tree": "~2.2.0" }, @@ -4847,7 +4880,6 @@ "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, "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" @@ -4860,8 +4892,7 @@ "node_modules/csso/node_modules/mdn-data": { "version": "2.0.28", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", - "dev": true + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" }, "node_modules/dargs": { "version": "8.1.0", @@ -5288,7 +5319,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", @@ -5665,16 +5695,16 @@ } }, "node_modules/eslint": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.5.0.tgz", - "integrity": "sha512-+NAOZFrW/jFTS3dASCGBxX1pkFD0/fsO+hfAkJ4TyYKwgsXZbqzrw+seCYFCcPCYXvnD67tAnglU7GQTz6kcVw==", + "version": "9.6.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.6.0.tgz", + "integrity": "sha512-ElQkdLMEEqQNM9Njff+2Y4q2afHk7JpkPvrd7Xh7xefwgQynqPxwf55J7di9+MEibWUGdNjFF9ITG9Pck5M84w==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/config-array": "^0.16.0", + "@eslint/config-array": "^0.17.0", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.5.0", + "@eslint/js": "9.6.0", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.3.0", "@nodelib/fs.walk": "^1.2.8", @@ -5685,7 +5715,7 @@ "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.0.1", "eslint-visitor-keys": "^4.0.0", - "espree": "^10.0.1", + "espree": "^10.1.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -5863,12 +5893,12 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", + "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", "dev": true, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "url": "https://opencollective.com/eslint" @@ -5939,18 +5969,6 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, - "node_modules/eslint/node_modules/eslint-visitor-keys": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", - "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", - "dev": true, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/eslint/node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -6080,18 +6098,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/espree/node_modules/eslint-visitor-keys": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz", - "integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==", - "dev": true, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -6361,7 +6367,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" }, @@ -6563,7 +6568,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": [ @@ -6791,7 +6795,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" }, @@ -7020,7 +7023,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" } @@ -7335,8 +7337,7 @@ "node_modules/immutable": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", - "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==", - "dev": true + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==" }, "node_modules/import-fresh": { "version": "3.3.0", @@ -7592,7 +7593,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" }, @@ -7740,7 +7740,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" } @@ -7773,7 +7772,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" }, @@ -7831,7 +7829,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" } @@ -9025,8 +9022,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", @@ -9595,7 +9591,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" } @@ -9696,13 +9691,6 @@ "write-file-atomic" ], "dev": true, - "workspaces": [ - "docs", - "smoke-tests", - "mock-globals", - "mock-registry", - "workspaces/*" - ], "dependencies": { "@isaacs/string-locale-compare": "^1.1.0", "@npmcli/arborist": "^7.5.3", @@ -12439,7 +12427,6 @@ "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, "dependencies": { "boolbase": "^1.0.0" }, @@ -12907,14 +12894,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" }, @@ -13635,7 +13620,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" }, @@ -14038,7 +14022,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", @@ -14628,7 +14611,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" } @@ -15262,7 +15244,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", - "dev": true, "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", @@ -15287,7 +15268,6 @@ "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, "engines": { "node": ">= 10" } @@ -15603,7 +15583,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" }, @@ -15710,6 +15689,18 @@ "node": ">= 0.8.0" } }, + "node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", @@ -16625,9 +16616,9 @@ } }, "node_modules/yoctocolors": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.0.tgz", - "integrity": "sha512-FsQpXXeOEe05tcJN4Z2eicuC6+6KiJdBbPOAChanSkwwjZ277XGsh8wh/HaPuGeifTiw/7dgAzabitu2bnDvRg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.1.tgz", + "integrity": "sha512-GQHQqAopRhwU8Kt1DDM8NjibDXHC8eoh1erhGAJPEyveY9qqVeXvVikNKrDz69sHowPMorbPUrH/mx8c50eiBQ==", "dev": true, "engines": { "node": ">=18" diff --git a/package.json b/package.json index af6c50f..01484ee 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "node": "^18.x || ^20.x" }, "dependencies": { + "@aurodesignsystem/auro-button": "^7.3.0-beta.3", + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "chalk": "^5.3.0", "lit": "^3.1.4" }, @@ -140,7 +142,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", @@ -149,13 +151,14 @@ "build:docs": "node scripts/generateDocs.mjs", "build:sass": "npm-run-all build:sass:component postCss:component sass:render", "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' './apiExamples/**/*.js' ./dist", - "esLint": "./node_modules/.bin/eslint src/**/*.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..035244d --- /dev/null +++ b/scripts/version.mjs @@ -0,0 +1,4 @@ +import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js'; + +versionWriter.writeDepVersionFile('@aurodesignsystem/auro-button'); +versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon'); diff --git a/src/buttonVersion.js b/src/buttonVersion.js new file mode 100644 index 0000000..7c93df8 --- /dev/null +++ b/src/buttonVersion.js @@ -0,0 +1 @@ +export default '7.3.0-beta.2' \ No newline at end of file diff --git a/src/color.scss b/src/color.scss index 6b0b969..49ec4ed 100644 --- a/src/color.scss +++ b/src/color.scss @@ -33,9 +33,4 @@ border: 2px solid transparent; border-radius: var(--ds-border-radius, $ds-border-radius); background-color: transparent; - color: var(--ds-auro-dialog-close-button-color); -} - -:host([unformatted][onDark]) { - --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-inverse, #{$ds-color-icon-primary-inverse}); } diff --git a/src/componentBase.js b/src/componentBase.js index f08a646..cbf8855 100644 --- a/src/componentBase.js +++ b/src/componentBase.js @@ -3,9 +3,10 @@ // --------------------------------------------------------------------- -/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence */ +/* eslint-disable jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence, lit/binding-positions, lit/no-invalid-html, prefer-destructuring */ -import { LitElement, html } from "lit"; +import { LitElement } from "lit"; +import { html } from 'lit/static-html.js'; import { classMap } from 'lit/directives/class-map.js'; import styleCss from "./style-css.js"; @@ -13,9 +14,13 @@ import styleUnformattedCss from './style-unformatted-css.js'; import colorCss from "./color-css.js"; import tokensCss from "./tokens-css.js"; -import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs'; +import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; -/* eslint-disable one-var, prefer-destructuring */ +import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js'; +import buttonVersion from './buttonVersion'; + +import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js'; +import iconVersion from './iconVersion'; const ESCAPE_KEYCODE = 27, FOCUS_TIMEOUT = 50; @@ -48,18 +53,20 @@ export default class ComponentBase extends LitElement { constructor() { super(); + this.modal = false; + this.unformatted = false; + + const versioning = new AuroDependencyVersioning(); + /** * @private */ - this.dom = new DOMParser().parseFromString(closeIcon.svg, 'text/html'); + this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton); /** * @private */ - this.svg = this.dom.body.firstChild; - - this.modal = false; - this.unformatted = false; + this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon); } static get properties() { @@ -69,6 +76,10 @@ export default class ComponentBase extends LitElement { type: Boolean, reflect: true }, + onDark: { + type: Boolean, + reflect: true + }, open: { type: Boolean, reflect: true @@ -164,7 +175,7 @@ export default class ComponentBase extends LitElement { if (lastFocusableElement) { lastFocusableElement.addEventListener('focusout', () => { - if (closeButton !== null) { // eslint-disable-line no-negated-condition + if (closeButton !== null) { closeButton.focus(); } else { firstFocusableElement.focus(); @@ -230,10 +241,10 @@ export default class ComponentBase extends LitElement { return this.modal ? html`` : html` - + `; } 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 472eff8..424062c 100644 --- a/src/style.scss +++ b/src/style.scss @@ -28,9 +28,10 @@ $auro-spacing-options: none; --insetPaddingXxxl: 0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800); } -// layout styles - define any layout specifications for UI that is contained WITHIN the component -// never define layout that would cause effect on element outside the scope of this component - +[auro-icon] { + height: var(--ds-size-300, $ds-size-300); + width: var(--ds-size-300, $ds-size-300); +} // container shape styles .dialogOverlay { diff --git a/src/tokens.scss b/src/tokens.scss index 2c457cd..80a2137 100644 --- a/src/tokens.scss +++ b/src/tokens.scss @@ -4,8 +4,7 @@ --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default}); --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12); --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1); - --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, #{$ds-color-icon-primary-default}); - --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5); + --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); }