@getflip/swirl-components 0.11.0 → 0.13.0

package/dist/components/swirl-card.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlCardCss = ":host{display:block}:host *{box-sizing:border-box}.card{display:block;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}.card--elevated{border-color:transparent;box-shadow:0 0.0625rem 0.25rem rgba(25, 26, 28, 0.16),\n    0 0.25rem 1rem rgba(25, 26, 28, 0.04)}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}";
+
+const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.as = "div";
+  }
+  render() {
+    const Tag = Boolean(this.href) ? "a" : this.as;
+    const className = classnames("card", {
+      "card--elevated": this.elevated,
+      "card--interactive": this.interactive || this.href,
+    });
+    return (h(Host, null, h(Tag, { class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        ? "noreferrer"
+        : undefined, target: this.linkTarget }, h("slot", null))));
+  }
+  static get style() { return swirlCardCss; }
+}, [1, "swirl-card", {
+    "as": [1],
+    "elevated": [4],
+    "interactive": [4],
+    "href": [1],
+    "linkTarget": [1, "link-target"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCard$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCard = SwirlCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCard, defineCustomElement };

package/dist/components/swirl-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlCheckbox extends Components.SwirlCheckbox, HTMLElement {}
+export const SwirlCheckbox: {
+  prototype: SwirlCheckbox;
+  new (): SwirlCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-checkbox.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlCheckboxCss = ".sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);align-items:flex-start;flex-direction:column}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.disabled = false;
+    this.onChange = () => {
+      this.checked =
+        this.checked === true || this.checked === "true" ? false : true;
+      this.valueChange.emit(this.checked);
+    };
+  }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const indeterminate = this.checked === "indeterminate";
+    const showLabelContainer = Boolean(this.label) || Boolean(this.description);
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("checkbox", {
+      "checkbox--checked": checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--indeterminate": indeterminate,
+      "checkbox--invalid": this.invalid,
+      "checkbox--unchecked": unchecked,
+    });
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description)))))));
+  }
+  static get style() { return swirlCheckboxCss; }
+}, [2, "swirl-checkbox", {
+    "checked": [1032],
+    "description": [1],
+    "disabled": [4],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "swirlAriaLabel": [1, "swirl-aria-label"],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "invalid": [4],
+    "label": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-checkbox", "swirl-icon-check-strong", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCheckbox$1);
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCheckbox = SwirlCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCheckbox, defineCustomElement };

package/dist/components/swirl-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlChip extends Components.SwirlChip, HTMLElement {}
+export const SwirlChip: {
+  prototype: SwirlChip;
+  new (): SwirlChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-chip.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+
+const swirlChipCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}";
+
+const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.intent = "default";
+    this.interactive = false;
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+  }
+  componentDidLoad() {
+    var _a, _b;
+    this.forceAvatarProps();
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceAvatarProps() {
+    if (!Boolean(this.avatarEl)) {
+      return;
+    }
+    const avatar = this.avatarEl.querySelector("swirl-avatar");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("badge");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("interactive");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("show-label");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("variant");
+    avatar === null || avatar === void 0 ? void 0 : avatar.setAttribute("size", "xs");
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  render() {
+    const Tag = this.interactive ? "button" : "span";
+    const showAvatar = Boolean(this.avatar);
+    const showIcon = !showAvatar && Boolean(this.icon);
+    const className = classnames("chip", `chip--intent-${this.intent}`, {
+      "chip--interactive": this.interactive,
+    });
+    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, showAvatar && (h("span", { class: "chip__avatar", innerHTML: this.avatar, ref: (el) => (this.avatarEl = el) })), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label))));
+  }
+  static get style() { return swirlChipCss; }
+}, [1, "swirl-chip", {
+    "avatar": [1],
+    "icon": [1],
+    "intent": [1],
+    "interactive": [4],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-chip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlChip$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlChip = SwirlChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlChip, defineCustomElement };

package/dist/components/swirl-console-layout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlConsoleLayout extends Components.SwirlConsoleLayout, HTMLElement {}
+export const SwirlConsoleLayout: {
+  prototype: SwirlConsoleLayout;
+  new (): SwirlConsoleLayout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-console-layout.js

@@ -0,0 +1,173 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$4 } from './swirl-button2.js';
+import { d as defineCustomElement$3 } from './swirl-heading2.js';
+import { d as defineCustomElement$2 } from './swirl-text2.js';
+
+const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{box-shadow:0 0 1rem rgba(0, 0, 0, 0.06);transform:translate3d(0, 0, 0)}}.console-layout__sidebar{position:fixed;z-index:1;top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;z-index:1;top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__content-header{flex-shrink:0}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:2.5rem;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__subheading{margin-top:var(--s-space-8)}";
+
+const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.backButtonClick = createEvent(this, "backButtonClick", 7);
+    this.helpButtonClick = createEvent(this, "helpButtonClick", 7);
+    this.backButonLabel = "Back";
+    this.helpButonLabel = "Help";
+    this.hideNavigationButtonLabel = "Hide main navigation";
+    this.logoText = "Admin";
+    this.showNavigationButtonLabel = "Show main navigation";
+    this.navigationLabel = "Main";
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onHelpButtonClick = (event) => {
+      this.helpButtonClick.emit(event);
+    };
+    this.onMobileNavigationToggleClick = () => {
+      this.toggleSidebar();
+    };
+    this.onClick = (event) => {
+      var _a;
+      const target = event.target;
+      const clickOnToggle = Boolean(target.closest(".console-layout__mobile-navigation-button"));
+      const clickOnOverlay = ((_a = target.closest("[slot]")) === null || _a === void 0 ? void 0 : _a.slot) === "overlays";
+      const clickInsideSidebar = event.composedPath().includes(this.sidebarEl);
+      if (!clickInsideSidebar &&
+        !clickOnToggle &&
+        !clickOnOverlay &&
+        this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape" && this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      if (!isMobileViewport()) {
+        this.activateSidebar();
+      }
+      else {
+        this.deactivateSidebar();
+      }
+    });
+  }
+  onWindowResize() {
+    const mobileViewport = isMobileViewport();
+    if (!mobileViewport && !this.sidebarActive) {
+      this.activateSidebar();
+    }
+    else if (mobileViewport) {
+      this.deactivateSidebar();
+    }
+  }
+  /**
+   * Toggle the mobile navigation visibility.
+   */
+  async toggleSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+    else {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Show the mobile navigation.
+   */
+  async showSidebar() {
+    if (!this.sidebarActive) {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Hide the mobile navigation.
+   */
+  async hideSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+  }
+  activateSidebar() {
+    var _a;
+    this.sidebarActive = true;
+    this.sidebarEl.removeAttribute("inert");
+    if (isMobileViewport()) {
+      (_a = this.el.querySelector("swirl-tree-navigation-item")) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  deactivateSidebar() {
+    this.sidebarActive = false;
+    if (isMobileViewport()) {
+      this.sidebarEl.setAttribute("inert", "");
+    }
+  }
+  render() {
+    const className = classnames("console-layout", {
+      "console-layout--sidebar-active": this.sidebarActive,
+    });
+    return (h(Host, null, h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, h("header", { class: "console-layout__header" }, h("div", { class: "console-layout__logo" }, h("svg", { class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), h("path", { d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), h("path", { d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, h("slot", { name: "navigation" })), h("div", { class: "console-layout__user" }, h("slot", { name: "user" }))), h("main", { "aria-labelledby": "app-name", class: "console-layout__main" }, h("header", { class: "console-layout__app-bar" }, h("span", { class: "console-layout__mobile-navigation-button" }, h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        ? "<swirl-icon-close></swirl-icon-close>"
+        : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
+        ? this.hideNavigationButtonLabel
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), h("swirl-heading", { as: "h1", class: "console-layout__app-name", headingId: "app-name", level: 4, text: this.appName }), this.showHelpButton && (h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), h("section", { "aria-labelledby": "heading", class: "console-layout__content" }, h("header", { class: "console-layout__content-header" }, this.showBackButton && (h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), h("div", null, h("swirl-heading", { as: "h2", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), h("div", { class: "console-layout__integration" }, h("slot", { name: "content" }))), h("div", { class: "console-layout__overlays" }, h("slot", { name: "overlays" }))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlConsoleLayoutCss; }
+}, [1, "swirl-console-layout", {
+    "appName": [1, "app-name"],
+    "backButonLabel": [1, "back-buton-label"],
+    "heading": [1],
+    "helpButonLabel": [1, "help-buton-label"],
+    "hideNavigationButtonLabel": [1, "hide-navigation-button-label"],
+    "logoText": [1, "logo-text"],
+    "showNavigationButtonLabel": [1, "show-navigation-button-label"],
+    "navigationLabel": [1, "navigation-label"],
+    "showBackButton": [4, "show-back-button"],
+    "showHelpButton": [4, "show-help-button"],
+    "subheading": [1],
+    "sidebarActive": [32],
+    "toggleSidebar": [64],
+    "showSidebar": [64],
+    "hideSidebar": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-console-layout", "swirl-button", "swirl-heading", "swirl-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-console-layout":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlConsoleLayout$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlConsoleLayout = SwirlConsoleLayout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlConsoleLayout, defineCustomElement };

package/dist/components/swirl-date-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlDateInput extends Components.SwirlDateInput, HTMLElement {}
+export const SwirlDateInput: {
+  prototype: SwirlDateInput;
+  new (): SwirlDateInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;