@oicl/openbridge-webcomponents 2.0.0-next.172 → 2.0.0-next.173

package/bundle/openbridge-webcomponents.bundle.js

@@ -20028,6 +20028,43 @@ function deepActiveElement() {
 	while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
 	return active;
 }
+/**
+* Whether `node` sits inside `root` in the composed tree.
+*
+* `Node.contains()` walks the DOM tree, where slotted light-DOM content is a
+* child of the host and not of the slot — so it answers no for exactly the
+* content a component projects into itself. This follows `assignedSlot` and
+* shadow hosts as well.
+*/
+function composedContains(root, node) {
+	let current = node;
+	while (current) {
+		if (current === root) return true;
+		current = current.assignedSlot ?? current.parentNode ?? (current instanceof ShadowRoot ? current.host : null);
+	}
+	return false;
+}
+/**
+* Moves focus out of `hidden`, to the first fallback that will take it.
+*
+* Call it just before a region becomes `inert` or is taken out of the page.
+* The browser blurs whatever it hides, and focus lands on `<body>` a frame or
+* two later, so the next Tab press starts from the top of the document instead
+* of where the user was.
+*
+* Each candidate is tried and then checked, rather than inspected first: a
+* `disabled` button, a hidden one and an element with no tabindex all refuse
+* focus for different reasons, and the only reliable question is whether focus
+* actually left.
+*/
+function releaseFocusBefore(hidden, ...fallbacks) {
+	if (!composedContains(hidden, deepActiveElement())) return;
+	for (const candidate of fallbacks) {
+		if (!candidate) continue;
+		candidate.focus();
+		if (!composedContains(hidden, deepActiveElement())) return;
+	}
+}
 function isTabbable(element) {
 	if (!element.matches(TABBABLE_SELECTOR)) return false;
 	if (element.tabIndex < 0) return false;
@@ -70665,6 +70702,9 @@ var accordion_card_default = i$7`* {
 
 :host {
   display: block;
+
+  /* TODO(designer): confirm the expand duration and curve. */
+  --_expand-duration: var(--obc-accordion-expand-duration, 200ms);
 }
 
 .wrapper {
@@ -70681,6 +70721,12 @@ var accordion_card_default = i$7`* {
     align-items: center;
     align-self: stretch;
     height: fit-content;
+    border-radius: var(--ui-components-accordion-border-radius);
+    /* The card surface is what the closing panel slides over; snapping it away
+       would drop the content onto the page background mid-slide. */
+    transition:
+      background-color var(--_expand-duration) ease,
+      box-shadow var(--_expand-duration) ease;
   }
 
 :is(.wrapper .content-button) {
@@ -70768,6 +70814,11 @@ var accordion_card_default = i$7`* {
     padding: 0;
     border: 0;
     overflow: hidden;
+    /* The bottom corners square on open; without this they round again while
+       the panel is still sliding away. */
+    transition:
+      border-radius var(--_expand-duration) ease,
+      box-shadow var(--_expand-duration) ease;
   }
 
 .wrapper .header-container {
@@ -70840,32 +70891,51 @@ var accordion_card_default = i$7`* {
     flex-shrink: 0;
   }
 
-.wrapper.state-expanded .container-content-additional {
-      color: var(--element-neutral-color);
-      font-family: var(--global-typography-font-family);
-      font-weight: var(--global-typography-ui-body-font-weight);
-      font-size: var(--global-typography-ui-body-font-size);
-      line-height: var(--global-typography-ui-body-line-height);
-      font-feature-settings:
+.wrapper .trailing-icon {
+    transition: transform var(--_expand-duration) ease;
+  }
+
+.wrapper.state-expanded .trailing-icon {
+    transform: rotate(-180deg);
+  }
+
+.wrapper .panel {
+    display: grid;
+    /* 0fr to 1fr is the only track that eases to content height in every engine. */
+    grid-template-rows: 0fr;
+    align-self: stretch;
+    transition: grid-template-rows var(--_expand-duration) ease;
+  }
+
+.wrapper .panel-inner {
+    /* The grid item cannot carry the inset: padding holds the track open at
+       16px when closed. It clips here, the padding sits one level down. */
+    min-height: 0;
+    overflow: hidden;
+  }
+
+.wrapper .container-content-additional {
+    color: var(--element-neutral-color);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
+    font-size: var(--global-typography-ui-body-font-size);
+    line-height: var(--global-typography-ui-body-line-height);
+    font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      flex: 1 0 0;
-      align-self: stretch;
-      height: 100%;
-      padding: 0 16px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 16px 16px 16px;
+  }
+
+.wrapper.state-expanded .panel {
+      grid-template-rows: 1fr;
     }
 
 .wrapper.state-expanded .card-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       flex: 1 0 0;
-      align-self: stretch;
-      border-radius: var(--ui-components-accordion-border-radius);
       background: var(--container-background-color);
       box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
     }
@@ -70971,6 +71041,15 @@ var accordion_card_default = i$7`* {
 .alert.alert-level-diagnostic {
     z-index: 1;
   }
+
+@media (prefers-reduced-motion: reduce) {
+  .wrapper .panel,
+  .wrapper .card-container,
+  .wrapper .content-button,
+  .wrapper .trailing-icon {
+    transition: none;
+  }
+}
 `;
 //#endregion
 //#region src/components/accordion-card/accordion-card.ts
@@ -71007,6 +71086,20 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
 			cardTitle: this.cardTitle
 		} }));
 	}
