@esri/calcite-components 5.1.0-next.8 → 5.1.0-next.9

package/dist/chunks/useReferenceElement.js

@@ -0,0 +1,505 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { ref } from "lit/directives/ref.js";
+import { keyed } from "lit/directives/keyed.js";
+import { nothing, svg, html } from "lit";
+import { safeClassMap } from "@arcgis/lumina";
+import { x as getShadowRootNode, j as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "./dom.js";
+import { i as isActivationKey } from "./key.js";
+import { t as toAriaBoolean } from "./aria.js";
+import { makeGenericController } from "@arcgis/lumina/controllers";
+const CSS = {
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke"
+};
+const DEFAULTS = {
+  width: 12,
+  height: 6,
+  strokeWidth: 1
+};
+const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
+  const { width, height, strokeWidth } = DEFAULTS;
+  const svgX = width / 2;
+  const isVertical = floatingLayout === "vertical";
+  const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
+  return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
+};
+function haveSameComponents(components, activeComponents) {
+  if (components === activeComponents) {
+    return true;
+  }
+  if (components.length !== activeComponents.length) {
+    return false;
+  }
+  const s1 = new Set(components);
+  const s2 = new Set(activeComponents);
+  if (s1.size !== s2.size) {
+    return false;
+  }
+  for (const item of s1) {
+    if (!s2.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}
+const clickTolerance = 5;
+const HOVER_OPEN_DELAY_MS = 300;
+const HOVER_QUICK_OPEN_DELAY_MS = HOVER_OPEN_DELAY_MS / 3;
+const HOVER_CLOSE_DELAY_MS = HOVER_OPEN_DELAY_MS * 1.5;
+function isDrag({
+  startX,
+  startY,
+  endX,
+  endY
+}) {
+  const distance = Math.hypot(endX - startX, endY - startY);
+  return distance > clickTolerance;
+}
+const referenceElementManager = (options) => {
+  const registeredElements = /* @__PURE__ */ new Map();
+  const registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
+  let activeComponents = null;
+  let clickedComponents = null;
+  let hoverCloseTimeout = null;
+  let hoverOpenTimeout = null;
+  let hoveredComponents = null;
+  let pointerDownPosition = null;
+  let registeredComponentCount = 0;
+  const queryComponents = (composedPath, type) => {
+    const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+    if (!registeredElement) {
+      return void 0;
+    }
+    const components = registeredElements.get(registeredElement);
+    return components?.filter((component) => component.referenceElementType === type);
+  };
+  const toggleComponents = (event, type) => {
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, type);
+    components?.forEach((component) => {
+      if (component && !component.triggerDisabled) {
+        component.open = !component.open;
+      }
+    });
+    Array.from(registeredElements.values()).flat().filter(
+      (component) => !components?.includes(component) && component.autoClose && component.open && !composedPath.includes(component.el)
+    ).forEach((component) => component.open = false);
+  };
+  const clickHandler = (event) => {
+    if (isKeyboardTriggeredClick(event) || event.defaultPrevented || pointerDownPosition && isDrag({
+      endY: event.clientY,
+      endX: event.clientX,
+      startY: pointerDownPosition.y,
+      startX: pointerDownPosition.x
+    })) {
+      return;
+    }
+    pointerDownPosition = null;
+    toggleComponents(event, "click");
+  };
+  const clearHoverOpenTimeout = () => {
+    if (hoverOpenTimeout != null) {
+      window.clearTimeout(hoverOpenTimeout);
+    }
+    hoverOpenTimeout = null;
+  };
+  const clearHoverCloseTimeout = () => {
+    if (hoverCloseTimeout != null) {
+      window.clearTimeout(hoverCloseTimeout);
+    }
+    hoverCloseTimeout = null;
+  };
+  const clearHoverTimeout = () => {
+    clearHoverOpenTimeout();
+    clearHoverCloseTimeout();
+  };
+  const pathHasOpenHoverComponent = (components, composedPath) => {
+    return activeComponents?.some((component) => component?.open && composedPath.includes(component.el)) || components?.some((component) => component?.open && composedPath.includes(component.el));
+  };
+  const toggleHoverComponents = (components, open) => {
+    components?.forEach((component) => component.open = open);
+    activeComponents = open ? components : null;
+  };
+  const closeActiveHoverComponents = () => {
+    toggleHoverComponents(activeComponents, false);
+  };
+  const hoverKeyDownHandler = (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      const openActiveHoverComponents = activeComponents?.filter((component) => component?.open);
+      if (openActiveHoverComponents?.length) {
+        clearHoverTimeout();
+        closeActiveHoverComponents();
+        const composedPath = event.composedPath();
+        if (openActiveHoverComponents.some(
+          (component) => component.referenceEl instanceof Element && composedPath.includes(component.referenceEl) || composedPath.includes(component.el)
+        )) {
+          event.preventDefault();
+        }
+      }
+    }
+  };
+  const hoverClickHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clickedComponents = null;
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    closeActiveHoverComponents();
+    if (!components?.length) {
+      return;
+    }
+    clearHoverTimeout();
+    const closeOnClickHoverComponents = components.filter((component) => component.closeOnClick);
+    const nonCloseOnClickHoverComponents = components.filter((component) => !component.closeOnClick);
+    if (closeOnClickHoverComponents?.length) {
+      clickedComponents = closeOnClickHoverComponents;
+      toggleHoverComponents(closeOnClickHoverComponents, false);
+    }
+    toggleHoverComponents(nonCloseOnClickHoverComponents, true);
+  };
+  const pointerDownHandler = (event) => {
+    if (event.defaultPrevented || !isPrimaryPointerButton(event)) {
+      return;
+    }
+    const { clientX, clientY } = event;
+    pointerDownPosition = { x: clientX, y: clientY };
+  };
+  const keyDownHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (event.key === "Escape") {
+      closeAllComponents();
+    } else if (isActivationKey(event.key)) {
+      toggleComponents(event, "click");
+    }
+  };
+  const closeAllComponents = () => {
+    Array.from(registeredElements.values()).flat().forEach((component) => component.open = false);
+  };
+  const closeComponentsIfNotActive = (components) => {
+    if (!haveSameComponents(components ?? [], activeComponents ?? [])) {
+      closeActiveHoverComponents();
+    }
+  };
+  const openHoveredComponents = (components) => {
+    hoverOpenTimeout = window.setTimeout(
+      () => {
+        if (hoverOpenTimeout === null || !haveSameComponents(components ?? [], hoveredComponents ?? [])) {
+          return;
+        }
+        clearHoverCloseTimeout();
+        closeComponentsIfNotActive(components);
+        toggleHoverComponents(components, true);
+      },
+      activeComponents?.some((component) => component.open) ? HOVER_QUICK_OPEN_DELAY_MS : HOVER_OPEN_DELAY_MS
+    );
+  };
+  const closeHoveredComponents = () => {
+    hoverCloseTimeout = window.setTimeout(() => {
+      if (hoverCloseTimeout === null) {
+        return;
+      }
+      closeActiveHoverComponents();
+    }, HOVER_CLOSE_DELAY_MS);
+  };
+  const pointerMoveHandler = (event) => {
+    if (event.defaultPrevented) {
+      closeActiveHoverComponents();
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    if (!components?.some((component) => hoveredComponents?.includes(component))) {
+      clearHoverOpenTimeout();
+    }
+    hoveredComponents = components;
+    if (components?.length) {
+      openHoveredComponents(components);
+    } else if (activeComponents?.some((component) => component?.open)) {
+      closeHoveredComponents();
+    }
+    clickedComponents = null;
+  };
+  const blurHandler = () => {
+    closeActiveHoverComponents();
+  };
+  const pointerLeaveHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    clearHoverTimeout();
+    closeHoveredComponents();
+  };
+  const addListeners = () => {
+    if (options.click) {
+      window.addEventListener("click", clickHandler);
+      window.addEventListener("keydown", keyDownHandler);
+      window.addEventListener("pointerdown", pointerDownHandler);
+    }
+    if (options.hover) {
+      window.addEventListener("click", hoverClickHandler);
+      window.addEventListener("keydown", hoverKeyDownHandler);
+      window.addEventListener("pointermove", pointerMoveHandler);
+      window.addEventListener("focusin", focusInHandler);
+      window.addEventListener("blur", blurHandler);
+      document.addEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const removeListeners = () => {
+    if (options.click) {
+      window.removeEventListener("pointerdown", pointerDownHandler);
+      window.removeEventListener("click", clickHandler);
+      window.removeEventListener("keydown", keyDownHandler);
+    }
+    if (options.hover) {
+      window.removeEventListener("click", hoverClickHandler);
+      window.removeEventListener("keydown", hoverKeyDownHandler);
+      window.removeEventListener("pointermove", pointerMoveHandler);
+      window.removeEventListener("focusin", focusInHandler);
+      window.removeEventListener("blur", blurHandler);
+      document.removeEventListener("pointerleave", pointerLeaveHandler);
+    }
+  };
+  const toggleFocusedComponents = (components, open) => {
+    {
+      clearHoverTimeout();
+    }
+    toggleHoverComponents(components, open);
+  };
+  const getReferenceElShadowRootNode = (referenceEl) => {
+    return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
+  };
+  const focusInHandler = (event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const composedPath = event.composedPath();
+    const components = queryComponents(composedPath, "hover");
+    if (pathHasOpenHoverComponent(components, composedPath)) {
+      clearHoverTimeout();
+      return;
+    }
+    if (components?.some((component) => clickedComponents?.includes(component))) {
+      return;
+    }
+    clickedComponents = null;
+    closeComponentsIfNotActive(components);
+    if (!components?.length) {
+      return;
+    }
+    toggleFocusedComponents(components, true);
+  };
+  const updateElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const existingComponents = registeredElements.get(referenceEl) ?? [];
+      const existingComponentOpen = existingComponents?.some((component2) => component2.open) ?? false;
+      referenceEl.ariaExpanded = toAriaBoolean(component.open || existingComponentOpen);
+    }
+  };
+  const addShadowListeners = (shadowRoot) => {
+    shadowRoot.addEventListener("focusin", focusInHandler);
+  };
+  const removeShadowListeners = (shadowRoot) => {
+    shadowRoot.removeEventListener("focusin", focusInHandler);
+  };
+  const registerShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const newCount = (typeof count === "number" ? count : 0) + 1;
+    if (newCount === 1) {
+      addShadowListeners(shadowRoot);
+    }
+    registeredShadowRootCounts.set(shadowRoot, newCount);
+  };
+  const unregisterShadowRoot = (shadowRoot) => {
+    const count = registeredShadowRootCounts.get(shadowRoot);
+    const currentCount = typeof count === "number" ? count : 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (currentCount > 0 && newCount === 0) {
+      removeShadowListeners(shadowRoot);
+      registeredShadowRootCounts.delete(shadowRoot);
+      return;
+    }
+    if (newCount > 0) {
+      registeredShadowRootCounts.set(shadowRoot, newCount);
+    }
+  };
+  const registerElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    if (existingComponents.includes(component)) {
+      return;
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const currentElements = referenceEl.ariaControlsElements ?? [];
+      if (!currentElements.includes(component)) {
+        const updatedElements = [...currentElements, component];
+        referenceEl.ariaControlsElements = updatedElements;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const currentElements = referenceEl.ariaDescribedByElements ?? [];
+      if (!currentElements.includes(component)) {
+        const updatedElements = [...currentElements, component];
+        referenceEl.ariaDescribedByElements = updatedElements;
+      }
+    }
+    registeredComponentCount++;
+    registeredElements.set(referenceEl, [...existingComponents, component]);
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    if (shadowRoot) {
+      registerShadowRoot(shadowRoot);
+    }
+    if (registeredComponentCount === 1) {
+      addListeners();
+    }
+    updateElement(component, referenceEl);
+  };
+  const decrementRegisteredElementCount = (shadowRoot) => {
+    registeredComponentCount--;
+    if (shadowRoot) {
+      unregisterShadowRoot(shadowRoot);
+    }
+  };
+  const unregisterElement = (component, referenceEl) => {
+    if (!referenceEl || !component.referenceElementType) {
+      return;
+    }
+    const shadowRoot = options.hover ? getReferenceElShadowRootNode(referenceEl) : null;
+    const existingComponents = registeredElements.get(referenceEl) ?? [];
+    const updatedComponents = existingComponents.filter((p) => p !== component);
+    if (updatedComponents.length > 0) {
+      registeredElements.set(referenceEl, updatedComponents);
+      if (updatedComponents.length !== existingComponents.length) {
+        decrementRegisteredElementCount(shadowRoot);
+      }
+    } else if (registeredElements.delete(referenceEl)) {
+      decrementRegisteredElementCount(shadowRoot);
+    }
+    if (registeredComponentCount === 0) {
+      removeListeners();
+      clearHoverTimeout();
+    }
+    if (options.click && "ariaControlsElements" in referenceEl) {
+      const newElements = referenceEl.ariaControlsElements?.filter((element) => element !== component);
+      referenceEl.ariaControlsElements = newElements?.length > 0 ? newElements : null;
+    }
+    if (options.click && "ariaExpanded" in referenceEl) {
+      const hasRegisteredComponents = (updatedComponents?.length ?? 0) > 0;
+      if (hasRegisteredComponents) {
+        const existingComponentOpen = updatedComponents?.some((component2) => component2.open) ?? false;
+        referenceEl.ariaExpanded = toAriaBoolean(existingComponentOpen);
+      } else {
+        referenceEl.ariaExpanded = null;
+      }
+    }
+    if (options.hover && "ariaDescribedByElements" in referenceEl) {
+      const newElements = referenceEl.ariaDescribedByElements?.filter((element) => element !== component);
+      referenceEl.ariaDescribedByElements = newElements?.length > 0 ? newElements : null;
+    }
+  };
+  return {
+    registerElement,
+    unregisterElement,
+    updateElement
+  };
+};
+const useReferenceElement = (options) => {
+  const { manager } = options;
+  return makeGenericController((component, controller) => {
+    let animationFrameId = null;
+    let lastRegisteredReferenceEl = null;
+    const canManageReferenceElement = (referenceEl) => {
+      return Boolean(referenceEl && component.referenceElementType);
+    };
+    const registerReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.registerElement(component, referenceEl);
+      lastRegisteredReferenceEl = referenceEl;
+    };
+    const unregisterReferenceElement = (referenceEl) => {
+      if (!canManageReferenceElement(referenceEl)) {
+        return;
+      }
+      manager.unregisterElement(component, referenceEl);
+      if (lastRegisteredReferenceEl === referenceEl) {
+        lastRegisteredReferenceEl = null;
+      }
+    };
+    const getReferenceElement = (component2) => {
+      const { referenceElement, el } = component2;
+      return (typeof referenceElement === "string" ? queryElementRoots(el, { id: referenceElement }) : referenceElement) || null;
+    };
+    const setUpReferenceElement = (warn = true) => {
+      if (!component.referenceElementType) {
+        return;
+      }
+      component.referenceEl = getReferenceElement(component);
+      const { el, referenceElement, referenceEl } = component;
+      if (warn && referenceElement && !referenceEl) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+    };
+    controller.onConnected(() => {
+      animationFrameId = requestAnimationFrame(() => {
+        if (!component.el.isConnected) {
+          return;
+        }
+        setUpReferenceElement(component.manager.loadedCalled);
+        registerReferenceElement(component.referenceEl);
+      });
+    });
+    controller.onLoaded(() => {
+      if (component.referenceElement && !component.referenceEl) {
+        setUpReferenceElement();
+      }
+    });
+    controller.onUpdate((changes) => {
+      if (!component.hasUpdated) {
+        return;
+      }
+      if (changes.has("referenceElement")) {
+        setUpReferenceElement();
+      }
+      if (changes.has("referenceEl")) {
+        unregisterReferenceElement(changes.get("referenceEl"));
+        registerReferenceElement(component.referenceEl);
+      } else if (changes.has("open")) {
+        manager.updateElement(component, component.referenceEl);
+      }
+    });
+    controller.onDisconnected(() => {
+      if (animationFrameId != null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      unregisterReferenceElement(lastRegisteredReferenceEl);
+    });
+  });
+};
+export {
+  FloatingArrow as F,
+  referenceElementManager as r,
+  useReferenceElement as u
+};

