@carbon/web-components 2.0.2-rc.1 → 2.1.0-rc.1

package/scss/components/slug/slug.scss

@@ -18,6 +18,9 @@
 @use '@carbon/styles/scss/components/slug/index' as *;
 @use '../toggle-tip/toggletip.scss';
 
+// importing tag color tokens for the styling slug in tag component
+@use '@carbon/styles/scss/components/tag/index' as *;
+
 :host(#{$prefix}-slug) {
   @extend .#{$prefix}--slug;
 
@@ -70,7 +73,7 @@
 }
 
 :host(#{$prefix}-slug[open]) {
-  z-index: 1;
+  z-index: 2;
 }
 
 :host(#{$prefix}-slug-action-button) {
@@ -133,3 +136,201 @@
     box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
   }
 }
+
+:host(#{$prefix}-slug[tag='red']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-red;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-red;
+  }
+
+  button:hover {
+    border-color: $tag-color-red;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-red;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='magenta']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-magenta;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-magenta;
+  }
+
+  button:hover {
+    border-color: $tag-color-magenta;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-magenta;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='purple']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-purple;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-purple;
+  }
+
+  button:hover {
+    border-color: $tag-color-purple;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-purple;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='blue']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-blue;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-blue;
+  }
+
+  button:hover {
+    border-color: $tag-color-blue;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-blue;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='cyan']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-cyan;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-cyan;
+  }
+
+  button:hover {
+    border-color: $tag-color-cyan;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-cyan;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='teal']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-teal;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-teal;
+  }
+
+  button:hover {
+    border-color: $tag-color-teal;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-teal;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='green']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-green;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-green;
+  }
+
+  button:hover {
+    border-color: $tag-color-green;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-green;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='cool-gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-cool-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-cool-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-cool-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-cool-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='warm-gray']) {
+  .#{$prefix}--slug__text {
+    color: $tag-color-warm-gray;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $tag-color-warm-gray;
+  }
+
+  button:hover {
+    border-color: $tag-color-warm-gray;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $tag-color-warm-gray;
+    }
+  }
+}
+
+:host(#{$prefix}-slug[tag='high-contrast']) {
+  .#{$prefix}--slug__text {
+    color: $text-inverse;
+  }
+
+  .#{$prefix}--slug__text::before {
+    background: $text-inverse;
+  }
+
+  button:hover {
+    border-color: $text-inverse;
+
+    .#{$prefix}--slug__text::before {
+      background-color: $text-inverse;
+    }
+  }
+}

package/scss/components/tag/tag.scss

@@ -101,6 +101,10 @@ $css--plex: true !default;
   display: inline-flex;
 }
 
