@vonage/vivid 5.0.0 → 5.2.0

package/file-picker/index.js

@@ -1,3 +1,391 @@
-import { r as registerFilePicker } from '../shared/definition26.js';
-
-registerFilePicker();
+import { I as b, i as g } from "../bundled/definition2.js";
+import { B as x, b as F } from "../bundled/definition3.js";
+import { V as y, b as w, O as k, a as d, o as v, v as _, h as p, c as E, d as C } from "../bundled/vivid-element.js";
+import { W as $, f as z } from "../bundled/mixins.js";
+import { D, d as P } from "../bundled/delegates-aria.js";
+import { F as T } from "../bundled/form-associated.js";
+import { W as V } from "../bundled/with-contextual-help.js";
+import { W as A } from "../bundled/with-error-text.js";
+import { F as S } from "../bundled/form-element.js";
+import { L as B } from "../bundled/localized.js";
+import { w as H } from "../bundled/when.js";
+import { s as O } from "../bundled/slotted.js";
+import { r as u } from "../bundled/ref.js";
+import { c as f } from "../bundled/class-names.js";
+import { r as I } from "../bundled/repeat.js";
+const L = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
+async function j(a) {
+  return a.items?.[0]?.webkitGetAsEntry != null ? await M(a.items) : Array.from(a.files);
+}
+async function M(a) {
+  const r = [];
+  for (const t of a) {
+    const e = t.getAsFile();
+    if (e)
+      r.push(Promise.resolve([e]));
+    else {
+      const o = t.webkitGetAsEntry();
+      o && r.push(h(o, !1));
+    }
+  }
+  return (await Promise.all(r)).flat();
+}
+const h = (a, r) => {
+  const t = (o) => new Promise((i, n) => {
+    o.file((c) => {
+      r && c.name.substring(0, 1) === "." ? i([]) : i([c]);
+    }, n);
+  }), e = a.isFile ? t(a) : a.isDirectory ? R(a) : Promise.resolve([]);
+  return e.catch(() => null), e;
+}, R = async (a) => new Promise((r, t) => {
+  const e = [], o = a.createReader(), i = () => {
+    o.readEntries((n) => {
+      for (const c of n)
+        e.push(h(c, !0));
+      n.length ? i() : r(Promise.all(e).then((c) => c.flat()));
+    }, t);
+  };
+  i();
+});
+function W(a, r) {
+  if (!r)
+    return !0;
+  const t = r.split(","), e = (i) => /\/\*$/.test(i), o = (i) => i.replace(/\/.*$/, "");
+  for (let i of t)
+    if (i = i.trim(), i.charAt(0) === ".") {
+      if (a.name.toLowerCase().endsWith(i.toLowerCase()))
+        return !0;
+    } else if (e(i)) {
+      if (o(a.type) === o(i))
+        return !0;
+    } else if (a.type === i)
+      return !0;
+  return !1;
+}
+var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, t, e) => {
+  for (var o = e > 1 ? void 0 : e ? G(r, t) : r, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (o = (e ? n(r, t, o) : n(o)) || o);
+  return e && o && N(r, t, o), o;
+};
+class l extends V(
+  $(
+    A(
+      S(D(B(T(y))))
+    )
+  )
+) {
+  constructor() {
+    super(...arguments), this.singleFile = !1, this.maxFileSize = 256, this.valueChanged = (r, t) => {
+      super.valueChanged(r, t), t === "" && this.files.length && this.removeAllFiles();
+    }, this.proxy = document.createElement("input"), this.setFormValue = (r, t) => {
+      typeof r != "string" && super.setFormValue(r, t);
+    }, this._customValidationError = null, this.#e = {
+      handleChange: () => {
+        this._customValidationError = this.#r.observe(
+          this,
+          w
+        );
+      }
+    }, this._dragHover = !1, this._allFiles = [];
+  }
+  /**
+   * @internal
+   */
+  nameChanged(r, t) {
+    super.nameChanged(r, t), this.#t();
+  }
+  #t() {
+    const r = this.files;
+    if (!this.name)
+      this.setFormValue(null);
+    else {
+      const t = new FormData();
+      for (const e of r)
+        t.append(this.name, e);
+      this.setFormValue(t);
+    }
+    this.#i();
+  }
+  #i() {
+    this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
+  }
+  /** @internal */
+  validate() {
+    super.validate(this.control);
+  }
+  /**
+   * @internal
+   */
+  formResetCallback() {
+    this.removeAllFiles(), super.formResetCallback();
+  }
+  #a() {
+    return this.rejectedFiles.length > 0 ? this.locale.filePicker.invalidFilesError : null;
+  }
+  /**
+   * @internal
+   */
+  _customValidationErrorChanged() {
+    this.proxy && this.proxy.setCustomValidity(this._customValidationError ?? ""), this.validate();
+  }
+  #e;
+  #r;
+  #l() {
+    this.#r = k.binding(
+      () => this.#a(),
+      this.#e,
+      !0
+    ), this.#e.handleChange();
+  }
+  #s() {
+    this.#r.disconnect();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.#l();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#s();
+  }
+  /**
+   * @internal
+   */
+  _onDragEnter() {
+    return this._dragHover = !0, !0;
+  }
+  /**
+   * @internal
+   */
+  _onDragOver(r) {
+    if (!r.dataTransfer)
+      return !0;
+    const t = r.dataTransfer.effectAllowed;
+    return r.dataTransfer.dropEffect = t === "move" || t === "linkMove" ? "move" : "copy", !1;
+  }
+  /**
+   * @internal
+   */
+  _onDragLeave(r) {
+    return r.currentTarget === r.target && (this._dragHover = !1), !0;
+  }
+  /**
+   * @internal
+   */
+  _onDrop(r) {
+    return this._dragHover = !1, r.dataTransfer ? (j(r.dataTransfer).then((t) => this.#o(t)).catch((t) => {
+      console.error(t);
+    }), !1) : !0;
+  }
+  /**
+   * @internal
+   */
+  _onDragEnd() {
+    return this._dragHover = !1, !0;
+  }
+  /**
+   * @internal
+   */
+  _onControlClick() {
+    this._hiddenInput.click();
+  }
+  /**
+   * @internal
+   */
+  _onRemoveFileClick(r) {
+    this._allFiles = this._allFiles.filter((t) => t !== r), this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  _allFilesChanged() {
+    this.#t();
+  }
+  #o(r) {
+    this.singleFile ? r.length > 0 && (this._allFiles = [r[r.length - 1]]) : this._allFiles = [...this._allFiles, ...r], this.$emit("change");
+  }
+  /**
+   * Removes all files from the File Picker.
+   */
+  removeAllFiles() {
+    this._allFiles = [];
+  }
+  get _validatedFiles() {
+    const r = (o, i) => this.maxFileSize && o.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
+      "{{filesize}}",
+      this._formatNumber(Math.round(o.size / 1024 / 10.24) / 100)
+    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : W(o, this.accept) ? typeof this.maxFiles == "number" && i >= this.maxFiles ? (this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}", String(this.maxFiles)) : null : this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError, t = [];
+    let e = 0;
+    for (const o of this._allFiles) {
+      const i = {
+        file: o,
+        validationError: r(o, e)
+      };
+      t.push(i), i.validationError || e++;
+    }
+    return t;
+  }
+  /**
+   * Files that have been added to the file picker and passed validation.
+   *
+   * @public
+   */
+  get files() {
+    return this._validatedFiles.filter((r) => !r.validationError).map((r) => r.file);
+  }
+  /**
+   * Files that have been rejected by the file picker for failing validation.
+   *
+   * @public
+   */
+  get rejectedFiles() {
+    return this._validatedFiles.filter((r) => !!r.validationError).map((r) => r.file);
+  }
+  /**
+   * @internal
+   */
+  _onHiddenInputChange(r) {
+    this.#o(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
+  }
+  /**
+   * @internal
+   */
+  _formatNumber(r) {
+    const t = String(r);
+    return this.locale.common.useCommaAsDecimalSeparator ? t.replace(".", ",") : t;
+  }
+}
+s([
+  d({ attribute: "single-file", mode: "boolean" })
+], l.prototype, "singleFile", 2);
+s([
+  d({ attribute: "max-files" })
+], l.prototype, "maxFiles", 2);
+s([
+  d({ mode: "fromView", attribute: "max-file-size" })
+], l.prototype, "maxFileSize", 2);
+s([
+  d
+], l.prototype, "accept", 2);
+s([
+  d
+], l.prototype, "size", 2);
+s([
+  d({ attribute: "invalid-file-type-error" })
+], l.prototype, "invalidFileTypeError", 2);
+s([
+  d({ attribute: "max-files-exceeded-error" })
+], l.prototype, "maxFilesExceededError", 2);
+s([
+  d({ attribute: "file-too-big-error" })
+], l.prototype, "fileTooBigError", 2);
+s([
+  v
+], l.prototype, "_customValidationError", 2);
+s([
+  v
+], l.prototype, "_dragHover", 2);
+s([
+  v
+], l.prototype, "_allFiles", 2);
+s([
+  _
+], l.prototype, "_validatedFiles", 1);
+const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r) => {
+  let t = 0, e = "b";
+  if (r > 0) {
+    const o = ["tb", "gb", "mb", "kb", "b"];
+    for (let i = 0; i < o.length; i++) {
+      const n = o[i], c = Math.pow(m, 4 - i) / 10;
+      if (r >= c) {
+        t = r / Math.pow(m, 4 - i), e = n;
+        break;
+      }
+    }
+    t = Math.round(10 * t) / 10;
+  }
+  return p`<strong>${a._formatNumber(t)}</strong>
+		${Y[e]}`;
+}, K = ({ size: a, _dragHover: r }) => f(
+  "control",
+  [`size-${a}`, !!a],
+  ["drag-hover", r]
+), q = (a) => {
+  const r = a.tagFor(b), t = a.tagFor(x);
+  return p`
+		<div class="base">
+			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
+				${H(
+    (e) => e.label,
+    p`<label class="label">${(e) => e.label}</label>`
+  )}
+				<slot name="contextual-help" ${O("_contextualHelpSlottedContent")}></slot>
+			</div>
+			<div class="control-wrapper">
+				<button
+					type="button"
+					${u("control")}
+					class="${K}"
+					@click="${(e) => e._onControlClick()}"
+					@keydown"${() => !1}"
+					@dragenter="${(e) => e._onDragEnter()}"
+					@dragover="${(e, o) => e._onDragOver(o.event)}"
+					@dragleave="${(e, o) => e._onDragLeave(o.event)}"
+					@drop="${(e, o) => e._onDrop(o.event)}"
+					@dragend="${(e) => e._onDragEnd()}"
+					aria-describedby="${(e) => e._feedbackDescribedBy}"
+					${P()}
+				>
+					<vwc-icon
+						class="upload-icon"
+						name="cloud-upload-line"
+						size="-4"
+						label="${(e) => e.locale.filePicker.uploadFilesLabel}"
+					></vwc-icon>
+					<span class="upload-text"><slot></slot></span>
+				</button>
+				${(e) => e._getFeedbackTemplate(a)}
+			</div>
+			<div class="preview-list">
+				${I(
+    (e) => e._validatedFiles,
+    p`
+				<div class="${(e) => f("preview", ["has-error", !!e.validationError])}">
+					<div class="details">
+						<div class="filename">${(e) => e.file.name}</div>
+						<div class="size">${(e, o) => U(o.parent, e.file.size)}</div>
+					</div>
+					<div class="error-message">
+						<${r} name="info-line" size="-6"></${r}>
+						${(e) => e.validationError}
+					</div>
+					<${t}
+						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
+						aria-label="${(e, o) => o.parent.locale.filePicker.removeFileLabel}"
+						@click="${(e, o) => o.parent._onRemoveFileClick(e.file)}"></${t}>
+				</div>`
+  )}
+			</div>
+		</div>
+		<input
+			${u("_hiddenInput")}
+			class="hidden-input"
+			aria-hidden="true"
+			type="file"
+			?multiple="${(e) => !e.singleFile && (!e.maxFiles || e.maxFiles > 1)}"
+			accept="${(e) => e.accept || null}"
+			tabindex="-1"
+			@change="${(e, o) => e._onHiddenInputChange(o.event)}"
+		/>
+	`;
+}, J = C(
+  "file-picker",
+  l,
+  q,
+  [g, F, z],
+  {
+    styles: L,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), Q = E(J);
+Q();

package/{shared/definition27.cjs → header/definition.cjs}

@@ -1,9 +1,12 @@
 'use strict';
 
-const definition = require('./definition65.cjs');
-const vividElement = require('./vivid-element.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const elevation_definition = require('../unbundled/definition5.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
 
@@ -24,21 +27,21 @@ class Header extends delegatesAria.DelegatesAria(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     attribute: "elevation-shadow",
     mode: "boolean"
   })
 ], Header.prototype, "elevationShadow");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], Header.prototype, "alternate");
 
