diff --git a/lerna.json b/lerna.json index 84d95fe6832..1ca17960ab3 100644 --- a/lerna.json +++ b/lerna.json @@ -7,7 +7,6 @@ "packages": [ "packages/web-components", "packages/utilities", - "packages/react", "packages/eslint-*", "packages/services-*", "packages/storybook-addon-theme", diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.babelrc new file mode 100644 index 00000000000..74450eed94b --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": [ + "last 1 version", + "Firefox ESR", + "not opera > 0", + "not op_mini > 0", + "not op_mob > 0", + "not android > 0", + "not edge > 0", + "not ie > 0", + "not ie_mob > 0" + ] + } + ] + ], + "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] +} diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore new file mode 100644 index 00000000000..d94d6e13e94 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.cache +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc new file mode 100644 index 00000000000..956b9e0a3d8 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc @@ -0,0 +1,6 @@ +{ + "includePaths": [ + "node_modules", + "../../node_modules" + ] +} \ No newline at end of file diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html new file mode 100644 index 00000000000..2481597656e --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html @@ -0,0 +1,31 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + AI was used to generate this content + + + diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html new file mode 100644 index 00000000000..76b9122b08d --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html @@ -0,0 +1,31 @@ + + + + + carbon-web-components example + + + + + + + + + + AI was used to generate this content + + + diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json new file mode 100644 index 00000000000..33102a6ea85 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json @@ -0,0 +1,23 @@ +{ + "name": "carbon-web-components-slug-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon.", + "license": "Apache-2", + "main": "index.html", + "scripts": { + "build": "parcel build *.html --no-minify --public-url ./", + "clean": "rimraf node_modules dist .cache", + "start": "parcel index.html --port=9000 --no-hmr" + }, + "dependencies": { + "@carbon/styles": "^1.34.0", + "@carbon/web-components": "latest", + "sass": "^1.64.1" + }, + "devDependencies": { + "@babel/core": "^7.0.0-0", + "parcel-bundler": "1.12.3", + "rimraf": "^3.0.2" + } +} diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js new file mode 100644 index 00000000000..9610c2d9c73 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js @@ -0,0 +1,10 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2022 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import '@carbon/web-components/es/components/slug/index.js'; diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss new file mode 100644 index 00000000000..fc85d018b46 --- /dev/null +++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss @@ -0,0 +1,10 @@ +@use '@carbon/styles/scss/reset'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/themes'; + +:root { + @include theme.theme(themes.$white); + background-color: var(--cds-background); + color: var(--cds-text-primary); +} + diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json index e42c89e34a5..30c2fc26256 100644 --- a/packages/carbon-web-components/package.json +++ b/packages/carbon-web-components/package.json @@ -1,5 +1,6 @@ { "name": "@carbon/web-components", + "private": true, "version": "2.0.1", "publishConfig": { "access": "public" @@ -71,7 +72,7 @@ ], "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/styles": "^1.39.0", + "@carbon/styles": "^1.42.0", "flatpickr": "4.6.1", "lit": "^2.7.6", "lodash-es": "^4.17.21" diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.scss b/packages/carbon-web-components/src/components/copy-button/copy-button.scss index e859bcd971c..c84761faa43 100644 --- a/packages/carbon-web-components/src/components/copy-button/copy-button.scss +++ b/packages/carbon-web-components/src/components/copy-button/copy-button.scss @@ -9,10 +9,10 @@ $css--plex: true !default; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/utilities/keyframes' as *; @use '@carbon/styles/scss/motion' as *; +@use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/components/button'; @use '@carbon/styles/scss/components/tooltip'; @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *; diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.scss b/packages/carbon-web-components/src/components/icon-button/icon-button.scss index 79c66edf567..f8fed4d7283 100644 --- a/packages/carbon-web-components/src/components/icon-button/icon-button.scss +++ b/packages/carbon-web-components/src/components/icon-button/icon-button.scss @@ -11,9 +11,14 @@ $css--plex: true !default; @use '@carbon/styles/scss/utilities' as *; @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/layout' as *; +@use '@carbon/styles/scss/theme' as *; @use '../tooltip/tooltip'; @use '../button/button'; :host(#{$prefix}-icon-button) { @include emit-layout-tokens(); } + +:host(#{$prefix}-icon-button[kind='ghost']) ::slotted([slot='icon']) { + color: $icon-primary; +} diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss index ac8017e46fe..a3346699a71 100644 --- a/packages/carbon-web-components/src/components/popover/popover.scss +++ b/packages/carbon-web-components/src/components/popover/popover.scss @@ -60,7 +60,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[open]), -:host(#{$prefix}-popover-content[open]) { +:host(#{$prefix}-popover-content[open]), +:host(#{$prefix}-toggletip[open]), +:host(#{$prefix}-slug[open]) { .#{$prefix}--popover-content { display: block; } @@ -75,7 +77,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[open][caret]), -:host(#{$prefix}-popover-content[open][caret]) { +:host(#{$prefix}-popover-content[open][caret]), +:host(#{$prefix}-toggletip[open]), +:host(#{$prefix}-slug[open]) { .#{$prefix}--popover-caret { display: block; } @@ -89,7 +93,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align^='bottom']), -:host(#{$prefix}-popover-content[align^='bottom']) { +:host(#{$prefix}-popover-content[align^='bottom']), +:host(#{$prefix}-toggletip[alignment^='bottom']), +:host(#{$prefix}-slug[alignment^='bottom']) { .#{$prefix}--popover-caret { bottom: 0; left: 50%; @@ -101,7 +107,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='bottom']), -:host(#{$prefix}-popover-content[align='bottom']) { +:host(#{$prefix}-popover-content[align='bottom']), +:host(#{$prefix}-toggletip[alignment='bottom']), +:host(#{$prefix}-slug[alignment='bottom']) { .#{$prefix}--popover-content { bottom: 0; left: 50%; @@ -110,7 +118,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='bottom-left']), -:host(#{$prefix}-popover-content[align='bottom-left']) { +:host(#{$prefix}-popover-content[align='bottom-left']), +:host(#{$prefix}-toggletip[alignment='bottom-left']), +:host(#{$prefix}-slug[alignment='bottom-left']) { .#{$prefix}--popover-content { bottom: 0; left: 0; @@ -122,7 +132,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='bottom-right']), -:host(#{$prefix}-popover-content[align='bottom-right']) { +:host(#{$prefix}-popover-content[align='bottom-right']), +:host(#{$prefix}-toggletip[alignment='bottom-right']), +:host(#{$prefix}-slug[alignment='bottom-right']) { .#{$prefix}--popover-content { right: 0; bottom: 0; @@ -131,7 +143,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align^='left']), -:host(#{$prefix}-popover-content[align^='left']) { +:host(#{$prefix}-popover-content[align^='left']), +:host(#{$prefix}-toggletip[alignment^='left']), +:host(#{$prefix}-slug[alignment^='left']) { .#{$prefix}--popover-caret { top: 50%; right: 100%; @@ -143,7 +157,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='left']), -:host(#{$prefix}-popover-content[align='left']) { +:host(#{$prefix}-popover-content[align='left']), +:host(#{$prefix}-toggletip[alignment='left']), +:host(#{$prefix}-slug[alignment='left']) { .#{$prefix}--popover-content { top: 50%; right: 100%; @@ -154,7 +170,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='left-bottom']), -:host(#{$prefix}-popover-content[align='left-bottom']) { +:host(#{$prefix}-popover-content[align='left-bottom']), +:host(#{$prefix}-toggletip[alignment='left-bottom']), +:host(#{$prefix}-slug[alignment='left-bottom']) { .#{$prefix}--popover-content { right: 100%; bottom: -50%; @@ -168,7 +186,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='left-top']), -:host(#{$prefix}-popover-content[align='left-top']) { +:host(#{$prefix}-popover-content[align='left-top']), +:host(#{$prefix}-toggletip[alignment='left-top']), +:host(#{$prefix}-slug[alignment='left-top']) { .#{$prefix}--popover-content { top: -50%; right: 100%; @@ -182,7 +202,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align^='right']), -:host(#{$prefix}-popover-content[align^='right']) { +:host(#{$prefix}-popover-content[align^='right']), +:host(#{$prefix}-toggletip[alignment^='right']), +:host(#{$prefix}-slug[alignment^='right']) { .#{$prefix}--popover-caret { top: 50%; left: 100%; @@ -194,7 +216,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='right']), -:host(#{$prefix}-popover-content[align='right']) { +:host(#{$prefix}-popover-content[align='right']), +:host(#{$prefix}-toggletip[alignment='right']), +:host(#{$prefix}-slug[alignment='right']) { .#{$prefix}--popover-content { top: 50%; left: 100%; @@ -205,7 +229,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='right-bottom']), -:host(#{$prefix}-popover-content[align='right-bottom']) { +:host(#{$prefix}-popover-content[align='right-bottom']), +:host(#{$prefix}-toggletip[alignment='right-bottom']), +:host(#{$prefix}-slug[alignment='right-bottom']) { .#{$prefix}--popover-content { bottom: 50%; left: 100%; @@ -214,7 +240,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='right-top']), -:host(#{$prefix}-popover-content[align='right-top']) { +:host(#{$prefix}-popover-content[align='right-top']), +:host(#{$prefix}-toggletip[alignment='right-top']), +:host(#{$prefix}-slug[alignment='right-top']) { .#{$prefix}--popover-content { top: 50%; left: 100%; @@ -226,7 +254,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align^='top']), -:host(#{$prefix}-popover-content[align^='top']) { +:host(#{$prefix}-popover-content[align^='top']), +:host(#{$prefix}-toggletip[alignment^='top']), +:host(#{$prefix}-slug[alignment^='top']) { .#{$prefix}--popover-caret { top: 0; left: 50%; @@ -238,7 +268,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='top']), -:host(#{$prefix}-popover-content[align='top']) { +:host(#{$prefix}-popover-content[align='top']), +:host(#{$prefix}-toggletip[alignment='top']), +:host(#{$prefix}-slug[alignment='top']) { .#{$prefix}--popover-content { top: 0; left: 50%; @@ -247,7 +279,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='top-left']), -:host(#{$prefix}-popover-content[align='top-left']) { +:host(#{$prefix}-popover-content[align='top-left']), +:host(#{$prefix}-toggletip[alignment='top-left']), +:host(#{$prefix}-slug[alignment='top-left']) { .#{$prefix}--popover-content { top: 0; left: 0; @@ -259,7 +293,9 @@ $popover-caret-height: custom-property.get-var( } :host(#{$prefix}-tooltip-content[align='top-right']), -:host(#{$prefix}-popover-content[align='top-right']) { +:host(#{$prefix}-popover-content[align='top-right']), +:host(#{$prefix}-toggletip[alignment='top-right']), +:host(#{$prefix}-slug[alignment='top-right']) { .#{$prefix}--popover-content { top: 0; right: 0; diff --git a/packages/carbon-web-components/src/components/slug/defs.ts b/packages/carbon-web-components/src/components/slug/defs.ts new file mode 100644 index 00000000000..253f0a33dcf --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/defs.ts @@ -0,0 +1,83 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2022, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** + * Slug size. + */ +export enum SLUG_SIZE { + /** + * Mini size. + */ + MINI = 'mini', + + /** + * Extra extra small size. + */ + EXTRA_EXTRA_SMALL = '2xs', + + /** + * Extra small size. + */ + EXTRA_SMALL = 'xs', + + /** + * Small size. + */ + SMALL = 'sm', + + /** + * Medium size. + */ + MEDIUM = 'md', + + /** + * Large size. + */ + LARGE = 'lg', + + /** + * Extra large size. + */ + EXTRA_LARGE = 'xl', +} + +/** + * Slug kind. + */ +export enum SLUG_KIND { + /** + * Default kind. + */ + DEFAULT = '', + + /** + * Hollow kind. + */ + HOLLOW = 'hollow', + + /** + * Inline kind. + */ + INLINE = 'inline', +} + +/** + * Slug dot type. + */ +export enum SLUG_DOT_TYPE { + /** + * Default dot type. + */ + DEFAULT = '', + + /** + * Hollow dot type. + */ + HOLLOW = 'hollow', +} diff --git a/packages/carbon-web-components/src/components/slug/index.ts b/packages/carbon-web-components/src/components/slug/index.ts new file mode 100644 index 00000000000..ab6a8f7b0e1 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/index.ts @@ -0,0 +1,11 @@ +/** + * @license + * + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import './slug'; +import './slug-action-button'; diff --git a/packages/carbon-web-components/src/components/slug/slug-action-button.ts b/packages/carbon-web-components/src/components/slug/slug-action-button.ts new file mode 100644 index 00000000000..f2507f2b0d3 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-action-button.ts @@ -0,0 +1,30 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { property } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; +import CDSButton from '../button/button'; +import styles from './slug.scss'; +import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; + +/** + * Slug action button. + * + * @element cds-slug-action-button + */ +@customElement(`${prefix}-slug-action-button`) +export default class CDSSlugActionButton extends CDSButton { + /** + * The shadow slot this slug-action should be in. + */ + @property({ reflect: true }) + slot = 'actions'; + + static styles = styles; +} diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss new file mode 100644 index 00000000000..4e12ed6cd6a --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-story.scss @@ -0,0 +1,48 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/type' as *; + +.slug-container { + display: flex; + margin-bottom: $spacing-12; + align-items: flex-start; + + > * { + margin-left: $spacing-07; + } +} + +p { + @include type-style('body-compact-01'); +} + +.bold { + font-weight: 600; +} + +.secondary { + color: $text-secondary; +} + +h1 { + margin-bottom: $spacing-05; +} + +hr { + border: 0; + height: 1px; + background: $border-subtle; + margin-top: $spacing-07; + margin-bottom: $spacing-07; +} diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts new file mode 100644 index 00000000000..86f021fce64 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-story.ts @@ -0,0 +1,252 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { select } from '@storybook/addon-knobs'; +// Below path will be there when an application installs `carbon-web-components` package. +// In our dev env, we auto-generate the file and re-map below path to to point to the generated file. +// @ts-ignore +import Filter16 from 'carbon-web-components/es/icons/filter/16'; +import View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; + +import textNullable from '../../../.storybook/knob-text-nullable'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; +import './index'; +import '../icon-button/index'; +import styles from './slug-story.scss'; + +import { POPOVER_ALIGNMENT } from '../popover/defs'; +import { SLUG_SIZE } from './defs'; + +const tooltipAlignments = { + [`top`]: POPOVER_ALIGNMENT.TOP, + [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT, + [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT, + [`bottom`]: POPOVER_ALIGNMENT.BOTTOM, + [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT, + [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT, + [`left`]: POPOVER_ALIGNMENT.LEFT, + [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM, + [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP, + [`right`]: POPOVER_ALIGNMENT.RIGHT, + [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM, + [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP, +}; + +const sizes = { + [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI, + [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL, + [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL, + [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL, + [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM, + [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE, + [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE, +}; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const hollowContent = html`AI was used to generate this content`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +export const Default = (args) => { + return html` + +
+ ${content} + ${content} + ${content} + ${content} + ${content} + ${content} + ${content} +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+
+ + ${content} + + + ${content} + + + ${content} + +
+
+ + ${content} + + + ${content} + + + ${content} + +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+
+ + ${hollowContent} + + + ${hollowContent} + + + ${hollowContent} + +
+ `; +}; + +export const Playground = (args) => { + const { alignment, aiTextLabel, size, kind, dotType } = + args?.[`${prefix}-slug`] ?? {}; + return html` + +
+ + ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content} + ${kind === 'hollow' || dotType === 'hollow' ? '' : actions} + +
+ `; +}; + +Playground.parameters = { + knobs: { + [`${prefix}-slug`]: () => { + const kind = select( + 'Kind (kind)', + ['default', 'hollow', 'inline'], + 'default' + ); + const dotType = + kind === 'inline' + ? select('DotType (dotType)', ['default', 'hollow'], 'default') + : ``; + + return { + alignment: select( + 'Slug alignment to trigger button (alignment)', + tooltipAlignments, + POPOVER_ALIGNMENT.BOTTOM + ), + size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM), + kind, + dotType, + aiTextLabel: textNullable('Ai text label', ''), + }; + }, + }, +}; + +export default { + title: 'Experimental/Slug', +}; diff --git a/packages/carbon-web-components/src/components/slug/slug.scss b/packages/carbon-web-components/src/components/slug/slug.scss new file mode 100644 index 00000000000..05d3e2b45bc --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug.scss @@ -0,0 +1,129 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/components/slug/index' as *; +@use '../toggle-tip/toggletip.scss'; + +:host(#{$prefix}-slug) { + @extend .#{$prefix}--slug; + + .#{$prefix}--slug__text { + @include font-family('sans'); + } +} + +:host(#{$prefix}-slug[enabled]) { + .#{$prefix}--popover-content { + border: 1px solid $border-subtle; + border-radius: $spacing-05; + // 84px seems to make this fully opaque? + backdrop-filter: blur(25px); + background: linear-gradient( + 0deg, + $slug-callout-aura-start 0%, + $slug-callout-aura-end 33%, + transparent 100% + ), + linear-gradient( + 180deg, + $slug-callout-gradient-top 0%, + $slug-callout-gradient-bottom 100% + ) + rgba(0, 0, 0, 0.01); + // box-shadow seems to match the spec better + // than the same values plugged into `drop-shadow` + // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2)); + box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2); + color: $text-primary; + min-inline-size: to-rem(280px); + } + + .#{$prefix}--toggletip-actions { + position: absolute; + justify-content: flex-end; + background: $layer-accent; + border-end-end-radius: to-rem(15px); + border-end-start-radius: to-rem(15px); + column-gap: 0; + inline-size: 100%; + inset-block-end: 0; + inset-inline-end: 0; + } + + .#{$prefix}--toggletip-content { + // This sets the max size to the size of the action bar with 3 buttons + max-inline-size: to-rem(334px); + padding-block-end: $spacing-11; + padding-block-start: $spacing-07; + padding-inline: $spacing-07; + + --cds-button-focus-color: var(--cds-focus); + } +} + +:host(#{$prefix}-slug-action-button) { + .#{$prefix}--btn--primary { + order: 1; + border-end-end-radius: 1rem; + } +} + +:host( + #{$prefix}-slug[kind='inline']:not([size='md']):not([size='lg']):not( + [size='xl'] + ) + ) { + .#{$prefix}--slug__button { + font-size: $spacing-04; + } +} + +:host(#{$prefix}-slug[kind='inline'][size='lg']), +:host(#{$prefix}-slug[kind='inline'][size='xl']) { + .#{$prefix}--slug__button { + font-size: $spacing-05; + } +} + +:host(#{$prefix}-slug[dot-type='hollow']), +:host(#{$prefix}-slug[kind='hollow']) { + @extend .#{$prefix}--slug--hollow; + + .#{$prefix}--slug__button--hollow:hover { + border-color: $slug-hollow-hover; + color: $slug-hollow-hover; + } + + .#{$prefix}--toggletip-content { + row-gap: 0; + } + + .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before { + block-size: $spacing-03; + inline-size: $spacing-03; + } +} + +:host(#{$prefix}-slug:not([kind='inline'])) { + .#{$prefix}--slug__button:focus { + border: $background; + } +} + +:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) { + .#{$prefix}--popover-caret { + background: $border-subtle; + } +} diff --git a/packages/carbon-web-components/src/components/slug/slug.ts b/packages/carbon-web-components/src/components/slug/slug.ts new file mode 100644 index 00000000000..6d0bec8c5c4 --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug.ts @@ -0,0 +1,101 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { classMap } from 'lit/directives/class-map.js'; +import { html } from 'lit'; +import { property } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; +import CDSToggleTip from '../toggle-tip/toggletip'; +import styles from './slug.scss'; +import { SLUG_SIZE, SLUG_KIND, SLUG_DOT_TYPE } from './defs'; +import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; + +/** + * Basic slug. + * + * @element cds-slug + */ +@customElement(`${prefix}-slug`) +export default class CDSSlug extends CDSToggleTip { + /** + * Slug size should be mini, 2xs, xs, sm, md, lg, xl. + */ + @property({ reflect: true }) + size = SLUG_SIZE.MEDIUM; + + /** + * Specify the type of Slug, from the following list of types: (default, hollow, inline) + */ + @property({ reflect: true }) + kind = SLUG_KIND.DEFAULT; + + /** + * Specify the type of dot that should be rendered in front of the inline variant: (default, hollow) + */ + @property({ reflect: true, attribute: 'dot-type' }) + dotType = SLUG_DOT_TYPE.DEFAULT; + + /** + * Specify the correct translation of the AI text + */ + @property({ attribute: 'ai-text' }) + aiText = 'AI'; + + /** + * Specify additional text to be rendered next to the AI label in the inline variant + */ + @property({ attribute: 'ai-text-label' }) + aiTextLabel = ''; + + protected _renderToggleTipLabel = () => { + return html``; + }; + + protected _renderTooltipButton = () => { + const { size, kind, aiText, aiTextLabel } = this; + const classes = classMap({ + [`${prefix}--toggletip-button`]: true, + [`${prefix}--slug__button`]: true, + [`${prefix}--slug__button--${size}`]: size, + [`${prefix}--slug__button--${kind}`]: kind, + [`${prefix}--slug__button--inline-with-content`]: + kind === SLUG_KIND.INLINE && aiTextLabel, + }); + return html` + + `; + }; + + updated(changedProperties) { + super.updated(changedProperties); + if ( + this.kind !== SLUG_KIND.HOLLOW && + this.dotType !== SLUG_DOT_TYPE.HOLLOW + ) { + this.setAttribute('enabled', ''); + } else { + this.removeAttribute('enabled'); + } + } + + static styles = styles; +} diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss index ee20ccfe30d..9cce2504793 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss @@ -14,10 +14,11 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/components/toggletip/index' as *; @use '@carbon/styles/scss/components/tooltip/index' as *; -@use '@carbon/styles/scss/components/popover/index' as *; @use '@carbon/styles/scss/utilities/button-reset'; +@use '../popover/popover.scss' as *; -:host(#{$prefix}-toggletip) { +:host(#{$prefix}-toggletip), +:host(#{$prefix}-slug) { // TODO: audit @extend .#{$prefix}--toggletip; diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts index d3e471889a1..75e0168d12e 100644 --- a/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts +++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts @@ -12,6 +12,8 @@ import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import Information16 from '@carbon/icons/lib/information/16'; import { prefix } from '../../globals/settings'; +import HostListener from '../../globals/decorators/host-listener'; +import HostListenerMixin from '../../globals/mixins/host-listener'; import FocusMixin from '../../globals/mixins/focus'; import { POPOVER_ALIGNMENT } from '../popover/defs'; import styles from './toggletip.scss'; @@ -22,22 +24,81 @@ import styles from './toggletip.scss'; * @element cds-toggletip */ @customElement(`${prefix}-toggletip`) -class CDSToggletip extends FocusMixin(LitElement) { +class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) { /** * How the tooltip is aligned to the trigger button. */ - @property() + @property({ reflect: true }) alignment = POPOVER_ALIGNMENT.TOP; @property({ type: Boolean, reflect: true }) open = false; - private _handleClick = () => { + protected _handleClick = () => { this.open = !this.open; }; + /** + * Handles `keydown` event on this element. + */ + @HostListener('keydown') + // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to + protected _handleKeydown = async (event) => { + if (event.key === 'Escape') { + this.open = false; + } + }; + + /** + * Handles `blur` event handler on the document this element is in. + * + * @param event The event. + */ + @HostListener('focusout') + // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to + protected _handleFocusOut(event: FocusEvent) { + if (!this.contains(event.relatedTarget as Node)) { + this.open = false; + } + } + + protected _renderToggleTipLabel = () => { + return html` + + + + `; + }; + + protected _renderTooltipButton = () => { + return html` + + `; + }; + + protected _renderTooltipContent = () => { + return html` + + +
+ +
+ +
+
+ + + + `; + }; + render() { - const { alignment, id, open } = this; + const { alignment, open } = this; const classes = classMap({ [`${prefix}--popover-container`]: true, [`${prefix}--popover--caret`]: true, @@ -48,29 +109,11 @@ class CDSToggletip extends FocusMixin(LitElement) { [`${prefix}--toggletip--open`]: open, }); return html` - - - + ${this._renderToggleTipLabel()} - + ${this._renderTooltipButton()} + ${this._renderTooltipContent()} - - - -
- -
- -
-
- - - - `; diff --git a/packages/eslint-config-ibmdotcom/package.json b/packages/eslint-config-ibmdotcom/package.json index b11639f933c..e5c0d927a69 100644 --- a/packages/eslint-config-ibmdotcom/package.json +++ b/packages/eslint-config-ibmdotcom/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/eslint-config-ibmdotcom", "private": true, - "version": "2.0.0-beta.0", + "version": "1.44.0", "description": "ESLint configuration for Carbon for IBM.com", "license": "Apache-2.0", "main": "index.js", @@ -18,7 +18,7 @@ "eslint": "^6.8.0" }, "dependencies": { - "@carbon/eslint-plugin-react-prop-type-comments": "2.0.0-beta.0", + "@carbon/eslint-plugin-react-prop-type-comments": "1.43.0", "@typescript-eslint/eslint-plugin": "^5.43.0", "@typescript-eslint/parser": "^5.43.0", "babel-eslint": "^10.1.0", diff --git a/packages/eslint-plugin-ibmdotcom-import-rules/package.json b/packages/eslint-plugin-ibmdotcom-import-rules/package.json index 666a40995ed..860f6b457cd 100644 --- a/packages/eslint-plugin-ibmdotcom-import-rules/package.json +++ b/packages/eslint-plugin-ibmdotcom-import-rules/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/eslint-plugin-ibmdotcom-import-rules", "private": true, - "version": "2.0.0-beta.0", + "version": "1.43.0", "description": "ESLint plugin for Carbon for IBM.com checking imports", "license": "Apache-2.0", "main": "lib/index.js", diff --git a/packages/eslint-plugin-react-prop-type-comments/package.json b/packages/eslint-plugin-react-prop-type-comments/package.json index 2e771949a57..e83407267cf 100644 --- a/packages/eslint-plugin-react-prop-type-comments/package.json +++ b/packages/eslint-plugin-react-prop-type-comments/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/eslint-plugin-react-prop-type-comments", "private": true, - "version": "2.0.0-beta.0", + "version": "1.43.0", "description": "ESLint plugin for Carbon for IBM.com checking React prop type comments", "license": "Apache-2.0", "main": "lib/index.js", diff --git a/packages/services-store/package.json b/packages/services-store/package.json index e1212ee3049..d3390cea757 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": "2.0.0-beta.0", + "version": "1.53.0", "description": "Redux store for Carbon for IBM.com Services", "license": "Apache-2.0", "main": "lib/store.js", @@ -30,8 +30,8 @@ "test:unit": "yarn jest" }, "dependencies": { - "@carbon/ibmdotcom-services": "2.0.0-beta.0", - "@carbon/ibmdotcom-utilities": "2.0.0-beta.0", + "@carbon/ibmdotcom-services": "1.53.0", + "@carbon/ibmdotcom-utilities": "1.53.0", "carbon-components": "10.58.3", "redux": "^4.0.0", "redux-logger": "^3.0.0", diff --git a/packages/services/package.json b/packages/services/package.json index edb595f8754..c9d5e22c862 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.0.0-beta.0", + "version": "1.53.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -46,7 +46,7 @@ }, "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/ibmdotcom-utilities": "2.0.0-beta.0", + "@carbon/ibmdotcom-utilities": "1.53.0", "@carbon/telemetry": "0.1.0", "axios": "^0.27.2", "marked": "^4.0.10", diff --git a/packages/storybook-addon-theme/package.json b/packages/storybook-addon-theme/package.json index 889e448657a..5c22692e196 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": "2.0.0-beta.0", + "version": "1.44.0", "description": "Storybook add-on for Carbon theme chooser", "license": "Apache-2.0", "main": "es/index.js", diff --git a/packages/stylelint-config-ibmdotcom/package.json b/packages/stylelint-config-ibmdotcom/package.json index f88d91be3e7..d1426f29fe6 100644 --- a/packages/stylelint-config-ibmdotcom/package.json +++ b/packages/stylelint-config-ibmdotcom/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/stylelint-config-ibmdotcom", "private": true, - "version": "2.0.0-beta.0", + "version": "1.43.0", "description": "Stylelint configuration for Carbon for IBM.com", "license": "Apache-2.0", "main": "index.js", diff --git a/packages/styles/package.json b/packages/styles/package.json index 85f3c492bae..2a289ebfd3a 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.0.0-beta.1", + "version": "1.53.0", "license": "Apache-2.0", "main": "dist/ibm-dotcom-styles.min.css", "module": "src/scss", diff --git a/packages/utilities/package.json b/packages/utilities/package.json index a3ddb0edcef..e06fbd6e110 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.0.0-beta.0", + "version": "1.53.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/web-components/package.json b/packages/web-components/package.json index a81ae429ad3..9082b10927c 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/ibmdotcom-web-components", - "version": "2.0.0-beta.0", + "version": "1.38.0", "description": "Carbon for IBM.com Web Components", "license": "Apache-2.0", "exports": { @@ -90,9 +90,9 @@ "wca": "web-component-analyzer analyze src --outFile custom-elements.json" }, "dependencies": { - "@carbon/ibmdotcom-services": "2.0.0-beta.0", - "@carbon/ibmdotcom-styles": "2.0.0-beta.1", - "@carbon/ibmdotcom-utilities": "2.0.0-beta.0", + "@carbon/ibmdotcom-services": "1.53.0", + "@carbon/ibmdotcom-styles": "1.53.0", + "@carbon/ibmdotcom-utilities": "1.53.0", "@carbon/layout": "^11.20.0", "@carbon/motion": "^11.0.0", "@carbon/styles": "^1.36.0", @@ -130,7 +130,7 @@ "@babel/preset-react": "~7.12.1", "@babel/template": "~7.12.0", "@babel/traverse": "~7.23.0", - "@carbon/ibmdotcom-services-store": "2.0.0-beta.0", + "@carbon/ibmdotcom-services-store": "1.53.0", "@carbon/icon-helpers": "10.43.1", "@carbon/icons": "^11.23.0", "@carbon/pictograms-react": "11.45.2", diff --git a/yarn.lock b/yarn.lock index 9ad6d0670b9..fdefccd1b19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2599,7 +2599,7 @@ __metadata: version: 0.0.0-use.local resolution: "@carbon/eslint-config-ibmdotcom@workspace:packages/eslint-config-ibmdotcom" dependencies: - "@carbon/eslint-plugin-react-prop-type-comments": "npm:2.0.0-beta.0" + "@carbon/eslint-plugin-react-prop-type-comments": "npm:1.43.0" "@typescript-eslint/eslint-plugin": "npm:^5.43.0" "@typescript-eslint/parser": "npm:^5.43.0" babel-eslint: "npm:^10.1.0" @@ -2631,7 +2631,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/eslint-plugin-react-prop-type-comments@npm:2.0.0-beta.0, @carbon/eslint-plugin-react-prop-type-comments@workspace:packages/eslint-plugin-react-prop-type-comments": +"@carbon/eslint-plugin-react-prop-type-comments@npm:1.43.0, @carbon/eslint-plugin-react-prop-type-comments@workspace:packages/eslint-plugin-react-prop-type-comments": version: 0.0.0-use.local resolution: "@carbon/eslint-plugin-react-prop-type-comments@workspace:packages/eslint-plugin-react-prop-type-comments" peerDependencies: @@ -2664,7 +2664,7 @@ __metadata: languageName: node linkType: hard -"@carbon/ibmdotcom-services-store@npm:2.0.0-beta.0, @carbon/ibmdotcom-services-store@workspace:packages/services-store": +"@carbon/ibmdotcom-services-store@npm:1.53.0, @carbon/ibmdotcom-services-store@workspace:packages/services-store": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-services-store@workspace:packages/services-store" dependencies: @@ -2675,8 +2675,8 @@ __metadata: "@babel/plugin-transform-optional-chaining": "npm:~7.23.0" "@babel/plugin-transform-typescript": "npm:~7.12.0" "@babel/preset-modules": "npm:^0.1.5" - "@carbon/ibmdotcom-services": "npm:2.0.0-beta.0" - "@carbon/ibmdotcom-utilities": "npm:2.0.0-beta.0" + "@carbon/ibmdotcom-services": "npm:1.53.0" + "@carbon/ibmdotcom-utilities": "npm:1.53.0" async-done: "npm:^1.3.0" babel-eslint: "npm:^10.1.0" babel-jest: "npm:^24.0.0" @@ -2701,7 +2701,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/ibmdotcom-services@npm:2.0.0-beta.0, @carbon/ibmdotcom-services@workspace:packages/services": +"@carbon/ibmdotcom-services@npm:1.53.0, @carbon/ibmdotcom-services@workspace:packages/services": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-services@workspace:packages/services" dependencies: @@ -2714,7 +2714,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.0.0-beta.0" + "@carbon/ibmdotcom-utilities": "npm:1.53.0" "@carbon/telemetry": "npm:0.1.0" "@rollup/plugin-babel": "npm:^5.3.1" "@rollup/plugin-commonjs": "npm:^21.0.3" @@ -2748,7 +2748,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/ibmdotcom-styles@npm:2.0.0-beta.1, @carbon/ibmdotcom-styles@workspace:packages/styles": +"@carbon/ibmdotcom-styles@npm:1.53.0, @carbon/ibmdotcom-styles@workspace:packages/styles": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles" dependencies: @@ -2771,7 +2771,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/ibmdotcom-utilities@npm:2.0.0-beta.0, @carbon/ibmdotcom-utilities@workspace:packages/utilities": +"@carbon/ibmdotcom-utilities@npm:1.53.0, @carbon/ibmdotcom-utilities@workspace:packages/utilities": version: 0.0.0-use.local resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities" dependencies: @@ -2836,10 +2836,10 @@ __metadata: "@babel/preset-react": "npm:~7.12.1" "@babel/template": "npm:~7.12.0" "@babel/traverse": "npm:~7.23.0" - "@carbon/ibmdotcom-services": "npm:2.0.0-beta.0" - "@carbon/ibmdotcom-services-store": "npm:2.0.0-beta.0" - "@carbon/ibmdotcom-styles": "npm:2.0.0-beta.1" - "@carbon/ibmdotcom-utilities": "npm:2.0.0-beta.0" + "@carbon/ibmdotcom-services": "npm:1.53.0" + "@carbon/ibmdotcom-services-store": "npm:1.53.0" + "@carbon/ibmdotcom-styles": "npm:1.53.0" + "@carbon/ibmdotcom-utilities": "npm:1.53.0" "@carbon/icon-helpers": "npm:10.43.1" "@carbon/icons": "npm:^11.23.0" "@carbon/icons-react": "npm:10.49.2" @@ -3157,7 +3157,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/styles@npm:^1.36.0, @carbon/styles@npm:^1.39.0": +"@carbon/styles@npm:^1.36.0": version: 1.41.2 resolution: "@carbon/styles@npm:1.41.2" dependencies: @@ -3285,7 +3285,7 @@ __metadata: "@babel/traverse": "npm:~7.23.0" "@carbon/icon-helpers": "npm:^10.28.0" "@carbon/icons": "npm:^10.48.0" - "@carbon/styles": "npm:^1.39.0" + "@carbon/styles": "npm:^1.42.0" "@open-wc/semantic-dom-diff": "npm:~0.18.0" "@percy-io/in-percy": "npm:^0.1.11" "@percy/cli": "npm:^1.8.1"