+	/**
+	* Keeps the keyboard somewhere predictable when the panel closes.
+	*
+	* A collapsed panel is `inert`, and the browser drops focus out of anything
+	* it makes inert — onto `<body>`, two frames later. Clicking the header
+	* already leaves focus there; a consumer setting `expanded` while a slotted
+	* control has focus is the case that needs the transfer.
+	*/
+	willUpdate(changed) {
+		if (!changed.has("expanded") || this.expanded) return;
+		const panel = this.shadowRoot?.querySelector(".panel");
+		if (!panel) return;
+		releaseFocusBefore(panel, this.shadowRoot?.querySelector(".content-button"), this.shadowRoot?.querySelector(".wrapper"));
+	}
 	renderContentMain() {
 		return b`
       <div class="header-container">
@@ -71028,17 +71121,20 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
                   </div>
                 ` : ""}
           <div class="trailing-icon">
-            ${this.expanded ? b`<obi-chevron-up-google></obi-chevron-up-google>` : b`<obi-chevron-down-google></obi-chevron-down-google>`}
+            <obi-chevron-down-google></obi-chevron-down-google>
           </div>
         </div>
       </div>
     `;
 	}
 	renderContentAdditional() {
-		if (!this.expanded) return "";
 		return b`
-      <div class="container-content-additional">
-        <slot name="expanded-content"></slot>
+      <div class="panel" id="accordion-content" ?inert=${!this.expanded}>
+        <div class="panel-inner">
+          <div class="container-content-additional">
+            <slot name="expanded-content"></slot>
+          </div>
+        </div>
       </div>
     `;
 	}
@@ -71051,6 +71147,7 @@ var ObcAccordionCard = class ObcAccordionCard extends i$4 {
 	render() {
 		return b`
       <div
