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

package/es/components/tag/tag.rtl.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  '@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm,:host(cds-tag[size=sm]){--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md,:host(cds-tag){--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--tag,:host(cds-tag){--cds-layout-size-height-xs:1.125rem;--cds-layout-size-height-sm:1.125rem;--cds-layout-size-height-md:1.5rem;--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939);display:inline-flex;align-items:center;justify-content:center;border-radius:.9375rem;margin:.25rem;cursor:default;max-inline-size:100%;min-block-size:var(--cds-layout-size-height-local);min-inline-size:2rem;padding-inline:.5rem;vertical-align:middle;word-break:break-word}.cds--layout--size-xs .cds--tag,.cds--layout--size-xs :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-xs)}.cds--layout--size-sm .cds--tag,.cds--layout--size-sm :host(cds-tag),:host(cds-tag[size=sm]) .cds--tag,:host(cds-tag[size=sm]) :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-sm)}.cds--layout--size-md .cds--tag,.cds--layout--size-md :host(cds-tag),:host(cds-tag) .cds--tag,:host(cds-tag) :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-md)}.cds--tag .cds--tag__close-icon:hover,.cds--tag.cds--tag--interactive:hover,:host(cds-tag) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag:not(:first-child),:host(cds-tag:not(:first-child)){margin-inline-start:0}.cds--tag--red,:host(cds-tag[type=red]){background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#750e13)}.cds--tag--red .cds--tag__close-icon:hover,.cds--tag--red.cds--tag--interactive:hover,:host(cds-tag[type=red]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-red,#ffc2c5)}.cds--tag--magenta,:host(cds-tag[type=magenta]){background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#740937)}.cds--tag--magenta .cds--tag__close-icon:hover,.cds--tag--magenta.cds--tag--interactive:hover,:host(cds-tag[type=magenta]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-magenta,#ffbdda)}.cds--tag--purple,:host(cds-tag[type=purple]){background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#491d8b)}.cds--tag--purple .cds--tag__close-icon:hover,.cds--tag--purple.cds--tag--interactive:hover,:host(cds-tag[type=purple]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-purple,#dcc7ff)}.cds--tag--blue,:host(cds-tag[type=blue]){background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#002d9c)}.cds--tag--blue .cds--tag__close-icon:hover,.cds--tag--blue.cds--tag--interactive:hover,:host(cds-tag[type=blue]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-blue,#b8d3ff)}.cds--tag--cyan,:host(cds-tag[type=cyan]){background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#003a6d)}.cds--tag--cyan .cds--tag__close-icon:hover,.cds--tag--cyan.cds--tag--interactive:hover,:host(cds-tag[type=cyan]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-cyan,#99daff)}.cds--tag--teal,:host(cds-tag[type=teal]){background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#004144)}.cds--tag--teal .cds--tag__close-icon:hover,.cds--tag--teal.cds--tag--interactive:hover,:host(cds-tag[type=teal]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-teal,#57e5e5)}.cds--tag--green,:host(cds-tag[type=green]){background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#044317)}.cds--tag--green .cds--tag__close-icon:hover,.cds--tag--green.cds--tag--interactive:hover,:host(cds-tag[type=green]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-green,#74e792)}.cds--tag--gray,:host(cds-tag[type=gray]){background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939)}.cds--tag--gray .cds--tag__close-icon:hover,.cds--tag--gray.cds--tag--interactive:hover,:host(cds-tag[type=gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag--cool-gray,:host(cds-tag[type=cool-gray]){background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#343a3f)}.cds--tag--cool-gray .cds--tag__close-icon:hover,.cds--tag--cool-gray.cds--tag--interactive:hover,:host(cds-tag[type=cool-gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-cool-gray,#cdd3da)}.cds--tag--warm-gray,:host(cds-tag[type=warm-gray]){background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#3c3838)}.cds--tag--warm-gray .cds--tag__close-icon:hover,.cds--tag--warm-gray.cds--tag--interactive:hover,:host(cds-tag[type=warm-gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-warm-gray,#d8d0cf)}.cds--tag--high-contrast,:host(cds-tag[type=high-contrast]){background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds--tag--high-contrast .cds--tag__close-icon:hover,.cds--tag--high-contrast.cds--tag--interactive:hover,:host(cds-tag[type=high-contrast]) .cds--tag__close-icon:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds--tag--outline,:host(cds-tag[type=outline]){background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);box-shadow:0 0 0 1px var(--cds-background-inverse,#393939)}.cds--tag--outline .cds--tag__close-icon:hover,.cds--tag--outline.cds--tag--interactive:hover,:host(cds-tag[type=outline]) .cds--tag__close-icon:hover{background-color:var(--cds-layer-hover)}.cds--tag--disabled,.cds--tag--filter.cds--tag--disabled,.cds--tag--interactive.cds--tag--disabled,:host(cds-tag[disabled]){background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));box-shadow:none}.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--filter.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--interactive.cds--tag--disabled.cds--tag--interactive:hover,:host(cds-tag[disabled]) .cds--tag__close-icon:hover{background-color:var(--cds-layer)}.cds--tag--disabled:hover,.cds--tag--filter.cds--tag--disabled:hover,.cds--tag--interactive.cds--tag--disabled:hover{cursor:not-allowed}.cds--tag__label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.cds--tag--interactive:focus{box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--interactive:hover{cursor:pointer}.cds--tag--filter,:host(cds-tag[filter]){cursor:pointer;padding-block-end:0;padding-block-start:0;padding-inline-end:0}.cds--tag--filter:hover{outline:0}.cds--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--tag__close-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;margin:0 .125rem 0 0;background-color:transparent;block-size:var(--cds-layout-size-height-local);color:currentColor;cursor:pointer;inline-size:var(--cds-layout-size-height-local);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),box-shadow 70ms cubic-bezier(.2,0,.38,.9)}.cds--tag__close-icon svg{fill:currentColor}.cds--tag__custom-icon{flex-shrink:0;padding:0;border:0;background-color:transparent;block-size:1rem;color:currentColor;inline-size:1rem;margin-inline-end:.25rem;outline:0}.cds--tag__custom-icon svg{fill:currentColor}.cds--tag--disabled .cds--tag__close-icon,:host(cds-tag[disabled]) .cds--tag__close-icon{cursor:not-allowed}.cds--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--high-contrast .cds--tag__close-icon:focus,:host(cds-tag[type=high-contrast]) .cds--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,:host(:host(cds-tag[disabled]cds-tag[filter])) .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--filter.cds--tag--disabled svg,:host(:host(cds-tag[disabled]cds-tag[filter])) svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tag--sm.cds--tag--filter,:host(:host(cds-tag[filter]cds-tag[size=sm])){padding-inline-end:0}.cds--tag--sm .cds--tag__close-icon,:host(cds-tag[size=sm]) .cds--tag__close-icon{margin-inline-start:.3125rem}.cds--tag.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;background-color:var(--cds-skeleton-background,#e8e8e8);color:var(--cds-text-primary,#161616);overflow:hidden;inline-size:3.75rem}.cds--tag.cds--skeleton:active,.cds--tag.cds--skeleton:focus,.cds--tag.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--tag.cds--skeleton::before{position:absolute;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--tag.cds--skeleton::before{animation:none}}.cds--tag.cds--skeleton .cds--tag__close-icon:hover,.cds--tag.cds--skeleton.cds--tag--interactive:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}@media not all and (min-resolution >= 0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tag.cds--skeleton{transform:translateZ(0)}}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag,:host(cds-tag){outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon svg,.cds--tag__custom-icon svg{fill:ButtonText}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}:host(cds-tag){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;--cds-layout-size-height-xs:1.125rem;--cds-layout-size-height-sm:1.125rem;--cds-layout-size-height-md:1.5rem}:host(cds-tag[size=sm]) .cds--tag__close-icon{width:1.125rem;height:1.125rem;margin-right:.3125rem}:host(cds-tag[filter]){display:none}:host(cds-tag[filter][size=sm]){padding-left:0}:host(cds-tag[filter][open]){display:inline-flex}:host(cds-tag[filter][disabled]) .cds--tag__close-icon{cursor:not-allowed}:host(cds-tag[filter][disabled]) .cds--tag__close-icon,:host(cds-tag[filter][disabled]) .cds--tag__close-icon:hover{background-color:transparent}:host(cds-tag.cds--skeleton){position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:3.75rem;overflow:hidden}:host(cds-tag.cds--skeleton:active),:host(cds-tag.cds--skeleton:focus),:host(cds-tag.cds--skeleton:hover){border:none;cursor:default;outline:0}:host(cds-tag.cds--skeleton)::before{position:absolute;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){:host(cds-tag.cds--skeleton)::before{animation:none}}',
+  '@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem)}.cds--layout--size-sm,:host(cds-tag[size=sm]){--cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem)}.cds--layout--size-md,:host(cds-tag){--cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--tag,:host(cds-tag){--cds-layout-size-height-xs:1.125rem;--cds-layout-size-height-sm:1.125rem;--cds-layout-size-height-md:1.5rem;--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939);display:inline-flex;align-items:center;justify-content:center;border-radius:.9375rem;margin:.25rem;cursor:default;max-inline-size:100%;min-block-size:var(--cds-layout-size-height-local);min-inline-size:2rem;padding-inline:.5rem;vertical-align:middle;word-break:break-word}.cds--layout--size-xs .cds--tag,.cds--layout--size-xs :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-xs)}.cds--layout--size-sm .cds--tag,.cds--layout--size-sm :host(cds-tag),:host(cds-tag[size=sm]) .cds--tag,:host(cds-tag[size=sm]) :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-sm)}.cds--layout--size-md .cds--tag,.cds--layout--size-md :host(cds-tag),:host(cds-tag) .cds--tag,:host(cds-tag) :host(cds-tag){--cds-layout-size-height:var(--cds-layout-size-height-md)}.cds--tag .cds--tag__close-icon:hover,.cds--tag.cds--tag--interactive:hover,:host(cds-tag) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag:not(:first-child),:host(cds-tag:not(:first-child)){margin-inline-start:0}.cds--tag--red,:host(cds-tag[type=red]){background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#750e13)}.cds--tag--red .cds--tag__close-icon:hover,.cds--tag--red.cds--tag--interactive:hover,:host(cds-tag[type=red]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-red,#ffc2c5)}.cds--tag--magenta,:host(cds-tag[type=magenta]){background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#740937)}.cds--tag--magenta .cds--tag__close-icon:hover,.cds--tag--magenta.cds--tag--interactive:hover,:host(cds-tag[type=magenta]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-magenta,#ffbdda)}.cds--tag--purple,:host(cds-tag[type=purple]){background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#491d8b)}.cds--tag--purple .cds--tag__close-icon:hover,.cds--tag--purple.cds--tag--interactive:hover,:host(cds-tag[type=purple]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-purple,#dcc7ff)}.cds--tag--blue,:host(cds-tag[type=blue]){background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#002d9c)}.cds--tag--blue .cds--tag__close-icon:hover,.cds--tag--blue.cds--tag--interactive:hover,:host(cds-tag[type=blue]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-blue,#b8d3ff)}.cds--tag--cyan,:host(cds-tag[type=cyan]){background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#003a6d)}.cds--tag--cyan .cds--tag__close-icon:hover,.cds--tag--cyan.cds--tag--interactive:hover,:host(cds-tag[type=cyan]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-cyan,#99daff)}.cds--tag--teal,:host(cds-tag[type=teal]){background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#004144)}.cds--tag--teal .cds--tag__close-icon:hover,.cds--tag--teal.cds--tag--interactive:hover,:host(cds-tag[type=teal]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-teal,#57e5e5)}.cds--tag--green,:host(cds-tag[type=green]){background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#044317)}.cds--tag--green .cds--tag__close-icon:hover,.cds--tag--green.cds--tag--interactive:hover,:host(cds-tag[type=green]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-green,#74e792)}.cds--tag--gray,:host(cds-tag[type=gray]){background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939)}.cds--tag--gray .cds--tag__close-icon:hover,.cds--tag--gray.cds--tag--interactive:hover,:host(cds-tag[type=gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-gray,#d1d1d1)}.cds--tag--cool-gray,:host(cds-tag[type=cool-gray]){background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#343a3f)}.cds--tag--cool-gray .cds--tag__close-icon:hover,.cds--tag--cool-gray.cds--tag--interactive:hover,:host(cds-tag[type=cool-gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-cool-gray,#cdd3da)}.cds--tag--warm-gray,:host(cds-tag[type=warm-gray]){background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#3c3838)}.cds--tag--warm-gray .cds--tag__close-icon:hover,.cds--tag--warm-gray.cds--tag--interactive:hover,:host(cds-tag[type=warm-gray]) .cds--tag__close-icon:hover{background-color:var(--cds-tag-hover-warm-gray,#d8d0cf)}.cds--tag--high-contrast,:host(cds-tag[type=high-contrast]){background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds--tag--high-contrast .cds--tag__close-icon:hover,.cds--tag--high-contrast.cds--tag--interactive:hover,:host(cds-tag[type=high-contrast]) .cds--tag__close-icon:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds--tag--outline,:host(cds-tag[type=outline]){background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);box-shadow:0 0 0 1px var(--cds-background-inverse,#393939)}.cds--tag--outline .cds--tag__close-icon:hover,.cds--tag--outline.cds--tag--interactive:hover,:host(cds-tag[type=outline]) .cds--tag__close-icon:hover{background-color:var(--cds-layer-hover)}.cds--tag--disabled,.cds--tag--filter.cds--tag--disabled,.cds--tag--interactive.cds--tag--disabled,:host(cds-tag[disabled]){background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));box-shadow:none}.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--filter.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--interactive.cds--tag--disabled.cds--tag--interactive:hover,:host(cds-tag[disabled]) .cds--tag__close-icon:hover{background-color:var(--cds-layer)}.cds--tag--disabled:hover,.cds--tag--filter.cds--tag--disabled:hover,.cds--tag--interactive.cds--tag--disabled:hover{cursor:not-allowed}.cds--tag__label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.cds--tag--interactive:focus{box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--interactive:hover{cursor:pointer}.cds--tag--filter,:host(cds-tag[filter]){cursor:pointer;padding-block-end:0;padding-block-start:0;padding-inline-end:0}.cds--tag--filter:hover{outline:0}.cds--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--tag__close-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;margin:0 .125rem 0 0;background-color:transparent;block-size:var(--cds-layout-size-height-local);color:currentColor;cursor:pointer;inline-size:var(--cds-layout-size-height-local);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),box-shadow 70ms cubic-bezier(.2,0,.38,.9)}.cds--tag__close-icon svg{fill:currentColor}.cds--tag__custom-icon,:host(cds-tag) ::slotted([slot=icon]){flex-shrink:0;padding:0;border:0;background-color:transparent;block-size:1rem;color:currentColor;inline-size:1rem;margin-inline-end:.25rem;outline:0}.cds--tag__custom-icon svg,:host(cds-tag) ::slotted([slot=icon]) svg{fill:currentColor}.cds--tag--disabled .cds--tag__close-icon,:host(cds-tag[disabled]) .cds--tag__close-icon{cursor:not-allowed}.cds--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--high-contrast .cds--tag__close-icon:focus,:host(cds-tag[type=high-contrast]) .cds--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,:host(:host(cds-tag[disabled]cds-tag[filter])) .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--filter.cds--tag--disabled svg,:host(:host(cds-tag[disabled]cds-tag[filter])) svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tag--sm.cds--tag--filter,:host(:host(cds-tag[filter]cds-tag[size=sm])){padding-inline-end:0}.cds--tag--sm .cds--tag__close-icon,:host(cds-tag[size=sm]) .cds--tag__close-icon{margin-inline-start:.3125rem}.cds--tag.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;background-color:var(--cds-skeleton-background,#e8e8e8);color:var(--cds-text-primary,#161616);overflow:hidden;inline-size:3.75rem}.cds--tag.cds--skeleton:active,.cds--tag.cds--skeleton:focus,.cds--tag.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--tag.cds--skeleton::before{position:absolute;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--tag.cds--skeleton::before{animation:none}}.cds--tag.cds--skeleton .cds--tag__close-icon:hover,.cds--tag.cds--skeleton.cds--tag--interactive:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}@media not all and (min-resolution >= 0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tag.cds--skeleton{transform:translateZ(0)}}}.cds--tag .cds--slug .cds--slug__button--inline,:host(cds-tag) .cds--slug .cds--slug__button--inline{color:currentColor;margin-inline-start:.0625rem}.cds--tag .cds--slug .cds--slug__button--inline .cds--slug__text::before,:host(cds-tag) .cds--slug .cds--slug__button--inline .cds--slug__text::before{background-color:currentColor}.cds--tag .cds--slug .cds--slug__button--inline:hover,:host(cds-tag) .cds--slug .cds--slug__button--inline:hover{border-color:currentColor}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag,:host(cds-tag){outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon svg,.cds--tag__custom-icon svg,:host(cds-tag) ::slotted([slot=icon]) svg{fill:ButtonText}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}:host(cds-tag){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;--cds-layout-size-height-xs:1.125rem;--cds-layout-size-height-sm:1.125rem;--cds-layout-size-height-md:1.5rem}:host(cds-tag[size=sm]) .cds--tag__close-icon{width:1.125rem;height:1.125rem;margin-right:.3125rem}:host(cds-tag[filter]){display:none}:host(cds-tag[filter][size=sm]){padding-left:0}:host(cds-tag[filter][open]){display:inline-flex}:host(cds-tag[filter][disabled]) .cds--tag__close-icon{cursor:not-allowed}:host(cds-tag[filter][disabled]) .cds--tag__close-icon,:host(cds-tag[filter][disabled]) .cds--tag__close-icon:hover{background-color:transparent}:host(cds-tag.cds--skeleton){position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:3.75rem;overflow:hidden}:host(cds-tag.cds--skeleton:active),:host(cds-tag.cds--skeleton:focus),:host(cds-tag.cds--skeleton:hover){border:none;cursor:default;outline:0}:host(cds-tag.cds--skeleton)::before{position:absolute;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:"";inline-size:100%;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){:host(cds-tag.cds--skeleton)::before{animation:none}}',
 ]);

