@stenajs-webui/panels 18.0.1 → 18.0.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# v18.0.3 (Mon Feb 27 2023)
+
+#### 🐛 Bug Fix
+
+- Add headingLevel to PageHeading, default being h1 [#561](https://github.com/StenaIT/stenajs-webui/pull/561) ([@juiceit](https://github.com/juiceit))
+
+#### 📝 Documentation
+
+- Use NavBarSearchField in center content story [#503](https://github.com/StenaIT/stenajs-webui/pull/503) ([@juiceit](https://github.com/juiceit))
+
+#### Authors: 1
+
+- Josefina Andreasson ([@juiceit](https://github.com/juiceit))
+
+---
+
 # v18.0.0 (Mon Feb 13 2023)
 
 #### 💥 Breaking Change

package/dist/components/page-header/PageHeading.d.ts

@@ -1,11 +1,13 @@
 import * as React from "react";
 import { ReactNode } from "react";
+import { HeadingVariant } from "@stenajs-webui/core";
 export declare type PageHeadingVariant = "compact" | "standard" | "relaxed";
 interface PageHeadingProps {
     contentLeft?: ReactNode;
     contentRight?: ReactNode;
     heading: string;
+    headingLevel?: HeadingVariant;
     variant?: PageHeadingVariant;
 }
-export declare const PageHeading: React.VFC<PageHeadingProps>;
+export declare const PageHeading: React.FC<PageHeadingProps>;
 export {};

package/dist/index.es.js

@@ -1,8 +1,8 @@
 (function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode('._navBar_1qp30_1{--swui-navbar-background-color: var(--lhds-color-blue-500);--swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);--swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);--swui-navbar-item-background-color-selected-hover: var( --lhds-color-blue-700 );background-color:var(--swui-navbar-background-color)}._sidebarMenuButton_1x4z8_1{--swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);--swui-nav-bar-side-menu-button-background-color-hover: var( --lhds-color-blue-600 );--swui-nav-bar-side-menu-button-background-color-focus: var( --lhds-color-blue-600 );--swui-nav-bar-side-menu-button-background-color-active: var( --lhds-color-blue-700 );--current-background-color: var( --swui-nav-bar-side-menu-button-background-color );display:flex;align-items:center;justify-content:center;line-height:10px;background-color:var(--current-background-color);color:var(--swui-nav-bar-side-menu-button-text-color);cursor:pointer;height:var(--swui-nav-bar-height);width:var(--swui-nav-bar-height);padding:0;margin:0;box-sizing:border-box;border-radius:0;outline:none;border:none}._sidebarMenuButton_1x4z8_1:hover{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-hover )}._sidebarMenuButton_1x4z8_1:focus-visible{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-focus )}._sidebarMenuButton_1x4z8_1:active{--current-background-color: var( --swui-nav-bar-side-menu-button-background-color-active )}._sidebarMenuButton_1x4z8_1 ._icon_1x4z8_55{color:var(--swui-nav-bar-side-menu-button-text-color)}._navBarButton_1xy53_1{--swui-nav-bar-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-button-background-color: transparent;--swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);--swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);--swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);--swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);--swui-nav-bar-button-background-color-selected-hover: var( --lhds-color-blue-700 );--swui-nav-bar-button-background-color-selected-focus: var( --lhds-color-blue-700 );--swui-nav-bar-button-background-color-selected-active: var( --lhds-color-blue-800 );--swui-flat-button-text-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-text-color-active: var(--swui-nav-bar-button-text-color);--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-active )}._navBarButton_1xy53_1._selected_1xy53_36{--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color-selected );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-selected-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-selected-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-selected-active )}._navBarNotificationButton_1wchp_1{--swui-nav-bar-notification-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-notification-button-background-color: var( --lhds-color-blue-700 );--swui-nav-bar-notification-button-background-color-hover: var( --lhds-color-blue-900 );--swui-nav-bar-notification-button-background-color-focus: var( --lhds-color-blue-700 );--swui-nav-bar-notification-button-background-color-active: var( --lhds-color-blue-800 );--swui-nav-bar-notification-button-background-color-unread: var( --lhds-color-red-500 );--swui-nav-bar-notification-button-background-color-unread-hover: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-focus: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-active: var( --lhds-color-red-800 );--swui-flat-button-text-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-icon-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-text-color-active: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-active );--swui-button-border-radius: 16px;--swui-button-border-radius-icon-only: 16px;--swui-nav-bar-notification-shake-count: 3;transition:.5s width;width:32px}._navBarNotificationButton_1wchp_1._hasCount_1wchp_60{width:56px}._navBarNotificationButton_1wchp_1._unread_1wchp_64{--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color-unread );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-unread-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-unread-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-unread-active )}._navBarNotificationButton_1wchp_1._unread_1wchp_64._hasCount_1wchp_60 ._icon_1wchp_79{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:_shake_1wchp_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count);animation:_shake_1wchp_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}@-webkit-keyframes _shake_1wchp_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes _shake_1wchp_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}._navBarSearchFieldInput_4knxd_1{--swui-textinput-line-height: 2.7rem;--swui-textinput-text-color: var(--lhds-color-ui-50)}._navBarSearchFieldInput_4knxd_1:focus{--swui-textinput-text-color: var(--lhds-color-ui-800)}._navBarSearchField_4knxd_1{--swui-textinput-animation-time: var(--swui-animation-time-fast);--swui-textinput-placeholder-color: var(--lhds-color-ui-500);--swui-textinput-bg-color: var(--lhds-color-blue-600);--swui-textinput-border-color: transparent;--swui-textinput-border-color-hover: transparent}._navBarSearchField_4knxd_1:focus-within{--swui-textinput-text-color: var(--lhds-color-ui-800);--swui-field-text-color: var(--swui-field-text-color);--swui-textinput-icon-color: var(--lhds-color-ui-500);--swui-textinput-bg-color: var(--lhds-color-ui-50)}._navBarUserButton_1gxfr_1{--swui-nav-bar-user-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-user-button-background-color: var(--lhds-color-blue-700);--swui-nav-bar-user-button-background-color-hover: var(--lhds-color-blue-900);--swui-nav-bar-user-button-background-color-focus: var(--lhds-color-blue-700);--swui-nav-bar-user-button-background-color-active: var( --lhds-color-blue-800 );--swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-text-color-active: var( --swui-nav-bar-user-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-user-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-user-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-user-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-user-button-background-color-active );--swui-button-border-radius: 16px;--swui-button-border-radius-icon-only: 16px}._navBarUserButton_1gxfr_1._initials_1gxfr_33{width:32px}._clickable_1ijxc_1{--swui-toast-border-color: transparent;--swui-toast-item-border-color-hover: var(--lhds-color-blue-500);--current-border-color: var(--swui-toast-border-color);border-width:1px;border-style:solid;border-color:var(--current-border-color);position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;background-color:transparent;width:100%;cursor:pointer}._clickable_1ijxc_1:hover{--current-border-color: var(--swui-toast-item-border-color-hover)}._nonClickable_1ijxc_27{position:relative;z-index:1;pointer-events:none}._nonClickable_1ijxc_27 a,._nonClickable_1ijxc_27 button{pointer-events:auto}._collapsible_1nroa_1{--swui-collapsible-animation-time: var(--swui-animation-time-fast);--swui-collapsible-expanded-line-background-color: var( --swui-primary-action-color );--swui-collapsible-header-text-color: var(--lhds-color-ui-900);--swui-collapsible-header-background-color: var(--swui-white);--swui-collapsible-header-background-color-hover: var(--lhds-color-blue-100);--swui-collapsible-header-background-color-active: var(--lhds-color-blue-100);--swui-collapsible-header-border-color: var(--lhds-color-ui-300);--swui-collapsible-header-border-color-focus: var( --swui-primary-action-color );--swui-collapsible-header-focus-shadow: var(--swui-field-focus-shadow);--swui-collapsible-header-content-margin: calc( var(--swui-metrics-indent) * 2 );--swui-collapsible-header-font-weight: var(--swui-font-weight-text-bold);--swui-collapsible-header-indicator-color: var(--swui-primary-action-color);--swui-collapsible-header-indicator-color-collapsed: var(--lhds-color-ui-500);--swui-collapsible-header-indicator-color-hover: var( --swui-primary-action-color );--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0;--swui-collapsible-content-background-color: var(--lhds-color-ui-100);--swui-collapsible-content-border-color: var(--lhds-color-ui-300);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2);--swui-collapsible-groupheading-font-size: var(--swui-font-size-smaller);--swui-collapsible-groupheading-text-color: var(--lhds-color-ui-600);--swui-collapsible-min-height: 40px}._collapsible_1nroa_1 ._header_1nroa_46{background-color:var(--swui-collapsible-header-background-color);width:100%;text-align:left;min-height:var(--swui-collapsible-min-height);box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--swui-collapsible-header-border-color);padding:var(--swui-collapsible-header-padding)}._collapsible_1nroa_1 ._header_1nroa_46 ._indicator_1nroa_59{transition:all var(--swui-collapsible-animation-time) ease-in-out;margin-left:var(--swui-collapsible-header-content-margin);color:var(--swui-collapsible-header-indicator-color)}._collapsible_1nroa_1 ._header_1nroa_46:not(:disabled):hover:not(:active){background-color:var(--swui-collapsible-header-background-color-hover)}._collapsible_1nroa_1 ._header_1nroa_46:not(:disabled):hover:not(:active) ._indicator_1nroa_59{color:var(--swui-collapsible-header-indicator-color-hover)}._collapsible_1nroa_1 ._header_1nroa_46:focus-visible{outline:1px solid var(--swui-collapsible-header-border-color-focus);outline-offset:-1px;box-shadow:var(--swui-collapsible-header-focus-shadow)}._collapsible_1nroa_1 ._header_1nroa_46:active{background:var(--swui-collapsible-header-background-color-active)}._collapsible_1nroa_1 ._header_1nroa_46:disabled{cursor:not-allowed}._collapsible_1nroa_1{position:relative}._collapsible_1nroa_1:before{content:"";position:absolute;width:2px;background:var(--swui-collapsible-expanded-line-background-color);top:0;bottom:0;left:0;z-index:1}._collapsible_1nroa_1 ._headerText_1nroa_103{font-weight:var(--swui-collapsible-header-font-weight)}._collapsible_1nroa_1[aria-expanded=false]{--swui-collapsible-expanded-line-background-color: transparent}._collapsible_1nroa_1[aria-expanded=false] ._indicator_1nroa_59{color:var(--swui-collapsible-header-indicator-color-collapsed)}._collapsible_1nroa_1 ._label_1nroa_114{margin-right:auto}._collapsible_1nroa_1 ._label_1nroa_114 span{--current-line-height: 1;font-weight:var(--swui-collapsible-header-font-weight)}._collapsible_1nroa_1 ._contentLeft_1nroa_123,._collapsible_1nroa_1 ._contentRight_1nroa_124{display:flex}._collapsible_1nroa_1 ._contentLeft_1nroa_123 button,._collapsible_1nroa_1 ._contentRight_1nroa_124 button{cursor:pointer}._collapsible_1nroa_1 ._contentLeft_1nroa_123{margin-right:var(--swui-collapsible-header-content-margin)}._collapsible_1nroa_1 ._contentRight_1nroa_124{margin-left:auto}._collapsible_1nroa_1 ._content_1nroa_123{display:flex;align-items:center;justify-content:stretch;background:var(--swui-collapsible-content-background-color);padding:var(--swui-collapsible-content-padding);min-height:var(--swui-collapsible-min-height);box-sizing:border-box}._collapsible_1nroa_1 ._content_1nroa_123:last-child{border-bottom:1px solid var(--swui-collapsible-content-border-color)}._collapsible_1nroa_1 ._content_1nroa_123._groupHeading_1nroa_155{border:none;font-size:var(--swui-collapsible-groupheading-font-size);font-family:var(--swui-font-primary);color:var(--swui-collapsible-groupheading-text-color);text-transform:uppercase;font-weight:var(--swui-font-weight-text-bold);letter-spacing:.1rem}._collapsible_1nroa_1 ._content_1nroa_123 [data-hidden=true]{display:none}._collapsible_1nroa_1 ._content_1nroa_123:hover [data-hidden=true]{display:inherit}._collapsible_1nroa_1 ._content_1nroa_123:hover [data-hover=true]{color:var(--swui-collapsible-header-indicator-color-hover)}._collapsible_1nroa_1 ._contentEnter_1nroa_180{opacity:0}._collapsible_1nroa_1 ._contentEnterActive_1nroa_184{opacity:1;transition:opacity var(--swui-collapsible-animation-time) ease-in-out}._collapsible_1nroa_1 ._contentExitDone_1nroa_189{display:none}._collapsible_1nroa_1 button._content_1nroa_123{font-family:var(--swui-font-primary);font-size:inherit;width:100%;text-align:left}._collapsible_1nroa_1 button._content_1nroa_123:focus-visible{outline:1px solid var(--swui-collapsible-header-border-color-focus);outline-offset:-1px;box-shadow:var(--swui-collapsible-header-focus-shadow)}._collapsible_1nroa_1 button._content_1nroa_123:not(:disabled):hover{background-color:var(--swui-collapsible-header-background-color-hover)}._collapsible_1nroa_1 button._content_1nroa_123:disabled{cursor:not-allowed}._collapsible_1nroa_1 button._content_1nroa_123:focus-within [data-hidden=true]{display:inherit}._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-background-color: var( --swui-collapsible-content-background-color );--swui-collapsible-header-font-weight: normal}._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 4)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 4);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 6)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 6);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 8)}._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1 ._collapsible_1nroa_1{--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 calc(var(--swui-metrics-indent) * 8);--swui-collapsible-content-padding: var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 2) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 10)}._sidebarMenu_hch18_1{--swui-sidebar-menu-separator-color: var(--lhds-color-blue-700);--swui-sidebar-menu-text-color: var(--swui-white);--swui-sidebar-menu-icon-color: var(--swui-white);--swui-sidebar-menu-background-color: var(--lhds-color-blue-500);--swui-sidebar-menu-background-color-hover: var(--lhds-color-blue-700);--swui-sidebar-menu-background-color-focus: var(--lhds-color-blue-700);--swui-sidebar-menu-background-color-active: var(--lhds-color-blue-600);--swui-sidebar-menu-item-selected: var(--lhds-color-blue-800);--swui-sidebar-menu-content-padding: var(--swui-metrics-indent) var(--swui-metrics-indent) var(--swui-metrics-indent) 0;--current-separator-color: var(--swui-sidebar-menu-separator-color);--current-text-color: var(--swui-sidebar-menu-text-color);--current-icon-color: var(--swui-sidebar-menu-icon-color);--current-background-color: var(--swui-sidebar-menu-background-color);--current-background-color-hover: var( --swui-sidebar-menu-background-color-hover );--current-background-color-focus: var( --swui-sidebar-menu-background-color-focus );--current-background-color-active: var( --swui-sidebar-menu-background-color-active );--current-item-selected: var(--swui-sidebar-menu-item-selected);--current-content-padding: var(--swui-sidebar-menu-content-padding);background-color:var(--current-background-color);height:100vh}._sidebarMenu_hch18_1[data-collapsed]{width:var(--swui-sidebar-menu-item-height)}._sidebarMenu_hch18_1 button{--swui-button-text-color: var(--swui-white);--swui-button-background-color-hover: var( --swui-sidebar-menu-background-color-hover )}._sidebarMenuCloseButton_1j21u_1{--swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-50);--swui-sidebar-menu-close-button-background-color: var(--lhds-color-blue-500);--swui-sidebar-menu-close-button-background-color-hover: var( --lhds-color-blue-600 );--swui-sidebar-menu-close-button-background-color-focus: var( --lhds-color-blue-600 );--swui-sidebar-menu-close-button-background-color-active: var( --lhds-color-blue-500 );--current-background-color: var( --swui-sidebar-menu-close-button-background-color );display:flex;align-items:center;justify-content:flex-start;line-height:10px;background-color:var(--current-background-color);color:var(--swui-sidebar-menu-close-button-text-color);cursor:pointer;height:var(--swui-sidebar-menu-item-height);padding:0;margin:0;box-sizing:border-box;border-radius:0;outline:none;border:none}._sidebarMenuCloseButton_1j21u_1:hover{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-hover )}._sidebarMenuCloseButton_1j21u_1:focus{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-focus )}._sidebarMenuCloseButton_1j21u_1:active{--current-background-color: var( --swui-sidebar-menu-close-button-background-color-active )}._sidebarMenuCloseButton_1j21u_1 ._iconWrapper_1j21u_55{justify-content:center;align-items:center;width:var(--swui-sidebar-menu-item-height);height:var(--swui-sidebar-menu-item-height)}._sidebarMenuCloseButton_1j21u_1 ._icon_1j21u_55{color:var(--swui-sidebar-menu-close-button-text-color)}._label_mnp0f_1{font-size:var(--current-text-size, var(--swui-font-size-medium));line-height:var(--current-line-height, var(--swui-line-height-medium));font-weight:var(--swui-button-font-weight);font-family:var(--swui-font-buttons);color:var(--current-text-color)}._icon_mnp0f_9{color:var(--current-text-color);font-size:1.6rem}._spinner_mnp0f_14{color:var(--current-text-color)}._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18._leftWrapper_mnp0f_18{width:var(--swui-sidebar-menu-item-height);margin-right:0}._button_mnp0f_23{border:0;padding:0;background:var(--current-background-color)}[data-collapsed] [aria-expanded=true] ._button_mnp0f_23,._button_mnp0f_23:hover{background:var(--current-background-color-hover)}._button_mnp0f_23:focus{outline:none}._button_mnp0f_23:focus-visible{background:var(--current-background-color-active)}._button_mnp0f_23:active{background:var(--current-background-color-active)}._button_mnp0f_23._selected_mnp0f_45{background:var(--current-item-selected)}._sidebarMenuHeading_kvpq5_1{--swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-300);text-transform:uppercase}._sidebarMenuCollapsible_1jwhs_1{--swui-collapsible-header-text-color: var(--current-text-color);--swui-collapsible-header-background-color: var(--current-background-color);--swui-collapsible-header-background-color-hover: var( --current-background-color-hover );--swui-collapsible-header-background-color-active: var( --current-background-color-active );--swui-collapsible-header-indicator-color: var(--current-text-color);--swui-collapsible-header-indicator-color-collapsed: var( --current-text-color );--swui-collapsible-header-indicator-color-hover: var(--current-text-color);--swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 0;--swui-collapsible-header-content-margin: 0;--swui-collapsible-collapsible-link-padding: var(--swui-metrics-indent) var(--swui-metrics-indent) var(--swui-metrics-indent) calc(var(--swui-metrics-indent) * 4);--swui-collapsible-header-border-color: transparent;--swui-collapsible-min-height: var(--swui-sidebar-menu-item-height)}')),document.head.appendChild(o)}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { ActionMenu as re, ActionMenuContext as me, stenaAngleDown as oe, PrimaryButton as be, SecondaryButton as ge, FlatButton as $, stenaBell as fe, Icon as A, stenaSearch as _e, stenaUserCircle as ve, stenaTimes as Ce, Banner as xe, Spinner as Be, ButtonContent as Ne } from "@stenajs-webui/elements";
+import { ActionMenu as re, ActionMenuContext as me, stenaAngleDown as ae, PrimaryButton as be, SecondaryButton as ge, FlatButton as $, stenaBell as fe, Icon as A, stenaSearch as _e, stenaUserCircle as ve, stenaTimes as Ce, Banner as xe, Spinner as Be, ButtonContent as Ne } from "@stenajs-webui/elements";
 import * as I from "react";
 import { useRef as we, useMemo as ye, forwardRef as ke, useState as Me } from "react";
-import { useBoolean as U, Column as L, Box as c, Row as p, Indent as g, Heading as Z, Clickable as q, Txt as X, Space as k, Text as S, SeparatorLine as ae, exhaustSwitchCaseElseThrow as ie } from "@stenajs-webui/core";
+import { useBoolean as U, Column as L, Box as c, Row as p, Indent as g, Heading as Z, Clickable as q, Txt as X, Space as k, Text as S, SeparatorLine as oe, exhaustSwitchCaseElseThrow as ie } from "@stenajs-webui/core";
 import { Popover as T } from "@stenajs-webui/tooltip";
 import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
 import { Checkbox as se, TextInput as Se } from "@stenajs-webui/forms";
@@ -16,8 +16,8 @@ const V = ({
   renderItems: n,
   placement: r = "bottom",
   buttonComponent: t,
-  rightIcon: o = oe,
-  portalTarget: a = "parent",
+  rightIcon: a = ae,
+  portalTarget: o = "parent",
   zIndex: s,
   menuWidth: u,
   menuTop: h,
@@ -73,12 +73,12 @@ const V = ({
       })
     }),
     arrow: !1,
-    appendTo: a,
+    appendTo: o,
     zIndex: s,
     plugins: [F],
     lazy: !0,
     children: /* @__PURE__ */ e(t, {
-      rightIcon: v ? void 0 : o,
+      rightIcon: v ? void 0 : a,
       ...f,
       ref: N,
       onClick: j
@@ -97,15 +97,15 @@ const V = ({
   renderMenu: n,
   ...r
 }) => {
-  const [t, o, a] = U(!1);
+  const [t, a, o] = U(!1);
   return /* @__PURE__ */ e(T, {
-    onClickOutside: a,
+    onClickOutside: o,
     arrow: !1,
     visible: t,
     disablePadding: !0,
     content: n ? /* @__PURE__ */ e(L, {
       children: /* @__PURE__ */ e(re, {
-        children: n(a)
+        children: n(o)
       })
     }) : void 0,
     placement: "bottom-start",
@@ -124,8 +124,8 @@ const V = ({
           num: 0.5
         }), /* @__PURE__ */ e($, {
           size: "small",
-          onClick: o,
-          leftIcon: oe
+          onClick: a,
+          leftIcon: ae
         })]
       })
     })
@@ -162,8 +162,8 @@ const V = ({
   left: n,
   className: r,
   showMenuButton: t = !1,
-  menuButtonVisibility: o = "visible",
-  children: a,
+  menuButtonVisibility: a = "visible",
+  children: o,
   right: s,
   center: u,
   variant: h = "standard",
@@ -183,7 +183,7 @@ const V = ({
       justifyContent: "flex-start",
       alignItems: "center",
       children: [t ? /* @__PURE__ */ i(m, {
-        children: [o === "hidden" ? /* @__PURE__ */ e(c, {
+        children: [a === "hidden" ? /* @__PURE__ */ e(c, {
           width: "var(--swui-nav-bar-height)"
         }) : /* @__PURE__ */ e(ce, {
           onClick: _
@@ -196,11 +196,11 @@ const V = ({
         })]
       }) : /* @__PURE__ */ e(g, {
         num: 2
-      }), a && /* @__PURE__ */ e(m, {
+      }), o && /* @__PURE__ */ e(m, {
         children: /* @__PURE__ */ e(p, {
           justifyContent: "center",
           alignItems: "center",
-          children: I.Children.map(a, (C, x) => /* @__PURE__ */ i(m, {
+          children: I.Children.map(o, (C, x) => /* @__PURE__ */ i(m, {
             children: [x > 0 && /* @__PURE__ */ e(g, {}), C]
           }))
         })
@@ -237,11 +237,11 @@ const V = ({
   children: r,
   ...t
 }) => {
-  const [o, a, s] = U(!1);
+  const [a, o, s] = U(!1);
   return /* @__PURE__ */ e(T, {
     onClickOutside: s,
     triggerTarget: document.body,
-    visible: o,
+    visible: a,
     content: /* @__PURE__ */ i(m, {
       children: [n && n({
         close: s
@@ -249,7 +249,7 @@ const V = ({
     }),
     children: /* @__PURE__ */ e(De, {
       ...t,
-      onClick: a
+      onClick: o
     })
   });
 }, Ue = "_navBarNotificationButton_1wchp_1", Ze = "_hasCount_1wchp_60", qe = "_unread_1wchp_64", Ve = "_icon_1wchp_79", Ge = "_shake_1wchp_1", R = {
@@ -262,8 +262,8 @@ const V = ({
   count: n,
   unread: r = !1,
   className: t,
-  labelClassName: o,
-  iconClassName: a,
+  labelClassName: a,
+  iconClassName: o,
   icon: s = fe,
   ...u
 }) => {
@@ -277,8 +277,8 @@ const V = ({
       [R.hasCount]: h
     }, R.navBarNotificationButton, t),
     label: h ? String(n) : void 0,
-    labelClassName: d(o, R.label),
-    iconClassName: d(a, R.icon)
+    labelClassName: d(a, R.label),
+    iconClassName: d(o, R.icon)
   });
 }, Je = "_navBarSearchFieldInput_4knxd_1", Ke = "_navBarSearchField_4knxd_1", ne = {
   navBarSearchFieldInput: Je,
@@ -287,7 +287,7 @@ const V = ({
   placeholder: n = "Search...",
   className: r,
   wrapperClassName: t,
-  ...o
+  ...a
 }) => /* @__PURE__ */ e(Se, {
   wrapperClassName: d(ne.navBarSearchField, t),
   className: d(ne.navBarSearchFieldInput, r),
@@ -297,31 +297,31 @@ const V = ({
       icon: _e
     })
   }),
-  ...o
+  ...a
 }), Qe = "_navBarUserButton_1gxfr_1", Xe = "_initials_1gxfr_33", te = {
   navBarUserButton: Qe,
   initials: Xe
-}, ot = ({
+}, at = ({
   className: n,
   username: r,
   initials: t,
-  icon: o = ve,
-  iconClassName: a,
+  icon: a = ve,
+  iconClassName: o,
   ...s
 }) => /* @__PURE__ */ e(je, {
   ...s,
   className: d({
     [te.initials]: t != null
   }, te.navBarUserButton, n),
-  leftIcon: r != null ? o : void 0,
+  leftIcon: r != null ? a : void 0,
   label: t != null ? t : r,
   disableArrow: !0
 }), de = ({
   text: n,
   timestamp: r,
   icon: t,
-  iconAriaLabel: o,
-  iconColor: a,
+  iconAriaLabel: a,
+  iconColor: o,
   contentLeft: s,
   contentRight: u,
   onClose: h
@@ -342,8 +342,8 @@ const V = ({
     }), !s && t && /* @__PURE__ */ e(A, {
       icon: t,
       size: 20,
-      color: a,
-      "aria-label": o
+      color: o,
+      "aria-label": a
     }), /* @__PURE__ */ i(c, {
       minHeight: 20,
       justifyContent: "center",
@@ -370,7 +370,7 @@ const V = ({
       "aria-label": "Close"
     })
   })]
-}), at = ({
+}), ot = ({
   children: n,
   background: r,
   ...t
@@ -391,15 +391,15 @@ const V = ({
   onClick: n,
   onClickAriaLabel: r,
   children: t,
-  width: o = 264,
-  maxWidth: a,
+  width: a = 264,
+  maxWidth: o,
   ...s
 }) => /* @__PURE__ */ i(c, {
   borderRadius: 8,
   background: B("--lhds-color-ui-50"),
   shadow: "popover",
-  width: o,
-  maxWidth: a,
+  width: a,
+  maxWidth: o,
   role: "alert",
   position: "relative",
   children: [/* @__PURE__ */ e(c, {
@@ -422,12 +422,12 @@ const V = ({
     className: O.clickable,
     "aria-label": r
   })]
-}), nn = "_collapsible_1nroa_1", tn = "_header_1nroa_46", rn = "_indicator_1nroa_59", on = "_headerText_1nroa_103", an = "_label_1nroa_114", sn = "_contentLeft_1nroa_123", cn = "_contentRight_1nroa_124", ln = "_content_1nroa_123", dn = "_groupHeading_1nroa_155", un = "_contentEnter_1nroa_180", hn = "_contentEnterActive_1nroa_184", pn = "_contentExitDone_1nroa_189", l = {
+}), nn = "_collapsible_1nroa_1", tn = "_header_1nroa_46", rn = "_indicator_1nroa_59", an = "_headerText_1nroa_103", on = "_label_1nroa_114", sn = "_contentLeft_1nroa_123", cn = "_contentRight_1nroa_124", ln = "_content_1nroa_123", dn = "_groupHeading_1nroa_155", un = "_contentEnter_1nroa_180", hn = "_contentEnterActive_1nroa_184", pn = "_contentExitDone_1nroa_189", l = {
   collapsible: nn,
   header: tn,
   indicator: rn,
-  headerText: on,
-  label: an,
+  headerText: an,
+  label: on,
   contentLeft: sn,
   contentRight: cn,
   content: ln,
@@ -452,15 +452,15 @@ const V = ({
   contentLeft: n,
   contentRight: r,
   className: t,
-  children: o,
-  ...a
+  children: a,
+  ...o
 }) => /* @__PURE__ */ i("div", {
   className: d(l.content, t),
-  ...a,
+  ...o,
   children: [n && /* @__PURE__ */ e("div", {
     className: l.contentLeft,
     children: n
-  }), o != null ? o : /* @__PURE__ */ e(G, {}), r && /* @__PURE__ */ e("div", {
+  }), a != null ? a : /* @__PURE__ */ e(G, {}), r && /* @__PURE__ */ e("div", {
     className: l.contentRight,
     children: r
   })]
@@ -477,8 +477,8 @@ const V = ({
 }, ue = ke(function({
   label: r,
   contentLeft: t,
-  contentRight: o,
-  collapsed: a = !1,
+  contentRight: a,
+  collapsed: o = !1,
   onClick: s,
   className: u,
   disabled: h = !1,
@@ -494,7 +494,7 @@ const V = ({
   const w = I.useRef(null), j = w.current ? mn(getComputedStyle(w.current).getPropertyValue("--swui-collapsible-animation-time")) : void 0;
   return /* @__PURE__ */ i("div", {
     className: d(l.collapsible, u),
-    "aria-expanded": !a,
+    "aria-expanded": !o,
     ref: w,
     ...N,
     children: [/* @__PURE__ */ i(q, {
@@ -515,17 +515,17 @@ const V = ({
           className: l.headerText,
           children: r
         })
-      }), o && /* @__PURE__ */ e("div", {
+      }), a && /* @__PURE__ */ e("div", {
         className: l.contentRight,
-        children: o
+        children: a
       }), /* @__PURE__ */ e(A, {
-        icon: a ? C : f,
+        icon: o ? C : f,
         className: l.indicator,
         size: x,
         fixedWidth: !0
       })]
     }), /* @__PURE__ */ e(Ee, {
-      in: !a,
+      in: !o,
       timeout: {
         enter: j
       },
@@ -550,34 +550,34 @@ const V = ({
   value: n,
   onValueChange: r,
   onChange: t,
-  indeterminate: o,
-  ...a
+  indeterminate: a,
+  ...o
 }) => /* @__PURE__ */ e(ue, {
   contentLeft: /* @__PURE__ */ e(se, {
     value: n,
-    indeterminate: o,
+    indeterminate: a,
     onValueChange: r,
     onChange: t,
     onClick: (s) => s.stopPropagation()
   }),
-  ...a
+  ...o
 }), ct = ({
   contentLeft: n,
   contentRight: r,
   className: t,
-  onClick: o,
-  children: a,
+  onClick: a,
+  children: o,
   ...s
 }) => /* @__PURE__ */ i(q, {
   disableFocusHighlight: !0,
   disableOpacityOnClick: !0,
   className: d(l.content, t),
-  onClick: o,
+  onClick: a,
   ...s,
   children: [n && /* @__PURE__ */ e("div", {
     className: l.contentLeft,
     children: n
-  }), a != null ? a : /* @__PURE__ */ e(G, {}), r && /* @__PURE__ */ e("div", {
+  }), o != null ? o : /* @__PURE__ */ e(G, {}), r && /* @__PURE__ */ e("div", {
     className: l.contentRight,
     children: r
   })]
@@ -628,7 +628,7 @@ const V = ({
   renderBreadCrumbs: n,
   renderPageHeading: r,
   renderTabs: t,
-  children: o
+  children: a
 }) => /* @__PURE__ */ i(c, {
   shadow: "box",
   background: B("--lhds-color-ui-50"),
@@ -638,8 +638,8 @@ const V = ({
       spacing: 1.25,
       children: n()
     }), r == null ? void 0 : r(), t == null ? void 0 : t()]
-  }), o && /* @__PURE__ */ i(m, {
-    children: [!t && n && /* @__PURE__ */ e(k, {}), /* @__PURE__ */ e(ae, {}), o]
+  }), a && /* @__PURE__ */ i(m, {
+    children: [!t && n && /* @__PURE__ */ e(k, {}), /* @__PURE__ */ e(oe, {}), a]
   })]
 }), pt = (n) => /* @__PURE__ */ e(p, {
   indent: 3,
@@ -651,19 +651,21 @@ const V = ({
   relaxed: 2
 }, mt = ({
   heading: n,
-  variant: r = "standard",
-  contentLeft: t,
+  headingLevel: r = "h1",
+  variant: t = "standard",
+  contentLeft: a,
   contentRight: o
 }) => /* @__PURE__ */ i(p, {
-  spacing: fn[r],
+  spacing: fn[t],
   alignItems: "center",
   gap: 2,
   children: [/* @__PURE__ */ e(Z, {
     variant: "h3",
+    as: r,
     children: n
   }), /* @__PURE__ */ e(p, {
     alignItems: "center",
-    children: t
+    children: a
   }), /* @__PURE__ */ e(p, {
     style: {
       marginLeft: "auto"
@@ -699,28 +701,28 @@ const V = ({
       className: z.icon
     })
   })
-}), K = (n) => /* @__PURE__ */ e(ae, {
+}), K = (n) => /* @__PURE__ */ e(oe, {
   color: B("--lhds-color-blue-600"),
   ...n
 }), wn = ({
   className: n,
   children: r,
   onCloseClick: t,
-  collapsed: o = !1,
-  hideCloseButton: a = !1,
+  collapsed: a = !1,
+  hideCloseButton: o = !1,
   variant: s = "standard",
   ...u
 }) => {
   const h = le(s);
   return /* @__PURE__ */ i(c, {
-    className: d(W.sidebarMenu, o ? W.collapsed : null, n),
+    className: d(W.sidebarMenu, a ? W.collapsed : null, n),
     style: {
       ["--swui-sidebar-menu-item-height"]: h,
       ["--swui-nav-bar-height"]: h
     },
-    "data-collapsed": o || void 0,
+    "data-collapsed": a || void 0,
     ...u,
-    children: [!a && /* @__PURE__ */ i(m, {
+    children: [!o && /* @__PURE__ */ i(m, {
       children: [/* @__PURE__ */ e(Nn, {
         onClick: t
       }), /* @__PURE__ */ e(K, {}), /* @__PURE__ */ e(k, {})]
@@ -764,8 +766,8 @@ const V = ({
   className: n,
   children: r,
   selected: t,
-  indent: o,
-  label: a,
+  indent: a,
+  label: o,
   loading: s,
   left: u,
   leftIcon: h,
@@ -785,10 +787,10 @@ const V = ({
     spacing: 1,
     flex: 1,
     alignItems: "center",
-    children: [!N && /* @__PURE__ */ e(g, {}), o && /* @__PURE__ */ e(g, {
+    children: [!N && /* @__PURE__ */ e(g, {}), a && /* @__PURE__ */ e(g, {
       num: 3.5
     }), /* @__PURE__ */ e(Ne, {
-      label: a,
+      label: o,
       loading: s,
       left: u,
       leftIcon: h,
@@ -816,19 +818,19 @@ const V = ({
   className: n,
   label: r,
   contentLeft: t,
-  contentRight: o,
-  ...a
+  contentRight: a,
+  ...o
 }) => /* @__PURE__ */ e(c, {
   spacing: 2,
   indent: 2,
   children: /* @__PURE__ */ e(J, {
     className: jn.sidebarMenuHeading,
     contentLeft: t,
-    contentRight: o,
+    contentRight: a,
     children: /* @__PURE__ */ e(S, {
       variant: "overline",
       color: "var(--swui-sidebar-menu-heading-text-color)",
-      ...a,
+      ...o,
       children: r
     })
   })
@@ -839,14 +841,14 @@ const V = ({
   label: r,
   leftIcon: t
 }) => {
-  const [o, a] = Me(!1);
+  const [a, o] = Me(!1);
   return /* @__PURE__ */ e(c, {
     background: "var(--current-background-color)",
     children: /* @__PURE__ */ e(ue, {
       className: Rn.sidebarMenuCollapsible,
       label: r,
-      collapsed: o,
-      onClick: () => a(!o),
+      collapsed: a,
+      onClick: () => o(!a),
       contentLeft: t ? /* @__PURE__ */ e(c, {
         width: "var(--swui-sidebar-menu-item-height)",
         alignItems: "center",
@@ -866,44 +868,44 @@ const V = ({
       })
     })
   });
-}, pe = (n, r = !1) => n.map((t, o) => {
+}, pe = (n, r = !1) => n.map((t, a) => {
   switch (t.type) {
     case "heading":
       return /* @__PURE__ */ e(he, {
         label: t.label
-      }, o);
+      }, a);
     case "separator":
-      return /* @__PURE__ */ e(K, {}, o);
+      return /* @__PURE__ */ e(K, {}, a);
     case "link": {
       const {
-        type: a,
+        type: o,
         ...s
       } = t;
       return /* @__PURE__ */ e(D, {
         indent: r,
         ...s
-      }, o);
+      }, a);
     }
     case "grouped":
       return /* @__PURE__ */ e($n, {
         leftIcon: t.leftIcon,
         label: t.label,
         children: pe(t.items, !0)
-      }, o);
+      }, a);
     default:
       return ie(t);
   }
 }), gt = (n, {
   popupMinWidth: r
-}) => n.map((t, o) => {
+}) => n.map((t, a) => {
   switch (t.type) {
     case "heading":
       return null;
     case "separator":
-      return /* @__PURE__ */ e(K, {}, o);
+      return /* @__PURE__ */ e(K, {}, a);
     case "link": {
       const {
-        type: a,
+        type: o,
         label: s,
         ...u
       } = t;
@@ -911,7 +913,7 @@ const V = ({
         title: s,
         width: "var(--swui-sidebar-menu-item-height)",
         ...u
-      }, o);
+      }, a);
     }
     case "grouped":
       return /* @__PURE__ */ e("div", {
@@ -936,7 +938,7 @@ const V = ({
             leftIcon: t.leftIcon
           })
         })
-      }, o);
+      }, a);
     default:
       return ie(t);
   }
@@ -944,7 +946,7 @@ const V = ({
   numItemsSelected: n,
   label: r,
   afterLabelContent: t,
-  rightContent: o
+  rightContent: a
 }) => /* @__PURE__ */ i(p, {
   indent: 3,
   spacing: !0,
@@ -974,7 +976,7 @@ const V = ({
       })]
     }) : null]
   }), /* @__PURE__ */ e(c, {
-    children: o
+    children: a
   })]
 });
 export {
@@ -998,8 +1000,8 @@ export {
   tt as NavBarNotificationButton,
   nt as NavBarPopoverButton,
   rt as NavBarSearchField,
-  ot as NavBarUserButton,
-  at as Notification,
+  at as NavBarUserButton,
+  ot as Notification,
   ht as PageHeader,
   pt as PageHeaderRow,
   mt as PageHeading,