+        tabindex="-1"
         class=${e$2({
 			wrapper: true,
 			"state-expanded": this.expanded,
@@ -71126,6 +71223,11 @@ var accordion_item_default = i$7`* {
   box-sizing: border-box;
 }
 
+:host {
+  /* TODO(designer): confirm the expand duration and curve. */
+  --_expand-duration: var(--obc-accordion-expand-duration, 200ms);
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -71213,6 +71315,9 @@ var accordion_item_default = i$7`* {
   cursor: pointer;
   overflow: hidden;
   position: relative;
+  /* The bottom corners square on open; without this they round again while
+     the panel is still sliding away. */
+  transition: border-radius var(--_expand-duration) ease;
 }
 
 .content {
@@ -71282,7 +71387,7 @@ var accordion_item_default = i$7`* {
   height: var(--menu-navigation-components-navigation-item-icon-size);
   flex-shrink: 0;
   position: relative;
-  transition: transform 0.2s ease;
+  transition: transform var(--_expand-duration) ease;
 }
 
 .divider {
@@ -71299,19 +71404,29 @@ var accordion_item_default = i$7`* {
   transform: rotate(-180deg);
 }
 
-.content-container {
-  display: flex;
-  flex-direction: column;
+.panel {
+  display: grid;
+  /* 0fr to 1fr is the only track that eases to content height in every engine. */
+  grid-template-rows: 0fr;
   width: 100%;
-  flex-shrink: 0;
+  transition: grid-template-rows var(--_expand-duration) ease;
 }
 
-.wrapper.open-true .content-button {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+.wrapper.open-true .panel {
+  grid-template-rows: 1fr;
+}
+
+.panel-inner {
+  /* The grid item cannot carry the frame: its border is left out of the open
+     track and clipped off. It clips here, the frame sits one level down. */
+  min-height: 0;
+  overflow: hidden;
 }
 
-.wrapper.open-true .content-container {
+.content-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   background: var(--container-background-color);
   border: 1px solid var(--flat-enabled-border-color);
   border-top: none;
@@ -71319,6 +71434,11 @@ var accordion_item_default = i$7`* {
   border-bottom-right-radius: var(--ui-components-accordion-item-border-radius);
 }
 
+.wrapper.open-true .content-button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .wrapper.state-disabled .content-button {
   cursor: not-allowed;
 }
@@ -71327,6 +71447,14 @@ var accordion_item_default = i$7`* {
 .wrapper.state-disabled .trailing-icon {
   color: var(--element-disabled-color);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .panel,
+  .content-button,
+  .trailing-icon {
+    transition: none;
+  }
+}
 `;
 //#endregion
 //#region src/components/accordion-item/accordion-item.ts
@@ -71346,6 +71474,20 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
 			title: this.title
 		} }));
 	}
+	/**
+	* Keeps the keyboard somewhere predictable when the panel closes.
+	*
+	* A collapsed panel is `inert`, and the browser drops focus out of anything
+	* it makes inert — onto `<body>`, two frames later. Clicking the header
+	* already leaves focus there; a consumer setting `open` while a slotted
+	* control has focus is the case that needs the transfer.
+	*/
+	willUpdate(changed) {
+		if (!changed.has("open") || this.open) return;
+		const panel = this.shadowRoot?.querySelector(".panel");
+		if (!panel) return;
+		releaseFocusBefore(panel, this.shadowRoot?.querySelector(".content-button"), this.shadowRoot?.querySelector(".wrapper"));
+	}
 	renderContent() {
 		return b`
       <div class="content">
@@ -71361,10 +71503,13 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
     `;
 	}
 	renderExpandedContent() {
-		if (!this.open) return "";
 		return b`
-      <div class="content-container">
-        <slot name="expanded-content"></slot>
+      <div class="panel" id="accordion-content" ?inert=${!this.open}>
+        <div class="panel-inner">
+          <div class="content-container">
+            <slot name="expanded-content"></slot>
+          </div>
+        </div>
       </div>
     `;
 	}
@@ -71375,6 +71520,7 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
 	render() {
 		return b`
       <div
+        tabindex="-1"
         class=${e$2({
 			wrapper: true,
 			"state-disabled": this.disabled,
@@ -71387,6 +71533,7 @@ var ObcAccordionItem = class ObcAccordionItem extends i$4 {
           @click=${this.handleToggle}
           ?disabled=${this.disabled}
           aria-expanded=${this.open}
+          aria-controls="accordion-content"
         >
           ${this.renderContent()}
         </button>