@cds/core 6.0.1 → 6.0.2

package/button/button.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var o=a`:host{--box-shadow-color:var(--cds-alias-object-opacity-100, rgba(0, 0, 0, 0.2));--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-color:var(--background);--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--font-size:var(--cds-global-typography-font-size-2, 0.75rem);--padding:calc(var(--cds-global-space-6, 0.75rem) - var(--border-width));--height:var(--cds-global-space-11, 2.25rem);--min-width:var(--cds-global-space-13, 4rem);--text-decoration:none;--font-weight:var(--cds-global-typography-font-weight-semibold, 600);--font-family:var(--cds-global-typography-font-family, "Clarity City", "Avenir Next", sans-serif);--text-transform:uppercase;--letter-spacing:0.12em;display:inline-block;height:var(--height)}.private-host{display:inline-flex;align-items:center;-webkit-appearance:none!important;border-color:var(--border-color);border-radius:var(--border-radius);border-style:solid;border-width:var(--border-width);color:var(--color);cursor:pointer;font-size:var(--font-size);height:100%;line-height:1em;min-width:var(--min-width);overflow:visible;padding:var(--padding);position:relative;text-align:center;text-decoration:var(--text-decoration);text-overflow:ellipsis;transform:translateZ(0);user-select:none;vertical-align:middle;white-space:nowrap;width:100%;font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);text-transform:var(--text-transform)}.private-host>span{display:flex;align-items:center;justify-content:center;height:100%}cds-progress-circle{--ring-color:var(--cds-global-color-construction-400, #859399)}:host(:active) .private-host,:host(:active) .private-host::after{box-shadow:0 var(--cds-global-space-2,.125rem) 0 0 var(--box-shadow-color) inset}.private-host::after{--offset:calc(-1 * var(--cds-global-space-1, 0.0625rem));background:var(--background);border-radius:var(--border-radius);position:absolute;content:"";top:var(--offset);left:var(--offset);bottom:var(--offset);right:var(--offset);inset:var(--offset);z-index:-1}:host(:active) .private-host::after,:host(:focus) .private-host::after,:host(:hover) .private-host::after{filter:brightness(90%)}:host([action=outline]) .private-host::after{filter:brightness(100%);opacity:0}:host([action=outline]:active) .private-host::after,:host([action=outline]:focus) .private-host::after,:host([action=outline]:hover) .private-host::after,:host([status=inverse]:active) .private-host::after,:host([status=inverse]:focus) .private-host::after,:host([status=inverse]:hover) .private-host::after{opacity:.1}::slotted{line-height:1em!important;color:inherit!important}::slotted(cds-icon){--color:inherit;height:calc(var(--font-size) + (2*var(--cds-global-space-2,.125rem)));width:calc(var(--font-size) + (2*var(--cds-global-space-2,.125rem)))}:host([status=success]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--background:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--color:var(--cds-global-color-construction-900, #21333b)}:host([status=danger]){--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral]){--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([action=outline]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--border-color:var(--color)}:host([status=success][action=outline]){--color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning][action=outline]){--color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([status=danger][action=outline]){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral][action=outline]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([disabled][status=inverse]),:host([disabled][status=inverse][action=outline]),:host([status=inverse]){--border-color:var(--color)}:host([action*=flat]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([action=flat-inline]){--height:auto;--padding:0;--min-width:auto;line-height:0}:host([status=success][action*=flat]){--color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning][action*=flat]){--color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([status=danger][action*=flat]){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral][action*=flat]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse][action*=flat]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([size=sm]){--padding:var(--cds-global-space-4, 0.375rem) var(--cds-global-space-6, 0.75rem);--height:calc(var(--cds-global-space-9, 1.5rem) + var(--cds-global-space-1, 0.0625rem))}:host([size=sm]) .private-host .spinner:not(.spinner-check){height:var(--cds-global-space-6,.75rem);width:var(--cds-global-space-6,.75rem);min-height:var(--cds-global-space-6,.75rem);min-width:var(--cds-global-space-6,.75rem)}:host([disabled]:active){pointer-events:none!important}:host([disabled]),:host([disabled][action=outline]){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--color:var(--cds-alias-status-disabled-shade, var(--cds-global-color-construction-400, #859399));--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([disabled]) .private-host,:host([disabled][action=outline]) .private-host{cursor:not-allowed;outline:0}:host([disabled]) .private-host::after,:host([disabled][action=outline]) .private-host::after{filter:brightness(100%)!important;opacity:1!important}:host([disabled][action*=flat]),:host([disabled][action=outline]),:host([disabled][status=inverse]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([disabled][action*=flat]){--border-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([block]){width:100%}:host([size=icon]){--padding:calc(var(--cds-global-space-6, 0.75rem) - var(--border-width)) calc(var(--cds-global-space-6, 0.75rem) - var(--cds-global-space-2, 0.125rem) - var(--border-width))}:host([size=icon]) .private-host{min-width:0}:host([size=sm]) .private-host{--letter-spacing:0.073em}:host([action*=flat]) ::slotted(cds-badge),:host([action=outline]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=success]) ::slotted(cds-badge),:host([action=outline][status=success]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=warning]) ::slotted(cds-badge),:host([action=outline][status=warning]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500));--background:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=danger]) ::slotted(cds-badge),:host([action=outline][status=danger]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=neutral]) ::slotted(cds-badge),:host([action=outline][status=neutral]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host(:not([action=outline]):not([action*=flat])) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action=solid][status=warning]) ::slotted(cds-badge){--border-color:var(--cds-global-color-construction-900, #21333b);--color:var(--cds-global-color-construction-900, #21333b)}:host([action*=flat][disabled]) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse]) ::slotted(cds-badge){--border-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))!important;--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))!important;--font-weight:var(--cds-global-typography-font-weight-semibold, 600)!important}:host([disabled]) ::slotted(cds-badge),:host([status=inverse]) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled][action*=flat]) ::slotted(cds-badge),:host([disabled][action=outline]) ::slotted(cds-badge),:host([disabled][status=inverse]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important;--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important}::slotted(span)::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((.1475em + 0em)*-1) + .037em)}::slotted(span)::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - .1475em - .1703em - .517em) + 0em)*-1) - .044em)}`;export{o as default};
+import{css as a}from"lit";var o=a`:host{--box-shadow-color:var(--cds-alias-object-opacity-100, rgba(0, 0, 0, 0.2));--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-color:var(--background);--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--font-size:var(--cds-global-typography-font-size-2, 0.75rem);--padding:calc(var(--cds-global-space-6, 0.75rem) - var(--border-width));--height:var(--cds-global-space-11, 2.25rem);--min-width:var(--cds-global-space-13, 4rem);--text-decoration:none;--font-weight:var(--cds-global-typography-font-weight-semibold, 600);--font-family:var(--cds-global-typography-font-family, "Clarity City", "Avenir Next", sans-serif);--text-transform:uppercase;--letter-spacing:0.12em;display:inline-block;height:var(--height)}.private-host{display:inline-flex;align-items:center;-webkit-appearance:none!important;border-color:var(--border-color);border-radius:var(--border-radius);border-style:solid;border-width:var(--border-width);color:var(--color);cursor:pointer;font-size:var(--font-size);height:100%;line-height:1em;min-width:var(--min-width);overflow:visible;padding:var(--padding);position:relative;text-align:center;text-decoration:var(--text-decoration);text-overflow:ellipsis;transform:translateZ(0);user-select:none;vertical-align:middle;white-space:nowrap;width:100%;font-family:var(--font-family);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);text-transform:var(--text-transform)}.private-host>span{display:flex;align-items:center;justify-content:center;height:100%}cds-progress-circle{--ring-color:var(--cds-global-color-construction-400, #859399)}:host(:active) .private-host,:host(:active) .private-host::after{box-shadow:0 var(--cds-global-space-2,.125rem) 0 0 var(--box-shadow-color) inset}.private-host::after{--offset:calc(-1 * var(--cds-global-space-1, 0.0625rem));background:var(--background);border-radius:var(--border-radius);position:absolute;content:"";top:var(--offset);left:var(--offset);bottom:var(--offset);right:var(--offset);inset:var(--offset);z-index:-1}:host(:active) .private-host::after,:host(:focus) .private-host::after,:host(:hover) .private-host::after{filter:brightness(90%)}:host([action=outline]) .private-host::after{filter:brightness(100%);opacity:0}:host([action=outline]:active) .private-host::after,:host([action=outline]:focus) .private-host::after,:host([action=outline]:hover) .private-host::after,:host([status=inverse]:active) .private-host::after,:host([status=inverse]:focus) .private-host::after,:host([status=inverse]:hover) .private-host::after{opacity:.1}::slotted{line-height:1em!important;color:inherit!important}::slotted(cds-icon){--color:inherit;height:calc(var(--font-size) + (2*var(--cds-global-space-2,.125rem)));width:calc(var(--font-size) + (2*var(--cds-global-space-2,.125rem)))}:host([status=success]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--background:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--color:var(--cds-global-color-construction-900, #21333b)}:host([status=danger]){--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral]){--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([action=outline]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--border-color:var(--color)}:host([status=success][action=outline]){--color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning][action=outline]){--color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([status=danger][action=outline]){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral][action=outline]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([disabled][status=inverse]),:host([disabled][status=inverse][action=outline]),:host([status=inverse]){--border-color:var(--color)}:host([action*=flat]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([action=flat-inline]){--height:auto;--padding:0;--min-width:auto;line-height:0}:host([status=success][action*=flat]){--color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning][action*=flat]){--color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500))}:host([status=danger][action*=flat]){--color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=neutral][action*=flat]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse][action*=flat]){--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([size=sm]){--padding:var(--cds-global-space-4, 0.375rem) var(--cds-global-space-6, 0.75rem);--height:calc(var(--cds-global-space-9, 1.5rem) + var(--cds-global-space-1, 0.0625rem))}:host([size=sm]) .private-host .spinner:not(.spinner-check){height:var(--cds-global-space-6,.75rem);width:var(--cds-global-space-6,.75rem);min-height:var(--cds-global-space-6,.75rem);min-width:var(--cds-global-space-6,.75rem)}:host([disabled]:active){pointer-events:none!important}:host([disabled]),:host([disabled][action=outline]){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--box-shadow-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([disabled]) .private-host,:host([disabled][action=outline]) .private-host{cursor:not-allowed;outline:0}:host([disabled]) .private-host::after,:host([disabled][action=outline]) .private-host::after{filter:brightness(100%)!important;opacity:1!important}:host([disabled][action*=flat]),:host([disabled][action=outline]),:host([disabled][status=inverse]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([disabled][action*=flat]){--border-color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([block]){width:100%}:host([size=icon]){--padding:calc(var(--cds-global-space-6, 0.75rem) - var(--border-width)) calc(var(--cds-global-space-6, 0.75rem) - var(--cds-global-space-2, 0.125rem) - var(--border-width))}:host([size=icon]) .private-host{min-width:0}:host([size=sm]) .private-host{--letter-spacing:0.073em}:host([action*=flat]) ::slotted(cds-badge),:host([action=outline]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=success]) ::slotted(cds-badge),:host([action=outline][status=success]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=warning]) ::slotted(cds-badge),:host([action=outline][status=warning]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500));--background:var(--cds-alias-status-warning-dark, var(--cds-global-color-ochre-800, #a36500));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=danger]) ::slotted(cds-badge),:host([action=outline][status=danger]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action*=flat][status=neutral]) ::slotted(cds-badge),:host([action=outline][status=neutral]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host(:not([action=outline]):not([action*=flat])) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))}:host([action=solid][status=warning]) ::slotted(cds-badge){--border-color:var(--cds-global-color-construction-900, #21333b);--color:var(--cds-global-color-construction-900, #21333b)}:host([action*=flat][disabled]) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([status=inverse]) ::slotted(cds-badge){--border-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))!important;--color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white))!important;--font-weight:var(--cds-global-typography-font-weight-semibold, 600)!important}:host([disabled]) ::slotted(cds-badge),:host([status=inverse]) ::slotted(cds-badge){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled][action*=flat]) ::slotted(cds-badge),:host([disabled][action=outline]) ::slotted(cds-badge),:host([disabled][status=inverse]) ::slotted(cds-badge){--border-color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important;--color:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important}::slotted(span)::before{content:"";display:block;height:0;width:0;margin-bottom:calc(((.1475em + 0em)*-1) + .037em)}::slotted(span)::after{content:"";display:block;height:0;width:0;margin-top:calc((((1em - .1475em - .1703em - .517em) + 0em)*-1) - .044em)}`;export{o as default};
 //# sourceMappingURL=button.element.scss.js.map