package/dist/components/calcite-block/customElement.js

@@ -55,7 +55,7 @@ const ICONS = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start,.icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline)}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .header{gap:var(--calcite-spacing-sm)}:host([scale=s]) .icon-end-container{gap:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm)}:host([scale=s]) .description{font-size:var(--calcite-font-size-xs)}:host([scale=s]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-sm);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-xxs)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) )}:host([scale=m]) .header{gap:var(--calcite-spacing-md)}:host([scale=m]) .icon-end-container{gap:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size)}:host([scale=m]) .description{font-size:var(--calcite-font-size-sm)}:host([scale=m]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xxs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-md);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-sm)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) )}:host([scale=l]) .header{gap:var(--calcite-spacing-lg)}:host([scale=l]) .icon-end-container{gap:var(--calcite-spacing-lg);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md)}:host([scale=l]) .description{font-size:var(--calcite-font-size)}:host([scale=l]){--calcite-internal-block-actions-spacing: var(--calcite-spacing-xs);--calcite-internal-block-header-content-padding: var(--calcite-spacing-lg);--calcite-internal-block-padding-block: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-md)) );--calcite-internal-block-padding-inline: var( --calcite-block-content-space, var(--calcite-block-padding, var(--calcite-spacing-lg)) )}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{justify-content:flex-start}.header--has-content{padding:var(--calcite-internal-block-header-content-padding)}.header--draggable{padding-inline-start:var(--calcite-spacing-xxs)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto auto auto;grid-template-areas:"handle header icon-end menu actions-end"}.icon--start,.icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.actions-end{align-items:center;display:flex;gap:var(--calcite-internal-block-actions-spacing);grid-area:actions-end;padding-block:var(--calcite-internal-block-actions-spacing);padding-inline-end:var(--calcite-internal-block-actions-spacing)}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;outline-color:transparent;font-family:inherit;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{align-self:center}calcite-sort-handle{align-self:center;grid-area:handle;margin-block:var(--calcite-internal-block-actions-spacing);padding-inline-start:var(--calcite-spacing-xxs)}.title{display:flex;flex-direction:column}.header .title .heading{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug)}.description{padding:0;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3));font-weight:var(--calcite-font-weight-regular);line-height:var(--calcite-font-line-height-relative-snug)}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;grid-area:icon-end}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%;opacity:0;padding-block:var(--calcite-internal-block-padding-block);padding-inline:var(--calcite-internal-block-padding-inline);transition:opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.content-end,.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}calcite-action-menu{align-self:center;grid-area:menu;margin-inline-end:var(--calcite-internal-block-actions-spacing)}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color, var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1)));font-weight:var(--calcite-font-weight-medium)}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}:host([expanded]) .content{opacity:1}:host([expanded][scale=s]){margin-block:var(--calcite-spacing-xxs)}:host([expanded][scale=l]){margin-block:var(--calcite-spacing-md)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Block extends LitElement {
   constructor() {
     super(...arguments);