diff --git a/package-lock.json b/package-lock.json index 715367609c..f02a0b1168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,10 +57,10 @@ "react-dom": "^18.3.1", "remark-gfm": "^4.0.0", "storybook": "^8.4.5", - "stylelint": "^16.12.0", + "stylelint": "^16.13.2", "stylelint-config-css-modules": "^4.4.0", - "stylelint-config-recess-order": "^5.1.1", - "stylelint-config-standard": "^36.0.1", + "stylelint-config-recess-order": "^6.0.0", + "stylelint-config-standard": "^37.0.0", "stylelint-no-unsupported-browser-features": "^8.0.2", "stylelint-prettier": "^5.0.2", "svgo": "^3.3.2", @@ -5430,6 +5430,39 @@ "integrity": "sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==", "dev": true }, + "node_modules/@keyv/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-+E/LyaAeuABniD/RvUezWVXKpeuvwLEA9//nE9952zBaOdBd2mQ3pPoM8cUe2X6IcMByfuSLzmYqnYshG60+HQ==", + "license": "MIT", + "dependencies": { + "buffer": "^6.0.3" + } + }, + "node_modules/@keyv/serialize/node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/@lerna/create": { "version": "8.1.9", "resolved": "https://registry.npmjs.org/@lerna/create/-/create-8.1.9.tgz", @@ -10255,6 +10288,68 @@ "node": "^18.18 || ^20.9 || >=22" } }, + "node_modules/@sumup-oss/foundry/node_modules/stylelint-config-recess-order": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-5.1.1.tgz", + "integrity": "sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==", + "dev": true, + "license": "ISC", + "dependencies": { + "stylelint-order": "^6.0.4" + }, + "peerDependencies": { + "stylelint": ">=16" + } + }, + "node_modules/@sumup-oss/foundry/node_modules/stylelint-config-recommended": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", + "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "license": "MIT", + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, + "node_modules/@sumup-oss/foundry/node_modules/stylelint-config-standard": { + "version": "36.0.1", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", + "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], + "license": "MIT", + "dependencies": { + "stylelint-config-recommended": "^14.0.1" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "stylelint": "^16.1.0" + } + }, "node_modules/@sumup-oss/icons": { "resolved": "packages/icons", "link": true @@ -12753,7 +12848,6 @@ "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "dev": true, "funding": [ { "type": "github", @@ -13164,6 +13258,25 @@ "node": ">=12" } }, + "node_modules/cacheable": { + "version": "1.8.7", + "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-1.8.7.tgz", + "integrity": "sha512-AbfG7dAuYNjYxFUtL1lAqmlWdxczCJ47w7cFjhGcnGnUdwSo6VgmSojfoW3tUI12HUkgTJ5kqj78yyq6TsFtlg==", + "license": "MIT", + "dependencies": { + "hookified": "^1.6.0", + "keyv": "^5.2.3" + } + }, + "node_modules/cacheable/node_modules/keyv": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.2.3.tgz", + "integrity": "sha512-AGKecUfzrowabUv0bH1RIR5Vf7w+l4S3xtQAypKaUpTdIR1EbrAcTxHCrpo9Q+IWeUlFE2palRtgIQcgm+PQJw==", + "license": "MIT", + "dependencies": { + "@keyv/serialize": "^1.0.2" + } + }, "node_modules/call-bind": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", @@ -14428,12 +14541,12 @@ "license": "MIT" }, "node_modules/css-tree": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.1.tgz", - "integrity": "sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz", + "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==", "license": "MIT", "dependencies": { - "mdn-data": "2.12.1", + "mdn-data": "2.12.2", "source-map-js": "^1.0.1" }, "engines": { @@ -19321,6 +19434,12 @@ "react-is": "^16.7.0" } }, + "node_modules/hookified": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.7.0.tgz", + "integrity": "sha512-XQdMjqC1AyeOzfs+17cnIk7Wdfu1hh2JtcyNfBf5u9jHrT3iZUlGHxLTntFBuk5lwkqJ6l3+daeQdHK5yByHVA==", + "license": "MIT" + }, "node_modules/hosted-git-info": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.3.tgz", @@ -19519,7 +19638,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true, "funding": [ { "type": "github", @@ -29046,9 +29164,9 @@ "license": "MIT" }, "node_modules/mdn-data": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.1.tgz", - "integrity": "sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz", + "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==", "license": "CC0-1.0" }, "node_modules/media-query-parser": { @@ -37848,9 +37966,9 @@ } }, "node_modules/stylelint": { - "version": "16.12.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.12.0.tgz", - "integrity": "sha512-F8zZ3L/rBpuoBZRvI4JVT20ZanPLXfQLzMOZg1tzPflRVh9mKpOZ8qcSIhh1my3FjAjZWG4T2POwGnmn6a6hbg==", + "version": "16.13.2", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.13.2.tgz", + "integrity": "sha512-wDlgh0mRO9RtSa3TdidqHd0nOG8MmUyVKl+dxA6C1j8aZRzpNeEgdhFmU5y4sZx4Fc6r46p0fI7p1vR5O2DZqA==", "funding": [ { "type": "opencollective", @@ -37861,6 +37979,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "license": "MIT", "dependencies": { "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", @@ -37871,16 +37990,16 @@ "colord": "^2.9.3", "cosmiconfig": "^9.0.0", "css-functions-list": "^3.2.3", - "css-tree": "^3.0.1", + "css-tree": "^3.1.0", "debug": "^4.3.7", - "fast-glob": "^3.3.2", + "fast-glob": "^3.3.3", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^9.1.0", + "file-entry-cache": "^10.0.5", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^6.0.2", + "ignore": "^7.0.1", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.35.0", @@ -37922,9 +38041,9 @@ } }, "node_modules/stylelint-config-recess-order": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-5.1.1.tgz", - "integrity": "sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-6.0.0.tgz", + "integrity": "sha512-1KqrttqpIrCYFAVQ1/bbgXo7EvvcjmkxxmnzVr+U66Xr2OlrNZqQ5+44Tmct6grCWY6wGTIBh2tSANqcmwIM2g==", "dev": true, "license": "ISC", "dependencies": { @@ -37935,9 +38054,9 @@ } }, "node_modules/stylelint-config-recommended": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz", - "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==", + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-15.0.0.tgz", + "integrity": "sha512-9LejMFsat7L+NXttdHdTq94byn25TD+82bzGRiV1Pgasl99pWnwipXS5DguTpp3nP1XjvLXVnEJIuYBfsRjRkA==", "dev": true, "funding": [ { @@ -37954,13 +38073,13 @@ "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^16.1.0" + "stylelint": "^16.13.0" } }, "node_modules/stylelint-config-standard": { - "version": "36.0.1", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz", - "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==", + "version": "37.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-37.0.0.tgz", + "integrity": "sha512-+6eBlbSTrOn/il2RlV0zYGQwRTkr+WtzuVSs1reaWGObxnxLpbcspCUYajVQHonVfxVw2U+h42azGhrBvcg8OA==", "dev": true, "funding": [ { @@ -37974,13 +38093,13 @@ ], "license": "MIT", "dependencies": { - "stylelint-config-recommended": "^14.0.1" + "stylelint-config-recommended": "^15.0.0" }, "engines": { "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^16.1.0" + "stylelint": "^16.13.0" } }, "node_modules/stylelint-no-unsupported-browser-features": { @@ -38145,34 +38264,29 @@ "license": "MIT" }, "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.1.0.tgz", - "integrity": "sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==", + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.0.5.tgz", + "integrity": "sha512-umpQsJrBNsdMDgreSryMEXvJh66XeLtZUwA8Gj7rHGearGufUFv6rB/bcXRFsiGWw/VeSUgUofF4Rf2UKEOrTA==", "license": "MIT", "dependencies": { - "flat-cache": "^5.0.0" - }, - "engines": { - "node": ">=18" + "flat-cache": "^6.1.5" } }, "node_modules/stylelint/node_modules/flat-cache": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz", - "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==", + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.5.tgz", + "integrity": "sha512-QR+2kN38f8nMfiIQ1LHYjuDEmZNZVjxuxY+HufbS3BW0EX01Q5OnH7iduOYRutmgiXb797HAKcXUeXrvRjjgSQ==", "license": "MIT", "dependencies": { - "flatted": "^3.3.1", - "keyv": "^4.5.4" - }, - "engines": { - "node": ">=18" + "cacheable": "^1.8.7", + "flatted": "^3.3.2", + "hookified": "^1.6.0" } }, "node_modules/stylelint/node_modules/ignore": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz", - "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz", + "integrity": "sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==", "license": "MIT", "engines": { "node": ">= 4" diff --git a/package.json b/package.json index 134c2abeda..91477f6774 100644 --- a/package.json +++ b/package.json @@ -86,10 +86,10 @@ "react-dom": "^18.3.1", "remark-gfm": "^4.0.0", "storybook": "^8.4.5", - "stylelint": "^16.12.0", + "stylelint": "^16.13.2", "stylelint-config-css-modules": "^4.4.0", - "stylelint-config-recess-order": "^5.1.1", - "stylelint-config-standard": "^36.0.1", + "stylelint-config-recess-order": "^6.0.0", + "stylelint-config-standard": "^37.0.0", "stylelint-no-unsupported-browser-features": "^8.0.2", "stylelint-prettier": "^5.0.2", "svgo": "^3.3.2", diff --git a/packages/circuit-ui/components/Anchor/Anchor.module.css b/packages/circuit-ui/components/Anchor/Anchor.module.css index eff0b27001..84cf897c48 100644 --- a/packages/circuit-ui/components/Anchor/Anchor.module.css +++ b/packages/circuit-ui/components/Anchor/Anchor.module.css @@ -7,10 +7,10 @@ color: var(--cui-fg-accent); text-align: left; text-decoration: underline; + outline: none; background: none; border: 0; border-radius: var(--cui-border-radius-bit); - outline: none; transition: opacity var(--cui-transitions-default), color var(--cui-transitions-default), diff --git a/packages/circuit-ui/components/Button/IconButton.module.css b/packages/circuit-ui/components/Button/IconButton.module.css index 0c64027582..d9c4a8a97a 100644 --- a/packages/circuit-ui/components/Button/IconButton.module.css +++ b/packages/circuit-ui/components/Button/IconButton.module.css @@ -7,9 +7,9 @@ padding: 0; margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); white-space: nowrap; border: 0; + clip: rect(0 0 0 0); } /* Sizes */ diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css index 3207d497cd..cc95bf07b2 100644 --- a/packages/circuit-ui/components/Button/base.module.css +++ b/packages/circuit-ui/components/Button/base.module.css @@ -31,12 +31,12 @@ top: 0; left: 0; display: grid; + visibility: hidden; grid-auto-flow: column; gap: var(--loader-gap); place-content: center; width: 100%; height: 100%; - visibility: hidden; opacity: 0; transition: opacity var(--cui-transitions-default), @@ -55,9 +55,9 @@ background-color: currentColor; border-radius: var(--cui-border-radius-circle); animation-duration: 720ms; /* 80ms + 4 * 160ms */ - animation-play-state: paused; animation-timing-function: cubic-bezier(0.75, 0, 1, 1); animation-iteration-count: infinite; + animation-play-state: paused; } @keyframes pulse1 { diff --git a/packages/circuit-ui/components/Calendar/Calendar.module.css b/packages/circuit-ui/components/Calendar/Calendar.module.css index 5151568c83..2bb186dc95 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.module.css +++ b/packages/circuit-ui/components/Calendar/Calendar.module.css @@ -69,8 +69,8 @@ .grid td { position: relative; padding: var(--calendar-day-padding); - text-align: center; vertical-align: middle; + text-align: center; } .grid th { diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.module.css b/packages/circuit-ui/components/Checkbox/Checkbox.module.css index ee7d88ff16..e9a726519f 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.module.css +++ b/packages/circuit-ui/components/Checkbox/Checkbox.module.css @@ -20,10 +20,10 @@ border: 1px solid var(--cui-border-normal); border-radius: 3px; box-shadow: none; + transform: translateY(-50%); transition: border var(--cui-transitions-default), background-color var(--cui-transitions-default); - transform: translateY(-50%); } .base + .label svg { @@ -38,10 +38,10 @@ line-height: 0; color: var(--cui-fg-on-strong); opacity: 0; + transform: translateY(-50%) scale(0, 0); transition: transform var(--cui-transitions-default), opacity var(--cui-transitions-default); - transform: translateY(-50%) scale(0, 0); } .base:hover + .label::before { @@ -49,8 +49,8 @@ } .base:focus + .label::before { - border-color: var(--cui-border-accent); outline: 0; + border-color: var(--cui-border-accent); box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus); diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css index 8b3448c844..876d511c3a 100644 --- a/packages/circuit-ui/components/ColorInput/ColorInput.module.css +++ b/packages/circuit-ui/components/ColorInput/ColorInput.module.css @@ -43,9 +43,9 @@ margin: var(--cui-spacings-kilo); appearance: none; cursor: pointer; + outline: none; border: none; border-radius: 6px; - outline: none; box-shadow: 0 0 0 1px var(--cui-border-normal); } diff --git a/packages/circuit-ui/components/DateInput/DateInput.module.css b/packages/circuit-ui/components/DateInput/DateInput.module.css index 3da7cbbec6..e575c4e941 100644 --- a/packages/circuit-ui/components/DateInput/DateInput.module.css +++ b/packages/circuit-ui/components/DateInput/DateInput.module.css @@ -15,11 +15,11 @@ min-width: 170px; padding: var(--cui-spacings-byte) var(--cui-spacings-mega); cursor: text; + outline: 0; background-color: var(--cui-bg-normal); border: 1px solid var(--cui-border-normal); border-top-left-radius: var(--cui-border-radius-byte); border-bottom-left-radius: var(--cui-border-radius-byte); - outline: 0; box-shadow: none; transition: box-shadow var(--cui-transitions-default), @@ -109,10 +109,10 @@ .content { color: var(--cui-fg-normal); + outline: 0; background-color: var(--cui-bg-elevated); border: var(--cui-border-width-kilo) solid var(--cui-border-subtle); border-radius: var(--cui-border-radius-byte); - outline: 0; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%); } @@ -140,9 +140,9 @@ padding: 0; margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); white-space: nowrap; border: 0; + clip: rect(0 0 0 0); } .close-button { diff --git a/packages/circuit-ui/components/DateInput/components/DateSegment.module.css b/packages/circuit-ui/components/DateInput/components/DateSegment.module.css index f8272106ea..fc18b8cdfc 100644 --- a/packages/circuit-ui/components/DateInput/components/DateSegment.module.css +++ b/packages/circuit-ui/components/DateInput/components/DateSegment.module.css @@ -26,8 +26,8 @@ } .base:focus { - background-color: var(--cui-bg-highlight); outline: none; + background-color: var(--cui-bg-highlight); } .base:read-only { @@ -41,9 +41,9 @@ .size { position: absolute; + visibility: hidden; font-size: var(--cui-body-m-font-size); font-variant-numeric: tabular-nums; line-height: var(--cui-body-m-line-height); pointer-events: none; - visibility: hidden; } diff --git a/packages/circuit-ui/components/DateInput/components/Dialog.module.css b/packages/circuit-ui/components/DateInput/components/Dialog.module.css index a109f39298..9565c1f815 100644 --- a/packages/circuit-ui/components/DateInput/components/Dialog.module.css +++ b/packages/circuit-ui/components/DateInput/components/Dialog.module.css @@ -1,6 +1,7 @@ .dialog { position: absolute; z-index: var(--cui-z-index-popover); + visibility: hidden; width: max-content; max-width: 410px; max-width: min(410px, 100vw); @@ -9,24 +10,23 @@ margin: 0; overflow: scroll; pointer-events: none; - visibility: hidden; background: none; border: none; } .dialog[open] { - pointer-events: auto; visibility: visible; + pointer-events: auto; } @media (max-width: 479px) { .dialog { width: 100%; max-width: 100%; + transform: translateY(100%); transition: transform var(--cui-transitions-default), visibility var(--cui-transitions-default); - transform: translateY(100%); } .dialog[open] { @@ -46,10 +46,10 @@ bottom: 0; left: 0; display: block; + visibility: hidden; width: 100%; height: 100%; pointer-events: none; - visibility: hidden; background-color: var(--cui-bg-overlay); opacity: 0; transition: @@ -58,8 +58,8 @@ } .dialog[open] + .backdrop { - pointer-events: auto; visibility: visible; + pointer-events: auto; opacity: 1; } } diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.module.css b/packages/circuit-ui/components/ImageInput/ImageInput.module.css index ec3f1aee5b..491d44edf0 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.module.css +++ b/packages/circuit-ui/components/ImageInput/ImageInput.module.css @@ -146,11 +146,11 @@ position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); + visibility: hidden; width: var(--cui-icon-sizes-giga); height: var(--cui-icon-sizes-giga); color: var(--cui-fg-on-strong); pointer-events: none; - visibility: hidden; opacity: 0; transition: opacity var(--cui-transitions-default), diff --git a/packages/circuit-ui/components/Input/Input.module.css b/packages/circuit-ui/components/Input/Input.module.css index eb9aef901b..898c976804 100644 --- a/packages/circuit-ui/components/Input/Input.module.css +++ b/packages/circuit-ui/components/Input/Input.module.css @@ -9,10 +9,10 @@ font-size: var(--cui-body-m-font-size); line-height: var(--cui-body-m-line-height); appearance: none; + outline: 0; background-color: var(--cui-bg-normal); border: 1px solid var(--cui-border-normal); border-radius: var(--cui-border-radius-byte); - outline: 0; box-shadow: none; transition: box-shadow var(--cui-transitions-default), diff --git a/packages/circuit-ui/components/ListItem/ListItem.module.css b/packages/circuit-ui/components/ListItem/ListItem.module.css index 19382ff502..96d51b1d4a 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.module.css +++ b/packages/circuit-ui/components/ListItem/ListItem.module.css @@ -38,8 +38,8 @@ button.base:hover { a.base:focus, button.base:focus { z-index: 2; - border-color: transparent; outline: 0; + border-color: transparent; box-shadow: 0 0 0 4px var(--cui-bg-normal), 0 0 0 6px var(--cui-border-focus); diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css index c034e4e2e4..592d12b348 100644 --- a/packages/circuit-ui/components/Modal/Modal.module.css +++ b/packages/circuit-ui/components/Modal/Modal.module.css @@ -1,7 +1,7 @@ .base { position: fixed; - background-color: var(--cui-bg-elevated); outline: none; + background-color: var(--cui-bg-elevated); } .base::after { @@ -23,8 +23,8 @@ right: 0; bottom: 0; left: 0; - transition: transform var(--cui-transitions-default); transform: translateY(100%); + transition: transform var(--cui-transitions-default); } .base::after { @@ -38,8 +38,8 @@ left: 50%; border-radius: var(--cui-border-radius-mega); opacity: 0; - transition: opacity var(--cui-transitions-slow); transform: translate(-50%, -50%); + transition: opacity var(--cui-transitions-slow); } .base::after { diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css b/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css index 7fb794efd8..9ba5bcca6a 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css @@ -8,12 +8,12 @@ padding: var(--cui-spacings-giga); overflow-y: auto; text-align: center; + outline: none; background-color: var(--cui-bg-elevated); border-radius: var(--cui-border-radius-mega); - outline: none; opacity: 0; - transition: opacity var(--cui-transitions-slow); transform: translate(-50%, -50%); + transition: opacity var(--cui-transitions-slow); } @media (max-width: 479px) { diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css index 44540369e1..bc36428c4e 100644 --- a/packages/circuit-ui/components/Popover/Popover.module.css +++ b/packages/circuit-ui/components/Popover/Popover.module.css @@ -19,10 +19,10 @@ .menu { box-sizing: border-box; + visibility: hidden; max-height: var(--popover-max-height); padding: var(--cui-spacings-byte) 0; overflow-y: auto; - visibility: hidden; background-color: var(--cui-bg-elevated); border: 1px solid var(--cui-border-subtle); border-radius: var(--cui-border-radius-byte); @@ -35,10 +35,10 @@ border-bottom-right-radius: 0; border-bottom-left-radius: 0; opacity: 1; + transform: translateY(100%); transition: transform var(--cui-transitions-default), visibility var(--cui-transitions-default); - transform: translateY(100%); } } diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.module.css b/packages/circuit-ui/components/RadioButton/RadioButton.module.css index 9f396fccc8..7aa8eb32f6 100644 --- a/packages/circuit-ui/components/RadioButton/RadioButton.module.css +++ b/packages/circuit-ui/components/RadioButton/RadioButton.module.css @@ -19,10 +19,10 @@ border: 1px solid var(--cui-border-normal); border-radius: 100%; box-shadow: none; + transform: translateY(-50%); transition: border var(--cui-transitions-default), background-color var(--cui-transitions-default); - transform: translateY(-50%); } .label::after { @@ -37,10 +37,10 @@ background-color: var(--cui-fg-accent); border-radius: 100%; opacity: 0; + transform: translateY(-50%) scale(0, 0); transition: transform var(--cui-transitions-default), opacity var(--cui-transitions-default); - transform: translateY(-50%) scale(0, 0); } .base:hover + label::before { @@ -48,8 +48,8 @@ } .base:focus + label::before { - border-color: var(--cui-border-accent); outline: 0; + border-color: var(--cui-border-accent); box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus); diff --git a/packages/circuit-ui/components/Select/Select.module.css b/packages/circuit-ui/components/Select/Select.module.css index 0e957a8e84..5b4ec0982f 100644 --- a/packages/circuit-ui/components/Select/Select.module.css +++ b/packages/circuit-ui/components/Select/Select.module.css @@ -14,17 +14,17 @@ padding-left: var(--cui-spacings-mega); margin: 0; overflow-x: hidden; + text-overflow: ellipsis; font-size: var(--cui-body-m-font-size); line-height: var(--cui-body-m-line-height); color: var(--cui-fg-normal); - text-overflow: ellipsis; white-space: nowrap; appearance: none; cursor: pointer; + outline: none; background-color: var(--cui-bg-normal); border: 1px solid var(--cui-border-normal); border-radius: var(--cui-border-radius-byte); - outline: none; box-shadow: none; transition: box-shadow var(--cui-transitions-default), diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css index 6be20b27df..42064515ae 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css @@ -7,13 +7,13 @@ width: 100%; height: 100%; overflow: hidden; - background-color: var(--cui-bg-normal); outline: none; + background-color: var(--cui-bg-normal); opacity: 0; + transform: translateY(-25%); transition: opacity var(--cui-transitions-default), transform var(--cui-transitions-default); - transform: translateY(-25%); } .base::after { @@ -93,8 +93,8 @@ } .chevron { - transition: transform var(--cui-transitions-default); transform: rotate(0deg); + transition: transform var(--cui-transitions-default); } [aria-expanded="true"] .chevron { diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css index 468d15fcbe..52a8e90e63 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.module.css @@ -9,9 +9,9 @@ text-align: left; text-decoration: none; cursor: pointer; + outline: none; background: none; border: none; - outline: none; transition: color var(--cui-transitions-default), background-color var(--cui-transitions-default); diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css index dc40b86d9d..1d02faf311 100644 --- a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css @@ -12,8 +12,8 @@ flex-wrap: wrap; padding: var(--cui-spacings-mega) var(--cui-spacings-giga); hyphens: auto; + overflow-wrap: break-word; text-decoration: none; - word-break: break-word; } @media (min-width: 1280px) { diff --git a/packages/circuit-ui/components/SidePanel/components/DesktopSidePanel/DesktopSidePanel.module.css b/packages/circuit-ui/components/SidePanel/components/DesktopSidePanel/DesktopSidePanel.module.css index 6513a5f9f8..f3361c1a1a 100644 --- a/packages/circuit-ui/components/SidePanel/components/DesktopSidePanel/DesktopSidePanel.module.css +++ b/packages/circuit-ui/components/SidePanel/components/DesktopSidePanel/DesktopSidePanel.module.css @@ -1,10 +1,10 @@ .base { height: 100%; - background-color: var(--cui-bg-normal); outline: none; + background-color: var(--cui-bg-normal); box-shadow: inset var(--cui-border-width-kilo) 0 0 var(--cui-border-divider); - transition: transform var(--cui-transitions-slow); transform: translateX(100%); + transition: transform var(--cui-transitions-slow); } .open { @@ -16,8 +16,8 @@ } .closed { - transition: transform var(--cui-transitions-slow); transform: translateX(100%); + transition: transform var(--cui-transitions-slow); } .overlay { diff --git a/packages/circuit-ui/components/SidePanel/components/Header/Header.module.css b/packages/circuit-ui/components/SidePanel/components/Header/Header.module.css index ebb7b0cdb1..81903df8f6 100644 --- a/packages/circuit-ui/components/SidePanel/components/Header/Header.module.css +++ b/packages/circuit-ui/components/SidePanel/components/Header/Header.module.css @@ -35,8 +35,8 @@ flex: 1 1 auto; margin-left: var(--cui-spacings-zetta); overflow-x: hidden; - text-align: center; text-overflow: ellipsis; + text-align: center; white-space: nowrap; } diff --git a/packages/circuit-ui/components/SidePanel/components/MobileSidePanel/MobileSidePanel.module.css b/packages/circuit-ui/components/SidePanel/components/MobileSidePanel/MobileSidePanel.module.css index c9c188b44a..2f2bdc94f6 100644 --- a/packages/circuit-ui/components/SidePanel/components/MobileSidePanel/MobileSidePanel.module.css +++ b/packages/circuit-ui/components/SidePanel/components/MobileSidePanel/MobileSidePanel.module.css @@ -1,9 +1,9 @@ .base { height: 100%; - background-color: var(--cui-bg-normal); outline: none; - transition: transform var(--cui-transitions-slow); + background-color: var(--cui-bg-normal); transform: translateX(100%); + transition: transform var(--cui-transitions-slow); } .open { diff --git a/packages/circuit-ui/components/SkipLink/SkipLink.module.css b/packages/circuit-ui/components/SkipLink/SkipLink.module.css index a1c02411ff..0b770b9170 100644 --- a/packages/circuit-ui/components/SkipLink/SkipLink.module.css +++ b/packages/circuit-ui/components/SkipLink/SkipLink.module.css @@ -8,11 +8,11 @@ padding: var(--cui-spacings-bit); margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); white-space: nowrap; background-color: var(--cui-bg-accent); - transition: transform var(--cui-transitions-default); + clip: rect(0 0 0 0); transform: translateX(-100vw); + transition: transform var(--cui-transitions-default); &:focus, &:hover { diff --git a/packages/circuit-ui/components/Step/examples/CarouselSlider.module.css b/packages/circuit-ui/components/Step/examples/CarouselSlider.module.css index c9f6134c7f..edb9c42cdd 100644 --- a/packages/circuit-ui/components/Step/examples/CarouselSlider.module.css +++ b/packages/circuit-ui/components/Step/examples/CarouselSlider.module.css @@ -7,12 +7,12 @@ .inner { display: flex; width: 100%; - transition: all var(--slide-animation-duration) ease-in-out; transform: translate3d( calc(-1 * var(--slide-step) * var(--slide-width)), 0, 0 ); + transition: all var(--slide-animation-duration) ease-in-out; } .image { diff --git a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.module.css b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.module.css index 899f7c6e43..de5516f4ab 100644 --- a/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.module.css +++ b/packages/circuit-ui/components/Table/components/SortArrow/SortArrow.module.css @@ -11,12 +11,12 @@ margin: 0; color: var(--cui-fg-accent); cursor: pointer; + outline: 0; background: none; border: 0; - outline: 0; opacity: 0; - transition: opacity var(--cui-transitions-default); transform: translateY(-50%); + transition: opacity var(--cui-transitions-default); } .base:focus { diff --git a/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css b/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css index 35d13e52de..d49faff907 100644 --- a/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css +++ b/packages/circuit-ui/components/Table/components/TableCell/TableCell.module.css @@ -1,7 +1,7 @@ .base { padding: var(--cui-spacings-giga); - overflow-wrap: break-word; vertical-align: middle; + overflow-wrap: break-word; background-color: var(--cui-bg-normal); border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-divider); transition: background-color var(--cui-transitions-default); diff --git a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css index 49d32306db..8f5e475fdb 100644 --- a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css +++ b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css @@ -13,9 +13,9 @@ font-size: var(--cui-body-s-font-size); font-weight: var(--cui-font-weight-bold); line-height: var(--cui-body-s-line-height); + vertical-align: middle; color: var(--cui-fg-subtle); white-space: nowrap; - vertical-align: middle; } .hover { @@ -87,8 +87,8 @@ display: block; width: 100%; height: 100%; - content: ""; outline: 0; + content: ""; box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus); diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css index 5cc0bb68a8..1378e2d770 100644 --- a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css +++ b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css @@ -1,20 +1,20 @@ .base { + float: left; display: flex; flex-direction: column; align-items: center; justify-content: center; - float: left; height: 100%; padding: var(--cui-spacings-kilo) var(--cui-spacings-tera); font-size: var(--cui-body-m-font-size); line-height: var(--cui-body-m-line-height); color: var(--cui-fg-subtle); - text-decoration: none; white-space: nowrap; + text-decoration: none; cursor: pointer; + outline: none; background-color: var(--cui-bg-normal); border: none; - outline: none; } .base:hover { diff --git a/packages/circuit-ui/components/Tag/Tag.module.css b/packages/circuit-ui/components/Tag/Tag.module.css index a3d14cee7b..d34788eaef 100644 --- a/packages/circuit-ui/components/Tag/Tag.module.css +++ b/packages/circuit-ui/components/Tag/Tag.module.css @@ -12,7 +12,7 @@ margin: 0; font-size: var(--cui-body-m-font-size); line-height: var(--cui-body-m-line-height); - word-break: break-word; + overflow-wrap: break-word; cursor: default; background-color: var(--cui-bg-normal); border: var(--tag-border-width) solid var(--cui-border-normal); diff --git a/packages/circuit-ui/components/Toggle/Toggle.module.css b/packages/circuit-ui/components/Toggle/Toggle.module.css index 22d6842e70..9b17085d26 100644 --- a/packages/circuit-ui/components/Toggle/Toggle.module.css +++ b/packages/circuit-ui/components/Toggle/Toggle.module.css @@ -13,10 +13,10 @@ overflow: visible; appearance: none; cursor: pointer; + outline: 0; background-color: var(--cui-bg-highlight); border: 0; border-radius: var(--toggle-track-height); - outline: 0; transition: background-color var(--toggle-animation-timing); } @@ -59,10 +59,10 @@ background-color: #fff; border-radius: var(--toggle-knob-size); box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%); + transform: translate3d(var(--cui-spacings-bit), -50%, 0); transition: box-shadow var(--toggle-animation-timing), transform var(--toggle-animation-timing); - transform: translate3d(var(--cui-spacings-bit), -50%, 0); } [aria-checked="true"] .knob { diff --git a/packages/circuit-ui/components/Toggletip/Toggletip.module.css b/packages/circuit-ui/components/Toggletip/Toggletip.module.css index fac4eea340..46c5ae7b60 100644 --- a/packages/circuit-ui/components/Toggletip/Toggletip.module.css +++ b/packages/circuit-ui/components/Toggletip/Toggletip.module.css @@ -4,20 +4,20 @@ position: absolute; z-index: var(--cui-z-index-popover); + visibility: hidden; width: max-content; max-width: 360px; max-width: min(360px, 100vw); padding: 0; margin: 0; pointer-events: none; - visibility: hidden; background: none; border: none; } .base[open] { - pointer-events: auto; visibility: visible; + pointer-events: auto; } @media (max-width: 479px) { @@ -39,26 +39,26 @@ bottom: 0; left: 0; display: block; + visibility: hidden; width: 100%; height: 100%; pointer-events: none; - visibility: hidden; background-color: var(--cui-bg-overlay); } .base[open] + .backdrop { - pointer-events: auto; visibility: visible; + pointer-events: auto; } } .content { padding: var(--cui-spacings-mega); color: var(--cui-fg-normal); + outline: 0; background-color: var(--cui-bg-elevated); border: var(--cui-border-width-kilo) solid var(--cui-border-subtle); border-radius: var(--cui-border-radius-byte); - outline: 0; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%); } diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.module.css b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.module.css index 744c28e75e..47c633fa2f 100644 --- a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.module.css +++ b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.module.css @@ -37,9 +37,9 @@ padding: 0; margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); white-space: nowrap; border: 0; + clip: rect(0 0 0 0); } } diff --git a/packages/circuit-ui/styles/shared.module.css b/packages/circuit-ui/styles/shared.module.css index d688a78a6a..289d44a494 100644 --- a/packages/circuit-ui/styles/shared.module.css +++ b/packages/circuit-ui/styles/shared.module.css @@ -54,9 +54,9 @@ color: var(--cui-fg-normal); text-align: left; cursor: pointer; + outline: none; background-color: var(--cui-bg-normal); border: none; - outline: none; transition: color var(--cui-transitions-default), background-color var(--cui-transitions-default); diff --git a/packages/circuit-ui/styles/utility.module.css b/packages/circuit-ui/styles/utility.module.css index fefa0e0179..cc8da7167e 100644 --- a/packages/circuit-ui/styles/utility.module.css +++ b/packages/circuit-ui/styles/utility.module.css @@ -12,9 +12,9 @@ padding: 0; margin: -1px; overflow: hidden; - clip: rect(0 0 0 0); white-space: nowrap; border: 0; + clip: rect(0 0 0 0); } .hide-scrollbar {