package/internal/utils/global.js

@@ -1,2 +1,2 @@
-import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.0.1";window.CDS._version.indexOf(e)<0&&(window.CDS._version.push(e),document.querySelector("body")?.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
+import{isBrowser as e}from"./environment.js";import{getAngularVersion as n,getAngularJSVersion as o,getReactVersion as t,getVueVersion as i}from"./framework.js";import{browserFeatures as s}from"./supports.js";import{LogService as r}from"../services/log.service.js";function w(){e()&&(window.CDS=window.CDS||{_version:[],_react:{version:void 0},_supports:s.supports,_isStateProxied:!1,_state:{focusTrapItems:[],layerElements:[],i18nRegistry:{},elementRegistry:{},iconRegistry:{},motionRegistry:{}},environment:{production:!1},getDetails:a,logDetails:d},function(){const e="6.0.2";window.CDS._version.indexOf(e)<0&&(window.CDS._version.push(e),document.querySelector("body")?.setAttribute("cds-version",window.CDS._version.join(" "))),window.CDS._version.length>1&&r.warn("Running more than one version of Clarity can cause unexpected issues. Please ensure only one version is loaded.")}(),window.CDS._isStateProxied||(window.CDS._isStateProxied=!0,window.CDS._state=new Proxy(window.CDS._state,{set:(e,n,o)=>{const t={key:n,prev:window.CDS._state[n],current:o};return e[n]=o,document.dispatchEvent(new CustomEvent("CDS_STATE_UPDATE",{detail:t})),!0}})))}function a(){return{versions:window.CDS._version,environment:window.CDS.environment,userAgent:navigator.userAgent,supports:window.CDS._supports,angularVersion:n(!1),angularJSVersion:o(!1),reactVersion:t(!1),vueVersion:i(!1),state:{...window.CDS._state,iconRegistry:Object.keys(window.CDS._state.iconRegistry),motionRegistry:Object.keys(window.CDS._state.motionRegistry),focusTrapRegistry:Object.keys(window.CDS._state.focusTrapItems.map((e=>e.focusTrapId)))}}}function d(){r.log(JSON.stringify(a(),null,2))}export{w as setupCDSGlobal};
 //# sourceMappingURL=global.js.map