-const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
+const getPartAlternate = ({ alternate }) => fastWebUtilities.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {
-  const elevationTag = context.tagFor(definition.Elevation);
-  return vividElement.html`
+  const elevationTag = context.tagFor(elevation_definition.Elevation);
+  return fastElement.html`
     <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
       <header class="base" part="base" ${delegatesAria.delegateAria()}>
         <!-- a container is needed to distinguish the surface background color of the
@@ -63,13 +66,13 @@ const headerDefinition = vividElement.defineVividComponent(
   "header",
   Header,
   headerTemplate,
-  [definition.elevationDefinition],
+  [elevation_definition.elevationDefinition],
   {
     styles
   }
 );
 const registerHeader = vividElement.createRegisterFunction(headerDefinition);
 
-exports.Header = Header;
+exports.VwcHeaderElement = Header;
 exports.headerDefinition = headerDefinition;
 exports.registerHeader = registerHeader;

package/{shared/definition27.js → header/definition.js}

@@ -1,7 +1,8 @@
-import { E as Elevation, e as elevationDefinition } from './definition65.js';
-import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, html } from '@microsoft/fast-element';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
 
@@ -68,4 +69,4 @@ const headerDefinition = defineVividComponent(
 );
 const registerHeader = createRegisterFunction(headerDefinition);
 
