scb-wc 0.1.75 → 0.1.76

package/scb-breadcrumb/scb-breadcrumb.js

@@ -3,10 +3,10 @@ import "../scb-link/scb-link.js";
 import "./scb-breadcrumb-item.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
-import "@material/web/focus/md-focus-ring.js";
-import "@material/web/icon/icon.js";
 //#region src/scb-components/scb-breadcrumb/scb-breadcrumb.ts
-var o = class extends t {
+var o, s = () => {
+	customElements.get("md-focus-ring") || (o ??= import("@material/web/focus/md-focus-ring.js").then(() => void 0));
+}, c = class extends t {
 	constructor(...e) {
 		super(...e), this.showAll = !1, this.currentIndex = void 0, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
 	}
@@ -60,12 +60,6 @@ var o = class extends t {
         outline: none;
       }
 
-      .breadcrumb-animate {
-        opacity: 0;
-        transform: translateY(10px);
-        animation: fadeInBreadcrumb 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-      }
-
       md-focus-ring {
         position: absolute;
         inset: 0;
@@ -81,6 +75,30 @@ var o = class extends t {
         display: block;
       }
 
+      .breadcrumb-animate {
+        opacity: 0;
+        transform: translateY(10px);
+        animation: fadeInBreadcrumb 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      .breadcrumb-icon {
+        display: inline-block;
+        inline-size: 1em;
+        overflow: hidden;
+        font-family: 'Material Symbols Outlined';
+        font-size: var(--icon-size-medium, 24px);
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        text-transform: none;
+        word-wrap: normal;
+        direction: ltr;
+        font-feature-settings: 'liga' 1;
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
       @keyframes fadeInBreadcrumb {
         to {
           opacity: 1;
@@ -208,15 +226,14 @@ var o = class extends t {
                 aria-label="Visa alla"
                 role="button"
                 tabindex="0"
+                @focusin=${s}
                 @click=${this._onEllipsisClick}
                 @keydown=${(e) => {
 				(e.key === "Enter" || e.key === " ") && this._onEllipsisClick();
 			}}
               >
-                <md-icon>
-                  <md-focus-ring></md-focus-ring>
-                  more_horiz
-                </md-icon>
+                <md-focus-ring aria-hidden="true"></md-focus-ring>
+                <span class="breadcrumb-icon" aria-hidden="true">more_horiz</span>
               </span>
             `;
 			let i = this.getItemLabel(e.item), a = this.getItemHref(e.item);
@@ -238,29 +255,29 @@ e([a({
 	type: Boolean,
 	attribute: "show-all",
 	reflect: !0
-})], o.prototype, "showAll", void 0), e([a({
+})], c.prototype, "showAll", void 0), e([a({
 	type: Number,
 	attribute: "current-index",
 	reflect: !0
-})], o.prototype, "currentIndex", void 0), e([a({
+})], c.prototype, "currentIndex", void 0), e([a({
 	type: String,
 	reflect: !0
-})], o.prototype, "spacing", void 0), e([a({
+})], c.prototype, "spacing", void 0), e([a({
 	type: String,
 	attribute: "spacing-top",
 	reflect: !0
-})], o.prototype, "spacingTop", void 0), e([a({
+})], c.prototype, "spacingTop", void 0), e([a({
 	type: String,
 	attribute: "spacing-bottom",
 	reflect: !0
-})], o.prototype, "spacingBottom", void 0), e([a({
+})], c.prototype, "spacingBottom", void 0), e([a({
 	type: String,
 	attribute: "spacing-left",
 	reflect: !0
-})], o.prototype, "spacingLeft", void 0), e([a({
+})], c.prototype, "spacingLeft", void 0), e([a({
 	type: String,
 	attribute: "spacing-right",
 	reflect: !0
-})], o.prototype, "spacingRight", void 0), o = e([i("scb-breadcrumb")], o);
+})], c.prototype, "spacingRight", void 0), c = e([i("scb-breadcrumb")], c);
 //#endregion
-export { o as SCBBreadcrumb };
+export { c as SCBBreadcrumb };

package/scb-components/scb-header/scb-header.d.ts

@@ -66,6 +66,7 @@ export declare class ScbHeader extends LitElement {
     private _mobileSearchOpen;
     private _drawerImportPromise?;
     private _dropdownImportPromise?;
+    private _focusRingImportPromise?;
     private _initialUpgradeComplete;
     private _slotNavItems;
     private _slotUtils;
@@ -95,7 +96,6 @@ export declare class ScbHeader extends LitElement {
     private get _logoGroup();
     private get _searchWrap();
     private get _menuBtn();
-    private get _searchEl();
     private get _tabsNav();
     private _attachSlotObservers;
     private _sameNavItems;
@@ -123,13 +123,16 @@ export declare class ScbHeader extends LitElement {
     private _applyLogoSizing;
     private _closeDrawerNow;
     private _openDrawerNow;
+    private _ensureFocusRingReady;
+    private _onGlobalFocusRingKeydown;
+    private _onGlobalFocusRingPointerDown;
+    private _onLocalFocusIn;
     private _ensureDrawerReady;
     private _ensureDropdownReady;
     private _onDrawerOpened;
     private _onDrawerClosed;
     private _syncMenuBtnAria;
     private _onMenuClick;
-    private _onSearchClick;
     private _onMobileSearchToggle;
     private _getNavItems;
     private _getDropdownForSlot;
@@ -142,10 +145,14 @@ export declare class ScbHeader extends LitElement {
     private _renderMenuNodes;
     private _renderMenuNode;
     private _syncFlags;
-    private _onSearchInput;
-    private _onSearchSubmit;
+    private _emitSearchInput;
+    private _emitSearchChange;
+    private _onNativeSearchInput;
+    private _onNativeSearchSubmit;
     private _onSearchClear;
+    private _onNativeSearchClear;
     private _renderMenuButton;
+    private _renderSearchForm;
     render(): TemplateResult;
     private _renderTabSkeletons;
     private _renderLogo;