package/navigation/navigation-group.element.d.ts

@@ -17,6 +17,7 @@ export declare const CdsNavigationGroupTagName = "cds-navigation-group";
  * </cds-navigation-group>
  * ```
  *
+ * @beta
  * @element cds-navigation-group
  * @event expandedChange - notify when the user has clicked the navigation expand/collapse button
  * @cssprop --animation-duration

package/navigation/navigation-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-group.element.js","sources":["../../../src/navigation/navigation-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, AnimationNavigationGroupOpenName, baseStyles, event, i18n, I18nService, id, property, querySlot, querySlotAll, reverseAnimation, state, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation-group.element.scss';\nexport const CdsNavigationGroupTagName = 'cds-navigation-group';\n/**\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-group>\n *   <cds-navigation-start></cds-navigation-start>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n * </cds-navigation-group>\n * ```\n *\n * @element cds-navigation-group\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @slot\n */\nlet CdsNavigationGroup = class CdsNavigationGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.i18n = I18nService.keys.navigation;\n        this.expanded = false;\n        /**\n         * @desc\n         * The value of this property is passed down to start and item children. It is used to query for visible items when\n         * managing focus with key events in the root cds-navigation element.\n         *\n         * Note: eslint-disable  @typescript-eslint/no-unused-vars isn't ignoring the line\n         // eslint error happens because the value is set but never read.\n      \n         * @private\n         */\n        this.expandedGroup = false;\n        /**\n         * @desc\n         *\n         * Used to coordinate css things and the keyboard navigation focus changes.\n         */\n        this.hasFocus = false;\n    }\n    /**\n     * @description\n     * Getter method for a reference to the selector cds-navigation-group > cds-navigation-start\n     * This lets each group flag its cds-navigation-start element and sync that info down. This is\n     * needed because cds-navigation-start elements can be used at the root level and inside\n     * cds-navigation-group elements.\n     *\n     * @private\n     */\n    get isGroupStart() {\n        return !!this.groupStart;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n        <slot name=\"group-start\"></slot>\n        <div\n          class=\"group-items-wrapper\"\n          aria-hidden=\"${!this.expandedGroup}\"\n          aria-labelledby=\"${this.navigationGroupId}\"\n        >\n          <div class=\"group-items-container\" aria-expanded=\"${this.expanded}\">\n            <div class=\"navigation-group-items\" cds-layout=\"vertical wrap:none align:horizontal-stretch\" role=\"list\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.groupStart.removeEventListener('click', this.toggle.bind(this));\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (this.groupStart) {\n            this.groupStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedGroup = this.expanded;\n        }\n        if (this.groupStart) {\n            syncProps(this.groupStart, this, {\n                active: true,\n                expanded: true,\n                isGroupStart: this.isGroupStart,\n                navigationGroupId: true,\n            });\n        }\n        syncPropsForAllItems(Array.from(this.groupItems), this, {\n            expandedGroup: true,\n        });\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigationGroup.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    id()\n], CdsNavigationGroup.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    i18n()\n], CdsNavigationGroup.prototype, \"i18n\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"isGroupStart\", null);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationGroup.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationGroup.prototype, \"active\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"expandedGroup\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'group-start' })\n], CdsNavigationGroup.prototype, \"groupStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigationGroup.prototype, \"groupItems\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigationGroup.prototype, \"nestedGroups\", void 0);\nCdsNavigationGroup = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationGroupOpenName,\n            false: reverseAnimation(AnimationNavigationGroupOpenName),\n        },\n    })\n], CdsNavigationGroup);\nexport { CdsNavigationGroup };\n"],"names":["CdsNavigationGroupTagName","CdsNavigationGroup","LitElement","constructor","super","this","cdsMotion","i18n","I18nService","keys","navigation","expanded","expandedGroup","hasFocus","isGroupStart","groupStart","render","html","navigationGroupId","styles","baseStyles","toggle","expandedChange","emit","disconnectedCallback","removeEventListener","bind","firstUpdated","props","addEventListener","updated","has","syncProps","active","syncPropsForAllItems","Array","from","groupItems","__decorate","property","type","String","prototype","event","id","state","Boolean","reflect","querySlot","assign","querySlotAll","animate","true","AnimationNavigationGroupOpenName","false","reverseAnimation"],"mappings":"0YASY,MAACA,EAA4B,uBAsBtC,IAACC,EAAqB,cAAiCC,EACtDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,KAAOC,EAAYC,KAAKC,WAC7BL,KAAKM,UAAW,EAWhBN,KAAKO,eAAgB,EAMrBP,KAAKQ,UAAW,EAWhBC,mBACA,QAAST,KAAKU,WAElBC,SACI,OAAOC,CAAK,qKAKMZ,KAAKO,mCACFP,KAAKa,wEAE4Bb,KAAKM,2JASpDQ,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACIhB,KAAKiB,eAAeC,MAAMlB,KAAKM,UAEnCa,uBACIpB,MAAMoB,uBACNnB,KAAKU,WAAWU,oBAAoB,QAASpB,KAAKgB,OAAOK,KAAKrB,OAElEsB,aAAaC,GACTxB,MAAMuB,aAAaC,GACfvB,KAAKU,YACLV,KAAKU,WAAWc,iBAAiB,QAASxB,KAAKgB,OAAOK,KAAKrB,OAGnEyB,QAAQF,GACJxB,MAAM0B,QAAQF,GACVA,EAAMG,IAAI,cACV1B,KAAKO,cAAgBP,KAAKM,UAE1BN,KAAKU,YACLiB,EAAU3B,KAAKU,WAAYV,KAAM,CAC7B4B,QAAQ,EACRtB,UAAU,EACVG,aAAcT,KAAKS,aACnBI,mBAAmB,IAG3BgB,EAAqBC,MAAMC,KAAK/B,KAAKgC,YAAahC,KAAM,CACpDO,eAAe,MAI3B0B,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAmByC,UAAW,iBAAa,GAC9CJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,sBAAkB,GACnDJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,uBAAmB,GACpDJ,EAAW,CACPM,KACD3C,EAAmByC,UAAW,yBAAqB,GACtDJ,EAAW,CACP/B,KACDN,EAAmByC,UAAW,YAAQ,GACzCJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,eAAgB,MACjDJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,QAASC,SAAS,KACpC9C,EAAmByC,UAAW,gBAAY,GAC7CJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,WAClB7C,EAAmByC,UAAW,cAAU,GAC3CJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,qBAAiB,GAClDJ,EAAW,CACPU,EAAU,gCAAiC,CAAEC,OAAQ,iBACtDhD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,iCACdjD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,kCACdjD,EAAmByC,UAAW,oBAAgB,GACjDzC,EAAqBqC,EAAW,CAC5Ba,EAAQ,CACJxC,SAAU,CACNyC,KAAMC,EACNC,MAAOC,EAAiBF,OAGjCpD"}
+{"version":3,"file":"navigation-group.element.js","sources":["../../../src/navigation/navigation-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, AnimationNavigationGroupOpenName, baseStyles, event, i18n, I18nService, id, property, querySlot, querySlotAll, reverseAnimation, state, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation-group.element.scss';\nexport const CdsNavigationGroupTagName = 'cds-navigation-group';\n/**\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-group>\n *   <cds-navigation-start></cds-navigation-start>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n * </cds-navigation-group>\n * ```\n *\n * @beta\n * @element cds-navigation-group\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @slot\n */\nlet CdsNavigationGroup = class CdsNavigationGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.i18n = I18nService.keys.navigation;\n        this.expanded = false;\n        /**\n         * @desc\n         * The value of this property is passed down to start and item children. It is used to query for visible items when\n         * managing focus with key events in the root cds-navigation element.\n         *\n         * Note: eslint-disable  @typescript-eslint/no-unused-vars isn't ignoring the line\n         // eslint error happens because the value is set but never read.\n      \n         * @private\n         */\n        this.expandedGroup = false;\n        /**\n         * @desc\n         *\n         * Used to coordinate css things and the keyboard navigation focus changes.\n         */\n        this.hasFocus = false;\n    }\n    /**\n     * @description\n     * Getter method for a reference to the selector cds-navigation-group > cds-navigation-start\n     * This lets each group flag its cds-navigation-start element and sync that info down. This is\n     * needed because cds-navigation-start elements can be used at the root level and inside\n     * cds-navigation-group elements.\n     *\n     * @private\n     */\n    get isGroupStart() {\n        return !!this.groupStart;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n        <slot name=\"group-start\"></slot>\n        <div\n          class=\"group-items-wrapper\"\n          aria-hidden=\"${!this.expandedGroup}\"\n          aria-labelledby=\"${this.navigationGroupId}\"\n        >\n          <div class=\"group-items-container\" aria-expanded=\"${this.expanded}\">\n            <div class=\"navigation-group-items\" cds-layout=\"vertical wrap:none align:horizontal-stretch\" role=\"list\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.groupStart.removeEventListener('click', this.toggle.bind(this));\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (this.groupStart) {\n            this.groupStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedGroup = this.expanded;\n        }\n        if (this.groupStart) {\n            syncProps(this.groupStart, this, {\n                active: true,\n                expanded: true,\n                isGroupStart: this.isGroupStart,\n                navigationGroupId: true,\n            });\n        }\n        syncPropsForAllItems(Array.from(this.groupItems), this, {\n            expandedGroup: true,\n        });\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigationGroup.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    id()\n], CdsNavigationGroup.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    i18n()\n], CdsNavigationGroup.prototype, \"i18n\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"isGroupStart\", null);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationGroup.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationGroup.prototype, \"active\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"expandedGroup\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'group-start' })\n], CdsNavigationGroup.prototype, \"groupStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigationGroup.prototype, \"groupItems\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigationGroup.prototype, \"nestedGroups\", void 0);\nCdsNavigationGroup = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationGroupOpenName,\n            false: reverseAnimation(AnimationNavigationGroupOpenName),\n        },\n    })\n], CdsNavigationGroup);\nexport { CdsNavigationGroup };\n"],"names":["CdsNavigationGroupTagName","CdsNavigationGroup","LitElement","constructor","super","this","cdsMotion","i18n","I18nService","keys","navigation","expanded","expandedGroup","hasFocus","isGroupStart","groupStart","render","html","navigationGroupId","styles","baseStyles","toggle","expandedChange","emit","disconnectedCallback","removeEventListener","bind","firstUpdated","props","addEventListener","updated","has","syncProps","active","syncPropsForAllItems","Array","from","groupItems","__decorate","property","type","String","prototype","event","id","state","Boolean","reflect","querySlot","assign","querySlotAll","animate","true","AnimationNavigationGroupOpenName","false","reverseAnimation"],"mappings":"0YASY,MAACA,EAA4B,uBAuBtC,IAACC,EAAqB,cAAiCC,EACtDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,KAAOC,EAAYC,KAAKC,WAC7BL,KAAKM,UAAW,EAWhBN,KAAKO,eAAgB,EAMrBP,KAAKQ,UAAW,EAWhBC,mBACA,QAAST,KAAKU,WAElBC,SACI,OAAOC,CAAK,qKAKMZ,KAAKO,mCACFP,KAAKa,wEAE4Bb,KAAKM,2JASpDQ,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACIhB,KAAKiB,eAAeC,MAAMlB,KAAKM,UAEnCa,uBACIpB,MAAMoB,uBACNnB,KAAKU,WAAWU,oBAAoB,QAASpB,KAAKgB,OAAOK,KAAKrB,OAElEsB,aAAaC,GACTxB,MAAMuB,aAAaC,GACfvB,KAAKU,YACLV,KAAKU,WAAWc,iBAAiB,QAASxB,KAAKgB,OAAOK,KAAKrB,OAGnEyB,QAAQF,GACJxB,MAAM0B,QAAQF,GACVA,EAAMG,IAAI,cACV1B,KAAKO,cAAgBP,KAAKM,UAE1BN,KAAKU,YACLiB,EAAU3B,KAAKU,WAAYV,KAAM,CAC7B4B,QAAQ,EACRtB,UAAU,EACVG,aAAcT,KAAKS,aACnBI,mBAAmB,IAG3BgB,EAAqBC,MAAMC,KAAK/B,KAAKgC,YAAahC,KAAM,CACpDO,eAAe,MAI3B0B,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAmByC,UAAW,iBAAa,GAC9CJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,sBAAkB,GACnDJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,uBAAmB,GACpDJ,EAAW,CACPM,KACD3C,EAAmByC,UAAW,yBAAqB,GACtDJ,EAAW,CACP/B,KACDN,EAAmByC,UAAW,YAAQ,GACzCJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,eAAgB,MACjDJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,QAASC,SAAS,KACpC9C,EAAmByC,UAAW,gBAAY,GAC7CJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,WAClB7C,EAAmByC,UAAW,cAAU,GAC3CJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,qBAAiB,GAClDJ,EAAW,CACPU,EAAU,gCAAiC,CAAEC,OAAQ,iBACtDhD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,iCACdjD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,kCACdjD,EAAmByC,UAAW,oBAAgB,GACjDzC,EAAqBqC,EAAW,CAC5Ba,EAAQ,CACJxC,SAAU,CACNyC,KAAMC,EACNC,MAAOC,EAAiBF,OAGjCpD"}