-export { Header as H, headerDefinition as h, registerHeader as r };
+export { Header as VwcHeaderElement, headerDefinition, registerHeader };

package/header/index.cjs

@@ -1,5 +1,19 @@
-'use strict';
-
-const definition = require('../shared/definition27.cjs');
-
-definition.registerHeader();
+"use strict";const l=require("../bundled/definition4.cjs"),a=require("../bundled/vivid-element.cjs"),c=require("../bundled/delegates-aria.cjs"),v=require("../bundled/class-names.cjs"),p=".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";var h=Object.defineProperty,d=(e,n,o,f)=>{for(var t=void 0,i=e.length-1,r;i>=0;i--)(r=e[i])&&(t=r(n,o,t)||t);return t&&h(n,o,t),t};class s extends c.DelegatesAria(a.VividElement){constructor(){super(...arguments),this.elevationShadow=!1,this.alternate=!1}}d([a.attr({attribute:"elevation-shadow",mode:"boolean"})],s.prototype,"elevationShadow");d([a.attr({mode:"boolean"})],s.prototype,"alternate");const m=({alternate:e})=>v.classNames(["vvd-theme-alternate",!!e]),g=e=>{const n=e.tagFor(l.Elevation);return a.html`
+    <${n} dp="4" ?no-shadow=${o=>!o.elevationShadow}>
+      <header class="base" part="base" ${c.delegateAria()}>
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${m}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${n}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`},u=a.defineVividComponent("header",s,g,[l.elevationDefinition],{styles:p}),b=a.createRegisterFunction(u);b();

