@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4

package/es/components/tooltip/tooltip.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:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--popover-container{position:relative;display:inline-block}.cds--popover--high-contrast .cds--popover,.cds--popover--high-contrast :host(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content){--cds-popover-background-color:var(--cds-background-inverse, #393939);--cds-popover-text-color:var(--cds-text-inverse, #ffffff)}.cds--popover--drop-shadow .cds--popover,.cds--popover--drop-shadow :host(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--popover--caret{--cds-popover-offset:0.625rem}.cds--popover,:host(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),:host(cds-tooltip-content),:host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content){position:absolute;z-index:6000;top:0;right:0;bottom:0;left:0;filter:var(--cds-popover-drop-shadow, none);pointer-events:none}.cds--popover-content{position:absolute;z-index:6000;display:none;width:-moz-max-content;width:max-content;max-width:23rem;background-color:var(--cds-popover-background-color,var(--cds-layer));border-radius:var(--cds-popover-border-radius,2px);color:var(--cds-popover-text-color,var(--cds-text-primary,#161616));pointer-events:auto}.cds--popover--open .cds--popover-content{display:block}.cds--popover-content::before{position:absolute;display:none;content:""}.cds--popover--open .cds--popover-content::before{display:block}.cds--popover-caret{position:absolute;z-index:6000;display:none;background-color:var(--cds-popover-background-color,var(--cds-layer));will-change:transform}.cds--popover--open.cds--popover--caret .cds--popover-caret{display:block}.cds--popover--bottom .cds--popover-content,:host(cds-popover-content[align=bottom]) .cds--popover-content,:host(cds-tooltip-content[align=bottom]) .cds--popover-content{bottom:0;left:50%;transform:translate(-50%,calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-left .cds--popover-content,:host(cds-popover-content[align=bottom-left]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content{bottom:0;left:0;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-right .cds--popover-content,:host(cds-popover-content[align=bottom-right]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content{right:0;bottom:0;transform:translate(var(--cds-popover-offset,0),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom .cds--popover-content::before,.cds--popover--bottom-left .cds--popover-content::before,.cds--popover--bottom-right .cds--popover-content::before,:host(cds-popover-content[align=bottom-left]) .cds--popover-content::before,:host(cds-popover-content[align=bottom-right]) .cds--popover-content::before,:host(cds-popover-content[align=bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom]) .cds--popover-content::before{top:0;right:0;left:0;height:var(--cds-popover-offset,0);transform:translateY(-100%)}.cds--popover--bottom .cds--popover-caret,.cds--popover--bottom-left .cds--popover-caret,.cds--popover--bottom-right .cds--popover-caret,:host(cds-popover-content[align=bottom-left]) .cds--popover-caret,:host(cds-popover-content[align=bottom-right]) .cds--popover-caret,:host(cds-popover-content[align=bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom]) .cds--popover-caret{bottom:0;left:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 100%,50% 0,100% 100%);clip-path:polygon(0 100%,50% 0,100% 100%);transform:translate(-50%,var(--cds-popover-offset,0))}.cds--popover--top .cds--popover-content,:host(cds-popover-content[align=top]) .cds--popover-content,:host(cds-tooltip-content[align=top]) .cds--popover-content{top:0;left:50%;transform:translate(-50%,calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-left .cds--popover-content,:host(cds-popover-content[align=top-left]) .cds--popover-content,:host(cds-tooltip-content[align=top-left]) .cds--popover-content{top:0;left:0;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-right .cds--popover-content,:host(cds-popover-content[align=top-right]) .cds--popover-content,:host(cds-tooltip-content[align=top-right]) .cds--popover-content{top:0;right:0;transform:translate(var(--cds-popover-offset,0),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top .cds--popover-content::before,.cds--popover--top-left .cds--popover-content::before,.cds--popover--top-right .cds--popover-content::before,:host(cds-popover-content[align=top-left]) .cds--popover-content::before,:host(cds-popover-content[align=top-right]) .cds--popover-content::before,:host(cds-popover-content[align=top]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=top]) .cds--popover-content::before{right:0;bottom:0;left:0;height:var(--cds-popover-offset,0);transform:translateY(100%)}.cds--popover--top .cds--popover-caret,.cds--popover--top-left .cds--popover-caret,.cds--popover--top-right .cds--popover-caret,:host(cds-popover-content[align=top-left]) .cds--popover-caret,:host(cds-popover-content[align=top-right]) .cds--popover-caret,:host(cds-popover-content[align=top]) .cds--popover-caret,:host(cds-tooltip-content[align=top-left]) .cds--popover-caret,:host(cds-tooltip-content[align=top-right]) .cds--popover-caret,:host(cds-tooltip-content[align=top]) .cds--popover-caret{top:0;left:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);transform:translate(-50%,calc(-1 * var(--cds-popover-offset,0)))}.cds--popover--right .cds--popover-content,:host(cds-popover-content[align=right]) .cds--popover-content,:host(cds-tooltip-content[align=right]) .cds--popover-content{top:50%;left:100%;transform:translate(var(--cds-popover-offset,0),-50%)}.cds--popover--right-top .cds--popover-content,:host(cds-popover-content[align=right-top]) .cds--popover-content,:host(cds-tooltip-content[align=right-top]) .cds--popover-content{top:50%;left:100%;transform:translate(var(--cds-popover-offset,0),calc(.5 * var(--cds-popover-offset,0) * -1 - 16px))}.cds--popover--right-bottom .cds--popover-content,:host(cds-popover-content[align=right-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content{bottom:50%;left:100%;transform:translate(var(--cds-popover-offset,0),calc(.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--right .cds--popover-content::before,.cds--popover--right-bottom .cds--popover-content::before,.cds--popover--right-top .cds--popover-content::before,:host(cds-popover-content[align=right-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=right-top]) .cds--popover-content::before,:host(cds-popover-content[align=right]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=right]) .cds--popover-content::before{top:0;bottom:0;left:0;width:var(--cds-popover-offset,0);transform:translateX(-100%)}.cds--popover--right .cds--popover-caret,.cds--popover--right-bottom .cds--popover-caret,.cds--popover--right-top .cds--popover-caret,:host(cds-popover-content[align=right-bottom]) .cds--popover-caret,:host(cds-popover-content[align=right-top]) .cds--popover-caret,:host(cds-popover-content[align=right]) .cds--popover-caret,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=right-top]) .cds--popover-caret,:host(cds-tooltip-content[align=right]) .cds--popover-caret{top:50%;left:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);transform:translate(calc(var(--cds-popover-offset,0) - 100%),-50%)}.cds--popover--left .cds--popover-content,:host(cds-popover-content[align=left]) .cds--popover-content,:host(cds-tooltip-content[align=left]) .cds--popover-content{top:50%;right:100%;transform:translate(calc(-1 * var(--cds-popover-offset,0) + .1px),-50%)}.cds--popover--left-top .cds--popover-content,:host(cds-popover-content[align=left-top]) .cds--popover-content,:host(cds-tooltip-content[align=left-top]) .cds--popover-content{top:-50%;right:100%;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(-.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--left-bottom .cds--popover-content,:host(cds-popover-content[align=left-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content{right:100%;bottom:-50%;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(.5 * var(--cds-popover-offset,0) - 16px))}.cds--popover--left .cds--popover-content::before,.cds--popover--left-bottom .cds--popover-content::before,.cds--popover--left-top .cds--popover-content::before,:host(cds-popover-content[align=left-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=left-top]) .cds--popover-content::before,:host(cds-popover-content[align=left]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=left]) .cds--popover-content::before{top:0;right:0;bottom:0;width:var(--cds-popover-offset,0);transform:translateX(100%)}.cds--popover--left .cds--popover-caret,.cds--popover--left-bottom .cds--popover-caret,.cds--popover--left-top .cds--popover-caret,:host(cds-popover-content[align=left-bottom]) .cds--popover-caret,:host(cds-popover-content[align=left-top]) .cds--popover-caret,:host(cds-popover-content[align=left]) .cds--popover-caret,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=left-top]) .cds--popover-caret,:host(cds-tooltip-content[align=left]) .cds--popover-caret{top:50%;right:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(calc(-1 * var(--cds-popover-offset,0) + 100%),-50%)}.cds--popover--tab-tip .cds--popover-content{border-radius:0}.cds--popover--tab-tip__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center}.cds--popover--tab-tip__button *,.cds--popover--tab-tip__button ::after,.cds--popover--tab-tip__button ::before{box-sizing:inherit}.cds--popover--tab-tip__button::-moz-focus-inner{border:0}.cds--popover--tab-tip__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--popover--tab-tip__button:focus{outline-style:dotted}}.cds--popover--tab-tip__button:hover{background-color:var(--cds-layer-hover)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{background:var(--cds-layer);box-shadow:0 2px 2px rgba(0,0,0,.2)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after{position:absolute;z-index:6001;bottom:0;width:100%;height:2px;background:var(--cds-layer);content:""}.cds--popover--tab-tip__button svg{fill:var(--cds-icon-primary,#161616)}:host(cds-popover[tabTip][open]) ::slotted(.cds--popover--tab-tip__button){background:var(--cds-layer)!important;box-shadow:0 2px 2px rgba(0,0,0,.2)}:host(cds-popover-content[open]) .cds--popover-content,:host(cds-tooltip-content[open]) .cds--popover-content{display:block}:host(cds-popover-content[open])[tabTip] .cds--popover-content,:host(cds-tooltip-content[open])[tabTip] .cds--popover-content{border-radius:0;background:var(--cds-layer)}:host(cds-popover-content[open])[caret] .cds--popover-caret,:host(cds-tooltip-content[open])[caret] .cds--popover-caret{display:block}:host(cds-popover-content[dropShadow]){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--tooltip{--cds-popover-offset:12px}.cds--tooltip-content,:host(prefix-tooltip-content) ::slotted(.cds-tooltip-content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:18rem;padding:var(--cds-tooltip-padding-block,1rem) var(--cds-tooltip-padding-inline,1rem);color:var(--cds-text-inverse,#fff)}.cds--icon-tooltip{--cds-tooltip-padding-block:0.125rem;--cds-popover-caret-width:0.5rem;--cds-popover-caret-height:0.25rem;--cds-popover-offset:0.5rem}.cds--icon-tooltip .cds--tooltip-content,.cds--icon-tooltip :host(prefix-tooltip-content) ::slotted(.cds-tooltip-content),:host(prefix-tooltip-content) .cds--icon-tooltip ::slotted(.cds-tooltip-content){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--definition-term{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;border-bottom:1px dotted var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616)}.cds--definition-term *,.cds--definition-term ::after,.cds--definition-term ::before{box-sizing:inherit}.cds--definition-term::-moz-focus-inner{border:0}.cds--definition-term:focus{outline:1px solid var(--cds-focus,#0f62fe);border-bottom-color:var(--cds-border-interactive,#0f62fe)}@media screen and (prefers-contrast){.cds--definition-term:focus{outline-style:dotted}}.cds--definition-term:hover{border-bottom-color:var(--cds-border-interactive,#0f62fe)}.cds--definition-tooltip{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:11rem;padding:.5rem 1rem}',
+  '@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:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--popover-container{position:relative;display:inline-block}.cds--popover--high-contrast .cds--popover,.cds--popover--high-contrast :host(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content){--cds-popover-background-color:var(--cds-background-inverse, #393939);--cds-popover-text-color:var(--cds-text-inverse, #ffffff)}.cds--popover--drop-shadow .cds--popover,.cds--popover--drop-shadow :host(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--popover--caret{--cds-popover-offset:0.625rem}.cds--popover,:host(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),:host(cds-tooltip-content),:host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content){position:absolute;z-index:6000;top:0;right:0;bottom:0;left:0;filter:var(--cds-popover-drop-shadow, none);pointer-events:none}.cds--popover-content{position:absolute;z-index:6000;display:none;width:-moz-max-content;width:max-content;max-width:23rem;background-color:var(--cds-popover-background-color,var(--cds-layer));border-radius:var(--cds-popover-border-radius,2px);color:var(--cds-popover-text-color,var(--cds-text-primary,#161616));pointer-events:auto}.cds--popover--open .cds--popover-content{display:block}.cds--popover-content::before{position:absolute;display:none;content:""}.cds--popover--open .cds--popover-content::before{display:block}.cds--popover-caret{position:absolute;z-index:6000;display:none;background-color:var(--cds-popover-background-color,var(--cds-layer));will-change:transform}.cds--popover--open.cds--popover--caret .cds--popover-caret{display:block}.cds--popover--bottom .cds--popover-content,:host(cds-popover-content[align=bottom]) .cds--popover-content,:host(cds-tooltip-content[align=bottom]) .cds--popover-content{bottom:0;left:50%;transform:translate(-50%,calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-left .cds--popover-content,:host(cds-popover-content[align=bottom-left]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content{bottom:0;left:0;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-right .cds--popover-content,:host(cds-popover-content[align=bottom-right]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content{right:0;bottom:0;transform:translate(var(--cds-popover-offset,0),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom .cds--popover-content::before,.cds--popover--bottom-left .cds--popover-content::before,.cds--popover--bottom-right .cds--popover-content::before,:host(cds-popover-content[align=bottom-left]) .cds--popover-content::before,:host(cds-popover-content[align=bottom-right]) .cds--popover-content::before,:host(cds-popover-content[align=bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom]) .cds--popover-content::before{top:0;right:0;left:0;height:var(--cds-popover-offset,0);transform:translateY(-100%)}.cds--popover--bottom .cds--popover-caret,.cds--popover--bottom-left .cds--popover-caret,.cds--popover--bottom-right .cds--popover-caret,:host(cds-popover-content[align=bottom-left]) .cds--popover-caret,:host(cds-popover-content[align=bottom-right]) .cds--popover-caret,:host(cds-popover-content[align=bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom]) .cds--popover-caret{bottom:0;left:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 100%,50% 0,100% 100%);clip-path:polygon(0 100%,50% 0,100% 100%);transform:translate(-50%,var(--cds-popover-offset,0))}.cds--popover--top .cds--popover-content,:host(cds-popover-content[align=top]) .cds--popover-content,:host(cds-tooltip-content[align=top]) .cds--popover-content{top:0;left:50%;transform:translate(-50%,calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-left .cds--popover-content,:host(cds-popover-content[align=top-left]) .cds--popover-content,:host(cds-tooltip-content[align=top-left]) .cds--popover-content{top:0;left:0;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-right .cds--popover-content,:host(cds-popover-content[align=top-right]) .cds--popover-content,:host(cds-tooltip-content[align=top-right]) .cds--popover-content{top:0;right:0;transform:translate(var(--cds-popover-offset,0),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top .cds--popover-content::before,.cds--popover--top-left .cds--popover-content::before,.cds--popover--top-right .cds--popover-content::before,:host(cds-popover-content[align=top-left]) .cds--popover-content::before,:host(cds-popover-content[align=top-right]) .cds--popover-content::before,:host(cds-popover-content[align=top]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=top]) .cds--popover-content::before{right:0;bottom:0;left:0;height:var(--cds-popover-offset,0);transform:translateY(100%)}.cds--popover--top .cds--popover-caret,.cds--popover--top-left .cds--popover-caret,.cds--popover--top-right .cds--popover-caret,:host(cds-popover-content[align=top-left]) .cds--popover-caret,:host(cds-popover-content[align=top-right]) .cds--popover-caret,:host(cds-popover-content[align=top]) .cds--popover-caret,:host(cds-tooltip-content[align=top-left]) .cds--popover-caret,:host(cds-tooltip-content[align=top-right]) .cds--popover-caret,:host(cds-tooltip-content[align=top]) .cds--popover-caret{top:0;left:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);transform:translate(-50%,calc(-1 * var(--cds-popover-offset,0)))}.cds--popover--right .cds--popover-content,:host(cds-popover-content[align=right]) .cds--popover-content,:host(cds-tooltip-content[align=right]) .cds--popover-content{top:50%;left:100%;transform:translate(var(--cds-popover-offset,0),-50%)}.cds--popover--right-top .cds--popover-content,:host(cds-popover-content[align=right-top]) .cds--popover-content,:host(cds-tooltip-content[align=right-top]) .cds--popover-content{top:50%;left:100%;transform:translate(var(--cds-popover-offset,0),calc(.5 * var(--cds-popover-offset,0) * -1 - 16px))}.cds--popover--right-bottom .cds--popover-content,:host(cds-popover-content[align=right-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content{bottom:50%;left:100%;transform:translate(var(--cds-popover-offset,0),calc(.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--right .cds--popover-content::before,.cds--popover--right-bottom .cds--popover-content::before,.cds--popover--right-top .cds--popover-content::before,:host(cds-popover-content[align=right-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=right-top]) .cds--popover-content::before,:host(cds-popover-content[align=right]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=right]) .cds--popover-content::before{top:0;bottom:0;left:0;width:var(--cds-popover-offset,0);transform:translateX(-100%)}.cds--popover--right .cds--popover-caret,.cds--popover--right-bottom .cds--popover-caret,.cds--popover--right-top .cds--popover-caret,:host(cds-popover-content[align=right-bottom]) .cds--popover-caret,:host(cds-popover-content[align=right-top]) .cds--popover-caret,:host(cds-popover-content[align=right]) .cds--popover-caret,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=right-top]) .cds--popover-caret,:host(cds-tooltip-content[align=right]) .cds--popover-caret{top:50%;left:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);transform:translate(calc(var(--cds-popover-offset,0) - 100%),-50%)}.cds--popover--left .cds--popover-content,:host(cds-popover-content[align=left]) .cds--popover-content,:host(cds-tooltip-content[align=left]) .cds--popover-content{top:50%;right:100%;transform:translate(calc(-1 * var(--cds-popover-offset,0) + .1px),-50%)}.cds--popover--left-top .cds--popover-content,:host(cds-popover-content[align=left-top]) .cds--popover-content,:host(cds-tooltip-content[align=left-top]) .cds--popover-content{top:-50%;right:100%;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(-.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--left-bottom .cds--popover-content,:host(cds-popover-content[align=left-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content{right:100%;bottom:-50%;transform:translate(calc(-1 * var(--cds-popover-offset,0)),calc(.5 * var(--cds-popover-offset,0) - 16px))}.cds--popover--left .cds--popover-content::before,.cds--popover--left-bottom .cds--popover-content::before,.cds--popover--left-top .cds--popover-content::before,:host(cds-popover-content[align=left-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=left-top]) .cds--popover-content::before,:host(cds-popover-content[align=left]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=left]) .cds--popover-content::before{top:0;right:0;bottom:0;width:var(--cds-popover-offset,0);transform:translateX(100%)}.cds--popover--left .cds--popover-caret,.cds--popover--left-bottom .cds--popover-caret,.cds--popover--left-top .cds--popover-caret,:host(cds-popover-content[align=left-bottom]) .cds--popover-caret,:host(cds-popover-content[align=left-top]) .cds--popover-caret,:host(cds-popover-content[align=left]) .cds--popover-caret,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=left-top]) .cds--popover-caret,:host(cds-tooltip-content[align=left]) .cds--popover-caret{top:50%;right:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(calc(-1 * var(--cds-popover-offset,0) + 100%),-50%)}.cds--popover--tab-tip .cds--popover-content{border-radius:0}.cds--popover--tab-tip__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center}.cds--popover--tab-tip__button *,.cds--popover--tab-tip__button ::after,.cds--popover--tab-tip__button ::before{box-sizing:inherit}.cds--popover--tab-tip__button::-moz-focus-inner{border:0}.cds--popover--tab-tip__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--popover--tab-tip__button:focus{outline-style:dotted}}.cds--popover--tab-tip__button:hover{background-color:var(--cds-layer-hover)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{background:var(--cds-layer);box-shadow:0 2px 2px rgba(0,0,0,.2)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after{position:absolute;z-index:6001;bottom:0;width:100%;height:2px;background:var(--cds-layer);content:""}.cds--popover--tab-tip__button svg{fill:var(--cds-icon-primary,#161616)}:host(cds-popover[tabTip][open]) ::slotted(.cds--popover--tab-tip__button){background:var(--cds-layer)!important;box-shadow:0 2px 2px rgba(0,0,0,.2)}:host(cds-popover-content[open]) .cds--popover-content,:host(cds-tooltip-content[open]) .cds--popover-content{display:block}:host(cds-popover-content[open])[tabTip] .cds--popover-content,:host(cds-tooltip-content[open])[tabTip] .cds--popover-content{border-radius:0;background:var(--cds-layer)}:host(cds-popover-content[open])[caret] .cds--popover-caret,:host(cds-tooltip-content[open])[caret] .cds--popover-caret{display:block}:host(cds-popover-content[dropShadow]){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--tooltip{--cds-popover-offset:12px}.cds--tooltip-content,:host(prefix-tooltip-content) ::slotted(.cds-tooltip-content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:18rem;padding:var(--cds-tooltip-padding-block,1rem) var(--cds-tooltip-padding-inline,1rem);color:var(--cds-text-inverse,#fff)}.cds--icon-tooltip{--cds-tooltip-padding-block:0.125rem;--cds-popover-caret-width:0.5rem;--cds-popover-caret-height:0.25rem;--cds-popover-offset:0.5rem}.cds--icon-tooltip .cds--tooltip-content,.cds--icon-tooltip :host(prefix-tooltip-content) ::slotted(.cds-tooltip-content),:host(prefix-tooltip-content) .cds--icon-tooltip ::slotted(.cds-tooltip-content){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--definition-term{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;border-bottom:1px dotted var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616)}.cds--definition-term *,.cds--definition-term ::after,.cds--definition-term ::before{box-sizing:inherit}.cds--definition-term::-moz-focus-inner{border:0}.cds--definition-term:focus{outline:1px solid var(--cds-focus,#0f62fe);border-bottom-color:var(--cds-border-interactive,#0f62fe)}@media screen and (prefers-contrast){.cds--definition-term:focus{outline-style:dotted}}.cds--definition-term:hover{border-bottom-color:var(--cds-border-interactive,#0f62fe)}.cds--definition-tooltip{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:11rem;padding:.5rem 1rem}:host(cds-tooltip[data-table]){display:contents}:host(cds-tooltip[data-table]):hover ::slotted(button){background-color:var(--cds-layer-selected-hover)!important}:host(cds-tooltip[data-table][size=sm]) ::slotted(button),:host(cds-tooltip[data-table][size=xs]) ::slotted(button){height:calc(100% + 1px)!important}:host(cds-tooltip[toolbar-action]) ::slotted(button){outline:0!important}',
 ]);