package/navigation/navigation-item.element.d.ts

@@ -11,6 +11,7 @@ export declare const CdsNavigationItemTagName = "cds-navigation-item";
  *  <cds-navigation-item><a href="/home">Home</cds-navigation-item>
  * ```
  *
+ * @beta
  * @element cds-navigation-item
  * @cssprop --color
  * @cssprop --font-size

package/navigation/navigation-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.element.js","sources":["../../../src/navigation/navigation-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, state, property, querySlot, querySlotAll, spanWrapper, } from '@cds/core/internal';\nimport styles from './navigation-item.element.scss';\nimport { manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/utils.js';\nexport const CdsNavigationItemTagName = 'cds-navigation-item';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n * ```\n *\n * @element cds-navigation-item\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @slot\n */\nexport class CdsNavigationItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        this.active = false;\n        this.disabled = false;\n        this.expanded = false;\n        this.expandedGroup = true;\n        this.hasFocus = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.handleItemAnchorText();\n        manageScreenReaderElements(this, this.expanded);\n    }\n    handleItemAnchorText() {\n        const anchorElement = this.querySelector('a');\n        if (anchorElement) {\n            spanWrapper(anchorElement.childNodes);\n            anchorElement?.querySelector('span')?.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n        }\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host ${this.groupItem ? 'group-item' : ''}\"\n        cds-layout=\"horizontal align:horizontal-stretch wrap:none gap:sm\"\n      >\n        <slot @slotchange=${this.handleItemAnchorText}></slot>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expanded);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"active\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"disabled\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigationItem.prototype, \"expanded\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"expandedGroup\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"groupItem\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"hasFocus\", void 0);\n__decorate([\n    querySlot('a')\n], CdsNavigationItem.prototype, \"focusElement\", void 0);\n__decorate([\n    querySlot('cds-icon', { assign: 'cds-icon-slot' })\n], CdsNavigationItem.prototype, \"itemIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationItem.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationItemTagName","CdsNavigationItem","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","active","disabled","expanded","expandedGroup","hasFocus","connectedCallback","role","id","createId","firstUpdated","props","handleItemAnchorText","manageScreenReaderElements","anchorElement","querySelector","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","render","html","groupItem","styles","baseStyles","updated","__decorate","prototype","property","type","Boolean","reflect","state","querySlot","assign","querySlotAll"],"mappings":"8XAUY,MAACA,EAA2B,sBAkBjC,MAAMC,UAA0BC,EACnCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAC7BJ,KAAKK,QAAS,EACdL,KAAKM,UAAW,EAChBN,KAAKO,UAAW,EAChBP,KAAKQ,eAAgB,EACrBR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACThB,MAAMe,aAAaC,GACnBf,KAAKgB,uBACLC,EAA2BjB,KAAMA,KAAKO,UAE1CS,uBACI,MAAME,EAAgBlB,KAAKmB,cAAc,KACrCD,IACAE,EAAYF,EAAcG,YAC1BH,GAAeC,cAAc,SAASG,aAAaC,EAAyB,KAGpFC,SACI,OAAOC,CAAK,4BAEUzB,KAAK0B,UAAY,aAAe,4FAGlC1B,KAAKgB,sCAIlBW,oBACP,MAAO,CAACC,EAAYD,GAExBE,QAAQd,GACJhB,MAAM8B,QAAQd,GACdE,EAA2BjB,KAAMA,KAAKO,WAG9CuB,EAAW,CACP7B,KACDL,EAAkBmC,UAAW,YAAQ,GACxCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,cAAU,GAC1CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,WACftC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,qBAAiB,GACjDD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,iBAAa,GAC7CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPO,EAAU,MACXzC,EAAkBmC,UAAW,oBAAgB,GAChDD,EAAW,CACPO,EAAU,WAAY,CAAEC,OAAQ,mBACjC1C,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPS,EAAa,6BACd3C,EAAkBmC,UAAW,gBAAY"}
+{"version":3,"file":"navigation-item.element.js","sources":["../../../src/navigation/navigation-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, state, property, querySlot, querySlotAll, spanWrapper, } from '@cds/core/internal';\nimport styles from './navigation-item.element.scss';\nimport { manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/utils.js';\nexport const CdsNavigationItemTagName = 'cds-navigation-item';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n * ```\n *\n * @beta\n * @element cds-navigation-item\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @slot\n */\nexport class CdsNavigationItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        this.active = false;\n        this.disabled = false;\n        this.expanded = false;\n        this.expandedGroup = true;\n        this.hasFocus = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.handleItemAnchorText();\n        manageScreenReaderElements(this, this.expanded);\n    }\n    handleItemAnchorText() {\n        const anchorElement = this.querySelector('a');\n        if (anchorElement) {\n            spanWrapper(anchorElement.childNodes);\n            anchorElement?.querySelector('span')?.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n        }\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host ${this.groupItem ? 'group-item' : ''}\"\n        cds-layout=\"horizontal align:horizontal-stretch wrap:none gap:sm\"\n      >\n        <slot @slotchange=${this.handleItemAnchorText}></slot>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expanded);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"active\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"disabled\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigationItem.prototype, \"expanded\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"expandedGroup\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"groupItem\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"hasFocus\", void 0);\n__decorate([\n    querySlot('a')\n], CdsNavigationItem.prototype, \"focusElement\", void 0);\n__decorate([\n    querySlot('cds-icon', { assign: 'cds-icon-slot' })\n], CdsNavigationItem.prototype, \"itemIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationItem.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationItemTagName","CdsNavigationItem","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","active","disabled","expanded","expandedGroup","hasFocus","connectedCallback","role","id","createId","firstUpdated","props","handleItemAnchorText","manageScreenReaderElements","anchorElement","querySelector","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","render","html","groupItem","styles","baseStyles","updated","__decorate","prototype","property","type","Boolean","reflect","state","querySlot","assign","querySlotAll"],"mappings":"8XAUY,MAACA,EAA2B,sBAmBjC,MAAMC,UAA0BC,EACnCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAC7BJ,KAAKK,QAAS,EACdL,KAAKM,UAAW,EAChBN,KAAKO,UAAW,EAChBP,KAAKQ,eAAgB,EACrBR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACThB,MAAMe,aAAaC,GACnBf,KAAKgB,uBACLC,EAA2BjB,KAAMA,KAAKO,UAE1CS,uBACI,MAAME,EAAgBlB,KAAKmB,cAAc,KACrCD,IACAE,EAAYF,EAAcG,YAC1BH,GAAeC,cAAc,SAASG,aAAaC,EAAyB,KAGpFC,SACI,OAAOC,CAAK,4BAEUzB,KAAK0B,UAAY,aAAe,4FAGlC1B,KAAKgB,sCAIlBW,oBACP,MAAO,CAACC,EAAYD,GAExBE,QAAQd,GACJhB,MAAM8B,QAAQd,GACdE,EAA2BjB,KAAMA,KAAKO,WAG9CuB,EAAW,CACP7B,KACDL,EAAkBmC,UAAW,YAAQ,GACxCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,cAAU,GAC1CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,WACftC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,qBAAiB,GACjDD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,iBAAa,GAC7CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPO,EAAU,MACXzC,EAAkBmC,UAAW,oBAAgB,GAChDD,EAAW,CACPO,EAAU,WAAY,CAAEC,OAAQ,mBACjC1C,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPS,EAAa,6BACd3C,EAAkBmC,UAAW,gBAAY"}

