diff --git a/.yarn/cache/@carbon-colors-npm-11.28.0-e4a8dae047-557419fe3a.zip b/.yarn/cache/@carbon-colors-npm-11.28.0-e4a8dae047-557419fe3a.zip new file mode 100644 index 00000000000..133511aed9a Binary files /dev/null and b/.yarn/cache/@carbon-colors-npm-11.28.0-e4a8dae047-557419fe3a.zip differ diff --git a/.yarn/cache/@carbon-grid-npm-11.30.0-9c357a0656-fa982d9a9a.zip b/.yarn/cache/@carbon-grid-npm-11.30.0-9c357a0656-fa982d9a9a.zip new file mode 100644 index 00000000000..6857fc4469c Binary files /dev/null and b/.yarn/cache/@carbon-grid-npm-11.30.0-9c357a0656-fa982d9a9a.zip differ diff --git a/.yarn/cache/@carbon-layout-npm-11.28.0-8ce7dbeb6b-4ce8fbe84a.zip b/.yarn/cache/@carbon-layout-npm-11.28.0-8ce7dbeb6b-4ce8fbe84a.zip new file mode 100644 index 00000000000..ee07f2e7e12 Binary files /dev/null and b/.yarn/cache/@carbon-layout-npm-11.28.0-8ce7dbeb6b-4ce8fbe84a.zip differ diff --git a/.yarn/cache/@carbon-themes-npm-11.42.0-689c3ec8b4-7a3c87566e.zip b/.yarn/cache/@carbon-themes-npm-11.42.0-689c3ec8b4-7a3c87566e.zip deleted file mode 100644 index 5de4b2c0c22..00000000000 Binary files a/.yarn/cache/@carbon-themes-npm-11.42.0-689c3ec8b4-7a3c87566e.zip and /dev/null differ diff --git a/.yarn/cache/@carbon-themes-npm-11.44.0-ca2825b9e4-e7a20fa222.zip b/.yarn/cache/@carbon-themes-npm-11.44.0-ca2825b9e4-e7a20fa222.zip new file mode 100644 index 00000000000..4c57ffa164b Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.44.0-ca2825b9e4-e7a20fa222.zip differ diff --git a/.yarn/cache/@carbon-type-npm-11.34.0-c07f28b1a8-400382a88f.zip b/.yarn/cache/@carbon-type-npm-11.34.0-c07f28b1a8-400382a88f.zip new file mode 100644 index 00000000000..1f338d32c43 Binary files /dev/null and b/.yarn/cache/@carbon-type-npm-11.34.0-c07f28b1a8-400382a88f.zip differ diff --git a/.yarn/cache/@parcel-watcher-darwin-arm64-npm-2.5.0-4eab519184-10.zip b/.yarn/cache/@parcel-watcher-darwin-arm64-npm-2.5.0-4eab519184-10.zip new file mode 100644 index 00000000000..a74eb1f800a Binary files /dev/null and b/.yarn/cache/@parcel-watcher-darwin-arm64-npm-2.5.0-4eab519184-10.zip differ diff --git a/.yarn/cache/@parcel-watcher-darwin-x64-npm-2.5.0-4c4c1c789c-10.zip b/.yarn/cache/@parcel-watcher-darwin-x64-npm-2.5.0-4c4c1c789c-10.zip new file mode 100644 index 00000000000..afa613cc1de Binary files /dev/null and b/.yarn/cache/@parcel-watcher-darwin-x64-npm-2.5.0-4c4c1c789c-10.zip differ diff --git a/.yarn/cache/@parcel-watcher-linux-arm64-glibc-npm-2.5.0-e2245511c0-10.zip b/.yarn/cache/@parcel-watcher-linux-arm64-glibc-npm-2.5.0-e2245511c0-10.zip new file mode 100644 index 00000000000..4e3141cb8da Binary files /dev/null and b/.yarn/cache/@parcel-watcher-linux-arm64-glibc-npm-2.5.0-e2245511c0-10.zip differ diff --git a/.yarn/cache/@parcel-watcher-linux-x64-glibc-npm-2.5.0-32a578ae14-10.zip b/.yarn/cache/@parcel-watcher-linux-x64-glibc-npm-2.5.0-32a578ae14-10.zip new file mode 100644 index 00000000000..f217d78746d Binary files /dev/null and b/.yarn/cache/@parcel-watcher-linux-x64-glibc-npm-2.5.0-32a578ae14-10.zip differ diff --git a/.yarn/cache/@parcel-watcher-npm-2.5.0-f36bd41c3b-1e28b1aa9a.zip b/.yarn/cache/@parcel-watcher-npm-2.5.0-f36bd41c3b-1e28b1aa9a.zip new file mode 100644 index 00000000000..9da2e1194da Binary files /dev/null and b/.yarn/cache/@parcel-watcher-npm-2.5.0-f36bd41c3b-1e28b1aa9a.zip differ diff --git a/.yarn/cache/@parcel-watcher-win32-arm64-npm-2.5.0-03ae8e56b6-10.zip b/.yarn/cache/@parcel-watcher-win32-arm64-npm-2.5.0-03ae8e56b6-10.zip new file mode 100644 index 00000000000..ac83e232451 Binary files /dev/null and b/.yarn/cache/@parcel-watcher-win32-arm64-npm-2.5.0-03ae8e56b6-10.zip differ diff --git a/.yarn/cache/@parcel-watcher-win32-x64-npm-2.5.0-1076df0673-10.zip b/.yarn/cache/@parcel-watcher-win32-x64-npm-2.5.0-1076df0673-10.zip new file mode 100644 index 00000000000..0b74ccb7de0 Binary files /dev/null and b/.yarn/cache/@parcel-watcher-win32-x64-npm-2.5.0-1076df0673-10.zip differ diff --git a/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-3849fe7720.zip b/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-3849fe7720.zip new file mode 100644 index 00000000000..3f842cba07a Binary files /dev/null and b/.yarn/cache/detect-libc-npm-1.0.3-c30ac344d4-3849fe7720.zip differ diff --git a/.yarn/cache/immutable-npm-5.0.3-c4195fd7f3-9aca1c7839.zip b/.yarn/cache/immutable-npm-5.0.3-c4195fd7f3-9aca1c7839.zip new file mode 100644 index 00000000000..5912ef58526 Binary files /dev/null and b/.yarn/cache/immutable-npm-5.0.3-c4195fd7f3-9aca1c7839.zip differ diff --git a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip deleted file mode 100644 index 2207db73653..00000000000 Binary files a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip and /dev/null differ diff --git a/.yarn/cache/nanoid-npm-3.3.8-d22226208b-2d1766606c.zip b/.yarn/cache/nanoid-npm-3.3.8-d22226208b-2d1766606c.zip new file mode 100644 index 00000000000..ec9e2621c66 Binary files /dev/null and b/.yarn/cache/nanoid-npm-3.3.8-d22226208b-2d1766606c.zip differ diff --git a/.yarn/cache/node-addon-api-npm-7.1.1-bfb302df19-ee1e1ed628.zip b/.yarn/cache/node-addon-api-npm-7.1.1-bfb302df19-ee1e1ed628.zip new file mode 100644 index 00000000000..12b52b82de8 Binary files /dev/null and b/.yarn/cache/node-addon-api-npm-7.1.1-bfb302df19-ee1e1ed628.zip differ diff --git a/.yarn/cache/sass-npm-1.83.0-cc600b60b7-cae7c489ff.zip b/.yarn/cache/sass-npm-1.83.0-cc600b60b7-cae7c489ff.zip new file mode 100644 index 00000000000..3155ee0115f Binary files /dev/null and b/.yarn/cache/sass-npm-1.83.0-cc600b60b7-cae7c489ff.zip differ diff --git a/packages/services-store/CHANGELOG.md b/packages/services-store/CHANGELOG.md index 50b2a62ae9e..f2f59b5ef47 100644 --- a/packages/services-store/CHANGELOG.md +++ b/packages/services-store/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.53.5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.53.4...@carbon/ibmdotcom-services-store@1.53.5) (2024-12-18) + +**Note:** Version bump only for package @carbon/ibmdotcom-services-store + + + + + +## [1.53.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.53.3...@carbon/ibmdotcom-services-store@1.53.4) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-services-store + + + + + ## [1.53.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.53.2...@carbon/ibmdotcom-services-store@1.53.3) (2024-11-13) **Note:** Version bump only for package @carbon/ibmdotcom-services-store diff --git a/packages/services-store/package.json b/packages/services-store/package.json index d9648062a3a..e60b2617eff 100644 --- a/packages/services-store/package.json +++ b/packages/services-store/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-services-store", "private": true, - "version": "1.53.3", + "version": "1.53.5", "description": "Redux store for Carbon for IBM.com Services", "license": "Apache-2.0", "main": "lib/store.js", diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md index 958d87b7ceb..ebd5bc64cb5 100644 --- a/packages/services/CHANGELOG.md +++ b/packages/services/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.1...@carbon/ibmdotcom-services@2.16.2) (2024-12-18) + +**Note:** Version bump only for package @carbon/ibmdotcom-services + + + + + +## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0...@carbon/ibmdotcom-services@2.16.1) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-services + + + + + +# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.3...@carbon/ibmdotcom-services@2.16.0) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-services + + + + + # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.16.0-rc.2...@carbon/ibmdotcom-services@2.16.0-rc.3) (2024-12-07) **Note:** Version bump only for package @carbon/ibmdotcom-services diff --git a/packages/services/package.json b/packages/services/package.json index be1bae0f8cc..f5607fe8929 100644 --- a/packages/services/package.json +++ b/packages/services/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-services", "description": "Carbon for IBM.com Services", - "version": "2.16.0-rc.3", + "version": "2.16.2", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -47,7 +47,7 @@ }, "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/ibmdotcom-utilities": "2.16.0-rc.3", + "@carbon/ibmdotcom-utilities": "2.16.2", "@ibm/telemetry-js": "^1.5.0", "axios": "^1.6.8", "marked": "^4.0.10", diff --git a/packages/storybook-addon-theme/CHANGELOG.md b/packages/storybook-addon-theme/CHANGELOG.md index 6a1171f249e..2f1f034a6bd 100644 --- a/packages/storybook-addon-theme/CHANGELOG.md +++ b/packages/storybook-addon-theme/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.44.5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.44.4...@carbon/storybook-addon-theme@1.44.5) (2024-12-18) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + +## [1.44.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.44.3...@carbon/storybook-addon-theme@1.44.4) (2024-12-12) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + ## [1.44.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.44.2...@carbon/storybook-addon-theme@1.44.3) (2024-11-13) **Note:** Version bump only for package @carbon/storybook-addon-theme diff --git a/packages/storybook-addon-theme/package.json b/packages/storybook-addon-theme/package.json index 329a64f6da6..ab60d33c14b 100644 --- a/packages/storybook-addon-theme/package.json +++ b/packages/storybook-addon-theme/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/storybook-addon-theme", "private": true, - "version": "1.44.3", + "version": "1.44.5", "description": "Storybook add-on for Carbon theme chooser", "license": "Apache-2.0", "main": "es/index.js", diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 557def4fed2..ccebaa89a64 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -3,6 +3,52 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.1...@carbon/ibmdotcom-styles@2.16.2) (2024-12-18) + + +### Bug Fixes + +* **card-group:** subgrid fixes ([#12174](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12174)) ([658b50a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/658b50a592270b795e90804f6515552e652b7780)) +* **toc:** address horizontal overflow ([#12171](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12171)) ([9291729](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9291729ac0758048bdfa52b2e621b4fa378e620f)) + + + + + +## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0...@carbon/ibmdotcom-styles@2.16.1) (2024-12-12) + + +### Bug Fixes + +* **callout-quote:** fix horizontal scroll for callout quote ([#12164](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12164)) ([be2e956](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be2e9564cd8d1532720d07de365408b9b19395c5)) +* **callout-with-media:** spacing adjustments ([#12124](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12124)) ([4a7c1d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4a7c1d1d982f2fa508a5b475d4229152bd28c384)) +* **card-group:** set min height to content ([#12128](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12128)) ([8dc1099](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8dc109929b6807a2fad759f41c8051d238b0c4f5)) +* **card:** remove bad styles ([#12141](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12141)) ([13fd7a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/13fd7a5cb0bb56e345cb78bd684b8c93e09ef55b)) +* **cta-block:** adjust cta-block-item-row inline margin ([#12140](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12140)) ([b5ee952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b5ee952f7ceee190df1cff0204b0dc6252b0feaf)) +* **feature-card:** inverse styles and cta-type="video" ([#12146](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12146)) ([888d642](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/888d642de7502eb4abfb215403ef9aec8835994e)) +* **feature-section:** stretch image if needed ([#12126](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12126)) ([8bc634a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8bc634af30b40e0b2884963c29781ef610431737)) +* **footer:** adjustments to adjunct links visibility ([#12136](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12136)) ([30b1ce7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/30b1ce7d18c665f9665cb3f13d308b74b1ab9842)) +* **footer:** adjustments to style for color and positioning ([#12135](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12135)) ([8036383](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80363830f4aa617fd5c24612b4ab9164309fdd3a)) +* **leadspace-breadcrumb:** leadspace breadcrumb was missing a max-width ([#12139](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12139)) ([3ee263d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ee263d35f3746689f2cd4fae27194e467a3d852)) +* **toc:** remove implicit top and bottom padding for TOC ([#12144](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12144)) ([5e52b77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5e52b771b54fcff284222f7d04e6e0f5c19cdc1a)) + + + + + +# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.3...@carbon/ibmdotcom-styles@2.16.0) (2024-12-12) + + +### Bug Fixes + +* **card:** pictogram related style adjustments ([#12155](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12155)) ([3e7bcc9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60)) +* **content-group-cards:** fix alignment ([#12160](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12160)) ([19e9b4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/19e9b4fa1339aa2c817ad66fd1ebafe5eadabb06)) +* **link-with-icon:** fix icon placement ([#12159](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12159)) ([8459cc7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8459cc79f407083861c33867c58ac9edfc61a818)) + + + + + # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.16.0-rc.2...@carbon/ibmdotcom-styles@2.16.0-rc.3) (2024-12-07) diff --git a/packages/styles/package.json b/packages/styles/package.json index 5fd747941ed..2812f204377 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-styles", "description": "Carbon for IBM.com Styles", - "version": "2.16.0-rc.3", + "version": "2.16.2", "license": "Apache-2.0", "main": "dist/ibm-dotcom-styles.min.css", "module": "src/scss", @@ -37,7 +37,7 @@ "@ibm/telemetry-js": "^1.5.0" }, "devDependencies": { - "@carbon/themes": "11.42.0", + "@carbon/themes": "11.44.0", "del": "^6.0.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^6.1.0", @@ -45,7 +45,7 @@ "gulp-rename": "^2.0.0", "gulp-sass": "^5.0.0", "require-dir": "^1.2.0", - "sass": "~1.79.0", + "sass": "~1.83.0", "sass-loader": "^13.0.0" } } diff --git a/packages/styles/scss/components/audio-player/_audio-player.scss b/packages/styles/scss/components/audio-player/_audio-player.scss index a88b9805b43..cb7705b43ad 100644 --- a/packages/styles/scss/components/audio-player/_audio-player.scss +++ b/packages/styles/scss/components/audio-player/_audio-player.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/ratio-base' as *; @use '@carbon/styles/scss/components/slider'; diff --git a/packages/styles/scss/components/back-to-top/_back-to-top.scss b/packages/styles/scss/components/back-to-top/_back-to-top.scss index 49da9c68198..430d3e6c4f5 100644 --- a/packages/styles/scss/components/back-to-top/_back-to-top.scss +++ b/packages/styles/scss/components/back-to-top/_back-to-top.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '@carbon/styles/scss/components/button' as *; @mixin back-to-top { diff --git a/packages/styles/scss/components/background-media/_background-media.scss b/packages/styles/scss/components/background-media/_background-media.scss index fca94037d0b..33f3bc62fb9 100644 --- a/packages/styles/scss/components/background-media/_background-media.scss +++ b/packages/styles/scss/components/background-media/_background-media.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/utilities' as *; @use '@carbon/web-components/scss/components/tooltip/tooltip' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../image'; @mixin background-media { diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss index c47e63d728a..d27f4b94b70 100644 --- a/packages/styles/scss/components/button-group/_button-group.scss +++ b/packages/styles/scss/components/button-group/_button-group.scss @@ -11,8 +11,8 @@ @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/utilities/convert' as *; - @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../lightbox-media-viewer'; @use '../button'; diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss index 377ac607cf3..a064762fa1c 100644 --- a/packages/styles/scss/components/button/_button.scss +++ b/packages/styles/scss/components/button/_button.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/layout' as *; @use '@carbon/styles/scss/components/button' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin button { :host(#{$c4d-prefix}-button) { diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss index f731e717b69..4993a560c3c 100644 --- a/packages/styles/scss/components/callout-quote/_callout-quote.scss +++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/hang' as *; @use '../../globals/utils/flex-grid' as *; @use '../../internal/callout/callout' as *; @@ -20,6 +21,10 @@ @include quote; @mixin callout-quote { + * { + box-sizing: border-box; + } + :host(#{$c4d-prefix}-callout-quote) { @extend :host(#{$c4d-prefix}-callout); @extend :host(#{$c4d-prefix}-callout-text); @@ -99,12 +104,9 @@ } :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr { - margin: $spacing-05; + margin: $spacing-05 $spacing-07; @include breakpoint(md) { - margin: $spacing-05 0; - } - @include breakpoint(lg) { - margin: $spacing-05 $spacing-03; + margin: $spacing-05; } } } diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index 078c71b64a9..7c3f51db8d9 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/callout/callout' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; @@ -22,6 +23,10 @@ @include callout; @mixin callout-with-media { + * { + box-sizing: border-box; + } + :host(#{$c4d-prefix}-callout-with-media) { @extend :host(#{$c4d-prefix}-callout); @@ -179,7 +184,7 @@ } } - :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__img { + :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__img { max-inline-size: 100%; } } diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index c74361be73a..8a4f0d6a849 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -16,6 +16,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/ratio-base' as *; @use '../../internal/content-section'; @use '../card'; @@ -59,6 +60,10 @@ :host(#{$c4d-prefix}-card-group-item) { display: contents; + * { + row-gap: 0; + } + .#{$prefix}--card { display: grid; border: 0; @@ -73,6 +78,7 @@ display: grid; justify-content: revert; grid-row: span 10; + grid-template-columns: subgrid; grid-template-rows: subgrid; &::before, @@ -91,15 +97,15 @@ .#{$prefix}--card__content { display: grid; grid-area: 1 / 1 / -1 / -1; + grid-template-columns: subgrid; grid-template-rows: subgrid; - row-gap: 0; } .#{$prefix}--card__copy { display: grid; grid-row: span 2; + grid-template-columns: subgrid; grid-template-rows: subgrid; - row-gap: 0; } } diff --git a/packages/styles/scss/components/card-in-card/_card-in-card.scss b/packages/styles/scss/components/card-in-card/_card-in-card.scss index cd972825e7c..6029bb806ed 100644 --- a/packages/styles/scss/components/card-in-card/_card-in-card.scss +++ b/packages/styles/scss/components/card-in-card/_card-in-card.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/aspect-ratio'; @use '../../globals/utils/ratio-base' as *; @use '../image'; diff --git a/packages/styles/scss/components/card-link/_card-link.scss b/packages/styles/scss/components/card-link/_card-link.scss index a8210e15333..be285d4465a 100644 --- a/packages/styles/scss/components/card-link/_card-link.scss +++ b/packages/styles/scss/components/card-link/_card-link.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../card'; @mixin card-link { diff --git a/packages/styles/scss/components/card-section-images/_card-section-images.scss b/packages/styles/scss/components/card-section-images/_card-section-images.scss index 491445903f5..73bea8f2d50 100644 --- a/packages/styles/scss/components/card-section-images/_card-section-images.scss +++ b/packages/styles/scss/components/card-section-images/_card-section-images.scss @@ -6,5 +6,6 @@ */ @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-section/content-section'; @use '../card-group/card-group'; diff --git a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss index 8e89d7a6e05..a2df49deb77 100644 --- a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss +++ b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../card-group/card-group'; @mixin card-section-offset { diff --git a/packages/styles/scss/components/card-section-simple/_card-section-simple.scss b/packages/styles/scss/components/card-section-simple/_card-section-simple.scss index 491445903f5..73bea8f2d50 100644 --- a/packages/styles/scss/components/card-section-simple/_card-section-simple.scss +++ b/packages/styles/scss/components/card-section-simple/_card-section-simple.scss @@ -6,5 +6,6 @@ */ @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-section/content-section'; @use '../card-group/card-group'; diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 143836fdf3f..2740d0aeeda 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -16,6 +16,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/content-width' as *; @use '../../globals/utils/ratio-base' as *; @use '../lightbox-media-viewer/lightbox-media-viewer'; diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss index 33b834ac457..f7d17ba3e6e 100644 --- a/packages/styles/scss/components/carousel/_carousel.scss +++ b/packages/styles/scss/components/carousel/_carousel.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/components/button' as *; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; +@use '../../globals/imports' as *; @mixin carousel { :host(#{$c4d-prefix}-carousel), diff --git a/packages/styles/scss/components/content-block-cards/_content-block-cards.scss b/packages/styles/scss/components/content-block-cards/_content-block-cards.scss index baed752a516..23ebfe0d0f7 100644 --- a/packages/styles/scss/components/content-block-cards/_content-block-cards.scss +++ b/packages/styles/scss/components/content-block-cards/_content-block-cards.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../card-group/card-group'; diff --git a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss index f740324a3f5..ef29fe37d1a 100644 --- a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss +++ b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/utils/hang' as *; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss index 0deea45cfd3..bdabcba5353 100644 --- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss +++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss @@ -11,6 +11,7 @@ @use '../../internal/content-block'; @use '../content-item-row'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin content-block-horizontal { :host(#{$c4d-prefix}-content-block-horizontal) { diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss index 5f6fc2f0521..68c8d60f16d 100644 --- a/packages/styles/scss/components/content-block-media/_content-block-media.scss +++ b/packages/styles/scss/components/content-block-media/_content-block-media.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-group'; @use '../../internal/content-item/content-item'; diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss index bcec8956f82..0eabc6d84b0 100644 --- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss +++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-group'; @use '../content-group-cards'; diff --git a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss index 05fcd683ee2..b2a9431350f 100755 --- a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss +++ b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-group'; @use '../../internal/content-item/content-item'; diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss index e7b76c2d7ac..11cb9b539e3 100644 --- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss +++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss @@ -8,6 +8,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; @use '../image'; diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss index 3502194b6f1..5fc892fbe3e 100644 --- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss +++ b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-group'; @use '../link-with-icon'; @use '../card'; @@ -38,7 +39,6 @@ .#{$prefix}--content-group-cards__row { display: grid; - margin-inline: -$spacing-05; @include breakpoint(md) { grid-auto-rows: 1fr; diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss index cfb5891da1e..71f1c05163d 100644 --- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss +++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../pictogram-item'; @mixin content-group-pictograms { diff --git a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss index 927919efb3a..3f70cea6a10 100644 --- a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss +++ b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-group'; @mixin content-group-simple { diff --git a/packages/styles/scss/components/content-group/_content-group.scss b/packages/styles/scss/components/content-group/_content-group.scss index 8a90f447743..7a5af9227d3 100644 --- a/packages/styles/scss/components/content-group/_content-group.scss +++ b/packages/styles/scss/components/content-group/_content-group.scss @@ -10,6 +10,7 @@ @use '@carbon/ibmdotcom-styles/scss/internal/content-block'; @use '@carbon/ibmdotcom-styles/scss/internal/content-group'; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; +@use '../../globals/imports' as *; @mixin content-group { :host(#{$c4d-prefix}-content-group), diff --git a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss index cbacc59c294..986e81a4fc6 100644 --- a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss +++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../link-list'; @mixin content-item-row-media { diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss index bb28123afd8..af4cef4e04a 100644 --- a/packages/styles/scss/components/content-item-row/_content-item-row.scss +++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../link-list'; @mixin content-item-row { diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss index a8b7368c485..57c5855251e 100644 --- a/packages/styles/scss/components/cta-block/_cta-block.scss +++ b/packages/styles/scss/components/cta-block/_cta-block.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; @use '../button-group'; diff --git a/packages/styles/scss/components/cta-section/_cta-section.scss b/packages/styles/scss/components/cta-section/_cta-section.scss index cc8d6cbe8f7..41c09ca914a 100644 --- a/packages/styles/scss/components/cta-section/_cta-section.scss +++ b/packages/styles/scss/components/cta-section/_cta-section.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../../internal/content-item/content-item'; @use '../button-group'; diff --git a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss index d8acf21b4d6..bc4095982b6 100644 --- a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss +++ b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss @@ -8,6 +8,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../footer'; @use '../masthead'; diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss index 89d2a8f8d9f..60fa8de96b7 100644 --- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss +++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss @@ -8,6 +8,7 @@ @use 'sass:math'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/motion' as *; diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss index 7862c995bda..aa65955bdc6 100644 --- a/packages/styles/scss/components/feature-card/_feature-card.scss +++ b/packages/styles/scss/components/feature-card/_feature-card.scss @@ -17,6 +17,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../components/image'; @use '../../components/card'; @use '../../globals/utils/aspect-ratio' as *; diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.scss index 9a0c316deee..74703e85353 100644 --- a/packages/styles/scss/components/feature-section/_feature-section.scss +++ b/packages/styles/scss/components/feature-section/_feature-section.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/aspect-ratio'; @use '../../globals/carbon-grid'; @use '../../globals/utils/ratio-base' as *; diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss index 74d2bc21b8c..acab1b40f54 100644 --- a/packages/styles/scss/components/filter-panel/_filter-panel.scss +++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss @@ -18,6 +18,7 @@ @use '@carbon/web-components/scss/components/accordion/accordion'; @use '@carbon/web-components/scss/components/modal/modal'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin filter-panel { .#{$prefix}--filter__heading { diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss index 302f31339d2..db06985e5e0 100644 --- a/packages/styles/scss/components/footer/_footer-logo.scss +++ b/packages/styles/scss/components/footer/_footer-logo.scss @@ -16,6 +16,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; /// Footer title styles /// @access private diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss index 8ef9aae98b6..9bd103b0332 100644 --- a/packages/styles/scss/components/footer/_footer-nav-group.scss +++ b/packages/styles/scss/components/footer/_footer-nav-group.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; /// Footer nav group styles /// @access private diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss index 5d19c02c1b8..4f9b451da80 100644 --- a/packages/styles/scss/components/footer/_footer-nav.scss +++ b/packages/styles/scss/components/footer/_footer-nav.scss @@ -15,6 +15,7 @@ @use '@carbon/styles/scss/themes' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; /// Footer nav styles /// @access private diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss index d6f85ad334f..d59aaa5b336 100644 --- a/packages/styles/scss/components/footer/_footer.scss +++ b/packages/styles/scss/components/footer/_footer.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/layout' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '@carbon/styles/scss/components/accordion'; @use '@carbon/styles/scss/components/combo-box'; diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss index 2f5433756b9..fb74c530d16 100644 --- a/packages/styles/scss/components/footer/_legal-nav.scss +++ b/packages/styles/scss/components/footer/_legal-nav.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/flex-grid' as *; /// Legal nav styles diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss index 917e3abfcc3..ec63901703a 100644 --- a/packages/styles/scss/components/footer/_locale-button.scss +++ b/packages/styles/scss/components/footer/_locale-button.scss @@ -15,6 +15,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; /// Footer locale button /// @access private diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss index 8803450fc41..b82ef88dd84 100644 --- a/packages/styles/scss/components/global-banner/_global-banner.scss +++ b/packages/styles/scss/components/global-banner/_global-banner.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../image/index'; @mixin global-banner { diff --git a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss index 470da3ebd54..91a2318a496 100644 --- a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss +++ b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin horizontal-rule { $subtle-contrast: $border-subtle-01; diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss index 0e6b6929379..dbddf2dc06d 100644 --- a/packages/styles/scss/components/image/_image.scss +++ b/packages/styles/scss/components/image/_image.scss @@ -6,6 +6,7 @@ */ @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/ratio-base' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; diff --git a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss index 3e898ac3d12..76ef7d3e75b 100644 --- a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss +++ b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-group'; @use '../../globals/tokens/color-tokens' as *; diff --git a/packages/styles/scss/components/layout/_layout.scss b/packages/styles/scss/components/layout/_layout.scss index fcdb93cc04f..4424d248132 100644 --- a/packages/styles/scss/components/layout/_layout.scss +++ b/packages/styles/scss/components/layout/_layout.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; // $carbon--layouts has been replaced by standard spacing tokens $layout-spacings: $spacing-05, $spacing-06, $spacing-07, $spacing-09, diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index 3e7249a1dfb..97ac423a7e8 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -15,6 +15,7 @@ @use '../../globals/utils/content-width' as *; @use '../../globals/utils/hang' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../link-list'; @use '../image'; @use '../../internal/content-block'; diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss index a0a735be0e5..3483eb47d64 100644 --- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss +++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-block'; @use '../leadspace-block'; diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss index 40262815af4..b2de600f3a2 100644 --- a/packages/styles/scss/components/leadspace/_leadspace.scss +++ b/packages/styles/scss/components/leadspace/_leadspace.scss @@ -20,6 +20,7 @@ @use '../../globals/utils/flex-grid' as *; @use '../../globals/utils/ratio-base' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../button-group'; @use '../image'; diff --git a/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss index 3d2841ac25c..132acfe1aad 100644 --- a/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss +++ b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/type' as *; @use '@carbon/web-components/scss/components/modal/modal' as *; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; +@use '../../globals/imports' as *; @mixin leaving-ibm { :host(#{$c4d-prefix}-leaving-ibm-composite), diff --git a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss index 56d638d6675..ef216d023fe 100644 --- a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss +++ b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss @@ -14,6 +14,7 @@ @use '../expressive-modal/expressive-modal'; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../expressive-modal' as *; @use '../video-player' as *; diff --git a/packages/styles/scss/components/link-list-section/_link-list-section.scss b/packages/styles/scss/components/link-list-section/_link-list-section.scss index ab60b44e721..8417639ab5f 100644 --- a/packages/styles/scss/components/link-list-section/_link-list-section.scss +++ b/packages/styles/scss/components/link-list-section/_link-list-section.scss @@ -11,6 +11,7 @@ @use '@carbon/ibmdotcom-styles/scss/internal/content-section'; @use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; +@use '../../globals/imports' as *; @mixin link-list-section { :host(#{$c4d-prefix}-link-list-section) { diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss index 14080518bb9..4b9dcaa55a1 100644 --- a/packages/styles/scss/components/link-list/_link-list.scss +++ b/packages/styles/scss/components/link-list/_link-list.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/flex-grid' as *; @use '../card'; @use '../link-with-icon'; diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss index 43efdb358c8..ee4815bbc1c 100644 --- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss +++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,10 +12,11 @@ @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/components/link'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../lightbox-media-viewer/lightbox-media-viewer'; @mixin link-with-icon { - .#{$c4d-prefix}--link-with-icon, + .#{$prefix}--link-with-icon, :host(#{$c4d-prefix}-link-with-icon), :host(#{$c4d-prefix}-link-list-item), :host(#{$c4d-prefix}-link-list-item-cta), diff --git a/packages/styles/scss/components/list/_list.scss b/packages/styles/scss/components/list/_list.scss index c62eae822b1..255b0607e5f 100644 --- a/packages/styles/scss/components/list/_list.scss +++ b/packages/styles/scss/components/list/_list.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '@carbon/styles/scss/components/list'; @mixin list { diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss index 44c95d4422a..192e4f8f790 100644 --- a/packages/styles/scss/components/locale-modal/_locale-modal.scss +++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss @@ -15,6 +15,7 @@ @use '@carbon/styles/scss/type' as *; @use '@carbon/layout/scss/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/flex-grid' as *; @use '../card' as *; diff --git a/packages/styles/scss/components/logo-grid/_logo-grid.scss b/packages/styles/scss/components/logo-grid/_logo-grid.scss index e0a79a24f1f..ff70fd34c69 100644 --- a/packages/styles/scss/components/logo-grid/_logo-grid.scss +++ b/packages/styles/scss/components/logo-grid/_logo-grid.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/hang' as *; @use '../../globals/utils/aspect-ratio'; @use '../image'; diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss index d4630828b6a..4d0f6482a76 100644 --- a/packages/styles/scss/components/masthead/_masthead-l1.scss +++ b/packages/styles/scss/components/masthead/_masthead-l1.scss @@ -16,6 +16,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/button/tokens' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use 'vars' as *; /// @access private diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss index 1d62178774a..d50a1f29749 100644 --- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss +++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss @@ -14,6 +14,7 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; // Include left navigation component /// @access private diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss index 4883fb9134d..d8a550411e7 100644 --- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss +++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss @@ -15,6 +15,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin masthead-megamenu-limit-height { overflow: var(--#{$c4d-prefix}-masthead-overflow); diff --git a/packages/styles/scss/components/masthead/_masthead-search.scss b/packages/styles/scss/components/masthead/_masthead-search.scss index 5d4b36b360f..4f612e1e4b0 100755 --- a/packages/styles/scss/components/masthead/_masthead-search.scss +++ b/packages/styles/scss/components/masthead/_masthead-search.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use 'vars' as *; /// @access private diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss index e8a84a4019a..36fb35a2dcb 100755 --- a/packages/styles/scss/components/masthead/_masthead.scss +++ b/packages/styles/scss/components/masthead/_masthead.scss @@ -21,6 +21,7 @@ @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../link-with-icon'; @use 'vars' as *; diff --git a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss index 91c20509dfa..8fabb49a43d 100644 --- a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss +++ b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../internal/content-item/content-item'; @use '../link-with-icon'; diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss index 2ec8a23446e..b6309d1d05f 100644 --- a/packages/styles/scss/components/pricing-table/_pricing-table.scss +++ b/packages/styles/scss/components/pricing-table/_pricing-table.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../button-group' as *; @use '../structured-list' as *; diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss index 381bef3201c..088e99abe18 100644 --- a/packages/styles/scss/components/quote/_quote.scss +++ b/packages/styles/scss/components/quote/_quote.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/type' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/hang' as *; @use '../../components/horizontal-rule'; @use '../../components/link-with-icon' as *; diff --git a/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss b/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss index 6c613f57671..c3047211386 100644 --- a/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss +++ b/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss @@ -9,6 +9,7 @@ @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin scroll-into-view { :root { diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss index d41c0b07f68..6d0bdff8049 100644 --- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss +++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss @@ -17,6 +17,7 @@ @use '@carbon/styles/scss/components/dropdown'; @use '@carbon/styles/scss/components/select'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../masthead/vars' as *; @mixin react-autosuggest-suggestion { diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index cee4b7aada6..68c4976c89a 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/theme' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; // Overridden column spanning @mixin structured-list-colspan($colNumber) { diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss index d63c6cd9cf5..12a204cf1d7 100644 --- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss +++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss @@ -17,6 +17,7 @@ @use '../../globals/utils/flex-grid' as *; @use '../../globals/carbon-grid' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/hang' as *; @use '../layout/layout'; @@ -340,7 +341,7 @@ $hover-transition-timing: 95ms; .#{$prefix}--toc__navbar-chevron-right-container { z-index: 2; - inset-inline-end: -$spacing-01; + inset-inline-end: 0; @include breakpoint(md) { inset-inline-end: -$spacing-05; @@ -417,11 +418,11 @@ $hover-transition-timing: 95ms; border-block-start: 1px solid $border-subtle-00; content: ''; inset-block-start: -1px; - inset-inline: calc(-50vw + 50%) 100%; + inset-inline: calc(-50vw + 50% + $spacing-03) 100%; } &::after { - inset-inline: 100% calc(-50vw + 50%); + inset-inline: 100% calc(-50vw + 50% + $spacing-03); } } diff --git a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss index 6f97cde25ad..36afae7974a 100644 --- a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss +++ b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/components/tabs'; @use '../link-list'; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin tabs-extended-media { :host(#{$c4d-prefix}-tabs-extended-media) { diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 915bc63e9f7..1fd9a4fa689 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -16,6 +16,7 @@ @use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/button' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '@carbon/styles/scss/components/tabs/vars' as *; @use '@carbon/web-components/scss/components/tabs/tabs'; diff --git a/packages/styles/scss/components/tag-group/_tag-group.scss b/packages/styles/scss/components/tag-group/_tag-group.scss index a332296e3cc..332622c25ac 100644 --- a/packages/styles/scss/components/tag-group/_tag-group.scss +++ b/packages/styles/scss/components/tag-group/_tag-group.scss @@ -8,6 +8,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin tag-group { :host(#{$c4d-prefix}-tag-group) { diff --git a/packages/styles/scss/components/tag-link/_tag-link.scss b/packages/styles/scss/components/tag-link/_tag-link.scss index 8f37160bfde..f7008a832ef 100644 --- a/packages/styles/scss/components/tag-link/_tag-link.scss +++ b/packages/styles/scss/components/tag-link/_tag-link.scss @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @mixin tag-link { :host(#{$c4d-prefix}-tag-link) a { diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss index 2ce8da05989..bba2ff60042 100644 --- a/packages/styles/scss/components/video-player/_video-player.scss +++ b/packages/styles/scss/components/video-player/_video-player.scss @@ -6,6 +6,7 @@ */ @use '../../globals/vars' as *; +@use '../../globals/imports' as *; @use '../../globals/utils/ratio-base' as *; @use '@carbon/styles/scss/colors' as *; @use '@carbon/styles/scss/config' as *; @@ -13,9 +14,17 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/components/button/vars' as *; $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1)); @mixin video-player { + // Make the video player container a block for purposes of the intersection + // observer. + :host(#{$c4d-prefix}-video-player-container) { + display: block; + } + :host(#{$c4d-prefix}-video-player), .#{$c4d-prefix}--video-player { color: var(--#{$c4d-prefix}--video-caption--color, $text-secondary); @@ -25,19 +34,6 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1)); inline-size: 100%; } - &:focus { - outline: none; - .#{$c4d-prefix}--video-player__video-container { - &::before { - position: absolute; - z-index: 1; - border: 1px solid $focus-inverse; - content: ' '; - inset: $spacing-01; - outline: $spacing-01 solid $focus; - } - } - } #{$c4d-prefix}-image { padding-block-start: 0; } @@ -128,6 +124,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1)); &.#{$c4d-prefix}--video-player__aspect-ratio { &--#{$width}x#{$height} { @include ratio-base($width, $height, true); + + overflow: visible; } } } @@ -201,4 +199,54 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1)); } } } + + .#{$c4d-prefix}--video-player__toggle-playback { + position: absolute; + z-index: 100; + padding: 0.875rem; + border: 0; + background-color: $overlay; + block-size: $spacing-09; + color: #ffffff; + inline-size: $spacing-09; + + &--top-left { + inset-block-start: 0; + inset-inline-start: 0; + } + + &--top-right { + inset-block-start: 0; + inset-inline-end: 0; + } + + &--bottom-right { + inset-block-end: 0; + inset-inline-end: 0; + } + + &--bottom-left { + inset-block-end: 0; + inset-inline-start: 0; + } + + /* stylelint-disable-next-line caem/require-color-with-bg */ + &:hover { + // Grey 100, more opaque. + background-color: rgba(22, 22, 22, 0.9); + cursor: pointer; + } + + &:focus { + outline: 2px solid $focus; + } + } + + // Prevent any pointer events from getting through to the slotted player div + // when in intersection mode. + :host(#{$c4d-prefix}-video-player[intersection-mode]) { + ::slotted(.#{$c4d-prefix}--video-player__video) { + pointer-events: none; + } + } } diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index c2071965851..c805c0feb7d 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.scss @@ -87,6 +87,7 @@ ::slotted(#{$c4d-prefix}-content-group:not([slot])), ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])), + ::slotted(#{$c4d-prefix}-content-group-cards-item:not([slot])), ::slotted([data-autoid^='c4d--tabs-']:not([slot])), ::slotted([data-autoid^='c4d--card']:not([slot])) { margin-inline-start: 0; diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index 558e18d09dc..d720cdbebad 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.1...@carbon/ibmdotcom-utilities@2.16.2) (2024-12-18) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + +## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0...@carbon/ibmdotcom-utilities@2.16.1) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + +# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.3...@carbon/ibmdotcom-utilities@2.16.0) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.16.0-rc.2...@carbon/ibmdotcom-utilities@2.16.0-rc.3) (2024-12-07) **Note:** Version bump only for package @carbon/ibmdotcom-utilities diff --git a/packages/utilities/package.json b/packages/utilities/package.json index 75ec3e54b72..bd1b5e1c705 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-utilities", "description": "Carbon for IBM.com Utilities", - "version": "2.16.0-rc.3", + "version": "2.16.2", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/utilities/src/utilities/settings/settings.js b/packages/utilities/src/utilities/settings/settings.js index 26b1c8c964c..ce7e2f025e5 100644 --- a/packages/utilities/src/utilities/settings/settings.js +++ b/packages/utilities/src/utilities/settings/settings.js @@ -12,10 +12,10 @@ * @type {object} Settings object * @property {string} [stablePrefix=c4d] stable prefix * @property {string} [prefix=cds] core Carbon prefix - * Carbon for IBM.com v2.16.0', + * Carbon for IBM.com v2.16.2', */ const settings = { - version: 'Carbon for IBM.com v2.16.0', + version: 'Carbon for IBM.com v2.16.2', stablePrefix: 'c4d', prefix: 'cds', }; diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index f8780b0c90d..19a4c554f00 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -3,6 +3,40 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.1...@carbon/ibmdotcom-web-components@2.16.2) (2024-12-18) + + +### Bug Fixes + +* **card-group:** subgrid fixes ([#12174](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12174)) ([658b50a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/658b50a592270b795e90804f6515552e652b7780)) +* **card:** allow copy other than

