From 4a1702120ceaa30de2d5bc354b72043b65778500 Mon Sep 17 00:00:00 2001
From: Doug Gibson <email@dgibson.net>
Date: Mon, 15 Jul 2024 17:00:04 -0400
Subject: [PATCH 1/3] Add `base` tag to Storybook preview to fix the universal
 header story assets

---
 packages/web-components/.storybook/preview-head.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html
index dcf09c3e..7d49b317 100644
--- a/packages/web-components/.storybook/preview-head.html
+++ b/packages/web-components/.storybook/preview-head.html
@@ -1,3 +1,4 @@
+<base href="./" target="_self" />
 
 <link rel="stylesheet"  type="text/css" href="assets/css/storybook-canvas.css">
 

From 1b315e747514a3a1391dce5665a296eae99cd00b Mon Sep 17 00:00:00 2001
From: Doug Gibson <email@dgibson.net>
Date: Mon, 15 Jul 2024 17:01:14 -0400
Subject: [PATCH 2/3] Update universal header story to use "HASHIDX"

---
 .../cbp-universal-header.stories.tsx                     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx b/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
index c28d8c0b..18f91be8 100644
--- a/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
+++ b/packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx
@@ -17,6 +17,7 @@ export default {
   },
 };
 
+
 const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn }) => {
   return `
       <cbp-universal-header
@@ -47,7 +48,11 @@ const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn })
         </cbp-button>
       </li>
       <li>
-        <cbp-button color="secondary" fill="ghost" context="dark-always">
+        <cbp-button
+          color="secondary"
+          fill="ghost"
+          context="dark-always"
+        >
           <cbp-icon name="user"></cbp-icon>
           <cbp-hide
             visually-hide-at="max-width: 64em"
@@ -72,7 +77,7 @@ const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn })
 
 export const UniversalHeader = UniversalHeaderTemplate.bind({});
 UniversalHeader.args = {
-  username: 'John Smithington',
+  username: 'HASHIDX',
   isLoggedIn: true,
 };
 UniversalHeader.argTypes = {

From 3bd81bc4a28e32a98d7f8cac4a3724e503101fc5 Mon Sep 17 00:00:00 2001
From: Doug Gibson <email@dgibson.net>
Date: Mon, 15 Jul 2024 17:01:36 -0400
Subject: [PATCH 3/3] Update the hide component to emit an event when its state
 is toggled.

---
 .../cbp-button/cbp-button.specs.mdx           |  3 +-
 .../src/components/cbp-hide/cbp-hide.tsx      | 41 +++++++++++++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/components/cbp-button/cbp-button.specs.mdx b/packages/web-components/src/components/cbp-button/cbp-button.specs.mdx
index f173e10f..16d149a4 100644
--- a/packages/web-components/src/components/cbp-button/cbp-button.specs.mdx
+++ b/packages/web-components/src/components/cbp-button/cbp-button.specs.mdx
@@ -40,4 +40,5 @@ The Button component represents a UI control visually styled like a button (rega
 
 ### Additional Notes and Considerations
 
-* Links/anchors should only be used for navigation; the `button` element is the preferred control for all other types of UI interactions.
\ No newline at end of file
+* Links/anchors should only be used for navigation; the `button` element is the preferred control for all other types of UI interactions.
+* If you hide a text label at small screen sizes (e.g., via `cbp-hide`) and only show an icon, the intent is for the button to be shown as the "square" variant. This cannot be handled internally to the component and should be implemented by the application.
\ No newline at end of file
diff --git a/packages/web-components/src/components/cbp-hide/cbp-hide.tsx b/packages/web-components/src/components/cbp-hide/cbp-hide.tsx
index 25b0e2cb..25d08352 100644
--- a/packages/web-components/src/components/cbp-hide/cbp-hide.tsx
+++ b/packages/web-components/src/components/cbp-hide/cbp-hide.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Host, h } from '@stencil/core';
+import { Component, Prop, Element, Event, EventEmitter, Host, h } from '@stencil/core';
 import { setCSSProps } from '../../utils/utils';
 
 /**
@@ -9,6 +9,9 @@ import { setCSSProps } from '../../utils/utils';
   styleUrl: 'cbp-hide.scss'
 })
 export class CbpHide {
+  
+  private hidden=false;
+
   @Element() host: HTMLElement;
 
   /** Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element. */
@@ -28,12 +31,44 @@ export class CbpHide {
   @Prop() sx: any = {};
 
 
+  /** A custom event emitted when the accordion item control is activated. */
+  @Event({
+    eventName: 'hideToggle',
+    cancelable: true,
+    bubbles: true,
+  }) hideToggle: EventEmitter;
+
   // Callback functions for the media query event listeners
   doHideAt(mql) {
-    mql.matches ? this.host.style.setProperty('display', 'none') : this.host.style.setProperty('display', this.display);
+    if (mql.matches) {
+      this.host.style.setProperty('display', 'none')
+      this.hidden=true;
+    }
+    else {
+      this.host.style.setProperty('display', this.display);
+      this.hidden=false;
+    }
+
+    this.hideToggle.emit({
+      host: this.host,
+      hidden: this.hidden,
+    });
   }
+
   doVisuallyHideAt(mql) {
-    mql.matches ? this.host.classList.add('cbp-visually-hidden') : this.host.classList.remove('cbp-visually-hidden');
+    if (mql.matches) {
+      this.host.classList.add('cbp-visually-hidden')
+      this.hidden=true;
+    }
+    else {
+      this.host.classList.remove('cbp-visually-hidden');
+      this.hidden=false;
+    }
+
+    this.hideToggle.emit({
+      host: this.host,
+      hidden: this.hidden,
+    });
   }