package/navigation/navigation.element.d.ts

@@ -18,6 +18,7 @@ export declare const CdsNavigationTagName = "cds-navigation";
  *  </cds-navigation>
  * ```
  *
+ * @beta
  * @element cds-navigation
  * @event expandedChange - notify when the user has clicked the navigation expand/collapse button
  * @cssprop --animation-duration

package/navigation/navigation.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/utils.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot cds-navigation-substart - project content below the navigation toggle button\n * @slot cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\"></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.addStartEventListener()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    addStartEventListener() {\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n        const itemWrapper = this.shadowRoot?.querySelector('#item-container');\n        itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper?.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper?.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (this.currentActiveItem?.tagName === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent?.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = groupStartElement?.id ?? null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'list';\n        this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","toggle","expandedChange","emit","currentActiveItem","visibleChildren","find","c","id","ariaActiveDescendant","endTemplate","navigationEnd","html","startTemplate","returnHTML","rootNavigationStart","addStartEventListener","Array","from","allNavigationElements","filter","n","isVisible","addEventListener","bind","firstUpdated","props","forEach","item","setAttributes","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","removeFocus","focusRootStart","setFocus","blurRootStart","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","tagName","groupStartElement","home","end","length","click","handleRootStartKeys","connectedCallback","role","disconnectedCallback","removeEventListener","render","navigationLabel","updated","has","updateChildrenProps","navigationGroupItems","syncPropsForAllItems","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","navigationGroupRefs","layout","styles","baseStyles","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"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"}
+{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/utils.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @beta\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot cds-navigation-substart - project content below the navigation toggle button\n * @slot cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\"></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.addStartEventListener()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    addStartEventListener() {\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n        const itemWrapper = this.shadowRoot?.querySelector('#item-container');\n        itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper?.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper?.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (this.currentActiveItem?.tagName === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent?.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = groupStartElement?.id ?? null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'list';\n        this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","toggle","expandedChange","emit","currentActiveItem","visibleChildren","find","c","id","ariaActiveDescendant","endTemplate","navigationEnd","html","startTemplate","returnHTML","rootNavigationStart","addStartEventListener","Array","from","allNavigationElements","filter","n","isVisible","addEventListener","bind","firstUpdated","props","forEach","item","setAttributes","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","removeFocus","focusRootStart","setFocus","blurRootStart","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","tagName","groupStartElement","home","end","length","click","handleRootStartKeys","connectedCallback","role","disconnectedCallback","removeEventListener","render","navigationLabel","updated","has","updateChildrenProps","navigationGroupItems","syncPropsForAllItems","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","navigationGroupRefs","layout","styles","baseStyles","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"6mBAWY,MAACA,EAAuB,iBA+BjC,IAACC,EAAgB,cAA4BC,EAC5CC,cACIC,oBACAC,KAAKC,cAAe,EACpBD,KAAKE,UAAY,KAOjBF,KAAKG,WAAY,EASjBH,KAAKI,UAAW,EAChBJ,KAAKK,KAAOC,EAAYC,KAAKC,WAEjCC,SACIT,KAAKU,eAAeC,MAAMX,KAAKI,UAE/BQ,wBACA,OAAOZ,KAAKa,gBAAgBC,MAAKC,GAAKA,EAAEC,KAAOhB,KAAKiB,uBAEpDC,kBACA,OAAOlB,KAAKmB,cACNC,CAAK,2HAKL,GAENC,oBACA,IAAIC,EASJ,OAPOA,EADPtB,KAAKuB,oBACeH,CAAK,mGAEA,IAAMpB,KAAKwB,kHAIhB,GACbF,EAEPT,sBACA,OAAOY,MAAMC,KAAK1B,KAAK2B,uBAAuBC,QAAOC,GAAKC,EAAUD,KAExEL,wBAGQxB,KAAKuB,qBACLvB,KAAKuB,oBAAoBQ,iBAAiB,QAAS/B,KAAKS,OAAOuB,KAAKhC,OAG5EiC,aAAaC,GACTnC,MAAMkC,aAAaC,GAEnBlC,KAAK2B,sBAAsBQ,SAAQC,IAC/BC,EAAcD,EAAM,CAAC,WAAY,UAErC,MAAME,EAActC,KAAKuC,YAAYC,cAAc,mBACnDF,GAAaP,iBAAiB,QAAS/B,KAAKyC,aAAaT,KAAKhC,OAC9DsC,GAAaP,iBAAiB,UAAW/B,KAAK0C,eAAeV,KAAKhC,OAClEsC,GAAaP,iBAAiB,OAAQ/B,KAAK2C,aAAaX,KAAKhC,OAEjE2C,eACQ3C,KAAKY,mBACLgC,EAAY5C,KAAKY,mBAGzBiC,iBACQ7C,KAAKuB,qBACLuB,EAAS9C,KAAKuB,qBAGtBwB,gBACQ/C,KAAKuB,qBACLqB,EAAY5C,KAAKuB,qBAGzBkB,eACI,GAAKzC,KAAKY,kBAIL,CACD,MAAMoC,EAAehD,KAAKY,kBAAoBZ,KAAKY,kBAAoBZ,KAAK2B,sBAAsB,GAClGmB,EAASE,GACThD,KAAKiB,qBAAuB+B,EAAahC,QANzC8B,EAAS9C,KAAKiD,kBAAkB,IAChCjD,KAAKiB,qBAAuBjB,KAAKiD,kBAAkB,GAAGjC,GAQ1DiC,wBACA,OAAOxB,MAAMC,KAAK1B,KAAK2B,uBAAuBC,OAAOsB,GAEzDR,eAAeS,GACXC,EAAM,aAAcD,GAAO,KACvB,GAAInD,KAAKY,kBAAmB,CACxBgC,EAAY5C,KAAKY,mBACjB,MAAMyC,EAAOC,EAAoBtD,KAAKY,kBAAmBZ,KAAKiD,mBAC9DjD,KAAKiB,qBAAuBoC,EAAKrC,GACjC8B,EAASO,GACTF,EAAMI,qBAGdH,EAAM,WAAYD,GAAO,KACrB,GAAInD,KAAKY,kBAAmB,CACxBgC,EAAY5C,KAAKY,mBACjB,MAAM4C,EAAWC,EAAwBzD,KAAKY,kBAAmBZ,KAAKiD,mBACtEjD,KAAKiB,qBAAuBuC,EAASxC,GACrC8B,EAASU,GACTL,EAAMI,qBAGdH,EAAM,cAAeD,GAAO,KACxB,MAAMO,EAAc1D,KAAKY,mBAAmB+C,QAAQ,yBAChDD,GAAgBA,EAAYtD,UAC5BsD,EAAYhD,eAAeC,MAAM+C,EAAYtD,aAIrDgD,EAAM,aAAcD,GAAO,KACvB,MAAMO,EAAc1D,KAAKY,mBAAmB+C,QAAQ,wBACpD,GAAwC,wBAApC3D,KAAKY,mBAAmBgD,SAAuCF,EAAa,CAC5E,MAAMG,EAAoBH,GAAalB,cAAc,wBAIrD,OAHAI,EAAY5C,KAAKY,mBACjBZ,KAAKiB,qBAAuB4C,GAAmB7C,IAAM,UACrD8B,EAASe,GAGTH,GAAeA,EAAYtD,UAC3BsD,EAAYhD,eAAeC,MAAM+C,EAAYtD,aAIrDgD,EAAM,OAAQD,GAAO,KACjB,GAAInD,KAAKY,kBAAmB,CACxBgC,EAAY5C,KAAKY,mBACjB,MAAMkD,EAAO9D,KAAKiD,kBAAkB,GACpCjD,KAAKiB,qBAAuB6C,EAAK9C,GACjC8B,EAASgB,OAGjBV,EAAM,MAAOD,GAAO,KAChB,GAAInD,KAAKY,kBAAmB,CACxBgC,EAAY5C,KAAKY,mBACjB,MAAMmD,EAAM/D,KAAKiD,kBAAkBjD,KAAKiD,kBAAkBe,OAAS,GACnEhE,KAAKiB,qBAAuB8C,EAAI/C,GAChC8B,EAASiB,OAGjBX,EAAM,QAASD,GAAO,KAEdnD,KAAKY,mBAAmBoC,cACxBhD,KAAKY,mBAAmBoC,aAAaiB,WAG7Cb,EAAM,QAASD,GAAO,KAEdnD,KAAKY,mBAAmBoC,cACxBhD,KAAKY,mBAAmBoC,aAAaiB,WAIjDC,oBAAoBf,GAChBC,EAAM,cAAeD,GAAO,KACnBnD,KAAKI,UACNJ,KAAKS,YAIb2C,EAAM,aAAcD,GAAO,KACnBnD,KAAKI,UACLJ,KAAKS,YAKjB0D,oBACIpE,MAAMoE,oBACNnE,KAAKoE,KAAO,OACZpE,KAAKuB,qBAAqBQ,iBAAiB,QAAS/B,KAAK6C,eAAeb,KAAKhC,OAC7EA,KAAKuB,qBAAqBQ,iBAAiB,OAAQ/B,KAAK+C,cAAcf,KAAKhC,OAC3EA,KAAKuB,qBAAqBQ,iBAAiB,UAAW/B,KAAKkE,oBAAoBlC,KAAKhC,OAExFqE,uBACItE,MAAMsE,uBACFrE,KAAKuB,qBACLvB,KAAKuB,oBAAoB+C,oBAAoB,QAAStE,KAAKS,OAAOuB,KAAKhC,OAG/EuE,SACI,OAAOnD,CAAK,yCAAyCpB,KAAKK,KAAKmE,oDAC/DxE,KAAKqB,6HAGwBrB,KAAKiB,+KAMlCjB,KAAKkB,oBAGTuD,QAAQvC,GACJnC,MAAM0E,QAAQvC,GACVA,EAAMwC,IAAI,cACV1E,KAAKC,aAAeD,KAAKI,UAE7BJ,KAAK2E,sBAETA,sBACQ3E,KAAK4E,sBACLC,EAAqBpD,MAAMC,KAAK1B,KAAK4E,sBAAuB5E,KAAM,CAAEG,WAAW,IAE/EH,KAAK8E,oBACLD,EAAqBpD,MAAMC,KAAK1B,KAAK8E,oBAAqB9E,KAAM,CAC5DI,UAAU,IAGdJ,KAAK+E,qBACLF,EAAqBpD,MAAMC,KAAK1B,KAAK+E,qBAAsB/E,KAAM,CAC7DC,cAAc,IAGlBD,KAAKuB,qBACLyD,EAAUhF,KAAKuB,oBAAqBvB,KAAM,CACtCI,SAAUJ,KAAKI,WAGnBJ,KAAKiF,oBAAoBjB,OAAS,GAClCa,EAAqBpD,MAAMC,KAAK1B,KAAKiF,qBAAsBjF,KAAM,CAC7DI,SAAUJ,KAAKI,WAGnBJ,KAAKkF,oBAAoBlB,OAAS,GAClCa,EAAqBpD,MAAMC,KAAK1B,KAAKkF,qBAAsBlF,KAAM,CAC7DmF,QAAQ,IAITC,oBACP,MAAO,CAACC,EAAYD,KAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClB7F,EAAc8F,UAAW,iBAAa,GACzCJ,EAAW,CACPnC,KACDvD,EAAc8F,UAAW,sBAAkB,GAC9CJ,EAAW,CACPnC,KACDvD,EAAc8F,UAAW,uBAAmB,GAC/CJ,EAAW,CACPK,EAAM,CAAEH,KAAMI,WACfhG,EAAc8F,UAAW,iBAAa,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,WAClBhG,EAAc8F,UAAW,gBAAY,GACxCJ,EAAW,CACPjF,KACDT,EAAc8F,UAAW,YAAQ,GACpCJ,EAAW,CACPO,EAAU,8BAA+B,CAAEC,OAAQ,wBACpDlG,EAAc8F,UAAW,qBAAiB,GAC7CJ,EAAW,CACPS,EAAa,qFACdnG,EAAc8F,UAAW,6BAAyB,GACrDJ,EAAW,CACPS,EAAa,yBACdnG,EAAc8F,UAAW,2BAAuB,GACnDJ,EAAW,CACPS,EAAa,yBACdnG,EAAc8F,UAAW,oBAAgB,GAC5CJ,EAAW,CACPS,EAAa,kCACdnG,EAAc8F,UAAW,4BAAwB,GACpDJ,EAAW,CACPS,EAAa,iCACdnG,EAAc8F,UAAW,2BAAuB,GACnDJ,EAAW,CACPO,EAAU,gCAAiC,CAAEC,OAAQ,sBACtDlG,EAAc8F,UAAW,2BAAuB,GACnDJ,EAAW,CACPS,EAAa,wDACdnG,EAAc8F,UAAW,4BAAwB,GACpDJ,EAAW,CACPS,EAAa,wBACdnG,EAAc8F,UAAW,0BAAsB,GAClDJ,EAAW,CACPS,EAAa,yBACdnG,EAAc8F,UAAW,2BAAuB,GACnD9F,EAAgB0F,EAAW,CACvBU,EAAQ,CACJ5F,SAAU,CACN6F,KAAMC,EACNC,MAAOC,EAAiBF,OAGjCtG"}

package/package.json

@@ -256,5 +256,5 @@
     "./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
     "./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
   },
-  "version": "6.0.1"
+  "version": "6.0.2"
 }

package/pagination/pagination.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--action-color:var(--color);color:var(--color);display:flex;width:100%;flex-wrap:none;font-size:var(--font-size)}::slotted(cds-input[cds-pagination-number]){--background:var(--cds-alias-object-container-background);--border-radius:var(--cds-alias-object-border-radius-100);--border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);--border-bottom:0;--padding:var(--cds-global-space-2) var(--cds-global-space-4) 0;--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--text-align:center}::slotted(span){display:block}::slotted(cds-pagination-button){--color:var(--action-color)}::slotted([cds-control]){--min-width:initial;--label-width:0;--control-width:initial;width:auto}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--action-color:var(--color);color:var(--color);display:flex;flex-wrap:none;font-size:var(--font-size)}::slotted(cds-input[cds-pagination-number]){--background:var(--cds-alias-object-container-background);--border-radius:var(--cds-alias-object-border-radius-100);--border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);--border-bottom:0;--padding:var(--cds-global-space-2) var(--cds-global-space-4) 0;--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--text-align:center}::slotted(span){display:block}::slotted(cds-pagination-button:not([disabled])){--color:var(--action-color)}::slotted([cds-control]){--min-width:initial;--label-width:0;--control-width:initial;width:auto}`;export{a as default};
 //# sourceMappingURL=pagination.element.scss.js.map

