@carbon/web-components 2.23.0 → 2.24.0

package/scss/components/tile/tile.scss

@@ -11,8 +11,8 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use '../link/link';
 @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 *;
@@ -45,6 +45,10 @@ $css--plex: true !default;
 
   .#{$prefix}--link--disabled {
     display: block;
+    padding: density('padding-inline');
+    background-color: $layer;
+    color: $text-disabled;
+    cursor: not-allowed;
   }
 
   .#{$prefix}--tile {
@@ -64,10 +68,12 @@ $css--plex: true !default;
     }
   }
 
-  &:hover {
-    .#{$prefix}--tile--clickable {
-      color: inherit;
-    }
+  .#{$prefix}--link__icon {
+    display: block;
+  }
+
+  ::slotted([slot='icon']) {
+    @extend .#{$prefix}--tile--icon;
   }
 
   ::slotted(#{$prefix}-ai-label),
@@ -79,10 +85,15 @@ $css--plex: true !default;
 :host(#{$prefix}-radio-tile) {
   @include emit-layout-tokens();
 
+  position: relative;
   display: block;
 
   margin-block-end: $spacing-03;
   outline: none;
+
+  .#{$prefix}--tile {
+    block-size: 100%;
+  }
 }
 
 :host(#{$prefix}-selectable-tile) {
@@ -90,9 +101,13 @@ $css--plex: true !default;
 
   position: relative;
 
-  display: content;
+  display: block;
   outline: none;
 
+  .#{$prefix}--tile {
+    block-size: 100%;
+  }
+
   .#{$prefix}--tile__chevron {
     @extend .#{$prefix}--tile__chevron;
   }