package/es/components/tile/clickable-tile.d.ts

@@ -23,6 +23,20 @@ declare class CDSClickableTile extends CDSLink {
      * The a11y role for `<a>`.
      */
     linkRole: string;
+    /**
+     * Specify if the `ClickableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners: boolean;
+    slug: boolean;
+    /**
+     * @returns The inner content.
+     */
+    protected _renderInner(): import("lit-html").TemplateResult<1>;
+    /**
+     * A selector that will return the slug item.
+     */
+    static get slugItem(): string;
     static styles: any;
 }
 export default CDSClickableTile;

package/es/components/tile/clickable-tile.js

@@ -1,4 +1,9 @@
 import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+let _ = t => t,
+  _t,
+  _t2;
 /**
  * @license
  *
@@ -8,6 +13,7 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
  * LICENSE file in the root directory of this source tree.
  */
 
+import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
@@ -16,6 +22,20 @@ import { TILE_COLOR_SCHEME } from './defs';
 import styles from "././tile.css.js";
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
+// To Do: Replace with an an icon from `@carbon/icons`
+// since the hollow slug in `ClickableTile` is not interactive
+const hollowSlugIcon = html(_t || (_t = _` <svg
+  class="${0}--tile--slug-icon"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="23" height="23" />
+  <path
+    d="M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z"
+    fill="#161616" />
+</svg>`), prefix);
 /**
  * Clickable tile.
  *
@@ -36,14 +56,17 @@ let CDSClickableTile = _decorate([customElement(`${prefix}-clickable-tile`)], fu
       value: function _classes() {
         const {
           colorScheme,
-          disabled
+          disabled,
+          hasRoundedCorners,
+          slug
         } = this;
         return classMap({
           [`${prefix}--link`]: true,
           [`${prefix}--link--disabled`]: disabled,
           [`${prefix}--tile`]: true,
           [`${prefix}--tile--clickable`]: true,
-          [`${prefix}--tile--${colorScheme}`]: colorScheme
+          [`${prefix}--tile--${colorScheme}`]: colorScheme,
+          [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
         });
       }
 
@@ -69,6 +92,53 @@ let CDSClickableTile = _decorate([customElement(`${prefix}-clickable-tile`)], fu
       value() {
         return 'button';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'has-rounded-corners'
+      })],
+      key: "hasRoundedCorners",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "slug",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "method",
+      key: "_renderInner",
+      value:
+      /**
+       * The a11y role for `<a>`.
+       */
+      /**
+       * Specify if the `ClickableTile` component should be rendered with rounded corners.
+       * Only valid when `slug` prop is present
+       */
+      /**
+       * @returns The inner content.
+       */
+      function _renderInner() {
+        return html(_t2 || (_t2 = _` ${0} ${0} `), _get(_getPrototypeOf(CDSClickableTile.prototype), "_renderInner", this).call(this), this.slug ? hollowSlugIcon : '');
+      }
+
+      /**
+       * A selector that will return the slug item.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "slugItem",
+      value: function slugItem() {
+        return `${prefix}-slug`;
+      }
     }, {
       kind: "field",
       static: true,

package/es/components/tile/clickable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickable-tile.js","names":["classMap","property","prefix","CDSLink","TILE_COLOR_SCHEME","styles","carbonElement","customElement","CDSClickableTile","_decorate","_initialize","_CDSLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","decorators","attribute","reflect","REGULAR","static"],"sources":["components/tile/clickable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  protected get _classes() {\n    const { colorScheme, disabled } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n    });\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,iBAAiB,QAAQ,QAAQ;AAC1C,OAAOC,MAAM,MAAM,iBAAa;AAChC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AAJA,IAMMC,gBAAgB,GAAAC,SAAA,EADrBF,aAAa,CAAE,GAAEL,MAAO,iBAAgB,CAAC,aAAAQ,WAAA,EAAAC,QAAA;EAA1C,MACMH,gBAAgB,SAAAG,QAAA,CAAiB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAyBvC;EAAC;IAAAI,CAAA,EAzBKN,gBAAgB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACpB,SAAAC,SAAA,EAAyB;QACvB,MAAM;UAAEC,WAAW;UAAEC;QAAS,CAAC,GAAG,IAAI;QACtC,OAAOrB,QAAQ,CAAC;UACd,CAAE,GAAEE,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,kBAAiB,GAAGmB,QAAQ;UACvC,CAAE,GAAEnB,MAAO,QAAO,GAAG,IAAI;UACzB,CAAE,GAAEA,MAAO,mBAAkB,GAAG,IAAI;UACpC,CAAE,GAAEA,MAAO,WAAUkB,WAAY,EAAC,GAAGA;QACvC,CAAC,CAAC;MACJ;;MAEA;AACF;AACA;IAFE;MAAAJ,IAAA;MAAAM,UAAA,GAGCrB,QAAQ,CAAC;QAAEsB,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAP,GAAA;MAAAC,MAAA;QAAA,OACzCd,iBAAiB,CAACqB,OAAO;MAAA;IAAA;MAAAT,IAAA;MAAAM,UAAA,GAKtCrB,QAAQ,CAAC;QAAEsB,SAAS,EAAE;MAAY,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OAC1B,QAAQ;MAAA;IAAA;MAAAF,IAAA;MAAAU,MAAA;MAAAT,GAAA;MAAAC,MAAA;QAAA,OAEHb,MAAM;MAAA;IAAA;EAAA;AAAA,GAxBOF,OAAO;AA2BtC,eAAeK,gBAAgB"}
+{"version":3,"file":"clickable-tile.js","names":["html","classMap","property","prefix","CDSLink","TILE_COLOR_SCHEME","styles","carbonElement","customElement","hollowSlugIcon","_t","_","CDSClickableTile","_decorate","_initialize","_CDSLink","constructor","args","F","d","kind","key","value","_classes","colorScheme","disabled","hasRoundedCorners","slug","decorators","attribute","reflect","REGULAR","type","Boolean","_renderInner","_t2","_get","_getPrototypeOf","prototype","call","static","slugItem"],"sources":["components/tile/clickable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSLink from '../link/link';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n// To Do: Replace with an an icon from `@carbon/icons`\n// since the hollow slug in `ClickableTile` is not interactive\nconst hollowSlugIcon = html` <svg\n  class=\"${prefix}--tile--slug-icon\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0.5\" y=\"0.5\" width=\"23\" height=\"23\" />\n  <path\n    d=\"M13.2436 16H11.5996L10.9276 13.864H7.95164L7.29164 16H5.68364L8.49164 7.624H10.4596L13.2436 16ZM10.5436 12.508L9.46364 9.064H9.40364L8.33564 12.508H10.5436ZM17.9341 16H14.1301V14.728H15.2341V8.896H14.1301V7.624H17.9341V8.896H16.8181V14.728H17.9341V16Z\"\n    fill=\"#161616\" />\n</svg>`;\n/**\n * Clickable tile.\n *\n * @element cds-clickable-tile\n */\n@customElement(`${prefix}-clickable-tile`)\nclass CDSClickableTile extends CDSLink {\n  protected get _classes() {\n    const { colorScheme, disabled, hasRoundedCorners, slug } = this;\n    return classMap({\n      [`${prefix}--link`]: true,\n      [`${prefix}--link--disabled`]: disabled,\n      [`${prefix}--tile`]: true,\n      [`${prefix}--tile--clickable`]: true,\n      [`${prefix}--tile--${colorScheme}`]: colorScheme,\n      [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners,\n    });\n  }\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The a11y role for `<a>`.\n   */\n  @property({ attribute: 'link-role' })\n  linkRole = 'button';\n\n  /**\n   * Specify if the `ClickableTile` component should be rendered with rounded corners.\n   * Only valid when `slug` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  @property({ type: Boolean })\n  slug = false;\n\n  /**\n   * @returns The inner content.\n   */\n  protected _renderInner() {\n    return html` ${super._renderInner()} ${this.slug ? hollowSlugIcon : ''} `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSClickableTile;\n"],"mappings":"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"}

package/es/components/tile/expandable-tile.d.ts

@@ -683,6 +683,14 @@ declare class CDSExpandableTile extends CDSExpandableTile_base {
      * The computed height of the below-the-fold content.
      */
     private _belowTheContentHeight;
+    /**
+     * `true` if there is a slug.
+     */
+    protected _hasSlug: boolean;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
     /**
      * Handles `slotchange` event on the below-the-fold content.
      *
@@ -699,11 +707,21 @@ declare class CDSExpandableTile extends CDSExpandableTile_base {
      * `true` to expand this expandable tile.
      */
     expanded: boolean;
+    /**
+     * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners: boolean;
     /**
      * `true` to expand this expandable tile.
      */
     withInteractive: boolean;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * A selector that will return the slug item.
+     */
+    static get slugItem(): string;
     /**
      * The name of the custom event fired before the expanded state is changed upon a user gesture.
      * Cancellation of this event stops changing the user-initiated change in expanded state.

package/es/components/tile/expandable-tile.js

@@ -48,20 +48,50 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       value() {
         return 0;
       }
+    }, {
+      kind: "field",
+      key: "_hasSlug",
+      value() {
+        return false;
+      }
     }, {
       kind: "method",
-      key: "_handleSlotChangeBelowTheFoldContent",
+      key: "_handleSlotChange",
       value:
       /**
        * The computed height of the below-the-fold content.
        */
 
+      /**
+       * `true` if there is a slug.
+       */
+
+      /**
+       * Handles `slotchange` event.
+       */
+      function _handleSlotChange({
+        target
+      }) {
+        const hasContent = target.assignedNodes().filter(elem => {
+          var _this$constructor;
+          return elem.matches !== undefined ? elem.matches((_this$constructor = this.constructor) === null || _this$constructor === void 0 ? void 0 : _this$constructor.slugItem) : false;
+        });
+        if (hasContent.length > 0) {
+          this._hasSlug = Boolean(hasContent);
+          hasContent[0].setAttribute('size', 'xs');
+        }
+        this.requestUpdate();
+      }
+
       /**
        * Handles `slotchange` event on the below-the-fold content.
        *
        * @param event The event.
        */
-      function _handleSlotChangeBelowTheFoldContent(event) {
+    }, {
+      kind: "method",
+      key: "_handleSlotChangeBelowTheFoldContent",
+      value: function _handleSlotChangeBelowTheFoldContent(event) {
         this._belowTheContentHeight = event.target.assignedNodes().reduce((acc, item) => {
           var _offsetHeight;
           return acc + ((_offsetHeight = item.offsetHeight) !== null && _offsetHeight !== void 0 ? _offsetHeight : 0);
@@ -126,6 +156,16 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'has-rounded-corners'
+      })],
+      key: "hasRoundedCorners",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -139,7 +179,7 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       }
     }, {
       kind: "method",
-      key: "render",
+      key: "updated",
       value:
       /**
        * The color scheme.
@@ -147,10 +187,24 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       /**
        * `true` to expand this expandable tile.
        */
+      /**
+       * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+       * Only valid when `slug` prop is present
+       */
       /**
        * `true` to expand this expandable tile.
        */
-      function render() {
+      function updated() {
+        if (this._hasSlug) {
+          this.setAttribute('slug', '');
+        } else {
+          this.removeAttribute('slug');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
         const {
           expanded,
           withInteractive,
@@ -171,6 +225,7 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
         aria-expanded="${0}">
         ${0}
       </button>
+      <slot name="slug" @slotchange="${0}"></slot>
       <div id="content" class="${0}--tile-content">
         <div><slot name="above-the-fold-content"></slot></div>
         <div
@@ -181,7 +236,18 @@ let CDSExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)],
       </div>
     `), classes, withInteractive ? this._handleExpand : '', String(Boolean(expanded)), ChevronDown16({
           id: 'icon'
-        }), prefix, prefix, ifDefined(!expanded ? undefined : `max-height: ${belowTheContentHeight}px`), handleSlotChangeBelowTheFoldContent);
+        }), this._handleSlotChange, prefix, prefix, ifDefined(!expanded ? undefined : `max-height: ${belowTheContentHeight}px`), handleSlotChangeBelowTheFoldContent);
+      }
+
+      /**
+       * A selector that will return the slug item.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "slugItem",
+      value: function slugItem() {
+        return `${prefix}-slug`;
       }
 
       /**

package/es/components/tile/expandable-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","carbonElement","customElement","CDSExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","target","assignedNodes","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","requestUpdate","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","Boolean","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","undefined","static"],"sources":["components/tile/expandable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSExpandableTile;\n"],"mappings":"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"}
+{"version":3,"file":"expandable-tile.js","names":["LitElement","html","property","ifDefined","ChevronDown16","prefix","HostListener","FocusMixin","HostListenerMixin","TILE_COLOR_SCHEME","styles","classMap","carbonElement","customElement","CDSExpandableTile","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","_handleSlotChange","target","hasContent","assignedNodes","filter","elem","_this$constructor","matches","undefined","slugItem","length","_hasSlug","Boolean","setAttribute","requestUpdate","_handleSlotChangeBelowTheFoldContent","event","_belowTheContentHeight","reduce","acc","item","_offsetHeight","offsetHeight","element","getComputedStyle","querySelector","parseInt","height","_handleExpand","expanded","focus","init","bubbles","composed","detail","beforeChangeEvent","CustomEvent","eventBeforeToggle","_objectSpread","cancelable","dispatchEvent","afterChangeEvent","eventToggle","decorators","withInteractive","attribute","reflect","REGULAR","type","updated","removeAttribute","render","belowTheContentHeight","handleSlotChangeBelowTheFoldContent","classes","_t","_","String","id","static"],"sources":["components/tile/expandable-tile.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * `true` if there is a slug.\n   */\n  protected _hasSlug = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSExpandableTile)?.slugItem\n            )\n          : false\n      );\n\n    if (hasContent.length > 0) {\n      this._hasSlug = Boolean(hasContent);\n      (hasContent[0] as HTMLElement).setAttribute('size', 'xs');\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof CDSExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Specify if the `ExpandableTile` component should be rendered with rounded corners.\n   * Only valid when `slug` prop is present\n   */\n  @property({ type: Boolean, attribute: 'has-rounded-corners' })\n  hasRoundedCorners = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  updated() {\n    if (this._hasSlug) {\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSExpandableTile;\n"],"mappings":"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"}

package/es/components/tile/selectable-tile.d.ts

@@ -339,9 +339,7 @@ declare const CDSSelectableTile_base: {
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined; /**
-                 * The color scheme.
-                 */
+                options?: boolean | AddEventListenerOptions | undefined;
             };
         };
     };
@@ -683,6 +681,14 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The `type` attribute of the `<input>`.
      */
     protected _inputType: string;
+    /**
+     * `true` if there is a slug.
+     */
+    protected _hasSlug: boolean;
+    /**
+     * Handles `slotchange` event.
+     */
+    protected _handleSlotChange({ target }: Event): void;
     /**
      * Handles `change` event on the `<input>` in the shadow DOM.
      */
@@ -705,6 +711,11 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The color scheme.
      */
     colorScheme: TILE_COLOR_SCHEME;
+    /**
+     * Specify if the `SeletableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners: boolean;
     /**
      * The form name.
      */
@@ -717,7 +728,12 @@ declare class CDSSelectableTile extends CDSSelectableTile_base {
      * The form value.
      */
     value: string;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * A selector that will return the slug item.
+     */
+    static get slugItem(): string;
     /**
      * The name of the custom event fired after this selectable tile changes its selected state.
      */