package/es/components/tooltip/tooltip.d.ts

@@ -334,6 +334,10 @@ declare class CDSTooltip extends CDSTooltip_base {
      * Specify how the trigger should align with the tooltip
      */
     align: string;
+    /**
+     * `true` if this tooltip is in a data table row
+     */
+    dataTable: boolean;
     /**
      * Specify whether the tooltip should be closed when clicked
      */
@@ -350,6 +354,14 @@ declare class CDSTooltip extends CDSTooltip_base {
      * Specify the duration in milliseconds to delay before hiding the tooltip
      */
     leaveDelayMs: number;
+    /**
+     * Specify the size of the tooltip
+     */
+    size: boolean;
+    /**
+     * Specify whether the tooltip should be open when it first renders
+     */
+    toolbarAction: boolean;
     /**
      * Handles `mouseover` event on this element.
      */
@@ -365,7 +377,6 @@ declare class CDSTooltip extends CDSTooltip_base {
     /**
      * Handles `keydown` event on this element.
      * Space & enter will toggle state, Escape will only close.
-  
      */
     private _handleKeydown;
     /**

package/es/components/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAA6B;IACpD;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAOrB;IAEF;;OAEG;IAGH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsB7C,iBAAiB;IAUjB,OAAO,CAAC,iBAAiB,KAAA;IA2BzB;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED,MAAM,KAAK,MAAM,4BAIhB;CACF;AAED,eAAe,UAAU,CAAC","file":"tooltip.d.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 { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\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 = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\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 _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"]}
+{"version":3,"sources":["components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAA6B;IACpD;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IACH,OAAO,CAAC,YAAY,CAWlB;IAEF;;OAEG;IACH,OAAO,CAAC,eAAe,CAOrB;IAEF;;OAEG;IAGH,OAAO,CAAC,YAAY,CAIlB;IAEF;;;OAGG;IAGH,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAyB7C,iBAAiB;IAUjB,OAAO,CAAC,iBAAiB,KAAA;IA2BzB;;OAEG;IACH,MAAM,KAAK,sBAAsB,WAEhC;IAED,MAAM,KAAK,MAAM,4BAIhB;CACF;AAED,eAAe,UAAU,CAAC","file":"tooltip.d.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 { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\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 = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    if (!component[0]) {\n      return;\n    }\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"]}

package/es/components/tooltip/tooltip.js

@@ -44,6 +44,17 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
       value() {
         return 'top';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'data-table'
+      })],
+      key: "dataTable",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -84,6 +95,26 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
       value() {
         return 300;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "size",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'toolbar-action',
+        type: Boolean
+      })],
+      key: "toolbarAction",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       key: "_handleHover",
@@ -151,6 +182,10 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
        * Specify how the trigger should align with the tooltip
        */
 
+      /**
+       * `true` if this tooltip is in a data table row
+       */
+
       /**
        * Specify whether the tooltip should be closed when clicked
        */
@@ -167,6 +202,14 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
        * Specify the duration in milliseconds to delay before hiding the tooltip
        */
 
+      /**
+       * Specify the size of the tooltip
+       */
+
+      /**
+       * Specify whether the tooltip should be open when it first renders
+       */
+
       /**
        * Handles `mouseover` event on this element.
        */
@@ -182,7 +225,7 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
       /**
        * Handles `keydown` event on this element.
        * Space & enter will toggle state, Escape will only close.
-        */
+       */
 
       /**
        * Handles `slotchange` event.
@@ -191,6 +234,9 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
         target
       }) {
         const component = target.assignedNodes().filter(node => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
+        if (!component[0]) {
+          return;
+        }
         component[0].addEventListener('focus', this._handleHover);
         component[0].addEventListener('focusout', this._handleHoverOut);
         component[0].addEventListener('mouseover', this._handleHover);

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["css","property","customElement","prefix","HostListener","HostListenerMixin","CDSPopover","styles","CDSTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","type","String","key","value","Boolean","attribute","Number","setTimeout","open","updateComplete","_this$querySelector","selectorTooltipContent","querySelector","focus","enterDelayMs","leaveDelayMs","closeOnActivation","_handleHoverOut","event","_handleSlotChange","target","component","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","textContent","trim","addEventListener","_handleHover","requestUpdate","connectedCallback","hasAttribute","setAttribute","shadowRoot","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","_this$shadowRoot","_this$shadowRoot$quer","toolTipContent","has","defaultOpen","removeAttribute","forEach","name","classList","add","static","_t","_"],"sources":["components/tooltip/tooltip.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 { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\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 = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\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 _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["css","property","customElement","prefix","HostListener","HostListenerMixin","CDSPopover","styles","CDSTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","type","String","key","value","Boolean","attribute","Number","setTimeout","open","updateComplete","_this$querySelector","selectorTooltipContent","querySelector","focus","enterDelayMs","leaveDelayMs","closeOnActivation","_handleHoverOut","event","_handleSlotChange","target","component","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","textContent","trim","addEventListener","_handleHover","requestUpdate","connectedCallback","hasAttribute","setAttribute","shadowRoot","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","_this$shadowRoot","_this$shadowRoot$quer","toolTipContent","has","defaultOpen","removeAttribute","forEach","name","classList","add","static","_t","_"],"sources":["components/tooltip/tooltip.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 { css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\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 = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   * Space & enter will toggle state, Escape will only close.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    if (!component[0]) {\n      return;\n    }\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n      this.setAttribute('aria-expanded', String(Boolean(this.open)));\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,KAAK;AACzB,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,YAAY,MAAM,wCAAwC;AACjE,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,OAAO,4BAA4B;AACnC,OAAOC,OAAM,MAAM,oBAAgB;AAGnC;AACA;AACA;AACA;AACA;AAJA,IAMMC,UAAU,GAAAC,SAAA,EADfP,aAAa,CAAE,GAAEC,MAAO,UAAS,CAAC,aAAAO,WAAA,EAAAC,kBAAA;EAAnC,MACMH,UAAU,SAAAG,kBAAA,CAAuC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiLvD;EAAC;IAAAI,CAAA,EAjLKN,UAAU;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIbhB,QAAQ,CAAC;QAAEiB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEC;MAAO,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAClC,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKZhB,QAAQ,CAAC;QAAEkB,IAAI,EAAEI,OAAO;QAAEL,OAAO,EAAE,IAAI;QAAEM,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAH,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKhBhB,QAAQ,CAAC;QAAEiB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OACvB,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKxBhB,QAAQ,CAAC;QAAEiB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OAC7B,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKlBhB,QAAQ,CAAC;QAAEuB,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEM;MAAO,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACzC,GAAG;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKjBhB,QAAQ,CAAC;QAAEuB,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEM;MAAO,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACzC,GAAG;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKjBhB,QAAQ,CAAC;QAAEiB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAG,GAAA;MAAAC,MAAA;QAAA,OACrB,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKXhB,QAAQ,CAAC;QAAEiB,OAAO,EAAE,IAAI;QAAEM,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAK,GAAA;MAAAC,MAAA;QAAA,OAKE,YAAY;UACjCI,UAAU,CAAC,YAAY;YACrB,IAAI,CAACC,IAAI,GAAG,IAAI;YAChB,MAAM;cAAEA,IAAI;cAAEC;YAAe,CAAC,GAAG,IAAI;YACrC,IAAID,IAAI,EAAE;cAAA,IAAAE,mBAAA;cACR,MAAMD,cAAc;cACpB,MAAM;gBAAEE;cAAuB,CAAC,GAAG,IAAI,CACpClB,WAAgC;cACnC,CAAAiB,mBAAA,GAAC,IAAI,CAACE,aAAa,CAACD,sBAAsB,CAAC,cAAAD,mBAAA,uBAA3CA,mBAAA,CAA6DG,KAAK,EAAE;YACtE;UACF,CAAC,EAAE,IAAI,CAACC,YAAY,CAAC;QACvB,CAAC;MAAA;IAAA;MAAAjB,IAAA;MAAAK,GAAA;MAAAC,MAAA;QAAA,OAKyB,YAAY;UACpCI,UAAU,CAAC,YAAY;YACrB,MAAM;cAAEC;YAAK,CAAC,GAAG,IAAI;YACrB,IAAIA,IAAI,EAAE;cACR,IAAI,CAACA,IAAI,GAAG,KAAK;YACnB;UACF,CAAC,EAAE,IAAI,CAACO,YAAY,CAAC;QACvB,CAAC;MAAA;IAAA;MAAAlB,IAAA;MAAAC,UAAA,GAKAb,YAAY,CAAC,OAAO,CAAC;MAAAiB,GAAA;MAAAC,MAAA;QAAA,OAEC,YAAY;UACjC,IAAI,IAAI,CAACa,iBAAiB,EAAE;YAC1B,IAAI,CAACC,eAAe,EAAE;UACxB;QACF,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAC,UAAA,GAMAb,YAAY,CAAC,OAAO,CAAC;MAAAiB,GAAA;MAAAC,MAAA;QAAA,OAEG,MAAOe,KAAK,IAAK;UACxC,IAAIA,KAAK,CAAChB,GAAG,KAAK,GAAG,IAAIgB,KAAK,CAAChB,GAAG,KAAK,OAAO,IAAIgB,KAAK,CAAChB,GAAG,KAAK,QAAQ,EAAE;YACxE,IAAI,CAACe,eAAe,EAAE;UACxB;QACF,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAK,GAAA;MAAAC,KAAA;MAjGD;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAcE;AACF;AACA;;MAUE;AACF;AACA;;MASE;AACF;AACA;AACA;;MASE;AACF;AACA;MACE,SAAAgB,kBAA4B;QAAEC;MAAc,CAAC,EAAE;QAC7C,MAAMC,SAAS,GAAID,MAAM,CACtBE,aAAa,EAAE,CACfC,MAAM,CACJC,IAAI,IAAKA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,SAAS,IAAIH,IAAI,CAAEI,WAAW,CAAEC,IAAI,EAAE,CACxE;QACH,IAAI,CAACR,SAAS,CAAC,CAAC,CAAC,EAAE;UACjB;QACF;QACCA,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,YAAY,CAAC;QACzEV,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,UAAU,EACV,IAAI,CAACb,eAAe,CACrB;QACAI,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,WAAW,EACX,IAAI,CAACC,YAAY,CAClB;QACAV,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,YAAY,EACZ,IAAI,CAACb,eAAe,CACrB;QACD,IAAI,CAACe,aAAa,EAAE;MACtB;IAAC;MAAAnC,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAA8B,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,cAAc,CAAC,EAAE;UACtC,IAAI,CAACC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC;QACvC;QACA,IAAI,CAAC,IAAI,CAACC,UAAU,EAAE;UACpB,IAAI,CAACC,YAAY,CAAC;YAAEC,IAAI,EAAE;UAAO,CAAC,CAAC;QACrC;QACAC,IAAA,CAAAC,eAAA,CAvIEnD,UAAU,CAAAoD,SAAA,8BAAAC,IAAA;MAwId;IAAC;MAAA7C,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAAwC,QAAQC,iBAAiB,EAAE;QAAA,IAAAC,gBAAA,EAAAC,qBAAA;QACzB,MAAM;UAAEnC;QAAuB,CAAC,GAAG,IAAI,CAAClB,WAAgC;QACxE,MAAMsD,cAAc,GAAG,IAAI,CAACnC,aAAa,CAACD,sBAAsB,CAAC;QAEjE,IAAIiC,iBAAiB,CAACI,GAAG,CAAC,aAAa,CAAC,EAAE;UACxC,IAAI,CAACxC,IAAI,GAAG,IAAI,CAACyC,WAAW;QAC9B;QAEA,IAAIL,iBAAiB,CAACI,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC,IAAI,CAACxC,IAAI,GACLuC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEZ,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,GACxCY,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,eAAe,CAAC,MAAM,CAAC;UAC3C,IAAI,CAACf,YAAY,CAAC,eAAe,EAAElC,MAAM,CAACG,OAAO,CAAC,IAAI,CAACI,IAAI,CAAC,CAAC,CAAC;QAChE;QAEA,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC2C,OAAO,CAAEC,IAAI,IAAK;UACnC,IAAIR,iBAAiB,CAACI,GAAG,CAACI,IAAI,CAAC,EAAE;YAC/B,MAAM;cAAE,CAACA,IAAI,GAAuBjD;YAAM,CAAC,GAAG,IAAI;YACjD4C,cAAc,CAAuBK,IAAI,CAAC,GAAGjD,KAAK;UACrD;QACF,CAAC,CAAC;QAEF,CAAA0C,gBAAA,OAAI,CAACT,UAAU,cAAAS,gBAAA,wBAAAC,qBAAA,GAAfD,gBAAA,CACIjC,aAAa,CAAE,IAAG5B,MAAO,qBAAoB,CAAC,cAAA8D,qBAAA,uBADlDA,qBAAA,CAEIO,SAAS,CAACC,GAAG,CAAE,GAAEtE,MAAO,WAAU,CAAC;MACzC;;MAEA;AACF;AACA;IAFE;MAAAa,IAAA;MAAA0D,MAAA;MAAArD,GAAA;MAAAC,KAAA,EAGA,SAAAQ,uBAAA,EAAoC;QAClC,OAAQ,GAAE3B,MAAO,kBAAiB;MACpC;IAAC;MAAAa,IAAA;MAAA0D,MAAA;MAAArD,GAAA;MAAAC,KAAA,EAED,SAAAf,OAAA,EAAoB;QAClB,OAAOP,GAAG,CAAA2E,EAAA,KAAAA,EAAA,GAAAC,CAAC;AACf,QAAM,CAAe,IAAS;AAC9B,KAAI,GAAAlB,IAAA,CAAAC,eAAA,CA/KEnD,UAAU,oBA8KOD,OAAM;MAE3B,CAAC,CAAC;IAAA;EAAA;AAAA,GAhLqBF,iBAAiB,CAACC,UAAU,CAAC;AAmLtD,eAAeE,UAAU"}

package/es/components/tooltip/tooltip.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--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--popover-container{position:relative;display:inline-block}.cds--popover--high-contrast .cds--popover,.cds--popover--high-contrast :host(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content){--cds-popover-background-color:var(--cds-background-inverse, #393939);--cds-popover-text-color:var(--cds-text-inverse, #ffffff)}.cds--popover--drop-shadow .cds--popover,.cds--popover--drop-shadow :host(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--popover--caret{--cds-popover-offset:0.625rem}.cds--popover,:host(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),:host(cds-tooltip-content),:host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content){position:absolute;z-index:6000;top:0;left:0;bottom:0;right:0;filter:var(--cds-popover-drop-shadow, none);pointer-events:none}.cds--popover-content{position:absolute;z-index:6000;display:none;width:-moz-max-content;width:max-content;max-width:23rem;background-color:var(--cds-popover-background-color,var(--cds-layer));border-radius:var(--cds-popover-border-radius,2px);color:var(--cds-popover-text-color,var(--cds-text-primary,#161616));pointer-events:auto}.cds--popover--open .cds--popover-content{display:block}.cds--popover-content::before{position:absolute;display:none;content:""}.cds--popover--open .cds--popover-content::before{display:block}.cds--popover-caret{position:absolute;z-index:6000;display:none;background-color:var(--cds-popover-background-color,var(--cds-layer));will-change:transform}.cds--popover--open.cds--popover--caret .cds--popover-caret{display:block}.cds--popover--bottom .cds--popover-content,:host(cds-popover-content[align=bottom]) .cds--popover-content,:host(cds-tooltip-content[align=bottom]) .cds--popover-content{bottom:0;right:50%;transform:translate(50%,calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-left .cds--popover-content,:host(cds-popover-content[align=bottom-left]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content{bottom:0;right:0;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-right .cds--popover-content,:host(cds-popover-content[align=bottom-right]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content{left:0;bottom:0;transform:translate(var(--cds-popover-offset,0),calc(-1*(100% + var(--cds-popover-offset,0))))}.cds--popover--bottom .cds--popover-content::before,.cds--popover--bottom-left .cds--popover-content::before,.cds--popover--bottom-right .cds--popover-content::before,:host(cds-popover-content[align=bottom-left]) .cds--popover-content::before,:host(cds-popover-content[align=bottom-right]) .cds--popover-content::before,:host(cds-popover-content[align=bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom]) .cds--popover-content::before{top:0;left:0;right:0;height:var(--cds-popover-offset,0);transform:translateY(-100%)}.cds--popover--bottom .cds--popover-caret,.cds--popover--bottom-left .cds--popover-caret,.cds--popover--bottom-right .cds--popover-caret,:host(cds-popover-content[align=bottom-left]) .cds--popover-caret,:host(cds-popover-content[align=bottom-right]) .cds--popover-caret,:host(cds-popover-content[align=bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom]) .cds--popover-caret{bottom:0;right:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 100%,50% 0,100% 100%);clip-path:polygon(0 100%,50% 0,100% 100%);transform:translate(50%,var(--cds-popover-offset,0))}.cds--popover--top .cds--popover-content,:host(cds-popover-content[align=top]) .cds--popover-content,:host(cds-tooltip-content[align=top]) .cds--popover-content{top:0;right:50%;transform:translate(50%,calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-left .cds--popover-content,:host(cds-popover-content[align=top-left]) .cds--popover-content,:host(cds-tooltip-content[align=top-left]) .cds--popover-content{top:0;right:0;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-right .cds--popover-content,:host(cds-popover-content[align=top-right]) .cds--popover-content,:host(cds-tooltip-content[align=top-right]) .cds--popover-content{top:0;left:0;transform:translate(var(--cds-popover-offset,0),calc(-1*(-100% - var(--cds-popover-offset,0))))}.cds--popover--top .cds--popover-content::before,.cds--popover--top-left .cds--popover-content::before,.cds--popover--top-right .cds--popover-content::before,:host(cds-popover-content[align=top-left]) .cds--popover-content::before,:host(cds-popover-content[align=top-right]) .cds--popover-content::before,:host(cds-popover-content[align=top]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=top]) .cds--popover-content::before{left:0;bottom:0;right:0;height:var(--cds-popover-offset,0);transform:translateY(100%)}.cds--popover--top .cds--popover-caret,.cds--popover--top-left .cds--popover-caret,.cds--popover--top-right .cds--popover-caret,:host(cds-popover-content[align=top-left]) .cds--popover-caret,:host(cds-popover-content[align=top-right]) .cds--popover-caret,:host(cds-popover-content[align=top]) .cds--popover-caret,:host(cds-tooltip-content[align=top-left]) .cds--popover-caret,:host(cds-tooltip-content[align=top-right]) .cds--popover-caret,:host(cds-tooltip-content[align=top]) .cds--popover-caret{top:0;right:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);transform:translate(50%,calc(-1 * var(--cds-popover-offset,0)))}.cds--popover--right .cds--popover-content,:host(cds-popover-content[align=right]) .cds--popover-content,:host(cds-tooltip-content[align=right]) .cds--popover-content{top:50%;right:100%;transform:translate(var(--cds-popover-offset,0),50%)}.cds--popover--right-top .cds--popover-content,:host(cds-popover-content[align=right-top]) .cds--popover-content,:host(cds-tooltip-content[align=right-top]) .cds--popover-content{top:50%;right:100%;transform:translate(var(--cds-popover-offset,0),calc(-1*(.5 * var(--cds-popover-offset,0) * -1 - 16px)))}.cds--popover--right-bottom .cds--popover-content,:host(cds-popover-content[align=right-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content{bottom:50%;right:100%;transform:translate(var(--cds-popover-offset,0),calc(-1*(.5 * var(--cds-popover-offset,0) + 16px)))}.cds--popover--right .cds--popover-content::before,.cds--popover--right-bottom .cds--popover-content::before,.cds--popover--right-top .cds--popover-content::before,:host(cds-popover-content[align=right-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=right-top]) .cds--popover-content::before,:host(cds-popover-content[align=right]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=right]) .cds--popover-content::before{top:0;bottom:0;right:0;width:var(--cds-popover-offset,0);transform:translateX(100%)}.cds--popover--right .cds--popover-caret,.cds--popover--right-bottom .cds--popover-caret,.cds--popover--right-top .cds--popover-caret,:host(cds-popover-content[align=right-bottom]) .cds--popover-caret,:host(cds-popover-content[align=right-top]) .cds--popover-caret,:host(cds-popover-content[align=right]) .cds--popover-caret,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=right-top]) .cds--popover-caret,:host(cds-tooltip-content[align=right]) .cds--popover-caret{top:50%;right:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);transform:translate(calc(-1*(var(--cds-popover-offset,0) - 100%)),-50%)}.cds--popover--left .cds--popover-content,:host(cds-popover-content[align=left]) .cds--popover-content,:host(cds-tooltip-content[align=left]) .cds--popover-content{top:50%;left:100%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0) + .1px)),-50%)}.cds--popover--left-top .cds--popover-content,:host(cds-popover-content[align=left-top]) .cds--popover-content,:host(cds-tooltip-content[align=left-top]) .cds--popover-content{top:-50%;left:100%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(-.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--left-bottom .cds--popover-content,:host(cds-popover-content[align=left-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content{left:100%;bottom:-50%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(.5 * var(--cds-popover-offset,0) - 16px))}.cds--popover--left .cds--popover-content::before,.cds--popover--left-bottom .cds--popover-content::before,.cds--popover--left-top .cds--popover-content::before,:host(cds-popover-content[align=left-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=left-top]) .cds--popover-content::before,:host(cds-popover-content[align=left]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=left]) .cds--popover-content::before{top:0;left:0;bottom:0;width:var(--cds-popover-offset,0);transform:translateX(-100%)}.cds--popover--left .cds--popover-caret,.cds--popover--left-bottom .cds--popover-caret,.cds--popover--left-top .cds--popover-caret,:host(cds-popover-content[align=left-bottom]) .cds--popover-caret,:host(cds-popover-content[align=left-top]) .cds--popover-caret,:host(cds-popover-content[align=left]) .cds--popover-caret,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=left-top]) .cds--popover-caret,:host(cds-tooltip-content[align=left]) .cds--popover-caret{top:50%;left:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0) + 100%)),-50%)}.cds--popover--tab-tip .cds--popover-content{border-radius:0}.cds--popover--tab-tip__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center}.cds--popover--tab-tip__button *,.cds--popover--tab-tip__button ::after,.cds--popover--tab-tip__button ::before{box-sizing:inherit}.cds--popover--tab-tip__button::-moz-focus-inner{border:0}.cds--popover--tab-tip__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--popover--tab-tip__button:focus{outline-style:dotted}}.cds--popover--tab-tip__button:hover{background-color:var(--cds-layer-hover)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{background:var(--cds-layer);box-shadow:0 2px 2px rgba(0,0,0,.2)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after{position:absolute;z-index:6001;bottom:0;width:100%;height:2px;background:var(--cds-layer);content:""}.cds--popover--tab-tip__button svg{fill:var(--cds-icon-primary,#161616)}:host(cds-popover[tabTip][open]) ::slotted(.cds--popover--tab-tip__button){background:var(--cds-layer)!important;box-shadow:0 2px 2px rgba(0,0,0,.2)}:host(cds-popover-content[open]) .cds--popover-content,:host(cds-tooltip-content[open]) .cds--popover-content{display:block}:host(cds-popover-content[open][tabTip]) .cds--popover-content,:host(cds-tooltip-content[open][tabTip]) .cds--popover-content{border-radius:0;background:var(--cds-layer)}:host(cds-popover-content[open][caret]) .cds--popover-caret,:host(cds-tooltip-content[open][caret]) .cds--popover-caret{display:block}:host(cds-popover-content[dropShadow]){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--tooltip{--cds-popover-offset:12px}.cds--tooltip-content,:host(prefix-tooltip-content) ::slotted(.cds-tooltip-content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:18rem;padding:var(--cds-tooltip-padding-block,1rem) var(--cds-tooltip-padding-inline,1rem);color:var(--cds-text-inverse,#fff)}.cds--icon-tooltip{--cds-tooltip-padding-block:0.125rem;--cds-popover-caret-width:0.5rem;--cds-popover-caret-height:0.25rem;--cds-popover-offset:0.5rem}.cds--icon-tooltip .cds--tooltip-content,.cds--icon-tooltip :host(prefix-tooltip-content) ::slotted(.cds-tooltip-content),:host(prefix-tooltip-content) .cds--icon-tooltip ::slotted(.cds-tooltip-content){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--definition-term{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;border-bottom:1px dotted var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616)}.cds--definition-term *,.cds--definition-term ::after,.cds--definition-term ::before{box-sizing:inherit}.cds--definition-term::-moz-focus-inner{border:0}.cds--definition-term:focus{outline:1px solid var(--cds-focus,#0f62fe);border-bottom-color:var(--cds-border-interactive,#0f62fe)}@media screen and (prefers-contrast){.cds--definition-term:focus{outline-style:dotted}}.cds--definition-term:hover{border-bottom-color:var(--cds-border-interactive,#0f62fe)}.cds--definition-tooltip{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:11rem;padding:.5rem 1rem}',
+  '@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--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--popover-container{position:relative;display:inline-block}.cds--popover--high-contrast .cds--popover,.cds--popover--high-contrast :host(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--high-contrast :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--high-contrast ::slotted(cds-tooltip-content){--cds-popover-background-color:var(--cds-background-inverse, #393939);--cds-popover-text-color:var(--cds-text-inverse, #ffffff)}.cds--popover--drop-shadow .cds--popover,.cds--popover--drop-shadow :host(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),.cds--popover--drop-shadow :host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-popover[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) .cds--popover--drop-shadow ::slotted(cds-tooltip-content){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--popover--caret{--cds-popover-offset:0.625rem}.cds--popover,:host(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-popover-content),:host(cds-popover[highContrast]) ::slotted(cds-tooltip-content),:host(cds-tooltip-content),:host(cds-tooltip[highContrast]) ::slotted(cds-popover-content),:host(cds-tooltip[highContrast]) ::slotted(cds-tooltip-content){position:absolute;z-index:6000;top:0;left:0;bottom:0;right:0;filter:var(--cds-popover-drop-shadow, none);pointer-events:none}.cds--popover-content{position:absolute;z-index:6000;display:none;width:-moz-max-content;width:max-content;max-width:23rem;background-color:var(--cds-popover-background-color,var(--cds-layer));border-radius:var(--cds-popover-border-radius,2px);color:var(--cds-popover-text-color,var(--cds-text-primary,#161616));pointer-events:auto}.cds--popover--open .cds--popover-content{display:block}.cds--popover-content::before{position:absolute;display:none;content:""}.cds--popover--open .cds--popover-content::before{display:block}.cds--popover-caret{position:absolute;z-index:6000;display:none;background-color:var(--cds-popover-background-color,var(--cds-layer));will-change:transform}.cds--popover--open.cds--popover--caret .cds--popover-caret{display:block}.cds--popover--bottom .cds--popover-content,:host(cds-popover-content[align=bottom]) .cds--popover-content,:host(cds-tooltip-content[align=bottom]) .cds--popover-content{bottom:0;right:50%;transform:translate(50%,calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-left .cds--popover-content,:host(cds-popover-content[align=bottom-left]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content{bottom:0;right:0;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(100% + var(--cds-popover-offset,0)))}.cds--popover--bottom-right .cds--popover-content,:host(cds-popover-content[align=bottom-right]) .cds--popover-content,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content{left:0;bottom:0;transform:translate(var(--cds-popover-offset,0),calc(-1*(100% + var(--cds-popover-offset,0))))}.cds--popover--bottom .cds--popover-content::before,.cds--popover--bottom-left .cds--popover-content::before,.cds--popover--bottom-right .cds--popover-content::before,:host(cds-popover-content[align=bottom-left]) .cds--popover-content::before,:host(cds-popover-content[align=bottom-right]) .cds--popover-content::before,:host(cds-popover-content[align=bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=bottom]) .cds--popover-content::before{top:0;left:0;right:0;height:var(--cds-popover-offset,0);transform:translateY(-100%)}.cds--popover--bottom .cds--popover-caret,.cds--popover--bottom-left .cds--popover-caret,.cds--popover--bottom-right .cds--popover-caret,:host(cds-popover-content[align=bottom-left]) .cds--popover-caret,:host(cds-popover-content[align=bottom-right]) .cds--popover-caret,:host(cds-popover-content[align=bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-left]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom-right]) .cds--popover-caret,:host(cds-tooltip-content[align=bottom]) .cds--popover-caret{bottom:0;right:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 100%,50% 0,100% 100%);clip-path:polygon(0 100%,50% 0,100% 100%);transform:translate(50%,var(--cds-popover-offset,0))}.cds--popover--top .cds--popover-content,:host(cds-popover-content[align=top]) .cds--popover-content,:host(cds-tooltip-content[align=top]) .cds--popover-content{top:0;right:50%;transform:translate(50%,calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-left .cds--popover-content,:host(cds-popover-content[align=top-left]) .cds--popover-content,:host(cds-tooltip-content[align=top-left]) .cds--popover-content{top:0;right:0;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--top-right .cds--popover-content,:host(cds-popover-content[align=top-right]) .cds--popover-content,:host(cds-tooltip-content[align=top-right]) .cds--popover-content{top:0;left:0;transform:translate(var(--cds-popover-offset,0),calc(-1*(-100% - var(--cds-popover-offset,0))))}.cds--popover--top .cds--popover-content::before,.cds--popover--top-left .cds--popover-content::before,.cds--popover--top-right .cds--popover-content::before,:host(cds-popover-content[align=top-left]) .cds--popover-content::before,:host(cds-popover-content[align=top-right]) .cds--popover-content::before,:host(cds-popover-content[align=top]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-left]) .cds--popover-content::before,:host(cds-tooltip-content[align=top-right]) .cds--popover-content::before,:host(cds-tooltip-content[align=top]) .cds--popover-content::before{left:0;bottom:0;right:0;height:var(--cds-popover-offset,0);transform:translateY(100%)}.cds--popover--top .cds--popover-caret,.cds--popover--top-left .cds--popover-caret,.cds--popover--top-right .cds--popover-caret,:host(cds-popover-content[align=top-left]) .cds--popover-caret,:host(cds-popover-content[align=top-right]) .cds--popover-caret,:host(cds-popover-content[align=top]) .cds--popover-caret,:host(cds-tooltip-content[align=top-left]) .cds--popover-caret,:host(cds-tooltip-content[align=top-right]) .cds--popover-caret,:host(cds-tooltip-content[align=top]) .cds--popover-caret{top:0;right:50%;width:var(--cds-popover-caret-width,.75rem);height:var(--cds-popover-caret-height,.375rem);-webkit-clip-path:polygon(0 0,50% 100%,100% 0);clip-path:polygon(0 0,50% 100%,100% 0);transform:translate(50%,calc(-1 * var(--cds-popover-offset,0)))}.cds--popover--right .cds--popover-content,:host(cds-popover-content[align=right]) .cds--popover-content,:host(cds-tooltip-content[align=right]) .cds--popover-content{top:50%;right:100%;transform:translate(var(--cds-popover-offset,0),50%)}.cds--popover--right-top .cds--popover-content,:host(cds-popover-content[align=right-top]) .cds--popover-content,:host(cds-tooltip-content[align=right-top]) .cds--popover-content{top:50%;right:100%;transform:translate(var(--cds-popover-offset,0),calc(-1*(.5 * var(--cds-popover-offset,0) * -1 - 16px)))}.cds--popover--right-bottom .cds--popover-content,:host(cds-popover-content[align=right-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content{bottom:50%;right:100%;transform:translate(var(--cds-popover-offset,0),calc(-1*(.5 * var(--cds-popover-offset,0) + 16px)))}.cds--popover--right .cds--popover-content::before,.cds--popover--right-bottom .cds--popover-content::before,.cds--popover--right-top .cds--popover-content::before,:host(cds-popover-content[align=right-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=right-top]) .cds--popover-content::before,:host(cds-popover-content[align=right]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=right-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=right]) .cds--popover-content::before{top:0;bottom:0;right:0;width:var(--cds-popover-offset,0);transform:translateX(100%)}.cds--popover--right .cds--popover-caret,.cds--popover--right-bottom .cds--popover-caret,.cds--popover--right-top .cds--popover-caret,:host(cds-popover-content[align=right-bottom]) .cds--popover-caret,:host(cds-popover-content[align=right-top]) .cds--popover-caret,:host(cds-popover-content[align=right]) .cds--popover-caret,:host(cds-tooltip-content[align=right-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=right-top]) .cds--popover-caret,:host(cds-tooltip-content[align=right]) .cds--popover-caret{top:50%;right:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);transform:translate(calc(-1*(var(--cds-popover-offset,0) - 100%)),-50%)}.cds--popover--left .cds--popover-content,:host(cds-popover-content[align=left]) .cds--popover-content,:host(cds-tooltip-content[align=left]) .cds--popover-content{top:50%;left:100%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0) + .1px)),-50%)}.cds--popover--left-top .cds--popover-content,:host(cds-popover-content[align=left-top]) .cds--popover-content,:host(cds-tooltip-content[align=left-top]) .cds--popover-content{top:-50%;left:100%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(-.5 * var(--cds-popover-offset,0) + 16px))}.cds--popover--left-bottom .cds--popover-content,:host(cds-popover-content[align=left-bottom]) .cds--popover-content,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content{left:100%;bottom:-50%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0))),calc(.5 * var(--cds-popover-offset,0) - 16px))}.cds--popover--left .cds--popover-content::before,.cds--popover--left-bottom .cds--popover-content::before,.cds--popover--left-top .cds--popover-content::before,:host(cds-popover-content[align=left-bottom]) .cds--popover-content::before,:host(cds-popover-content[align=left-top]) .cds--popover-content::before,:host(cds-popover-content[align=left]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-content::before,:host(cds-tooltip-content[align=left-top]) .cds--popover-content::before,:host(cds-tooltip-content[align=left]) .cds--popover-content::before{top:0;left:0;bottom:0;width:var(--cds-popover-offset,0);transform:translateX(-100%)}.cds--popover--left .cds--popover-caret,.cds--popover--left-bottom .cds--popover-caret,.cds--popover--left-top .cds--popover-caret,:host(cds-popover-content[align=left-bottom]) .cds--popover-caret,:host(cds-popover-content[align=left-top]) .cds--popover-caret,:host(cds-popover-content[align=left]) .cds--popover-caret,:host(cds-tooltip-content[align=left-bottom]) .cds--popover-caret,:host(cds-tooltip-content[align=left-top]) .cds--popover-caret,:host(cds-tooltip-content[align=left]) .cds--popover-caret{top:50%;left:100%;width:var(--cds-popover-caret-height,.375rem);height:var(--cds-popover-caret-width,.75rem);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0) + 100%)),-50%)}.cds--popover--tab-tip .cds--popover-content{border-radius:0}.cds--popover--tab-tip__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;width:2rem;height:2rem;align-items:center;justify-content:center}.cds--popover--tab-tip__button *,.cds--popover--tab-tip__button ::after,.cds--popover--tab-tip__button ::before{box-sizing:inherit}.cds--popover--tab-tip__button::-moz-focus-inner{border:0}.cds--popover--tab-tip__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--popover--tab-tip__button:focus{outline-style:dotted}}.cds--popover--tab-tip__button:hover{background-color:var(--cds-layer-hover)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button{background:var(--cds-layer);box-shadow:0 2px 2px rgba(0,0,0,.2)}.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after{position:absolute;z-index:6001;bottom:0;width:100%;height:2px;background:var(--cds-layer);content:""}.cds--popover--tab-tip__button svg{fill:var(--cds-icon-primary,#161616)}:host(cds-popover[tabTip][open]) ::slotted(.cds--popover--tab-tip__button){background:var(--cds-layer)!important;box-shadow:0 2px 2px rgba(0,0,0,.2)}:host(cds-popover-content[open]) .cds--popover-content,:host(cds-tooltip-content[open]) .cds--popover-content{display:block}:host(cds-popover-content[open][tabTip]) .cds--popover-content,:host(cds-tooltip-content[open][tabTip]) .cds--popover-content{border-radius:0;background:var(--cds-layer)}:host(cds-popover-content[open][caret]) .cds--popover-caret,:host(cds-tooltip-content[open][caret]) .cds--popover-caret{display:block}:host(cds-popover-content[dropShadow]){--cds-popover-drop-shadow:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--tooltip{--cds-popover-offset:12px}.cds--tooltip-content,:host(prefix-tooltip-content) ::slotted(.cds-tooltip-content){font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:18rem;padding:var(--cds-tooltip-padding-block,1rem) var(--cds-tooltip-padding-inline,1rem);color:var(--cds-text-inverse,#fff)}.cds--icon-tooltip{--cds-tooltip-padding-block:0.125rem;--cds-popover-caret-width:0.5rem;--cds-popover-caret-height:0.25rem;--cds-popover-offset:0.5rem}.cds--icon-tooltip .cds--tooltip-content,.cds--icon-tooltip :host(prefix-tooltip-content) ::slotted(.cds-tooltip-content),:host(prefix-tooltip-content) .cds--icon-tooltip ::slotted(.cds-tooltip-content){font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px)}.cds--definition-term{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;border-bottom:1px dotted var(--cds-border-strong);border-radius:0;color:var(--cds-text-primary,#161616)}.cds--definition-term *,.cds--definition-term ::after,.cds--definition-term ::before{box-sizing:inherit}.cds--definition-term::-moz-focus-inner{border:0}.cds--definition-term:focus{outline:1px solid var(--cds-focus,#0f62fe);border-bottom-color:var(--cds-border-interactive,#0f62fe)}@media screen and (prefers-contrast){.cds--definition-term:focus{outline-style:dotted}}.cds--definition-term:hover{border-bottom-color:var(--cds-border-interactive,#0f62fe)}.cds--definition-tooltip{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);max-width:11rem;padding:.5rem 1rem}:host(cds-tooltip[data-table]){display:contents}:host(cds-tooltip[data-table]:hover) ::slotted(button){background-color:var(--cds-layer-selected-hover)!important}:host(cds-tooltip[data-table][size=sm]) ::slotted(button),:host(cds-tooltip[data-table][size=xs]) ::slotted(button){height:calc(100% + 1px)!important}:host(cds-tooltip[toolbar-action]) ::slotted(button){outline:0!important}',
 ]);

package/es/components/ui-shell/header-global-action.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import CDSButton from '../button/button';
+/**
+ * Header global action button
+ *
+ * @element cds-header-global-action
+ */
+declare class CDSHeaderGlobalAction extends CDSButton {
+    /**
+     * Specify whether the action is currently active
+     */
+    active: any;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    static styles: any;
+}
+export default CDSHeaderGlobalAction;
+
+//# sourceMappingURL=header-global-action.d.ts.map

package/es/components/ui-shell/header-global-action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ui-shell/header-global-action.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAIzC;;;;GAIG;AACH,cACM,qBAAsB,SAAQ,SAAS;IAC3C;;OAEG;IAEH,MAAM,MAAC;IAEP,iBAAiB;IAKjB,YAAY;IAYZ,MAAM,CAAC,iBAAiB;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"header-global-action.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    const button = this.shadowRoot?.querySelector('button');\n\n    if (button) {\n      button?.classList.add(`${prefix}--header__action`);\n\n      if (this.active) {\n        button?.classList.add(`${prefix}--header__action--active`);\n      }\n    }\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"]}

package/es/components/ui-shell/header-global-action.js

@@ -0,0 +1,88 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { BUTTON_TOOLTIP_POSITION } from '../button/button';
+import CDSButton from '../button/button';
+import styles from "././header.css.js";
+import { prefix } from '../../globals/settings';
+
+/**
+ * Header global action button
+ *
+ * @element cds-header-global-action
+ */
+let CDSHeaderGlobalAction = _decorate([customElement(`${prefix}-header-global-action`)], function (_initialize, _CDSButton) {
+  class CDSHeaderGlobalAction extends _CDSButton {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: CDSHeaderGlobalAction,
+    d: [{
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "active",
+      value: void 0
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value:
+      /**
+       * Specify whether the action is currently active
+       */
+
+      function connectedCallback() {
+        this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;
+        _get(_getPrototypeOf(CDSHeaderGlobalAction.prototype), "connectedCallback", this).call(this);
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated() {
+        var _this$shadowRoot;
+        const button = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector('button');
+        if (button) {
+          button === null || button === void 0 ? void 0 : button.classList.add(`${prefix}--header__action`);
+          if (this.active) {
+            button === null || button === void 0 ? void 0 : button.classList.add(`${prefix}--header__action--active`);
+          }
+        }
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "shadowRootOptions",
+      value() {
+        return _objectSpread(_objectSpread({}, LitElement.shadowRootOptions), {}, {
+          delegatesFocus: true
+        });
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, CDSButton);
+export default CDSHeaderGlobalAction;
+//# sourceMappingURL=header-global-action.js.map

package/es/components/ui-shell/header-global-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-global-action.js","names":["LitElement","property","customElement","BUTTON_TOOLTIP_POSITION","CDSButton","styles","prefix","CDSHeaderGlobalAction","_decorate","_initialize","_CDSButton","constructor","args","F","d","kind","decorators","type","Boolean","reflect","key","value","connectedCallback","tooltipPosition","BOTTOM","_get","_getPrototypeOf","prototype","call","firstUpdated","_this$shadowRoot","button","shadowRoot","querySelector","classList","add","active","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-global-action.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { BUTTON_TOOLTIP_POSITION } from '../button/button';\nimport CDSButton from '../button/button';\nimport styles from './header.scss';\nimport { prefix } from '../../globals/settings';\n\n/**\n * Header global action button\n *\n * @element cds-header-global-action\n */\n@customElement(`${prefix}-header-global-action`)\nclass CDSHeaderGlobalAction extends CDSButton {\n  /**\n   * Specify whether the action is currently active\n   */\n  @property({ type: Boolean, reflect: true })\n  active;\n\n  connectedCallback() {\n    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    const button = this.shadowRoot?.querySelector('button');\n\n    if (button) {\n      button?.classList.add(`${prefix}--header__action`);\n\n      if (this.active) {\n        button?.classList.add(`${prefix}--header__action--active`);\n      }\n    }\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderGlobalAction;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,KAAK;AAChC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,OAAOC,SAAS,MAAM,kBAAkB;AACxC,OAAOC,MAAM,MAAM,mBAAe;AAClC,SAASC,MAAM,QAAQ,wBAAwB;;AAE/C;AACA;AACA;AACA;AACA;AAJA,IAMMC,qBAAqB,GAAAC,SAAA,EAD1BN,aAAa,CAAE,GAAEI,MAAO,uBAAsB,CAAC,aAAAG,WAAA,EAAAC,UAAA;EAAhD,MACMH,qBAAqB,SAAAG,UAAA,CAAmB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA8B9C;EAAC;IAAAI,CAAA,EA9BKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBf,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAC,GAAA;MAAAC,KAAA;IAAA;MAAAN,IAAA;MAAAK,GAAA;MAAAC,KAAA;MAH3C;AACF;AACA;;MAIE,SAAAC,kBAAA,EAAoB;QAClB,IAAI,CAACC,eAAe,GAAGpB,uBAAuB,CAACqB,MAAM;QACrDC,IAAA,CAAAC,eAAA,CATEnB,qBAAqB,CAAAoB,SAAA,8BAAAC,IAAA;MAUzB;IAAC;MAAAb,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAAQ,aAAA,EAAe;QAAA,IAAAC,gBAAA;QACb,MAAMC,MAAM,IAAAD,gBAAA,GAAG,IAAI,CAACE,UAAU,cAAAF,gBAAA,uBAAfA,gBAAA,CAAiBG,aAAa,CAAC,QAAQ,CAAC;QAEvD,IAAIF,MAAM,EAAE;UACVA,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEG,SAAS,CAACC,GAAG,CAAE,GAAE7B,MAAO,kBAAiB,CAAC;UAElD,IAAI,IAAI,CAAC8B,MAAM,EAAE;YACfL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEG,SAAS,CAACC,GAAG,CAAE,GAAE7B,MAAO,0BAAyB,CAAC;UAC5D;QACF;MACF;IAAC;MAAAS,IAAA;MAAAsB,MAAA;MAAAjB,GAAA;MAAAC,MAAA;QAAA,OAAAiB,aAAA,CAAAA,aAAA,KAGItC,UAAU,CAACuC,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAAzB,IAAA;MAAAsB,MAAA;MAAAjB,GAAA;MAAAC,MAAA;QAAA,OAGNhB,MAAM;MAAA;IAAA;EAAA;AAAA,GA7BYD,SAAS;AAgC7C,eAAeG,qBAAqB"}

package/es/components/ui-shell/header-menu-button.d.ts

@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
-declare const BXHeaderMenuButton_base: {
+import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
+declare const CDSHeaderMenuButton_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -322,7 +322,7 @@ declare const BXHeaderMenuButton_base: {
  * @csspart toggle-icon The toggle icon.
  * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
  */
-declare class BXHeaderMenuButton extends BXHeaderMenuButton_base {
+declare class CDSHeaderMenuButton extends CDSHeaderMenuButton_base {
     private _handleClick;
     /**
      * `true` if the button should represent its active state.
@@ -345,9 +345,9 @@ declare class BXHeaderMenuButton extends BXHeaderMenuButton_base {
      */
     disabled: boolean;
     /**
-     * Usage mode of the side nav.
+     * If `true` will style the side nav to sit below the header
      */
-    usageMode: SIDE_NAV_USAGE_MODE;
+    isNotChildOfHeader: boolean;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * The name of the custom event fired after this header menu button is toggled upon a user gesture.
@@ -360,6 +360,6 @@ declare class BXHeaderMenuButton extends BXHeaderMenuButton_base {
     };
     static styles: any;
 }
-export default BXHeaderMenuButton;
+export default CDSHeaderMenuButton;
 
 //# sourceMappingURL=header-menu-button.d.ts.map

package/es/components/ui-shell/header-menu-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGzE;;;;;;;GAOG;AACH,cACM,kBAAmB,SAAQ,uBAAsB;IACrD,OAAO,CAAC,YAAY;IAkBpB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAA2B;IAE5C;;OAEG;IAEH,mBAAmB,SAA0B;IAE7C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,MAAM;IA2BN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC","file":"header-menu-button.d.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass BXHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof BXHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenuButton;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGpD;;;;;;;GAOG;AACH,cACM,mBAAoB,SAAQ,wBAAsB;IACtD,OAAO,CAAC,YAAY;IAkBpB;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAA2B;IAE5C;;OAEG;IAEH,mBAAmB,SAA0B;IAE7C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAKH,kBAAkB,UAAS;IAE3B,MAAM;IA2BN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,mBAAmB,CAAC","file":"header-menu-button.d.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"]}