@redvars/peacock 3.3.3 → 3.5.0

package/dist/{unsafe-html-C2r3PyzF.js → unsafe-html-BsGUjx94.js}

@@ -1,5 +1,5 @@
-import { A, E } from './IndividualComponent-Dt5xirYG.js';
-import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
+import { A, E } from './IndividualComponent-DUINtMGK.js';
+import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
 
 /**
  * @license
@@ -8,4 +8,4 @@ import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
  */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$1(e);
 
 export { e, o };
-//# sourceMappingURL=unsafe-html-C2r3PyzF.js.map
+//# sourceMappingURL=unsafe-html-BsGUjx94.js.map

package/dist/{unsafe-html-C2r3PyzF.js.map → unsafe-html-BsGUjx94.js.map}

@@ -1 +1 @@
-{"version":3,"file":"unsafe-html-C2r3PyzF.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"unsafe-html-BsGUjx94.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.3.3",
+  "version": "3.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.3/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.3/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.0/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/scss/styles.scss

@@ -3,9 +3,13 @@
 @use '../src/link/link.css-component.scss';
 @use '../src/popover/tooltip.css-component.scss';
 
+
+
+
 .surface, .surface-container-high, .surface-container-highest, .surface-container, .surface-container-low, .surface-container-lowest, .surface-dim {
   color: var(--color-on-surface);
   --icon-color: var(--color-on-surface);
+  transition: background-color .5s cubic-bezier(.2,0,0,1),background-image .5s cubic-bezier(.2,0,0,1), color .5s cubic-bezier(.2,0,0,1);
 }
 
 .surface {

package/src/__base_element/BaseHyperlink.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseHyperlinkInterface {
+  href?: string;
+  target: '_self' | '_parent' | '_blank' | '_top' | string;
+  __isLink(): boolean;
+}
+
+/**
+ * 2. Define the Mixin type separately for readability.
+ */
+type BaseHyperlinkMixinType = <T extends Constructor<LitElement>>(superclass: T) => T & Constructor<BaseHyperlinkInterface>;
+
+/**
+ * 3. Apply the type annotation to the variable.
+ */
+const BaseHyperlink: BaseHyperlinkMixinType = <T extends Constructor<LitElement>>(superclass: T) => {
+  // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
+  // prevents the "__childPart" visibility error.
+  class BaseHyperlinkElement extends superclass implements BaseHyperlinkInterface {
+    @property({ reflect: true }) 
+    href?: string;
+
+    @property() 
+    target: '_self' | '_parent' | '_blank' | '_top' | string = '_self';
+
+    __isLink(): boolean {
+      return !!this.href;
+    }
+  }
+
+  return BaseHyperlinkElement as T & Constructor<BaseHyperlinkInterface>;
+};
+
+export default BaseHyperlink;

package/src/__base_element/README.md

@@ -0,0 +1,19 @@
+# Base Element
+
+The base element is an abstract foundation for component families.
+
+It defines shared component contracts such as:
+
+- Common props (for example state flags and cross-component attributes)
+- Shared methods (for example focus, blur, value helpers, or utility behavior)
+- Reusable behavior (for example event handling, validation flow, and state sync)
+
+The base element does not define component-specific styles.
+
+Child elements extend the base element and are responsible for:
+
+- Implementing their own visual styles
+- Providing component-specific rendering
+- Extending or overriding shared behavior when needed
+
+In short, the base element centralizes behavior and API shape, while child elements implement presentation and specialized logic.

package/src/__utils/cache-fetch.ts

@@ -0,0 +1,65 @@
+export async function createCacheFetch(name: string) {
+  let cache: Cache | null = null;
+  // This map tracks requests currently being processed
+  const inFlightRequests = new Map<string, Promise<string>>();
+
+  try {
+    cache = await window.caches.open(name);
+  } catch (e) {
+    console.warn('window.caches access not allowed');
+  }
+
+  return async (url: string): Promise<string> => {
+    if (inFlightRequests.has(url)) {
+      return inFlightRequests.get(url)!;
+    }
+
+    const fetchPromise = (async () => {
+      const request = new Request(url);
+
+      if (cache) {
+        const cachedResponse = await cache.match(request);
+        if (cachedResponse) {
+          return cachedResponse.text();
+        }
+      }
+
+      const urlObj = new URL(request.url);
+      const isSameOrigin = urlObj.origin === window.location.origin;
+
+      const response = await fetch(request.url, {
+        method: 'GET',
+        mode: isSameOrigin ? 'no-cors' : 'cors',
+        credentials: isSameOrigin ? 'same-origin' : 'omit',
+      });
+
+      if (response.status === 404) {
+        console.error(`[Fetch Error] Resource not found (404): ${url}`);
+        return '';
+      }
+
+      const result = await response.text();
+
+      if (cache && response.status === 200) {
+        await cache.put(
+          request,
+          new Response(result, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: response.headers,
+          }),
+        );
+      }
+
+      return result;
+    })();
+
+    inFlightRequests.set(url, fetchPromise);
+
+    try {
+      return await fetchPromise;
+    } finally {
+      inFlightRequests.delete(url);
+    }
+  };
+}

package/src/{utils → __utils}/dispatch-event-utils.ts

@@ -84,6 +84,7 @@ export function isActivationClick(event: Event) {
   if (event.composedPath()[0] !== event.target) {
     return false;
   }
+ 
   // Target must not be disabled; this should only occur for a synthetically
   // dispatched click.
   if ((event.target as EventTarget & { disabled: boolean }).disabled) {

package/src/__utils/is-dark-mode.ts

@@ -0,0 +1,3 @@
+export function isDarkMode() {
+  return document.documentElement.dataset.theme === 'dark';
+}

package/src/__utils/is-in-viewport.ts

@@ -0,0 +1,6 @@
+export function isInViewport(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top !== 0 || rect.left !== 0 || rect.bottom !== 0 || rect.right !== 0
+  );
+}

package/src/__utils/observe-slot-change.ts

@@ -0,0 +1,38 @@
+function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {
+  const nodes = slotElement?.assignedNodes({ flatten: true }) || [];
+
+  for (const node of nodes) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    if (
+      node.nodeType === Node.TEXT_NODE &&
+      (node.textContent?.trim().length || 0) > 0
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function observerSlotChangesWithCallback(
+  slot: HTMLSlotElement | null,
+  callback: (hasContent: boolean) => void,
+) {
+  const observer = new MutationObserver(() => {
+    callback(hasMeaningfulContent(slot));
+  });
+
+  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+  assignedNodes.forEach(node => {
+    observer.observe(node, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  });
+
+  callback(hasMeaningfulContent(slot));
+}

package/src/__utils/sanitize-svg.ts

@@ -0,0 +1,27 @@
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+export function sanitizeSvg(rawSvg: string) {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+
+    const scripts = Array.from(doc.querySelectorAll('script'));
+    scripts.forEach(n => n.remove());
+
+    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+    foreigns.forEach(n => n.remove());
+
+    const all = Array.from(doc.querySelectorAll('*'));
+    all.forEach(el => {
+      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+      attrs.forEach(a => el.removeAttribute(a.name));
+    });
+
+    const el = doc.documentElement;
+    if (!el) return '';
+
+    const serializer = new XMLSerializer();
+    return serializer.serializeToString(el);
+  } catch (e) {
+    return '';
+  }
+}

package/src/__utils/throttle.ts

@@ -0,0 +1,27 @@
+export function throttle(
+  func: Function,
+  delay: number,
+  options = { leading: true, trailing: true },
+) {
+  let timerId: any;
+  let lastExec = 0;
+
+  return function (...args: any[]) {
+    // @ts-ignore
+    const context = this;
+    const now = Date.now();
+
+    const shouldCallNow = options.leading && now - lastExec >= delay;
+
+    if (shouldCallNow) {
+      func.apply(context, args);
+      lastExec = now;
+    } else if (options.trailing && !timerId) {
+      timerId = setTimeout(() => {
+        func.apply(context, args);
+        lastExec = Date.now();
+        timerId = null;
+      }, delay);
+    }
+  };
+}

package/src/accordion/accordion-item.scss

@@ -1,111 +1,182 @@
 @use '../../scss/mixin';
 
-
 @include mixin.base-styles;
 
+// ─── Host ────────────────────────────────────────────────────────────────────
+
 :host {
   display: block;
-
-  --accordion-item-title-align: start;
 }
 
-.accordion-item {
+// ─── Expansion Panel ─────────────────────────────────────────────────────────
 
-  .accordion-heading {
-    cursor: pointer;
-    width: 100%;
-    border-radius: 0;
-    border: 0;
-    padding: 0 var(--spacing-200);
-    background: var(--accordion-item-heading-background, transparent);
+.expansion-panel {
+  border: var(--_accordion-item-border, 1px solid var(--color-outline-variant));
+  border-radius: var(--shape-corner-medium); // 12dp — M3 medium shape
+  background-color: var(--_accordion-item-background, var(--color-surface-container-low));
+  overflow: hidden; // clip children to border-radius
+  transition:
+    background-color var(--duration-medium1) var(--easing-standard),
+    border-color var(--duration-medium1) var(--easing-standard);
+
+  // ─── Header Button ─────────────────────────────────────────────────────────
 
+  .header-button {
+    position: relative;
     display: flex;
-    flex-direction: row-reverse;
     align-items: center;
+    width: 100%;
+    min-height: 3rem; // 48dp — grows with description
+    padding: 0 var(--spacing-300); // 0 24dp
+    gap: var(--spacing-200); // 16dp between label and icon
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    cursor: pointer;
+    text-align: start;
     color: var(--color-on-surface);
-    justify-content: flex-start;
-    gap: 0.5rem;
-    @include mixin.get-typography(title-medium);
+    overflow: hidden;
+
+    // M3 state layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--color-on-surface);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--duration-short4) var(--easing-standard);
+    }
 
-    .accordion-title {
-      width: 100%;
-      text-align: var(--accordion-item-title-align);
+    &:not(:disabled):hover::before {
+      opacity: 0.08;
     }
 
     &:focus-visible {
+      outline: none;
       @include mixin.focus-ring();
     }
 
-    .accordion-icon {
-      --icon-size: 1.5rem;
-      --icon-color: currentColor;
-      transition: transform var(--duration-short2) var(--easing-standard);
+    &:focus-visible::before {
+      opacity: 0.12;
     }
+  }
+
+  // ─── Header Label (title + description column) ──────────────────────────────
 
+  .header-label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    padding: var(--spacing-150) 0; // 12dp vertical padding
+    min-width: 0;
   }
 
-  .item-section {
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-    text-align: start;
-    transition: all var(--duration-short2) var(--easing-standard);
+  .panel-title {
+    @include mixin.get-typography(body-large);
+    color: var(--color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  &:not(.disabled) .accordion-heading:hover {
-    --accordion-item-heading-background: var(--color-inverse-primary);
+  .panel-description {
+    @include mixin.get-typography(body-small);
+    color: var(--color-on-surface-variant);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &[hidden] {
+      display: none;
+    }
   }
 
-  &.disabled .accordion-heading {
-    cursor: not-allowed;
-    opacity: 0.38;
+  // ─── Header Actions slot ────────────────────────────────────────────────────
+
+  ::slotted([slot='header-actions']) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--spacing-100);
   }
 
-  &.open {
-    .item-section {
-      height: 100%;
-      pointer-events: auto;
-      opacity: 1;
-      padding: var(--spacing-100) var(--spacing-800) var(--spacing-300) var(--spacing-200);
-    }
+  // ─── Toggle Icon ────────────────────────────────────────────────────────────
 
-    .accordion-icon {
-      transform: rotate(180deg);
-    }
+  .toggle-icon {
+    --icon-size: 1.5rem;
+    --icon-color: var(--color-on-surface-variant);
+    flex-shrink: 0;
+    transition: transform var(--duration-medium1) var(--easing-standard);
   }
 
-}
+  // ─── Expandable Content ─────────────────────────────────────────────────────
 
-/*
- * Sizes
- */
-.accordion-item {
-  .accordion-heading {
-    height: 2.5rem;
+  .panel-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+  }
+
+  .content-inner {
+    overflow: hidden;
+    min-height: 0;
+    @include mixin.get-typography(body-medium);
+    color: var(--color-on-surface-variant);
   }
-}
 
-:host-context([size="sm"]) {
-  .accordion-item {
-    .accordion-heading {
-      height: 2rem;
+  // ─── Disabled State ─────────────────────────────────────────────────────────
+
+  &.disabled {
+    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+
+    .header-button {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.38;
     }
   }
-}
 
-:host-context([size="lg"]) {
-  .accordion-item {
-    .accordion-heading {
-      height: 3rem;
+  // ─── Expanded / Open State (must come after disabled so .open wins) ─────────
+
+  &.open {
+    background-color: var(--color-surface-container);
+    border-color: transparent; // border fades out when expanded, matching M3
+
+    .panel-content {
+      grid-template-rows: 1fr;
+      border-block-start: 1px solid var(--color-outline-variant); // header–content divider
     }
+
+    .content-inner {
+      padding: 0 var(--spacing-300) var(--spacing-200); // 0 24dp 16dp
+    }
+
+    .toggle-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ─── Disabled State (border + bg dimmed) ────────────────────────────────────
+
+  &.disabled {
+    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
   }
 }
 
+// ─── Toggle position: before ─────────────────────────────────────────────────
 
-:host-context(p-accordion[align="start"]) {
-  .accordion-item {
-    .accordion-heading {
-      flex-direction: row;
-    }
+:host([toggle-position='before']) {
+  .header-button {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  .header-label {
+    flex: 1;
   }
 }