package/styles/shim.clr-ui.css

@@ -626,6 +626,15 @@
   --clr-datagrid-detail-caret-icon-open-icon-color: var(--cds-global-color-gray-0);
   --clr-datagrid-placeholder-color: var(--cds-global-color-gray-700);
 }
+[cds-theme] .login-wrapper {
+  --clr-login-background-color: var(--clr-global-app-background);
+  --clr-login-title-color: var(--clr-h1-color);
+  --clr-login-error-background-color: var(--clr-alert-danger-bg-color);
+}
+[cds-theme] .login-wrapper .login .login-group .error {
+  color: var(--clr-alert-danger-font-color);
+  border: 1px solid var(--clr-alert-danger-border-color);
+}
 [cds-theme] .btn:not([disabled]):hover,
 [cds-theme] .btn:not([disabled]):focus,
 [cds-theme] .btn:not([disabled]):active {

package/styles/shim.clr-ui.min.css

@@ -120,4 +120,4 @@
     --cds-alias-object-interaction-background-highlight
   );--clr-datagrid-detail-caret-icon-open-bg-color:var(
     --cds-alias-object-interaction-background-highlight
-  );--clr-datagrid-detail-caret-icon-open-icon-color:var(--cds-global-color-gray-0);--clr-datagrid-placeholder-color:var(--cds-global-color-gray-700)}[cds-theme] .btn:not([disabled]):active,[cds-theme] .btn:not([disabled]):focus,[cds-theme] .btn:not([disabled]):hover{filter:brightness(90%)}[cds-theme] .btn.disabled,[cds-theme] .btn:disabled{opacity:1}[cds-theme] .btn-danger,[cds-theme] .btn-primary,[cds-theme] .btn-success,[cds-theme] .btn-warning{--clr-btn-icon-disabled-color:var(--cds-global-typography-color-100)}
+  );--clr-datagrid-detail-caret-icon-open-icon-color:var(--cds-global-color-gray-0);--clr-datagrid-placeholder-color:var(--cds-global-color-gray-700)}[cds-theme] .login-wrapper{--clr-login-background-color:var(--clr-global-app-background);--clr-login-title-color:var(--clr-h1-color);--clr-login-error-background-color:var(--clr-alert-danger-bg-color)}[cds-theme] .login-wrapper .login .login-group .error{color:var(--clr-alert-danger-font-color);border:1px solid var(--clr-alert-danger-border-color)}[cds-theme] .btn:not([disabled]):active,[cds-theme] .btn:not([disabled]):focus,[cds-theme] .btn:not([disabled]):hover{filter:brightness(90%)}[cds-theme] .btn.disabled,[cds-theme] .btn:disabled{opacity:1}[cds-theme] .btn-danger,[cds-theme] .btn-primary,[cds-theme] .btn-success,[cds-theme] .btn-warning{--clr-btn-icon-disabled-color:var(--cds-global-typography-color-100)}