package/header/index.js

@@ -1,3 +1,57 @@
-import { r as registerHeader } from '../shared/definition27.js';
-
-registerHeader();
+import { E as c, e as d } from "../bundled/definition4.js";
+import { V as v, a as r, h as p, c as h, d as m } from "../bundled/vivid-element.js";
+import { D as f, d as g } from "../bundled/delegates-aria.js";
+import { c as b } from "../bundled/class-names.js";
+const u = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
+var x = Object.defineProperty, l = (e, t, o, $) => {
+  for (var a = void 0, n = e.length - 1, i; n >= 0; n--)
+    (i = e[n]) && (a = i(t, o, a) || a);
+  return a && x(t, o, a), a;
+};
+class s extends f(v) {
+  constructor() {
+    super(...arguments), this.elevationShadow = !1, this.alternate = !1;
+  }
+}
+l([
+  r({
+    attribute: "elevation-shadow",
+    mode: "boolean"
+  })
+], s.prototype, "elevationShadow");
+l([
+  r({
+    mode: "boolean"
+  })
+], s.prototype, "alternate");
+const y = ({ alternate: e }) => b(["vvd-theme-alternate", !!e]), z = (e) => {
+  const t = e.tagFor(c);
+  return p`
+    <${t} dp="4" ?no-shadow=${(o) => !o.elevationShadow}>
+      <header class="base" part="base" ${g()}>
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${y}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${t}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`;
+}, w = m(
+  "header",
+  s,
+  z,
+  [d],
+  {
+    styles: u
+  }
+), k = h(w);
+k();