@@ -107,8 +122,9 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-tile) ::slotted(:not([slot])),
 :host(#{$prefix}-clickable-tile) ::slotted(*),
-:host(#{$prefix}-selectable-tile) ::slotted(*) {
+:host(#{$prefix}-selectable-tile) ::slotted(:not([slot])) {
   position: relative;
   z-index: 1;
   cursor: pointer;
@@ -119,6 +135,10 @@ $css--plex: true !default;
   @extend .#{$prefix}--tile--expandable;
   @include emit-layout-tokens();
 
+  ::slotted(#{$prefix}-tile-above-the-fold-content) {
+    display: block;
+  }
+
   ::slotted(#{$prefix}-tile-below-the-fold-content) {
     @extend .#{$prefix}--tile-content__below-the-fold;
   }
@@ -152,6 +172,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-expandable-tile:not([with-interactive]):focus-within) {
+  @include focus-outline('outline');
+}
+
 :host(#{$prefix}-expandable-tile:not([with-interactive])) {
   .#{$prefix}--tile__chevron {
     border: none;
@@ -170,7 +194,8 @@ $css--plex: true !default;
 :host(#{$prefix}-tile[ai-label]),
 :host(#{$prefix}-expandable-tile[ai-label]),
 :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile,
-:host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile {
+:host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile,
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile {
   @include ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
@@ -182,7 +207,9 @@ $css--plex: true !default;
 :host(#{$prefix}-tile),
 :host(#{$prefix}-expandable-tile),
 :host(#{$prefix}-clickable-tile),
-:host(#{$prefix}-selectable-tile) {
+:host(#{$prefix}-selectable-tile),
+:host(#{$prefix}-radio-tile) {
+  ::slotted([slot='decorator']),
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
     position: absolute;
@@ -191,15 +218,21 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-tile[selected]) ::slotted([slot='decorator']),
+:host(#{$prefix}-radio-tile[selected]) ::slotted(#{$prefix}-ai-label),
+:host(#{$prefix}-selectable-tile) ::slotted([slot='decorator']),
 :host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-ai-label),
 :host(#{$prefix}-selectable-tile) ::slotted(#{$prefix}-slug) {
   inset-inline-end: $spacing-08;
+  transition: inset-inline-end $duration-fast-02 motion(standard, productive);
 }
 
 :host(#{$prefix}-expandable-tile[ai-label]):hover {
   @include ai-popover-gradient('default', 0, 'layer');
 }
 
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::before,
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::after,
 :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::before,
 :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::after,
 :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile::before {
@@ -214,6 +247,7 @@ $css--plex: true !default;
   transition: opacity $duration-fast-02 motion(standard, productive);
 }
 
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile::before,
 :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile::before,
 :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile::before {
   @include ai-popover-gradient('hover', 0, 'layer');
@@ -221,11 +255,13 @@ $css--plex: true !default;
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
 }
 
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile:hover::before,
 :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile:hover::before,
 :host(#{$prefix}-clickable-tile[ai-label]) .#{$prefix}--tile:hover::before {
   opacity: 1;
 }
 
+:host(#{$prefix}-radio-tile[ai-label]) .#{$prefix}--tile--is-selected,
 :host(#{$prefix}-selectable-tile[ai-label]) .#{$prefix}--tile--is-selected {
   border: 1px solid $layer-selected-inverse;
   .#{$prefix}--tile__checkmark {
@@ -233,6 +269,7 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-radio-tile[ai-label]),
 :host(#{$prefix}-selectable-tile[ai-label])
   .#{$prefix}--tile--is-selected::after {
   @include ai-popover-gradient('selected', 0, 'layer');
@@ -247,7 +284,8 @@ $css--plex: true !default;
 :host(#{$prefix}-tile[ai-label][has-rounded-corners]),
 :host(#{$prefix}-expandable-tile[ai-label][has-rounded-corners]),
 :host(#{$prefix}-clickable-tile[ai-label][has-rounded-corners]),
-:host(#{$prefix}-selectable-tile[ai-label][has-rounded-corners]) {
+:host(#{$prefix}-selectable-tile[ai-label][has-rounded-corners]),
+:host(#{$prefix}-radio-tile[ai-label][has-rounded-corners]) {
   @extend .#{$prefix}--tile--slug-rounded;
 
   .#{$prefix}--tile__chevron {

package/dist/16-678c0d5c.js

@@ -1,75 +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:
- * 
- * tslib:
- * 
- ****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-*****************************************************************************
- * 
- * flatpickr:
- * 
- *****************************************************************************
-		    Copyright (c) Microsoft Corporation.
-
-		    Permission to use, copy, modify, and/or distribute this software for any
-		    purpose with or without fee is hereby granted.
-
-		    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-		    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-		    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-		    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-		    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-		    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-		    PERFORMANCE OF THIS SOFTWARE.
-		    *****************************************************************************
- * 
- * 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
- * 
- * 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/@floating-ui/dom
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/core
- * https://www.npmjs.com/package/@floating-ui/utils
- */
-
-import{b as t}from"./settings-1096a273.js";import{s}from"./spread-c3902148.js";const a=({children:a,...e}={})=>t`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${s(e)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${a}<path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>`;export{a as s};

package/dist/16-9501e226.js

@@ -1,75 +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:
- * 
- * tslib:
- * 
- ****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-*****************************************************************************
- * 
- * flatpickr:
- * 
- *****************************************************************************
-		    Copyright (c) Microsoft Corporation.
-
-		    Permission to use, copy, modify, and/or distribute this software for any
-		    purpose with or without fee is hereby granted.
-
-		    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-		    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-		    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-		    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-		    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-		    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-		    PERFORMANCE OF THIS SOFTWARE.
-		    *****************************************************************************
- * 
- * 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
- * 
- * 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/@floating-ui/dom
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/core
- * https://www.npmjs.com/package/@floating-ui/utils
- */
-
-import{b as s}from"./settings-1096a273.js";import{s as e}from"./spread-c3902148.js";const t=({children:t,...r}={})=>s`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${e(r)}" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">${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/20-fd76427e.js

@@ -1,75 +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:
- * 
- * tslib:
- * 
- ****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-*****************************************************************************
- * 
- * flatpickr:
- * 
- *****************************************************************************
-		    Copyright (c) Microsoft Corporation.
-
-		    Permission to use, copy, modify, and/or distribute this software for any
-		    purpose with or without fee is hereby granted.
-
-		    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-		    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-		    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-		    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-		    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-		    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-		    PERFORMANCE OF THIS SOFTWARE.
-		    *****************************************************************************
- * 
- * 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
- * 
- * 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/@floating-ui/dom
- * https://www.npmjs.com/package/lodash-es
- * https://www.npmjs.com/package/@floating-ui/core
- * https://www.npmjs.com/package/@floating-ui/utils
- */
-
-import{b as s}from"./settings-1096a273.js";import{s as e}from"./spread-c3902148.js";const t=({children:t,...r}={})=>s`<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" ...="${e(r)}" aria-hidden="true" width="20" height="20" viewBox="0 0 32 32">${t}<path d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"></path></svg>`;export{t as s};