@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

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--tooltip,:host(cds-tooltip-body){--cds-popover-offset:12px}.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{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}.cds--popover-container{position:relative;display:inline-block}.cds--popover--high-contrast .cds--popover{--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:drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))}.cds--popover--caret{--cds-popover-offset:0.625rem}.cds--popover{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{bottom:0;right:50%;transform:translate(50%,calc(100% + var(--cds-popover-offset,0)))}.cds--popover--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{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{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{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{top:0;right:50%;transform:translate(50%,calc(-100% - var(--cds-popover-offset,0)))}.cds--popover--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{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{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{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{top:50%;right:100%;transform:translate(var(--cds-popover-offset,0),50%)}.cds--popover--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{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{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{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{top:50%;left:100%;transform:translate(calc(-1*(-1 * var(--cds-popover-offset,0) + .1px)),-50%)}.cds--popover--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{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{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{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-tooltip) .sb-tooltip-trigger{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%;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--cds-border-subtle)}:host(cds-tooltip) .sb-tooltip-trigger *,:host(cds-tooltip) .sb-tooltip-trigger ::after,:host(cds-tooltip) .sb-tooltip-trigger ::before{box-sizing:inherit}:host(cds-tooltip) .sb-tooltip-trigger::-moz-focus-inner{border:0}:host(cds-tooltip) .sb-tooltip-trigger svg{fill:var(--cds-background-inverse,#393939)}:host(cds-tooltip-body) ::slotted(cds-tooltip-footer){display:flex;justify-content:space-between;align-items:center;margin-top:1rem}:host(cds-tooltip-body) ::slotted(p){font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);text-align:right}:host(cds-tooltip-body[direction=top]){margin-bottom:.5rem}:host(cds-tooltip-body[direction=top]) .cds--tooltip__caret{top:auto;bottom:rem(-6px);transform:rotate(-180deg)}:host(cds-tooltip-body[direction=right]){margin-right:.5rem}:host(cds-tooltip-body[direction=right]) .cds--tooltip__caret{left:auto;right:calc(-6.875px + 1px);transform:rotate(-270deg) translate(-25%,-50%)}:host(cds-tooltip-body[direction=bottom]){margin-top:.5rem}:host(cds-tooltip-body[direction=left]){margin-left:.5rem}:host(cds-tooltip-body[direction=left]) .cds--tooltip__caret{left:calc(-6.875px + 1px);right:auto;transform:rotate(-90deg) translate(25%,-50%)}:host(cds-tooltip-body[direction=bottom][alignment=start]) .cds--tooltip__caret,:host(cds-tooltip-body[direction=top][alignment=start]) .cds--tooltip__caret{margin-right:rem(17px)}:host(cds-tooltip-body[direction=bottom][alignment=end]) .cds--tooltip__caret,:host(cds-tooltip-body[direction=top][alignment=end]) .cds--tooltip__caret{margin-left:rem(17px)}:host(cds-tooltip-body[direction=left]) .cds--tooltip__caret,:host(cds-tooltip-body[direction=right]) .cds--tooltip__caret{top:50%}:host(cds-tooltip-body[direction=left][alignment=start]) .cds--tooltip__caret,:host(cds-tooltip-body[direction=right][alignment=start]) .cds--tooltip__caret{top:calc(6.875px + rem(17px))}:host(cds-tooltip-body[direction=left][alignment=end]) .cds--tooltip__caret,:host(cds-tooltip-body[direction=right][alignment=end]) .cds--tooltip__caret{top:auto;bottom:rem(17px)}:host(cds-tooltip-icon){outline:0}:host(cds-tooltip-icon) .cds--tooltip__trigger:focus ::slotted(svg),:host(cds-tooltip-icon) :host(cds-tooltip:focus) ::slotted(svg){outline:1px solid var(--cds-focus,#0f62fe)}',
+  '@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}',
 ]);

package/es/components/ui-shell/side-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAkDzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\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` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = 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  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"]}
+{"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAkDzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\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` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = 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  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"]}

package/es/components/ui-shell/side-nav.js

@@ -14,7 +14,7 @@ let _ = t => t,
 
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';

package/es/components/ui-shell/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","_handleMouseover","_handleMouseout","reflect","attribute","RESPONSIVE","type","Boolean","REGULAR","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","collapseMode","usageMode","FIXED","RAIL","HEADER_NAV","console","warn","doc","getRootNode","selectorButtonToggle","render","_t","_","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from 'carbon-components/es/globals/js/misc/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\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` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = 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  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","_handleMouseover","_handleMouseout","reflect","attribute","RESPONSIVE","type","Boolean","REGULAR","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","collapseMode","usageMode","FIXED","RAIL","HEADER_NAV","console","warn","doc","getRootNode","selectorButtonToggle","render","_t","_","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\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` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = 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  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,OAAOC,EAAE,MAAM,yBAAyB;AACxC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,YAAY,MAAM,wCAAwC;AACjE,SAASC,OAAO,QAAQ,2CAA2C;AAEnE,SAASC,sBAAsB,EAAEC,mBAAmB,QAAQ,QAAQ;AAGpE,OAAOC,MAAM,MAAM,qBAAiB;AAEpC,SAASF,sBAAsB,EAAEC,mBAAmB;;AAEpD;AACA;AACA;AACA;AACA;AAJA,IAMME,SAAS,GAAAC,SAAA,EADdV,aAAa,CAAE,GAAEE,MAAO,WAAU,CAAC,aAAAS,WAAA,EAAAC,kBAAA;EAApC,MACMH,SAAS,SAAAG,kBAAA,CAAuC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAqNtD;EAAC;IAAAI,CAAA,EArNKN,SAAS;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIM,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAKc,IAAI;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAKbC,OAAO,CAACC,OAAO,EAAE;MAAA;IAAA;MAAAJ,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAb9C;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAAG,4BAAA,EAA0C;QACxC,OAAO,IAAI,CAACC,cAAc,CAACC,IAAI,CAAC,MAAM,IAAI,CAACC,kBAAkB,CAAC;MAChE;;MAEA;AACF;AACA;IAFE;MAAAR,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAO,kBAAA,EAA4B;QAC1B,IAAI,IAAI,CAACC,YAAY,EAAE;UACrB,IAAI,CAACA,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,OAAO,EAAE;QACjD;MACF;;MAEA;AACF;AACA;IAFE;MAAAX,IAAA;MAAAY,UAAA,GAGCzB,YAAY,CAAC,8BAA8B,CAAC;MAAAc,GAAA;MAAAC,MAAA;QAAA,OAEf,MAAOW,KAAkB,IAAK;UAC1D,IAAI,CAACC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACC,MAAM;UACnC,IAAI,IAAI,CAACF,QAAQ,EAAE;YACjB,MAAM,IAAI,CAACT,2BAA2B;YACtC;YACA,IAAI,IAAI,CAACS,QAAQ,EAAE;cAAA,IAAAG,mBAAA;cACjB,CAAAA,mBAAA,GACE,IAAI,CAACC,aAAa,CACf,IAAI,CAACtB,WAAW,CAAsBuB,gBAAgB,CACxD,cAAAF,mBAAA,uBAHHA,mBAAA,CAIGG,KAAK,EAAE;YACZ;UACF;QACF,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAED;AACF;AACA;MACE,SAAAmB,uCAAA,EAAiD;QAC/C,MAAM;UAAEP,QAAQ;UAAEQ,QAAQ,EAAEC;QAAQ,CAAC,GAAG,IAAI;QAC5CnC,OAAO,CACL,IAAI,CAACoC,gBAAgB,CAClB,IAAI,CAAC5B,WAAW,CAAsB6B,YAAY,CACpD,EACAC,IAAI,IAAK;UACPA,IAAI,CAAmBC,cAAc,GAAG,CAACb,QAAQ,IAAI,CAACS,OAAO;QAChE,CAAC,CACF;MACH;;MAEA;AACF;AACA;IAFE;MAAAvB,IAAA;MAAAY,UAAA,GAGCzB,YAAY,CAAC,WAAW,CAAC;MAAAc,GAAA;MAAAC,KAAA,EAA1B,SAAA0B,iBAAA,EAE2B;QACzB,IAAI,CAACN,QAAQ,GAAG,IAAI;QACpB,IAAI,CAACD,sCAAsC,EAAE;MAC/C;;MAEA;AACF;AACA;IAFE;MAAArB,IAAA;MAAAY,UAAA,GAGCzB,YAAY,CAAC,UAAU,CAAC;MAAAc,GAAA;MAAAC,KAAA,EAAzB,SAAA2B,gBAAA,EAE0B;QACxB,IAAI,CAACP,QAAQ,GAAG,KAAK;QACrB,IAAI,CAACD,sCAAsC,EAAE;MAC/C;;MAEA;AACF;AACA;IAFE;MAAArB,IAAA;MAAAY,UAAA,GAGC9B,QAAQ,CAAC;QAAEgD,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAgB,CAAC,CAAC;MAAA9B,GAAA;MAAAC,MAAA;QAAA,OACzCb,sBAAsB,CAAC2C,UAAU;MAAA;IAAA;MAAAhC,IAAA;MAAAY,UAAA,GAK/C9B,QAAQ,CAAC;QAAEmD,IAAI,EAAEC,OAAO;QAAEJ,OAAO,EAAE;MAAK,CAAC,CAAC;MAAA7B,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAKf9B,QAAQ,CAAC;QAAEgD,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAA9B,GAAA;MAAAC,MAAA;QAAA,OACzCZ,mBAAmB,CAAC6C,OAAO;MAAA;IAAA;MAAAnC,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAVvC;AACF;AACA;MAIE;AACF;AACA;MAIE,SAAAkC,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC;QACzC;QACAC,IAAA,CAAAC,eAAA,CA7GEhD,SAAS,CAAAiD,SAAA,8BAAAC,IAAA;MA8Gb;IAAC;MAAA1C,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAyC,qBAAA,EAAuB;QACrB,IAAI,CAAClC,iBAAiB,EAAE;QACxB8B,IAAA,CAAAC,eAAA,CAlHEhD,SAAS,CAAAiD,SAAA,iCAAAC,IAAA;MAmHb;IAAC;MAAA1C,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAA0C,aAAaC,iBAAiB,EAAE;QAC9B,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,IAAI,CAACtC,kBAAkB,GAAG,IAAIL,OAAO,CAAEC,OAAO,IAAK;YACjD,IAAI,CAACK,iBAAiB,EAAE;YACxB,IAAI,CAACC,YAAY,GAAG1B,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM;cAClD,IAAI,CAACyB,iBAAiB,EAAE;cACxBL,OAAO,EAAE;YACX,CAAC,CAAC;UACJ,CAAC,CAAC;QACJ;QACA,OAAO,IAAI;MACb;IAAC;MAAAJ,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAA6C,QAAQF,iBAAiB,EAAE;QACzB,IACEA,iBAAiB,CAACC,GAAG,CAAC,cAAc,CAAC,IACrCD,iBAAiB,CAACC,GAAG,CAAC,WAAW,CAAC,EAClC;UACA,MAAM;YAAEE,YAAY;YAAEC;UAAU,CAAC,GAAG,IAAI;UACxC,IACE,CAACD,YAAY,KAAK3D,sBAAsB,CAAC6D,KAAK,IAC5CF,YAAY,KAAK3D,sBAAsB,CAAC8D,IAAI,KAC9CF,SAAS,KAAK3D,mBAAmB,CAAC8D,UAAU,EAC5C;YACAC,OAAO,CAACC,IAAI,CACV,mEAAmE,CACpE,CAAC,CAAC;UACL;QACF;;QACA,MAAMC,GAAG,GAAG,IAAI,CAACC,WAAW,EAAc;QAC1C,IAAIX,iBAAiB,CAACC,GAAG,CAAC,cAAc,CAAC,EAAE;UACzC1D,OAAO,CACLmE,GAAG,CAAC/B,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAsB6D,oBAAoB,CAC5D,EACA/B,IAAI,IAAK;YACPA,IAAI,CAAwBsB,YAAY,GAAG,IAAI,CAACA,YAAY;UAC/D,CAAC,CACF;QACH;QACA,IAAIH,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,IAAI,CAACzB,sCAAsC,EAAE;UAC7CjC,OAAO,CACLmE,GAAG,CAAC/B,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAsB6D,oBAAoB,CAC5D,EACA/B,IAAI,IAAK;YACPA,IAAI,CAAwBV,MAAM,GAAG,IAAI,CAACF,QAAQ;UACrD,CAAC,CACF;QACH;QACA,IAAI+B,iBAAiB,CAACC,GAAG,CAAC,WAAW,CAAC,EAAE;UACtC1D,OAAO,CACLmE,GAAG,CAAC/B,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAsB6D,oBAAoB,CAC5D,EACA/B,IAAI,IAAK;YACPA,IAAI,CAAwBuB,SAAS,GAAG,IAAI,CAACA,SAAS;UACzD,CAAC,CACF;QACH;MACF;IAAC;MAAAjD,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAwD,OAAA,EAAS;QACP,OAAO7E,IAAI,CAAA8E,EAAA,KAAAA,EAAA,GAAAC,CAAC,iBAAe;MAC7B;;MAEA;AACF;AACA;IAFE;MAAA5D,IAAA;MAAA6D,MAAA;MAAA5D,GAAA;MAAAC,KAAA,EAGA,SAAAuD,qBAAA,EAAkC;QAChC,OAAQ,GAAExE,MAAO,qBAAoB;MACvC;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAA6D,MAAA;MAAA5D,GAAA;MAAAC,KAAA,EAGA,SAAAiB,iBAAA,EAA8B;QAC5B,OAAQ,GAAElC,MAAO,mBAAkBA,MAAO,wBAAuBA,MAAO,gBAAe;MACzF;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAA6D,MAAA;MAAA5D,GAAA;MAAAC,KAAA,EAGA,SAAAuB,aAAA,EAA0B;QACxB,OAAQ,GAAExC,MAAO,gBAAe;MAClC;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAA6D,MAAA;MAAA5D,GAAA;MAAAC,KAAA,EAGA,SAAA4D,kBAAA,EAA+B;QAC7B,OAAQ,GAAE7E,MAAO,6BAA4B;MAC/C;IAAC;MAAAe,IAAA;MAAA6D,MAAA;MAAA5D,GAAA;MAAAC,MAAA;QAAA,OAEeX,MAAM;MAAA;IAAA;EAAA;AAAA,GApNAL,iBAAiB,CAACN,UAAU,CAAC;AAuNrD,eAAeY,SAAS"}

package/es/components-react/button/button-set.js

@@ -14,7 +14,7 @@ var prefix = settings.prefix;
 export var descriptor = {};
 export var propTypes = {};
 const Component = createReactCustomElementType(
-  ''.concat(prefix, '-btn-set'),
+  ''.concat(prefix, '-button-set'),
   descriptor
 );
 Component.propTypes = propTypes;

package/es/components-react/button/button-skeleton.d.ts

@@ -10,5 +10,5 @@ import { Component } from 'react';
 import { ComponentProps as ParentComponentProps } from './button';
 export interface ComponentProps extends ParentComponentProps {}
 /*[object Object]*/
-declare class BXButtonSkeleton extends Component<ComponentProps> {}
-export default BXButtonSkeleton;
+declare class CDSButtonSkeleton extends Component<ComponentProps> {}
+export default CDSButtonSkeleton;

package/es/components-react/button/button-skeleton.js

@@ -16,7 +16,7 @@ var prefix = settings.prefix;
 export var descriptor = Object.assign({}, parentDescriptor, {});
 export var propTypes = Object.assign({}, parentPropTypes, {});
 const Component = createReactCustomElementType(
-  ''.concat(prefix, '-btn-skeleton'),
+  ''.concat(prefix, '-button-skeleton'),
   descriptor
 );
 Component.propTypes = propTypes;

package/es/components-react/button/button.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXButton extends Component<ComponentProps> {}
-export default BXButton;
+declare class CDSButton extends Component<ComponentProps> {}
+export default CDSButton;

package/es/components-react/button/button.js

@@ -21,7 +21,7 @@ var prefix = settings.prefix;
 export var descriptor = {};
 export var propTypes = {};
 const Component = createReactCustomElementType(
-  ''.concat(prefix, '-btn'),
+  ''.concat(prefix, '-button'),
   descriptor
 );
 Component.propTypes = propTypes;

package/es/components-react/checkbox/checkbox-skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  [prop: string]: unknown;
+}
+/*[object Object]*/
+declare class CDSCheckboxSkeleton extends Component<ComponentProps> {}
+export default CDSCheckboxSkeleton;

package/es/components-react/checkbox/checkbox-skeleton.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as CustomElement } from '../../components/checkbox/checkbox-skeleton.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = {};
+export var propTypes = {};
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-checkbox-skeleton'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;

package/es/components-react/checkbox/checkbox.d.ts

@@ -15,5 +15,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXCheckbox extends Component<ComponentProps> {}
-export default BXCheckbox;
+declare class CDSCheckbox extends Component<ComponentProps> {}
+export default CDSCheckbox;

package/es/components-react/combo-box/combo-box-item.d.ts

@@ -10,5 +10,5 @@ import { Component } from 'react';
 import { ComponentProps as ParentComponentProps } from '../dropdown/dropdown-item';
 export interface ComponentProps extends ParentComponentProps {}
 /*[object Object]*/
-declare class BXComboBoxItem extends Component<ComponentProps> {}
-export default BXComboBoxItem;
+declare class CDSComboBoxItem extends Component<ComponentProps> {}
+export default CDSComboBoxItem;

package/es/components-react/combo-box/combo-box.d.ts

@@ -29,5 +29,5 @@ export interface ComponentProps extends ParentComponentProps {
   onSelect?: (event: CustomEvent) => void;
 }
 /*[object Object]*/
-declare class BXComboBox extends Component<ComponentProps> {}
-export default BXComboBox;
+declare class CDSComboBox extends Component<ComponentProps> {}
+export default CDSComboBox;

package/es/components-react/combo-box/combo-box.js

@@ -6,11 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export {
-  DROPDOWN_COLOR_SCHEME,
-  DROPDOWN_SIZE,
-  DROPDOWN_TYPE,
-} from '../dropdown/dropdown.js';
+export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown.js';
 import { descriptor as parentDescriptor } from '../dropdown/dropdown.js';
 import { propTypes as parentPropTypes } from '../dropdown/dropdown.js';
 export { default as CustomElement } from '../../components/combo-box/combo-box.js';

package/es/components-react/copy/copy.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+import { ComponentProps as ParentComponentProps } from '../icon-button/icon-button';
+export interface ComponentProps extends ParentComponentProps {}
+/*[object Object]*/
+declare class CDSCopy extends Component<ComponentProps> {}
+export default CDSCopy;

package/es/components-react/copy/copy.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { descriptor as parentDescriptor } from '../icon-button/icon-button.js';
+import { propTypes as parentPropTypes } from '../icon-button/icon-button.js';
+export { default as CustomElement } from '../../components/copy/copy.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = Object.assign({}, parentDescriptor, {});
+export var propTypes = Object.assign({}, parentPropTypes, {});
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-copy'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;

package/es/components-react/copy-button/copy-button.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXCopyButton extends Component<ComponentProps> {}
-export default BXCopyButton;
+declare class CDSCopyButton extends Component<ComponentProps> {}
+export default CDSCopyButton;

package/es/components-react/date-picker/date-picker-input-skeleton.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDatePickerInputSkeleton extends Component<ComponentProps> {}
-export default BXDatePickerInputSkeleton;
+declare class CDSDatePickerInputSkeleton extends Component<ComponentProps> {}
+export default CDSDatePickerInputSkeleton;

package/es/components-react/date-picker/date-picker-input.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDatePickerInput extends Component<ComponentProps> {}
-export default BXDatePickerInput;
+declare class CDSDatePickerInput extends Component<ComponentProps> {}
+export default CDSDatePickerInput;

package/es/components-react/date-picker/date-picker-input.js

@@ -9,7 +9,6 @@
 export {
   DATE_PICKER_INPUT_COLOR_SCHEME,
   DATE_PICKER_INPUT_KIND,
-  DATE_PICKER_INPUT_SIZE_HORIZONTAL,
 } from '././defs.js';
 export { default as CustomElement } from '../../components/date-picker/date-picker-input.js';
 import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';

package/es/components-react/date-picker/date-picker.d.ts

@@ -19,5 +19,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDatePicker extends Component<ComponentProps> {}
-export default BXDatePicker;
+declare class CDSDatePicker extends Component<ComponentProps> {}
+export default CDSDatePicker;

package/es/components-react/dropdown/dropdown-item.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDropdownItem extends Component<ComponentProps> {}
-export default BXDropdownItem;
+declare class CDSDropdownItem extends Component<ComponentProps> {}
+export default CDSDropdownItem;

package/es/components-react/dropdown/dropdown-skeleton.d.ts

@@ -11,5 +11,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDropdownSkeleton extends Component<ComponentProps> {}
-export default BXDropdownSkeleton;
+declare class CDSDropdownSkeleton extends Component<ComponentProps> {}
+export default CDSDropdownSkeleton;

package/es/components-react/dropdown/dropdown.d.ts

@@ -29,5 +29,5 @@ export interface ComponentProps {
   [prop: string]: unknown;
 }
 /*[object Object]*/
-declare class BXDropdown extends Component<ComponentProps> {}
-export default BXDropdown;
+declare class CDSDropdown extends Component<ComponentProps> {}
+export default CDSDropdown;

package/es/components-react/dropdown/dropdown.js

@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 export {
-  DROPDOWN_COLOR_SCHEME,
   DROPDOWN_KEYBOARD_ACTION,
+  DROPDOWN_DIRECTION,
   DROPDOWN_SIZE,
   DROPDOWN_TYPE,
   NAVIGATION_DIRECTION,

package/es/components-react/file-uploader/demo-file-uploader.d.ts

@@ -12,28 +12,52 @@ export interface ComponentProps {
    * The file types the file input should accept, separated by space.
    */
   accept?: string;
+  /**
+   * `true` if the drop container should be disabled.
+   */
+  button?: boolean;
+  /**
+   * Button kind.
+   */
+  buttonKind?: string;
+  /**
+   * Button label.
+   */
+  buttonLabel?: string;
   /**
    * `true` if the drop container should be disabled.
    */
   disabled?: boolean;
   /**
-   * The helper text.
+   * Icon description.
    */
-  helperText?: string;
+  iconDescription?: string;
   /**
-   * The label text.
+   * The input name.
    */
-  labelText?: string;
+  inputName?: string;
+  /**
+   * The label description text.
+   */
+  labelDescription?: string;
+  /**
+   * The label title.
+   */
+  labelTitle?: string;
   /**
    * `true` if the drop container should accept more than one files at once.
    * Note that even with `false` set here, user _can_ select multiple files one by one.
    */
   multiple?: boolean;
   /**
-   * The size of the file uploader items.
+   * The size of the button item.
    */
   size?: string;
+  /**
+   * The state of this file uploader item.
+   */
+  inputState?: string;
   [prop: string]: unknown;
 }
-declare class BXCEDemoFileUploader extends Component<ComponentProps> {}
-export default BXCEDemoFileUploader;
+declare class CDSCEDemoFileUploader extends Component<ComponentProps> {}
+export default CDSCEDemoFileUploader;

package/es/components-react/file-uploader/demo-file-uploader.js

@@ -15,27 +15,51 @@ import settings from 'carbon-components/es/globals/js/settings.js';
 var prefix = settings.prefix;
 export var descriptor = {
   accept: {},
+  button: {
+    serialize: booleanSerializer,
+  },
+  buttonKind: {
+    attribute: 'button-kind',
+  },
+  buttonLabel: {
+    attribute: 'button-label',
+  },
   disabled: {
     serialize: booleanSerializer,
   },
-  helperText: {
-    attribute: 'helper-text',
+  iconDescription: {
+    attribute: 'icon-description',
   },
-  labelText: {
-    attribute: 'label-text',
+  inputName: {
+    attribute: 'input-name',
+  },
+  labelDescription: {
+    attribute: 'label-description',
+  },
+  labelTitle: {
+    attribute: 'label-title',
   },
   multiple: {
     serialize: booleanSerializer,
   },
   size: {},
+  inputState: {
+    attribute: 'input-state',
+  },
 };
 export var propTypes = {
   accept: PropTypes.string,
+  button: PropTypes.bool,
+  buttonKind: PropTypes.string,
+  buttonLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  helperText: PropTypes.string,
-  labelText: PropTypes.string,
+  iconDescription: PropTypes.string,
+  inputName: PropTypes.string,
+  labelDescription: PropTypes.string,
+  labelTitle: PropTypes.string,
   multiple: PropTypes.bool,
   size: PropTypes.string,
+  inputState: PropTypes.string,
 };
 const Component = createReactCustomElementType(
   ''.concat(prefix, '-ce-demo-file-uploader'),

package/es/components-react/file-uploader/file-uploader-button.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  /**
+   * The event handler for the custom event fired when there is a user gesture to select files to upload.
+   */
+  onChange?: (event: CustomEvent) => void;
+  [prop: string]: unknown;
+}
+/*[object Object]*/
+declare class CDSFileUploaderButton extends Component<ComponentProps> {}
+export default CDSFileUploaderButton;

package/es/components-react/file-uploader/file-uploader-button.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums.js';
+export { default as CustomElement } from '../../components/file-uploader/file-uploader-button.js';
+import createReactCustomElementType from '../../globals/wrappers/createReactCustomElementType.js';
+import PropTypes from 'prop-types';
+import settings from 'carbon-components/es/globals/js/settings.js';
+var prefix = settings.prefix;
+export var descriptor = {
+  onChange: {
+    event: ''.concat(prefix, '-file-uploader-button-changed'),
+  },
+};
+export var propTypes = {
+  onChange: PropTypes.func,
+};
+const Component = createReactCustomElementType(
+  ''.concat(prefix, '-file-uploader-button'),
+  descriptor
+);
+Component.propTypes = propTypes;
+export default Component;