@vonage/vivid 3.0.0-next.121 → 3.0.0-next.123

package/shared/definition20.js

@@ -1,44 +1,58 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { E as Elevation, e as elevationRegistries } from './definition15.js';
 import { c as classNames } from './class-names.js';
 
-var AUTO_SIZING;
-(function (AUTO_SIZING) {
-  AUTO_SIZING["Fit"] = "fit";
-  AUTO_SIZING["Fill"] = "fill";
-})(AUTO_SIZING || (AUTO_SIZING = {}));
-class Layout extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
-__decorate([attr({
-  attribute: 'column-basis'
-}), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+
+class Header extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.elevationShadow = false;
+    this.alternate = false;
+  }
+}
 __decorate([attr({
-  attribute: 'column-spacing'
-}), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
+  attribute: 'elevation-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
 __decorate([attr({
-  attribute: 'auto-sizing'
-}), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
-
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
 
 let _ = t => t,
   _t;
-const getClasses = ({
-  columnBasis,
-  gutters,
-  columnSpacing,
-  autoSizing
-}) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-const layoutTemplate = () => html(_t || (_t = _`
-        <div class="${0}">
-			<slot></slot>
-		</div>`), getClasses);
+const getPartAlternate = ({
+  alternate
+}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
+const headerTemplate = context => {
+  const elevationTag = context.tagFor(Elevation);
+  return html(_t || (_t = _`
+    <${0} dp="4" ?no-shadow=${0}>
+      <header class="base" part="base">
+        <!-- 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="${0}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${0}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
+};
 
-const layoutDefinition = Layout.compose({
-  baseName: 'layout',
-  template: layoutTemplate,
+const headerDefinition = Header.compose({
+  baseName: 'header',
+  template: headerTemplate,
   styles: css_248z
 });
-const layoutRegistries = [layoutDefinition()];
-const registerLayout = registerFactory(layoutRegistries);
+const headerRegistries = [headerDefinition(), ...elevationRegistries];
+const registerHeader = registerFactory(headerRegistries);
 
-export { layoutRegistries as a, layoutDefinition as l, registerLayout as r };
+export { headerRegistries as a, headerDefinition as h, registerHeader as r };