+:host(#{$prefix}-tag) ::slotted([slot='icon']) {
+  @extend .#{$prefix}--tag__custom-icon;
+}
+
 :host(#{$prefix}-tag[filter][disabled]) {
   .#{$prefix}--tag__close-icon {
     cursor: not-allowed;

package/scss/components/tile/tile.scss

@@ -14,6 +14,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/tile/index' as *;
 @use '@carbon/styles/scss/components/link/index' as *;
 @use '@carbon/styles/scss/components/form/index' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/layout' as *;
 
@@ -55,6 +56,7 @@ $css--plex: true !default;
   .#{$prefix}--tile--clickable {
     @extend .#{$prefix}--tile--clickable;
     // Overrides what `.#{$prefix}--link` defines
+    display: block;
     transition: $duration-moderate-01 motion(standard, productive);
 
     &:focus {
@@ -82,6 +84,7 @@ $css--plex: true !default;
   @include emit-layout-tokens();
 
   display: content;
+  position: relative;
   outline: none;
 
   .#{$prefix}--tile__chevron {
@@ -98,6 +101,13 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-clickable-tile) ::slotted(*),
+:host(#{$prefix}-selectable-tile) ::slotted(*) {
+  position: relative;
+  z-index: 1;
+  cursor: pointer;
+}
+
 :host(#{$prefix}-expandable-tile) {
   @extend .#{$prefix}--tile;
   @extend .#{$prefix}--tile--expandable;
@@ -153,3 +163,94 @@ $css--plex: true !default;
 :host(#{$prefix}-expandable-tile[color-scheme='light']) {
   @extend .#{$prefix}--tile--light;
 }
+
+// Slug styles
+:host(#{$prefix}-tile[slug]),
+:host(#{$prefix}-expandable-tile[slug]),
+:host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile,
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile {
+  @include callout-gradient();
+
+  border: 1px solid $border-tile;
+}
+
+:host(#{$prefix}-tile),
+:host(#{$prefix}-expandable-tile),
+:host(#{$prefix}-clickable-tile),
+:host(#{$prefix}-selectable-tile) {
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: $spacing-05;
+    inset-inline-end: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-expandable-tile[slug]):hover {
+  @include callout-gradient();
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::after,
+:host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile::before {
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  content: '';
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity $duration-fast-02 motion(standard, productive);
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile::before,
+:host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile::before {
+  @include callout-gradient('hover');
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile:hover::before,
+:host(#{$prefix}-clickable-tile[slug]) .#{$prefix}--tile:hover::before {
+  opacity: 1;
+}
+
+:host(#{$prefix}-selectable-tile) {
+  ::slotted(#{$prefix}-slug) {
+    inset-inline-end: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected {
+  border: 1px solid $layer-selected-inverse;
+  .#{$prefix}--tile__checkmark {
+    z-index: 1;
+  }
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
+  @include callout-gradient('selected');
+}
+
+:host(#{$prefix}-selectable-tile[slug]) .#{$prefix}--tile--is-selected::after {
+  opacity: 1;
+}
+
+:host(#{$prefix}-clickable-tile) {
+  ::slotted(#{$prefix}-slug) {
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-expandable-tile[slug]) {
+  overflow: visible;
+}
+
+:host(#{$prefix}-tile[slug][has-rounded-corners]),
+:host(#{$prefix}-expandable-tile[slug][has-rounded-corners]),
+:host(#{$prefix}-clickable-tile[slug][has-rounded-corners]),
+:host(#{$prefix}-selectable-tile[slug][has-rounded-corners]) {
+  @extend .#{$prefix}--tile--slug-rounded;
+
+  .#{$prefix}--tile__chevron {
+    border-bottom-right-radius: $spacing-05;
+  }
+}

package/dist/16-01ebcb7f.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as a}from"./settings-daf72103.js";import{s as t}from"./spread-eaa3f2b9.js";const e=({children:e,...h}={})=>a`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${t(h)}" aria-hidden="true" width="16" height="16" viewBox="0 0 32 32">${e}${e}<path fill="none" d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z" data-icon-path="inner-path"></path><path d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"></path><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"></path></svg>`;export{e as s};

package/dist/16-1664e172.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as t}from"./settings-a675998f.js";import{s as e}from"./spread-6bfe3826.js";const s=({children:s,...a}={})=>t`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${e(a)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${s}<path d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z"></path><path fill="none" d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z" data-icon-path="inner-path" opacity="0"></path></svg>`;export{s};

package/dist/16-228e7358.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as t}from"./settings-a675998f.js";import{s as a}from"./spread-6bfe3826.js";const e=({children:e,...h}={})=>t`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${a(h)}" aria-hidden="true" width="16" height="16" viewBox="0 0 32 32">${e}${e}<path fill="none" d="M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z" data-icon-path="inner-path"></path><path d="M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"></path><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"></path></svg>`;export{e as s};

package/dist/16-36ae18bf.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as e}from"./settings-a675998f.js";import{s}from"./spread-6bfe3826.js";const t=({children:t,...r}={})=>e`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${s(r)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${t}<path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>`;export{t as s};

package/dist/16-46b03826.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as e}from"./settings-a675998f.js";import{s}from"./spread-6bfe3826.js";const t=({children:t,...r}={})=>e`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${s(r)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${t}${t}<path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path></svg>`;export{t as s};

package/dist/16-60b422c4.js

@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * @license
- * 
- * This bundle contains the following third-party dependencies:
- * 
- * flatpickr:
- * 
- flatpickr v4.6.1, @license MIT
- * 
- * lit-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * lit-html:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @lit/reactive-element:
- * 
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- * 
- * @carbon/layout:
- * 
- * Copyright IBM Corp. 2018, 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.
- * 
- * Also refer to the following links for the license of other third-party dependencies:
- * 
- * https://www.npmjs.com/package/lit
- * https://www.npmjs.com/package/@carbon/icons
- * https://www.npmjs.com/package/lodash-es
- */
-
-import{b as t}from"./settings-a675998f.js";import{s}from"./spread-6bfe3826.js";const e=({children:e,...a}={})=>t`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${s(a)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${e}${e}<path d="M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2	c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"></path><path d="M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8	c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z" data-icon-path="inner-path" opacity="0"></path></svg>`;export{e as s};