tags ([#12172](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12172)) ([856dc23](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/856dc2368619e8af9cddc4e488933db919f18337)) +* **cta:** cause ctas to only respond to relevant video events ([#12169](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12169)) ([2720e55](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2720e5567aabcd4406e6ae0980188d69bbbb85a4)) +* **video:** remove [@state](https://github.com/state) declaration for function _embedMedia ([#12168](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12168)) ([62fcdba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/62fcdba555bec64184c2135cc48cd2a9aefcfda8)) + + + + + +## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0...@carbon/ibmdotcom-web-components@2.16.1) (2024-12-12) + +**Note:** Version bump only for package @carbon/ibmdotcom-web-components + + + + + +# [2.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.3...@carbon/ibmdotcom-web-components@2.16.0) (2024-12-12) + + +### Bug Fixes + +* **background-media:** avoid potential VPC setup race ([#12158](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12158)) ([55224e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55224e3c99120845d1e07d573f5759c007b563cb)) +* **card:** pictogram related style adjustments ([#12155](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12155)) ([3e7bcc9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60)) + + + + + # [2.16.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.16.0-rc.2...@carbon/ibmdotcom-web-components@2.16.0-rc.3) (2024-12-07) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index a57727b974b..81ef93a5284 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/ibmdotcom-web-components", - "version": "2.16.0-rc.3", + "version": "2.16.2", "description": "Carbon for IBM.com Web Components", "license": "Apache-2.0", "exports": { @@ -92,9 +92,9 @@ "cypress:verify": "cypress verify" }, "dependencies": { - "@carbon/ibmdotcom-services": "2.16.0-rc.3", - "@carbon/ibmdotcom-styles": "2.16.0-rc.3", - "@carbon/ibmdotcom-utilities": "2.16.0-rc.3", + "@carbon/ibmdotcom-services": "2.16.2", + "@carbon/ibmdotcom-styles": "2.16.2", + "@carbon/ibmdotcom-utilities": "2.16.2", "@carbon/layout": "11.27.0", "@carbon/motion": "11.22.0", "@carbon/styles": "1.65.0", @@ -131,7 +131,7 @@ "@babel/preset-react": "~7.12.1", "@babel/template": "~7.12.0", "@babel/traverse": "~7.23.7", - "@carbon/ibmdotcom-services-store": "1.53.3", + "@carbon/ibmdotcom-services-store": "1.53.5", "@carbon/icon-helpers": "10.53.0", "@carbon/icons": "10.48.5", "@carbon/icons-react": "^11.33.0", diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts index f8b79794f98..de0f9a87429 100644 --- a/packages/web-components/src/components/background-media/background-media.ts +++ b/packages/web-components/src/components/background-media/background-media.ts @@ -16,7 +16,6 @@ import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings import styles from './background-media.scss'; import { GRADIENT_DIRECTION, MOBILE_POSITION } from './defs'; import C4DImage from '../image/image'; -import C4DVideoPlayer from '../video-player/video-player'; import C4DVideoPlayerContainer from '../video-player/video-player-container'; import C4DLeadSpace from '../leadspace/leadspace'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; @@ -50,13 +49,14 @@ class C4DBackgroundMedia extends C4DImage { * Returns a class-name based on the Mobile Position type */ protected _getMobilePositionClass() { + const { videoPlayerContainer: video } = this; return classMap({ [`${prefix}--background-media--container`]: true, [`${prefix}--background-media--mobile-position`]: true, [`${prefix}--background-media--mobile-position--${this.mobilePosition}`]: this.mobilePosition, - [`${prefix}--background-media--image`]: this.videoPlayer === null, - [`${prefix}--background-media--video`]: this.videoPlayer !== null, + [`${prefix}--background-media--image`]: video === null, + [`${prefix}--background-media--video`]: video !== null, }); } @@ -93,22 +93,13 @@ class C4DBackgroundMedia extends C4DImage { mobilePosition = MOBILE_POSITION.BOTTOM; /** - * Internal storage of the video ID + * Query selector to get the child video player container */ - @property() - videoId: string | null = null; - - /** - * Current state of video playback - */ - @property() - videoIsPlaying = false; - - /** - * Internal storage of the video player comonent - */ - @property() - videoPlayer: C4DVideoPlayer | null = null; + protected get videoPlayerContainer() { + return this.querySelector( + `${c4dPrefix}-video-player-container` + ) as C4DVideoPlayerContainer | null; + } /** * Conditionally runs super.render() if all children are `c4d-image-item` @@ -122,40 +113,38 @@ class C4DBackgroundMedia extends C4DImage { ); const assignedVideos = assignedElements.filter( (el) => el.tagName === `${c4dPrefix}-video-player-container`.toUpperCase() - ); + ) as C4DVideoPlayerContainer[]; - if ( - assignedElements.length === assignedImages.length && - !assignedVideos.length - ) { + if (assignedImages.length && !assignedVideos.length) { this.containsOnlyImages = true; } - - if (assignedVideos.length) { - const [video] = assignedVideos; - this.videoId = video.getAttribute('video-id'); - this.videoPlayer = video.querySelector(`${c4dPrefix}-video-player`); - this.videoIsPlaying = (video as C4DVideoPlayerContainer).isPlaying; - } } toggleVideoState() { - this.videoPlayer?.userInitiatedTogglePlaybackState(); - this.videoIsPlaying = !this.videoIsPlaying; + const { videoPlayerContainer: video } = this; + + if (video?.isPlaying) { + video.pauseAllVideos(); + } else { + video?.playAllVideos(); + } + + this.requestUpdate(); } renderVideoControls() { - const { toggleVideoState, videoIsPlaying } = this; + const { toggleVideoState, videoPlayerContainer } = this; + const { isPlaying } = videoPlayerContainer ?? {}; return html` `; } @@ -186,7 +175,7 @@ class C4DBackgroundMedia extends C4DImage { this.gradientHidden = true; } - if (this.hasAttribute('default-src') && !this.videoId) { + if (this.hasAttribute('default-src') && !this.videoPlayerContainer) { this.containsOnlyImages = true; } } @@ -203,7 +192,7 @@ class C4DBackgroundMedia extends C4DImage { - ${this.videoId ? this.renderVideoControls() : ''} + ${this.videoPlayerContainer ? this.renderVideoControls() : ''} `; } diff --git a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts index 5e3f830af79..fd5ae9ea2a5 100644 --- a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts +++ b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021, 2023 + * Copyright IBM Corp. 2021, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,9 +12,12 @@ import '../../image/image'; import '../index'; import '../../cta/card-cta-footer'; import '../../cta/video-cta-container'; +import '../../carousel/carousel'; +import '../../video-player/video-player-container'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { boolean } from '@storybook/addon-knobs'; +import { boolean, select, text } from '@storybook/addon-knobs'; +import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js'; import imgXlg16x9 from '../../../../.storybook/storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg'; import imgMd16x9 from '../../../../.storybook/storybook-images/assets/960/fpo--16x9--960x540--005.jpg'; @@ -22,6 +25,8 @@ import imgSm4x3 from '../../../../.storybook/storybook-images/assets/480/fpo--4x import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +import { BUTTON_POSITION } from '../../video-player/defs'; +import { enumValsToArray } from '../../../globals/internal/enum-helpers'; export const Default = (args) => { const { video, eyebrow, heading, defaultSrc, alt, href } = @@ -60,23 +65,8 @@ export const Default = (args) => { `; }; -export default { - title: 'Components/Card in card', - decorators: [ - (story) => html` -

-
-
${story()}
-
-
- `, - ], +Default.story = { parameters: { - percy: { - skip: true, - }, - ...readme.parameters, - hasStoryPadding: true, knobs: { 'c4d-card-in-card': () => { const video = boolean('video', false); @@ -105,6 +95,93 @@ export default { }; }, }, + }, +}; + +export const WithCarouselVideo = (args) => { + const { videoId, thumbnail, buttonPosition } = + args?.['WithCarouselVideo'] ?? {}; + + return html` + + + Experience // Case Study + Putting innovation in the driver's seat + Link ${ArrowRight20({ slot: 'icon' })} + + + + + Experience // Case Study + Putting innovation in the driver's seat + Link ${ArrowRight20({ slot: 'icon' })} + + + + `; +}; + +WithCarouselVideo.story = { + name: 'With carousel video', + parameters: { + knobs: { + WithCarouselVideo: () => { + return { + video: null, + videoId: text('Video id (videoId):', '0_ibuqxqbe'), + thumbnail: text('Custom thumbnail (thumbnail):', ''), + buttonPosition: select( + 'Button position (buttonPosition)', + enumValsToArray(BUTTON_POSITION), + BUTTON_POSITION.BOTTOM_LEFT + ), + }; + }, + }, + }, +}; + +export default { + title: 'Components/Card in card', + decorators: [ + (story) => html` +
+
+
${story()}
+
+
+ `, + ], + parameters: { + percy: { + skip: true, + }, + ...readme.parameters, + hasStoryPadding: true, propsSet: { default: { 'c4d-card-in-card': { diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts index 598b15243c7..3666243ef16 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.ts +++ b/packages/web-components/src/components/card/__stories__/card.stories.ts @@ -38,6 +38,14 @@ const tagGroupContent = html` `; +const copyMarkupContent = html` + +`; + export const Default = (args) => { const { aspectRatio, @@ -52,6 +60,7 @@ export const Default = (args) => { eyebrow, tagGroup, copy, + copyMarkup, cardStyles, customVideoTitle, } = args?.Card ?? {}; @@ -96,7 +105,7 @@ export const Default = (args) => { : ``} ${eyebrow} ${videoCopy ?? heading} - ${copy ? html`

${copy}

` : ``} + ${copyMarkup ? copyMarkupContent : copy ? html`

${copy}

` : ``} ${tagGroup ? html` ${tagGroupContent} ` : ``} ${ctaType === CTA_TYPE.VIDEO ? html` ${videoFooterCopy} ` @@ -152,6 +161,7 @@ Default.story = { eyebrow: textNullable('Eyebrow:', 'Industry'), heading, copy: textNullable('Body copy:', ''), + copyMarkup: boolean('Body copy markup', false), alt: 'Image alt text', defaultSrc: imgXlg4x3, tagGroup: boolean('Add tags:', false), @@ -170,6 +180,7 @@ Default.story = { eyebrow: 'Industry', heading: 'Aerospace and defence', copy: '', + copyMarkup: false, alt: 'Image alt text', defaultSrc: imgXlg4x3, tagGroup: false, diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index 2a1f42a695e..3fb38960cde 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -105,8 +105,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { /** * Handles `slotchange` event for the copy slot. */ - protected _handleCopySlotChange() { - this._hasCopy = Boolean(this.querySelector('p')); + protected _handleCopySlotChange({ target }: Event) { + this._hasCopy = (target as HTMLSlotElement) + .assignedNodes() + .some( + (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() + ); } /** diff --git a/packages/web-components/src/components/carousel/__tests__/carousel.test.ts b/packages/web-components/src/components/carousel/__tests__/carousel.test.ts index fa3d7cc80a8..50b9ad98baf 100644 --- a/packages/web-components/src/components/carousel/__tests__/carousel.test.ts +++ b/packages/web-components/src/components/carousel/__tests__/carousel.test.ts @@ -354,7 +354,7 @@ describe('c4d-carousel', function () { }); describe('Handling resizing', function () { - it('should update paze size upon resizing viewport', async function () { + it('should update page size upon resizing viewport', async function () { render(template(), document.body); await Promise.resolve(); pageSize = 2; diff --git a/packages/web-components/src/components/cta-block/cta-block.scss b/packages/web-components/src/components/cta-block/cta-block.scss index 0a57d7c1d45..89f576b637e 100644 --- a/packages/web-components/src/components/cta-block/cta-block.scss +++ b/packages/web-components/src/components/cta-block/cta-block.scss @@ -169,6 +169,7 @@ position: relative; display: grid; grid-row: auto / span 5; + grid-template-columns: subgrid; grid-template-rows: subgrid; inline-size: 100%; margin-block: 0; diff --git a/packages/web-components/src/components/cta/button-cta.ts b/packages/web-components/src/components/cta/button-cta.ts index d55fd318b72..1e2f905a7df 100644 --- a/packages/web-components/src/components/cta/button-cta.ts +++ b/packages/web-components/src/components/cta/button-cta.ts @@ -78,6 +78,12 @@ class C4DButtonCTA extends VideoCTAMixin(CTAMixin(C4DButtonGroupItem)) { @property({ reflect: true, attribute: 'cta-type' }) ctaType = CTA_TYPE.REGULAR; + /** + * Link `href`. + */ + @property({ attribute: 'href' }) + href?: string; + /** * The formatter for the video caption, composed with the video name and the video duration. * Should be changed upon the locale the UI is rendered with. diff --git a/packages/web-components/src/components/cta/cta.ts b/packages/web-components/src/components/cta/cta.ts index 84282761ef5..516e151c8c9 100644 --- a/packages/web-components/src/components/cta/cta.ts +++ b/packages/web-components/src/components/cta/cta.ts @@ -20,6 +20,7 @@ import { formatVideoDuration, } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; +import { CTA_TYPE } from './defs'; const { stablePrefix: c4dPrefix } = settings; @@ -55,6 +56,9 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) { @property({ reflect: true }) thumbnail; + @property({ attribute: 'href' }) + href?: string; + updated() { // transpose attributes from parent cta handler to desired cta style Array.from(this.attributes).forEach((e) => { @@ -79,13 +83,17 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) { // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to private _handleVideoTitleUpdate = async (event: FocusEvent) => { if (event) { - const { videoDuration, videoName } = event.detail as any; + const { videoDuration, videoName, videoId } = event.detail as any; const formattedVideoDuration = formatVideoDuration({ duration: !videoDuration ? videoDuration : videoDuration * 1000, }); this.videoDuration ? null : (this.videoDuration = formattedVideoDuration); - - if (this.ctaStyle !== 'card' && this.ctaStyle !== 'feature') { + if ( + this.ctaStyle !== 'card' && + this.ctaStyle !== 'feature' && + this.ctaType === CTA_TYPE.VIDEO && + (this as any).href === videoId + ) { const heading = formatVideoCaption({ duration: formattedVideoDuration, name: videoName, diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts index e8ec0be84d5..4a0b81120df 100644 --- a/packages/web-components/src/components/cta/video-cta-composite.ts +++ b/packages/web-components/src/components/cta/video-cta-composite.ts @@ -41,7 +41,6 @@ class C4DVideoCTAComposite extends ModalRenderMixin( * * @internal */ - @state() _embedMedia?: (videoId: string) => Promise; /** diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts index 9bc896bae03..2e0ffa8ca97 100644 --- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts +++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts @@ -183,7 +183,7 @@ class C4DLightboxVideoPlayerComposite extends ModalRenderMixin( if (videoId) { this._loadVideoData?.(videoId); if (open) { - this._embedMedia?.(videoId, false); + this._embedMedia?.(videoId); this._handleAriaAndHiddenState(); } } diff --git a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts index 2c04e1a1904..ce2bdb965b4 100644 --- a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts +++ b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts @@ -8,11 +8,13 @@ */ import { html } from 'lit'; -import { boolean, text } from '@storybook/addon-knobs'; +import { boolean, text, select } from '@storybook/addon-knobs'; import { ifDefined } from 'lit/directives/if-defined.js'; import readme from './README.stories.mdx'; import '../video-player-container'; import '../../lightbox-media-viewer/lightbox-video-player-container'; +import { enumValsToArray } from '../../../globals/internal/enum-helpers'; +import { BUTTON_POSITION } from '../defs'; export const Default = (args) => { const { caption, hideCaption, thumbnail, videoId } = args?.VideoPlayer ?? {}; @@ -118,6 +120,26 @@ export const autoplayMuted = (args) => { `; }; +export const intersectionMode = (args) => { + const { + aspectRatio, + caption, + hideCaption, + thumbnail, + videoId, + buttonPosition, + } = args?.VideoPlayer ?? {}; + return html` `; +}; + aspectRatio4x3.story = { name: 'Aspect ratio 4:3', parameters: { @@ -263,6 +285,49 @@ autoplayMuted.story = { }, }; +intersectionMode.story = { + name: 'Intersection mode', + decorators: [ + (story) => html` +

+ Scroll down ⬇️
+ To illustrate playback beginning only when the video comes into view, + we've added intentional space to push the video below the fold. +

+
${story()}
+ `, + ], + parameters: { + knobs: { + VideoPlayer: () => { + return { + aspectRatio: '16x9', + caption: text('Custom caption (caption):', ''), + hideCaption: boolean('Hide caption (hideCaption):', false), + thumbnail: text('Custom thumbnail (thumbnail):', ''), + videoId: '0_ibuqxqbe', + buttonPosition: select( + 'Button position (buttonPosition)', + enumValsToArray(BUTTON_POSITION), + BUTTON_POSITION.BOTTOM_RIGHT + ), + }; + }, + }, + propsSet: { + default: { + VideoPlayer: { + aspectRatio: '16x9', + caption: '', + hideCaption: false, + thumbnail: '', + videoId: '0_ibuqxqbe', + }, + }, + }, + }, +}; + export default { title: 'Components/Video player', decorators: [ diff --git a/packages/web-components/src/components/video-player/defs.ts b/packages/web-components/src/components/video-player/defs.ts index dbcdd72adf8..d236fc64e8a 100644 --- a/packages/web-components/src/components/video-player/defs.ts +++ b/packages/web-components/src/components/video-player/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -35,3 +35,10 @@ export enum VIDEO_PLAYER_PLAYING_MODE { */ LIGHTBOX = 'lightbox', } + +export enum BUTTON_POSITION { + TOP_LEFT = 'top-left', + TOP_RIGHT = 'top-right', + BOTTOM_RIGHT = 'bottom-right', + BOTTOM_LEFT = 'bottom-left', +} diff --git a/packages/web-components/src/components/video-player/video-player-composite.ts b/packages/web-components/src/components/video-player/video-player-composite.ts index 5ada0cbdaeb..d2bec2aabf1 100644 --- a/packages/web-components/src/components/video-player/video-player-composite.ts +++ b/packages/web-components/src/components/video-player/video-player-composite.ts @@ -8,8 +8,7 @@ */ import { LitElement, html } from 'lit'; -import { property } from 'lit/decorators.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; +import { property, state } from 'lit/decorators.js'; import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js'; import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js'; import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; @@ -23,6 +22,8 @@ import { // Above import is interface-only ref and thus code won't be brought into the build import './video-player'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; +import { BUTTON_POSITION } from './defs'; +import ifNonEmpty from '@carbon/web-components/es/globals/directives/if-non-empty.js'; const { stablePrefix: c4dPrefix } = settings; @@ -48,7 +49,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( * * @internal */ - _embedMedia?: (videoId: string, backgroundMode?: boolean) => Promise; + _embedMedia?: (videoId: string) => Promise; /** * The placeholder for `_setAutoplayPreference()` Redux action that may be mixed in. @@ -85,6 +86,79 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( return this.querySelector(selectorVideoPlayer); } + /** + * Clean-up and create intersection observers. + * + * When this.intersectionMode, we use intersection observers to track when + * the video container is in view, and embed / play / pause the video + * accordingly. + * + * @param [options] The options. + * @param [options.create] `true` to create necessary intersection observers. + */ + private _cleanAndCreateObserverIntersection({ + create, + }: { create?: boolean } = {}) { + // Cleanup. + if (this._observerIntersectionIntoView) { + this._observerIntersectionIntoView.unobserve(this); + } + if (this._observerIntersectionOutOfView) { + this._observerIntersectionOutOfView.unobserve(this); + } + // Create new intersection observers. + if (create) { + this._observerIntersectionIntoView = new IntersectionObserver( + this._intersectionIntoViewHandler.bind(this), + { + root: this.closest('c4d-carousel'), + rootMargin: '0px', + threshold: 0.9, + } + ); + this._observerIntersectionOutOfView = new IntersectionObserver( + this._intersectionOutOfViewHandler.bind(this), + { + root: this.closest('c4d-carousel'), + rootMargin: '0px', + threshold: 0.5, + } + ); + this._observerIntersectionIntoView.observe(this); + this._observerIntersectionOutOfView.observe(this); + } + } + + /** + * Observer for when the video container enters into view. + * + * Autoplay the video, resecting the users stored autoplay preference. + */ + private _intersectionIntoViewHandler(entries: IntersectionObserverEntry[]) { + const { videoId } = this; + entries.forEach((entry) => { + if (entry.isIntersecting && this._getAutoplayPreference() !== false) { + this._embedMedia?.(videoId); + this.playAllVideos(); + } + }); + } + + /** + * Observer for when the video container goes out of view. + * + * Auto-pause the video, video playback controlled by intersection observers + * here are meant to be ambient, without audio. No reason for playback when + * user is not seeing the video content. + */ + private _intersectionOutOfViewHandler(entries: IntersectionObserverEntry[]) { + entries.forEach((entry) => { + if (!entry.isIntersecting) { + this.pauseAllVideos(false); + } + }); + } + /** * Handles `c4d-video-player-content-state-changed` event. * Such event is fired when user changes video content state, e.g. from thumbnail to video player. @@ -99,7 +173,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE && videoId ) { - this._embedMedia?.(videoId, this.backgroundMode); + this._embedMedia?.(videoId); } } @@ -117,24 +191,48 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( } this._setAutoplayPreference(this.isPlaying); + this.playbackTriggered = true; } - pauseAllVideos() { + @HostListener('eventTogglePlayback') + protected _handleEventTogglePlayback(event: CustomEvent) { + const { videoId } = event.detail; + if (videoId) { + this._setAutoplayPreference(!this.isPlaying); + + // First ensure that the media has actually been embedded. + this._embedMedia?.(videoId); + if (this.isPlaying) { + this.pauseAllVideos(); + } else { + this.playAllVideos(); + } + } + } + + pauseAllVideos(updateAutoplayPreference = true) { const { embeddedVideos = {} } = this; Object.keys(embeddedVideos).forEach((videoId) => { embeddedVideos[videoId].sendNotification('doPause'); }); this.isPlaying = false; + if (updateAutoplayPreference) { + this._setAutoplayPreference(false); + } } - playAllVideos() { + playAllVideos(updateAutoplayPreference = true) { const { embeddedVideos = {} } = this; Object.keys(embeddedVideos).forEach((videoId) => { embeddedVideos[videoId].sendNotification('doPlay'); }); this.isPlaying = true; + this.playbackTriggered = true; + if (updateAutoplayPreference) { + this._setAutoplayPreference(true); + } } /** @@ -199,6 +297,24 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( @property({ type: Boolean, attribute: 'background-mode', reflect: true }) backgroundMode = false; + /** + * Triggers playback on intersection with the viewport / carousel. + */ + @property({ attribute: 'intersection-mode', reflect: true, type: Boolean }) + intersectionMode = false; + + /** + * The position of the toggle playback button. + */ + @property({ attribute: 'button-position', reflect: true }) + buttonPosition = BUTTON_POSITION.BOTTOM_RIGHT; + + /** + * Track when we have triggered initial playback. + */ + @state() + playbackTriggered = false; + /** * The video data, keyed by the video ID. */ @@ -241,6 +357,16 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( @property({ type: Number, attribute: 'video-thumbnail-width' }) videoThumbnailWidth = 3; + /** + * Observe when the video container enters into view. + */ + private _observerIntersectionIntoView?: IntersectionObserver; + + /** + * Observe when the video container goes out of view. + */ + private _observerIntersectionOutOfView?: IntersectionObserver; + connectedCallback() { super.connectedCallback(); @@ -257,6 +383,15 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( this.isPlaying = storedPreference; } } + + if (this.intersectionMode) { + this._cleanAndCreateObserverIntersection({ create: true }); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + this._cleanAndCreateObserverIntersection(); } updated(changedProperties) { @@ -266,7 +401,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( if (videoId) { this._loadVideoData?.(videoId); if (autoPlay || backgroundMode) { - this._embedMedia?.(videoId, backgroundMode); + this._embedMedia?.(videoId); } } } @@ -285,6 +420,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( videoThumbnailWidth, thumbnail, playingMode, + buttonPosition, } = this; const { [videoId]: currentVideoData = {} as MediaData } = mediaData; const { duration, name } = currentVideoData; @@ -297,16 +433,21 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( return html` + name="${ifNonEmpty(caption || name)}" + video-description="${ifNonEmpty(customVideoDescription)}" + thumbnail-url="${ifNonEmpty(thumbnailUrl)}" + video-id="${ifNonEmpty(videoId)}" + aspect-ratio="${ifNonEmpty(aspectRatio)}" + playing-mode="${ifNonEmpty(playingMode)}" + content-state="${this.playbackTriggered + ? VIDEO_PLAYER_CONTENT_STATE.VIDEO + : VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL}" + button-position="${buttonPosition}" + .formatCaption="${ifNonEmpty(formatCaption)}" + .formatDuration="${ifNonEmpty(formatDuration)}" + .isPlaying=${this.isPlaying}> `; } @@ -335,6 +476,13 @@ class C4DVideoPlayerComposite extends HybridRenderMixin( static get eventPlaybackStateChange() { return `${c4dPrefix}-video-player-playback-state-changed`; } + + /** + * The name of the custom event fired requesting to toggle playback. + */ + static get eventTogglePlayback() { + return `${c4dPrefix}-video-player-toggle-playback`; + } } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ diff --git a/packages/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts index d725b49bbac..4bff6534a19 100644 --- a/packages/web-components/src/components/video-player/video-player-container.ts +++ b/packages/web-components/src/components/video-player/video-player-container.ts @@ -177,7 +177,7 @@ export const C4DVideoPlayerContainerMixin = < } _getPlayerOptions() { - const { backgroundMode, autoPlay, muted } = + const { backgroundMode, intersectionMode, autoPlay, muted } = this as unknown as C4DVideoPlayerComposite; let playerOptions = {}; const autoplayPreference = this._getAutoplayPreference(); @@ -190,7 +190,7 @@ export const C4DVideoPlayerContainerMixin = < }; break; - case backgroundMode: + case backgroundMode || intersectionMode: playerOptions = { 'topBarContainer.plugin': false, 'controlBarContainer.plugin': false, diff --git a/packages/web-components/src/components/video-player/video-player.ts b/packages/web-components/src/components/video-player/video-player.ts index e4790a1062c..aa16107ef8f 100644 --- a/packages/web-components/src/components/video-player/video-player.ts +++ b/packages/web-components/src/components/video-player/video-player.ts @@ -10,21 +10,27 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; import FocusMixin from '@carbon/web-components/es/globals/mixins/focus.js'; import PlayVideo from '../../../es/icons/play-video.js'; +import PlayOutline from '@carbon/web-components/es/icons/play--outline/20.js'; +import PauseOutline from '@carbon/web-components/es/icons/pause--outline/20.js'; import { formatVideoCaption, formatVideoDuration, } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js'; import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js'; -import { VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from './defs'; +import { + BUTTON_POSITION, + VIDEO_PLAYER_CONTENT_STATE, + VIDEO_PLAYER_PLAYING_MODE, +} from './defs'; import '../image/image'; import styles from './video-player.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import C4DVideoPlayerContainer from './video-player-container'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; +import ifNonEmpty from '@carbon/web-components/es/globals/directives/if-non-empty.js'; +import C4DVideoPlayerComposite from './video-player-composite'; export { VIDEO_PLAYER_CONTENT_STATE }; export { VIDEO_PLAYER_PLAYING_MODE }; @@ -49,10 +55,28 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { @property({ reflect: true, attribute: 'playing-mode' }) playingMode = VIDEO_PLAYER_PLAYING_MODE.INLINE; + /** + * Triggers playback on intersection with the viewport / carousel. + */ + @property({ attribute: 'intersection-mode', reflect: true, type: Boolean }) + intersectionMode = false; + + /** + * The current playback state, inherited from the parent. + */ + @property() + isPlaying = false; + + /** + * The position of the toggle playback button. + */ + @property({ attribute: 'button-position', reflect: true }) + buttonPosition = BUTTON_POSITION.BOTTOM_RIGHT; + /** * Handles `click` event on the video thumbnail. */ - private _handleClickOverlay() { + protected _handleClickOverlay = () => { if (this.playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE) { this.contentState = VIDEO_PLAYER_CONTENT_STATE.VIDEO; } @@ -72,38 +96,75 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { }, }) ); - } + }; + + protected _handleTogglePlayback = () => { + const { videoId } = this; + const { eventTogglePlayback } = this.constructor as typeof C4DVideoPlayer; + this.dispatchEvent( + new CustomEvent(eventTogglePlayback, { + bubbles: true, + composed: true, + detail: { + videoId, + }, + }) + ); + }; /** * @returns The video content. */ - private _renderContent() { - const { contentState, name, thumbnailUrl, backgroundMode } = this; - return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL && - !backgroundMode && - !this.autoplay - ? html` -
- -
- ` - : html` `; - } + protected _renderContent = () => { + const { + contentState, + name, + thumbnailUrl, + backgroundMode, + _handleClickOverlay: handleClickOverlay, + intersectionMode, + } = this; + if (intersectionMode) { + return html` +
+ ${contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL + ? html` + + + ` + : html` `} +
+ `; + } else { + return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL && + !backgroundMode && + !this.autoplay + ? html` +
+ +
+ ` + : html` `; + } + }; /** * Updates video thumbnail url to match video width */ - private _updateThumbnailUrl() { + protected _updateThumbnailUrl() { let thumbnailSrc: false | URL = false; try { @@ -229,6 +290,10 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { formatDuration, hideCaption, name, + buttonPosition, + intersectionMode, + _handleTogglePlayback: handleTogglePlayback, + _renderContent: renderContent, } = this; const aspectRatioClass = classMap({ @@ -236,10 +301,27 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { [`${c4dPrefix}--video-player__aspect-ratio--${aspectRatio}`]: !!aspectRatio, }); + const togglePlaybackClass = classMap({ + [`${c4dPrefix}--video-player__toggle-playback`]: true, + [`${c4dPrefix}--video-player__toggle-playback--${buttonPosition}`]: true, + }); return html` -
- ${this._renderContent()} +
+ ${intersectionMode + ? html` + + ` + : null} + ${renderContent()}
${hideCaption ? undefined @@ -288,16 +370,15 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { firstUpdated() { this.tabIndex = 0; - const parentIsBackground = Boolean( - (this.parentElement as C4DVideoPlayerContainer)?.backgroundMode + this.backgroundMode = Boolean( + (this.parentElement as C4DVideoPlayerComposite)?.backgroundMode ); - - const parentIsAutoplay = Boolean( - (this.parentElement as C4DVideoPlayerContainer)?.autoPlay + this.intersectionMode = Boolean( + (this.parentElement as C4DVideoPlayerComposite)?.intersectionMode + ); + this.autoplay = Boolean( + (this.parentElement as C4DVideoPlayerComposite)?.autoPlay ); - - this.backgroundMode = parentIsBackground; - this.autoplay = parentIsAutoplay; } /** @@ -318,6 +399,13 @@ class C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) { return `${c4dPrefix}--video-player`; } + /** + * The name of the custom event fired when a user action toggles playback. + */ + static get eventTogglePlayback() { + return `${c4dPrefix}-video-player-toggle-playback`; + } + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, diff --git a/packages/web-components/src/globals/internal/enum-helpers.ts b/packages/web-components/src/globals/internal/enum-helpers.ts new file mode 100644 index 00000000000..7128fb9bb9a --- /dev/null +++ b/packages/web-components/src/globals/internal/enum-helpers.ts @@ -0,0 +1,88 @@ +/** + * @license + * + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +const defaultOpts = { delimeter: '_' }; + +/** + * Storybook doesn't handle empty strings (i.e. '') well in Control configuration. + * Instead, we replace empty strings in enums with this blank space. + */ +const STORYBOOK_EMPTY_STRING = ' '; + +/** + * Capitalizes a word. + * + * @param {string} word The word to capitalize. + * @returns {string} The capitalized word. + */ +const capitalize = (word: string) => + `${word.slice(0, 1).toUpperCase()}${word + .slice(1, word.length) + .toLowerCase()}`; + +/** + * Formats an enum key as a user-friendly label for use in Storybook. + * + * @param {string} key The enum key. + * @param {object} opts Optional configuration. + * @param {string} opts.delimeter The character to split on. + * @returns {string} The formatted version of the provided key. + */ +export const formatEnumKey = (key, opts = defaultOpts) => + key + .split(opts.delimeter) + .map((word) => capitalize(word)) + .join(' '); + +/** + * Conversts a TypeScript enum into an array. + * + * @param en The enum to convert. + * @returns {Array} An array containing the enum's values. + */ +export const enumValsToArray = (en) => + Object.keys(en) + .filter((key) => typeof key === 'string') + .map((key) => en[key] || STORYBOOK_EMPTY_STRING); + +/** + * Converts a TypeScript enum's keys into an array of formatted labels. + * + * @param en The enum to convert. + * @param {object} opts Optional configuration. + * @param {string} opts.delimeter The character to split on. + * @returns {Array} An array containing formatted versions of the enum's keys. + */ +export const enumKeysToArray = (en, opts = defaultOpts) => + Object.keys(en) + .filter((key) => typeof key === 'string') + .map((key) => formatEnumKey(key, opts)); + +/** + * Converts an enum into a Storybook-friendly labels object. + * + * @param en The enum to convert. + * @param {object} opts Optional configuration. + * @param {string} opts.delimeter The character to split on. + * @returns {object} An object for use in Storybook Control label config. + */ +export const enumToLabels = (en, opts = defaultOpts) => { + const options = {}; + Object.keys(en) + .filter((key) => typeof key === 'string') + .forEach((key) => { + const value = en[key]; + const keyFormatted = formatEnumKey(key, opts); + options[`${value || STORYBOOK_EMPTY_STRING}`] = `${keyFormatted}${ + value && ` (${value})` + }`; + }); + + return options; +}; diff --git a/packages/web-components/tests/snapshots/c4d-video-player-composite.md b/packages/web-components/tests/snapshots/c4d-video-player-composite.md index 030fb4a9716..5c8f6c63819 100644 --- a/packages/web-components/tests/snapshots/c4d-video-player-composite.md +++ b/packages/web-components/tests/snapshots/c4d-video-player-composite.md @@ -4,10 +4,13 @@ ``` +
+
diff --git a/yarn.lock b/yarn.lock index f34965acc9a..44b6705c038 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3257,7 +3257,7 @@ __metadata: languageName: node linkType: hard -"@carbon/colors@npm:^11.26.0, @carbon/colors@npm:^11.27.0, @carbon/colors@npm:^11.27.1": +"@carbon/colors@npm:^11.26.0, @carbon/colors@npm:^11.27.1": version: 11.27.1 resolution: "@carbon/colors@npm:11.27.1" dependencies: @@ -3266,6 +3266,15 @@ __metadata: languageName: node linkType: hard +"@carbon/colors@npm:^11.28.0": + version: 11.28.0 + resolution: "@carbon/colors@npm:11.28.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/557419fe3a6bda7ba8e8936662ffd7599003dc05d849811ffd19fd0d52762f9f3100e5ae2193486b5bcaed46e1cd65c6683c4bee48a1a9bc80c330c7c6d691ca + languageName: node + linkType: hard + "@carbon/feature-flags@npm:^0.22.0": version: 0.22.0 resolution: "@carbon/feature-flags@npm:0.22.0" @@ -3285,6 +3294,16 @@ __metadata: languageName: node linkType: hard +"@carbon/grid@npm:^11.30.0": + version: 11.30.0 + resolution: "@carbon/grid@npm:11.30.0" + dependencies: + "@carbon/layout": "npm:^11.28.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/fa982d9a9a2fdeb54bcb981040f715427f335ebd9dd140561bf979dd9068668bbe67c477c6883f70b6e8ac62245c673c05f1a9f9f47857f62a98377d6fb7d5fb + languageName: node + linkType: hard + "@carbon/ibm-products-styles@npm:^2.30.1": version: 2.42.0 resolution: "@carbon/ibm-products-styles@npm:2.42.0" @@ -3300,7 +3319,7 @@ __metadata: languageName: node linkType: hard -"@carbon/ibmdotcom-services-store@npm:1.53.3, @carbon/ibmdotcom-services-store@workspace:packages/services-store": +"@carbon/ibmdotcom-services-store@npm:1.53.5, @carbon/ibmdotcom-services-store@workspace:packages/services-store": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-services-store@workspace:packages/services-store" dependencies: @@ -3350,7 +3369,7 @@ __metadata: languageName: node linkType: hard -"@carbon/ibmdotcom-services@npm:2.16.0-rc.3, @carbon/ibmdotcom-services@workspace:packages/services": +"@carbon/ibmdotcom-services@npm:2.16.2, @carbon/ibmdotcom-services@workspace:packages/services": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-services@workspace:packages/services" dependencies: @@ -3363,7 +3382,7 @@ __metadata: "@babel/plugin-transform-runtime": "npm:7.18.5" "@babel/preset-env": "npm:~7.23.2" "@babel/runtime": "npm:^7.16.3" - "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3" + "@carbon/ibmdotcom-utilities": "npm:2.16.2" "@ibm/telemetry-js": "npm:^1.5.0" "@rollup/plugin-babel": "npm:^5.3.1" "@rollup/plugin-commonjs": "npm:^21.0.3" @@ -3397,14 +3416,14 @@ __metadata: languageName: unknown linkType: soft -"@carbon/ibmdotcom-styles@npm:2.16.0-rc.3, @carbon/ibmdotcom-styles@workspace:packages/styles": +"@carbon/ibmdotcom-styles@npm:2.16.2, @carbon/ibmdotcom-styles@workspace:packages/styles": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles" dependencies: "@carbon/icons-react": "npm:11.51.0" "@carbon/layout": "npm:11.27.0" "@carbon/styles": "npm:1.65.0" - "@carbon/themes": "npm:11.42.0" + "@carbon/themes": "npm:11.44.0" "@carbon/type": "npm:11.32.1" "@ibm/telemetry-js": "npm:^1.5.0" del: "npm:^6.0.0" @@ -3414,7 +3433,7 @@ __metadata: gulp-rename: "npm:^2.0.0" gulp-sass: "npm:^5.0.0" require-dir: "npm:^1.2.0" - sass: "npm:~1.79.0" + sass: "npm:~1.83.0" sass-loader: "npm:^13.0.0" languageName: unknown linkType: soft @@ -3435,7 +3454,7 @@ __metadata: languageName: node linkType: hard -"@carbon/ibmdotcom-utilities@npm:2.16.0-rc.3, @carbon/ibmdotcom-utilities@workspace:packages/utilities": +"@carbon/ibmdotcom-utilities@npm:2.16.2, @carbon/ibmdotcom-utilities@workspace:packages/utilities": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities" dependencies: @@ -3500,10 +3519,10 @@ __metadata: "@babel/preset-react": "npm:~7.12.1" "@babel/template": "npm:~7.12.0" "@babel/traverse": "npm:~7.23.7" - "@carbon/ibmdotcom-services": "npm:2.16.0-rc.3" - "@carbon/ibmdotcom-services-store": "npm:1.53.3" - "@carbon/ibmdotcom-styles": "npm:2.16.0-rc.3" - "@carbon/ibmdotcom-utilities": "npm:2.16.0-rc.3" + "@carbon/ibmdotcom-services": "npm:2.16.2" + "@carbon/ibmdotcom-services-store": "npm:1.53.5" + "@carbon/ibmdotcom-styles": "npm:2.16.2" + "@carbon/ibmdotcom-utilities": "npm:2.16.2" "@carbon/icon-helpers": "npm:10.53.0" "@carbon/icons": "npm:10.48.5" "@carbon/icons-react": "npm:^11.33.0" @@ -3707,7 +3726,7 @@ __metadata: languageName: node linkType: hard -"@carbon/layout@npm:^11.26.0, @carbon/layout@npm:^11.27.0, @carbon/layout@npm:^11.27.1": +"@carbon/layout@npm:^11.26.0, @carbon/layout@npm:^11.27.1": version: 11.27.1 resolution: "@carbon/layout@npm:11.27.1" dependencies: @@ -3716,6 +3735,15 @@ __metadata: languageName: node linkType: hard +"@carbon/layout@npm:^11.28.0": + version: 11.28.0 + resolution: "@carbon/layout@npm:11.28.0" + dependencies: + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/4ce8fbe84aa869121e0c83ae81c6beeeee87162165fd452fc51012715a3bf3ebb4e096dd4fb9a6f64ef45855d680e0953f13a79978cad855c0c64450a884e554 + languageName: node + linkType: hard + "@carbon/motion@npm:11.22.0, @carbon/motion@npm:^11.22.0": version: 11.22.0 resolution: "@carbon/motion@npm:11.22.0" @@ -3817,16 +3845,16 @@ __metadata: languageName: node linkType: hard -"@carbon/themes@npm:11.42.0": - version: 11.42.0 - resolution: "@carbon/themes@npm:11.42.0" +"@carbon/themes@npm:11.44.0": + version: 11.44.0 + resolution: "@carbon/themes@npm:11.44.0" dependencies: - "@carbon/colors": "npm:^11.27.0" - "@carbon/layout": "npm:^11.27.0" - "@carbon/type": "npm:^11.32.0" + "@carbon/colors": "npm:^11.28.0" + "@carbon/layout": "npm:^11.28.0" + "@carbon/type": "npm:^11.34.0" "@ibm/telemetry-js": "npm:^1.5.0" color: "npm:^4.0.0" - checksum: 10/7a3c87566edcc94a2a567f193d30414603521ae834f2cd7de3fc162bc866fde3a41a622e9e8ac11b1f34e262e3b11c4b95b43a97304f5beb26f213a701248ec3 + checksum: 10/e7a20fa22211fd2f9c9d2748b6ad5f171283ae389bbea25450428f3900cebd4cc59d67c1a6fd61cbd296f274a870e598120e0273323d90da9c787acabe40cd02 languageName: node linkType: hard @@ -3843,7 +3871,7 @@ __metadata: languageName: node linkType: hard -"@carbon/type@npm:11.32.1, @carbon/type@npm:^11.31.0, @carbon/type@npm:^11.32.0, @carbon/type@npm:^11.32.1": +"@carbon/type@npm:11.32.1, @carbon/type@npm:^11.31.0, @carbon/type@npm:^11.32.1": version: 11.32.1 resolution: "@carbon/type@npm:11.32.1" dependencies: @@ -3854,6 +3882,17 @@ __metadata: languageName: node linkType: hard +"@carbon/type@npm:^11.34.0": + version: 11.34.0 + resolution: "@carbon/type@npm:11.34.0" + dependencies: + "@carbon/grid": "npm:^11.30.0" + "@carbon/layout": "npm:^11.28.0" + "@ibm/telemetry-js": "npm:^1.5.0" + checksum: 10/400382a88fb7afcbf86e881de6c5192143bdba21c4e6cdbd2ba246264bcda3476b70b874d9e5012a816b48ce411dc3c8e558555bc0ff29f75ce6d45075a2c3de + languageName: node + linkType: hard + "@carbon/web-components@npm:2.13.1": version: 2.13.1 resolution: "@carbon/web-components@npm:2.13.1" @@ -5716,6 +5755,97 @@ __metadata: languageName: node linkType: hard +"@parcel/watcher-android-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-android-arm64@npm:2.5.0" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-darwin-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-darwin-arm64@npm:2.5.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-darwin-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-darwin-x64@npm:2.5.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@parcel/watcher-freebsd-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-freebsd-x64@npm:2.5.0" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.0" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.0" + conditions: os=linux & cpu=arm & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm64-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-arm64-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-linux-x64-glibc@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@parcel/watcher-linux-x64-musl@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@parcel/watcher-win32-arm64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-arm64@npm:2.5.0" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@parcel/watcher-win32-ia32@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-ia32@npm:2.5.0" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@parcel/watcher-win32-x64@npm:2.5.0": + version: 2.5.0 + resolution: "@parcel/watcher-win32-x64@npm:2.5.0" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@parcel/watcher@npm:2.0.4": version: 2.0.4 resolution: "@parcel/watcher@npm:2.0.4" @@ -5727,6 +5857,59 @@ __metadata: languageName: node linkType: hard +"@parcel/watcher@npm:^2.4.1": + version: 2.5.0 + resolution: "@parcel/watcher@npm:2.5.0" + dependencies: + "@parcel/watcher-android-arm64": "npm:2.5.0" + "@parcel/watcher-darwin-arm64": "npm:2.5.0" + "@parcel/watcher-darwin-x64": "npm:2.5.0" + "@parcel/watcher-freebsd-x64": "npm:2.5.0" + "@parcel/watcher-linux-arm-glibc": "npm:2.5.0" + "@parcel/watcher-linux-arm-musl": "npm:2.5.0" + "@parcel/watcher-linux-arm64-glibc": "npm:2.5.0" + "@parcel/watcher-linux-arm64-musl": "npm:2.5.0" + "@parcel/watcher-linux-x64-glibc": "npm:2.5.0" + "@parcel/watcher-linux-x64-musl": "npm:2.5.0" + "@parcel/watcher-win32-arm64": "npm:2.5.0" + "@parcel/watcher-win32-ia32": "npm:2.5.0" + "@parcel/watcher-win32-x64": "npm:2.5.0" + detect-libc: "npm:^1.0.3" + is-glob: "npm:^4.0.3" + micromatch: "npm:^4.0.5" + node-addon-api: "npm:^7.0.0" + node-gyp: "npm:latest" + dependenciesMeta: + "@parcel/watcher-android-arm64": + optional: true + "@parcel/watcher-darwin-arm64": + optional: true + "@parcel/watcher-darwin-x64": + optional: true + "@parcel/watcher-freebsd-x64": + optional: true + "@parcel/watcher-linux-arm-glibc": + optional: true + "@parcel/watcher-linux-arm-musl": + optional: true + "@parcel/watcher-linux-arm64-glibc": + optional: true + "@parcel/watcher-linux-arm64-musl": + optional: true + "@parcel/watcher-linux-x64-glibc": + optional: true + "@parcel/watcher-linux-x64-musl": + optional: true + "@parcel/watcher-win32-arm64": + optional: true + "@parcel/watcher-win32-ia32": + optional: true + "@parcel/watcher-win32-x64": + optional: true + checksum: 10/1e28b1aa9a63456ebfa7af3e41297d088bd31d9e32548604f4f26ed96c5808f4330cd515062e879c24a9eaab7894066c8a3951ee30b59e7cbe6786ab2c790dae + languageName: node + linkType: hard + "@percy-io/in-percy@npm:^0.1.11": version: 0.1.11 resolution: "@percy-io/in-percy@npm:0.1.11" @@ -14252,6 +14435,15 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^1.0.3": + version: 1.0.3 + resolution: "detect-libc@npm:1.0.3" + bin: + detect-libc: ./bin/detect-libc.js + checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757 + languageName: node + linkType: hard + "detect-newline@npm:^2.0.0": version: 2.1.0 resolution: "detect-newline@npm:2.1.0" @@ -19131,6 +19323,13 @@ __metadata: languageName: node linkType: hard +"immutable@npm:^5.0.2": + version: 5.0.3 + resolution: "immutable@npm:5.0.3" + checksum: 10/9aca1c783951bb204d7036fbcefac6dd42e7c8ad77ff54b38c5fc0924e6e16ce2d123c95db47c1170ba63dd3f6fc7aa74a29be7adef984031936c4cd1e9e8554 + languageName: node + linkType: hard + "import-cwd@npm:^2.0.0": version: 2.1.0 resolution: "import-cwd@npm:2.1.0" @@ -24284,11 +24483,11 @@ __metadata: linkType: hard "nanoid@npm:^3.3.1, nanoid@npm:^3.3.7": - version: 3.3.7 - resolution: "nanoid@npm:3.3.7" + version: 3.3.8 + resolution: "nanoid@npm:3.3.8" bin: nanoid: bin/nanoid.cjs - checksum: 10/ac1eb60f615b272bccb0e2b9cd933720dad30bf9708424f691b8113826bb91aca7e9d14ef5d9415a6ba15c266b37817256f58d8ce980c82b0ba3185352565679 + checksum: 10/2d1766606cf0d6f47b6f0fdab91761bb81609b2e3d367027aff45e6ee7006f660fb7e7781f4a34799fe6734f1268eeed2e37a5fdee809ade0c2d4eb11b0f9c40 languageName: node linkType: hard @@ -24405,6 +24604,15 @@ __metadata: languageName: node linkType: hard +"node-addon-api@npm:^7.0.0": + version: 7.1.1 + resolution: "node-addon-api@npm:7.1.1" + dependencies: + node-gyp: "npm:latest" + checksum: 10/ee1e1ed6284a2f8cd1d59ac6175ecbabf8978dcf570345e9a8095a9d0a2b9ced591074ae77f9009287b00c402352b38aa9322a34f2199cdc9f567b842a636b94 + languageName: node + linkType: hard + "node-dir@npm:^0.1.10": version: 0.1.17 resolution: "node-dir@npm:0.1.17" @@ -29547,7 +29755,7 @@ __metadata: languageName: node linkType: hard -"sass@npm:^1.19.0, sass@npm:~1.79.0": +"sass@npm:^1.19.0": version: 1.79.3 resolution: "sass@npm:1.79.3" dependencies: @@ -29560,6 +29768,23 @@ __metadata: languageName: node linkType: hard +"sass@npm:~1.83.0": + version: 1.83.0 + resolution: "sass@npm:1.83.0" + dependencies: + "@parcel/watcher": "npm:^2.4.1" + chokidar: "npm:^4.0.0" + immutable: "npm:^5.0.2" + source-map-js: "npm:>=0.6.2 <2.0.0" + dependenciesMeta: + "@parcel/watcher": + optional: true + bin: + sass: sass.js + checksum: 10/cae7c489ffeb1324ac7e766dda60206a6d7a318d0689b490290a32a6414ef1fd0f376f92d45fb1610e507baa6f6594f1a61d4d706df2f105122ff9a83d2a28e1 + languageName: node + linkType: hard + "sax@npm:~1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4"