@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/index.server-e1gjs02r.js

@@ -0,0 +1,147 @@
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/navigation-bar/navigation-bar.svelte
+import * as $ from "svelte/internal/server";
+function Navigation_bar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const regionId = $.props_id($$renderer2);
+    let {
+      class: className,
+      placement = "top",
+      showLabels = "always",
+      brand,
+      items,
+      actions,
+      menuToggle,
+      mobileMenuOpen = false,
+      label = "Main navigation",
+      "aria-label": _ariaLabel,
+      "data-collapsible": _dataCollapsible,
+      "data-cinder-placement": _dataCinderPlacement,
+      "data-cinder-label-visibility": _dataCinderLabelVisibility,
+      onkeydown: consumerOnKeyDown,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const navigationItemSelector = "[data-cinder-navigation-item]";
+    const isCollapsible = $.derived(() => placement === "top" && menuToggle !== undefined);
+    const variant = $.derived(() => placement === "bottom" ? "mobile" : isCollapsible() && mobileMenuOpen ? "mobile" : "horizontal");
+    let toggleElement = null;
+    let itemsRegionElement = null;
+    function handleToggle(event) {
+      mobileMenuOpen = !mobileMenuOpen;
+      toggleElement = event.currentTarget;
+    }
+    function getNavigationItems() {
+      if (!itemsRegionElement)
+        return [];
+      return Array.from(itemsRegionElement.querySelectorAll(navigationItemSelector));
+    }
+    function isEnabledNavigationItem(item) {
+      return item.getAttribute("aria-disabled") !== "true" && !item.hasAttribute("disabled");
+    }
+    function getEventNavigationItem(event) {
+      if (!(event.target instanceof HTMLElement) || !itemsRegionElement)
+        return null;
+      const navigationItem = event.target.closest(navigationItemSelector);
+      if (!navigationItem || !itemsRegionElement.contains(navigationItem))
+        return null;
+      if (navigationItem !== event.target)
+        return null;
+      return navigationItem;
+    }
+    function focusAdjacentNavigationItem(currentItem, direction) {
+      const items2 = getNavigationItems();
+      if (items2.length === 0)
+        return;
+      const currentIndex = items2.indexOf(currentItem);
+      if (currentIndex === -1)
+        return;
+      for (let step = 1;step < items2.length; step++) {
+        const nextIndex = (currentIndex + direction * step + items2.length) % items2.length;
+        const nextItem = items2[nextIndex];
+        if (nextItem && isEnabledNavigationItem(nextItem)) {
+          nextItem.focus();
+          return;
+        }
+      }
+    }
+    function handleKeyDown(event) {
+      if (consumerOnKeyDown) {
+        consumerOnKeyDown(event);
+      }
+      if (event.defaultPrevented)
+        return;
+      if (event.key === "Escape" && isCollapsible() && mobileMenuOpen) {
+        mobileMenuOpen = false;
+        toggleElement?.focus();
+        return;
+      }
+      const navigationItem = getEventNavigationItem(event);
+      if (!navigationItem)
+        return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        focusAdjacentNavigationItem(navigationItem, event.key === "ArrowRight" ? 1 : -1);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+        event.preventDefault();
+        if (isEnabledNavigationItem(navigationItem)) {
+          navigationItem.click();
+        }
+      }
+    }
+    $$renderer2.push(`<nav${$.attributes({
+      ...rest,
+      "aria-label": label,
+      class: $.clsx(classNames("cinder-navigation-bar", className)),
+      "data-collapsible": isCollapsible() ? "true" : "false",
+      "data-cinder-placement": placement,
+      "data-cinder-label-visibility": showLabels
+    })}>`);
+    if (brand) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-navigation-bar__brand">`);
+      brand($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (isCollapsible() && menuToggle) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-navigation-bar__menu-toggle">`);
+      menuToggle($$renderer2, {
+        "aria-expanded": mobileMenuOpen ? "true" : "false",
+        "aria-controls": regionId,
+        onclick: handleToggle
+      });
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div${$.attr("id", regionId)} class="cinder-navigation-bar__items"${$.attr("data-open", mobileMenuOpen ? "true" : "false")}${$.attr("inert", isCollapsible() && !mobileMenuOpen ? true : undefined, true)}>`);
+    items($$renderer2, { variant: variant(), placement, showLabels });
+    $$renderer2.push(`<!----></div> `);
+    if (actions) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-navigation-bar__actions">`);
+      actions($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></nav>`);
+    $.bind_props($$props, { mobileMenuOpen });
+  });
+}
+
+// src/components/navigation-bar/index.ts
+var navigation_bar_default = Navigation_bar;
+export { Navigation_bar, navigation_bar_default };
+
+//# debugId=933008525F228CBE64756E2164756E21

package/dist/server/index.server-e39mgany.js

@@ -0,0 +1,9 @@
+import {
+  Collapsible
+} from "./index.server-5kt7t4y4.js";
+
+// src/components/collapsible/index.ts
+var collapsible_default = Collapsible;
+export { collapsible_default };
+
+//# debugId=69DC62CE49F2964C64756E2164756E21

package/dist/server/index.server-e967et3j.js

@@ -0,0 +1,77 @@
+import {
+  setTableContext
+} from "./index.server-7pdq2w0a.js";
+import {
+  useResizeObserver
+} from "./index.server-9w7qdn8h.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/table/table.svelte
+import * as $ from "svelte/internal/server";
+function Table($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      sort = undefined,
+      caption,
+      stickyHeader = false,
+      density = "comfortable",
+      selectable = false,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let captionHeight = 0;
+    const measureCaption = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry)
+        return;
+      captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+    }, { box: "border-box", enabled: () => stickyHeader });
+    function onsortchange(column) {
+      if (!sort || sort.column !== column) {
+        sort = { column, direction: "ascending" };
+        return;
+      }
+      sort = {
+        column,
+        direction: sort.direction === "ascending" ? "descending" : "ascending"
+      };
+    }
+    setTableContext({
+      get sort() {
+        return sort;
+      },
+      get selectionEnabled() {
+        return selectable;
+      },
+      onsortchange
+    });
+    $$renderer2.push(`<table${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-table", className)),
+      "data-cinder-sticky-header": stickyHeader || undefined,
+      "data-cinder-density": density,
+      "data-cinder-selectable": selectable || undefined
+    }, undefined, undefined, {
+      "--cinder-table-caption-height": caption ? `${captionHeight}px` : undefined
+    })}>`);
+    if (caption) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<caption class="cinder-table__caption">${$.escape(caption)}</caption>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></table>`);
+    $.bind_props($$props, { sort });
+  });
+}
+
+export { Table };
+
+//# debugId=6E30F794E9F2748964756E2164756E21

package/dist/server/index.server-e9g5b01k.js

@@ -0,0 +1,9 @@
+import {
+  Textarea
+} from "./index.server-41003crj.js";
+
+// src/components/textarea/index.ts
+var textarea_default = Textarea;
+export { textarea_default };
+
+//# debugId=17F324A1D98CE63D64756E2164756E21

package/dist/server/index.server-ecv75266.js

@@ -0,0 +1,9 @@
+import {
+  Floating_action_button
+} from "./index.server-q550gsbe.js";
+
+// src/components/floating-action-button/index.ts
+var floating_action_button_default = Floating_action_button;
+export { floating_action_button_default };
+
+//# debugId=F28309362B96AD2164756E2164756E21

package/dist/server/index.server-eeq2c9pm.js

@@ -0,0 +1,78 @@
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/image/image.svelte
+import * as $ from "svelte/internal/server";
+function Image($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      src,
+      alt,
+      width,
+      height,
+      ratio,
+      loading = "lazy",
+      decoding = "async",
+      placeholder,
+      class: className,
+      fallback,
+      onload,
+      onerror,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let loadedSource = null;
+    let erroredSource = null;
+    const loaded = $.derived(() => loadedSource === src);
+    const errored = $.derived(() => erroredSource === src);
+    const showFallback = $.derived(() => errored() && fallback !== undefined);
+    function handleLoad(event) {
+      loadedSource = src;
+      onload?.(event);
+    }
+    function handleError(event) {
+      erroredSource = src;
+      onerror?.(event);
+    }
+    function detectCached(node) {
+      if (node.complete && node.naturalWidth > 0) {
+        loadedSource = src;
+      }
+    }
+    const cssUrl = $.derived(() => placeholder && !loaded() && !errored() ? buildCssUrl(placeholder) : undefined);
+    const fallbackRole = $.derived(() => showFallback() && alt !== "" ? "img" : undefined);
+    const fallbackLabel = $.derived(() => showFallback() && alt !== "" ? alt : undefined);
+    const fallbackHidden = $.derived(() => showFallback() && alt === "" ? true : undefined);
+    function buildCssUrl(value) {
+      const escaped = value.replaceAll("\\", "\\\\").replaceAll('"', "\\\"");
+      return `url("${escaped}")`;
+    }
+    $$renderer2.push(`<div${$.attr_class($.clsx(classNames("cinder-image", className)))}${$.attr("data-cinder-loaded", loaded() ? "" : undefined)}${$.attr("data-cinder-errored", errored() ? "" : undefined)}${$.attr("data-cinder-fallback", showFallback() ? "" : undefined)}${$.attr("role", fallbackRole())}${$.attr("aria-label", fallbackLabel())}${$.attr("aria-hidden", fallbackHidden())}${$.attr_style("", { "aspect-ratio": ratio, "background-image": cssUrl() })}>`);
+    if (showFallback()) {
+      $$renderer2.push("<!--[0-->");
+      fallback?.($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<img${$.attributes({
+        class: "cinder-image__img",
+        src,
+        alt,
+        width,
+        height,
+        loading,
+        decoding,
+        ...rest
+      })} onload="this.__e=event" onerror="this.__e=event"/>`);
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+
+// src/components/image/index.ts
+var image_default = Image;
+export { Image, image_default };
+
+//# debugId=6A1FD02908433FD164756E2164756E21

package/dist/server/index.server-eknv9erd.js

@@ -0,0 +1,169 @@
+import {
+  Speed_dial_action,
+  setSpeedDialContext
+} from "./index.server-gae09raw.js";
+import {
+  Floating_action_button
+} from "./index.server-q550gsbe.js";
+import {
+  handleRovingKeydown
+} from "./index.server-0a8m173j.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/speed-dial/speed-dial.svelte
+import * as $ from "svelte/internal/server";
+function Speed_dial($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const actionsId = $.props_id($$renderer2);
+    const defaultAriaLabel = "Quick actions";
+    let {
+      open = false,
+      direction = "up",
+      hidden = false,
+      "aria-label": ariaLabel = defaultAriaLabel,
+      trigger,
+      children,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let rootElement = null;
+    let triggerWrapperElement = null;
+    const actionButtons = [];
+    const orientation = $.derived(() => direction === "left" || direction === "right" ? "horizontal" : "vertical");
+    const accessibleLabel = $.derived(() => normalizeAriaLabel(ariaLabel));
+    function normalizeAriaLabel(label) {
+      const trimmed = label?.trim() ?? "";
+      return trimmed.length > 0 ? trimmed : defaultAriaLabel;
+    }
+    function getTriggerElement() {
+      return triggerWrapperElement?.querySelector(".cinder-fab") ?? null;
+    }
+    function getEnabledActionButtons() {
+      return actionButtons.filter((button) => !button.disabled);
+    }
+    function getKeyboardNavigationButtons() {
+      const enabledButtons = getEnabledActionButtons();
+      return direction === "up" || direction === "left" ? [...enabledButtons].reverse() : enabledButtons;
+    }
+    function focusTrigger() {
+      queueMicrotask(() => getTriggerElement()?.focus());
+    }
+    function close(options = {}) {
+      open = false;
+      if (options.focusTrigger)
+        focusTrigger();
+    }
+    function register(button) {
+      if (actionButtons.includes(button))
+        return;
+      actionButtons.push(button);
+    }
+    function unregister(button) {
+      const index = actionButtons.indexOf(button);
+      if (index === -1)
+        return;
+      actionButtons.splice(index, 1);
+    }
+    function toggleOpen() {
+      if (hidden)
+        return;
+      open = !open;
+    }
+    function handleTriggerKeydown(event) {
+      if (hidden)
+        return;
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+        return;
+      }
+      event.preventDefault();
+      open = true;
+      queueMicrotask(() => getEnabledActionButtons()[0]?.focus());
+    }
+    function handleActionsKeydown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close({ focusTrigger: true });
+        return;
+      }
+      const target = event.target instanceof HTMLButtonElement ? event.target : null;
+      if (!target)
+        return;
+      const enabledButtons = getKeyboardNavigationButtons();
+      const currentIndex = enabledButtons.indexOf(target);
+      if (currentIndex === -1)
+        return;
+      const nextIndex = handleRovingKeydown(event, currentIndex, enabledButtons.length, {
+        horizontal: orientation() === "horizontal",
+        vertical: orientation() === "vertical"
+      });
+      if (nextIndex === null)
+        return;
+      event.preventDefault();
+      enabledButtons[nextIndex]?.focus();
+    }
+    function handleDocumentClick(event) {
+      if (!open)
+        return;
+      if (rootElement?.contains(event.target))
+        return;
+      close({
+        focusTrigger: rootElement?.contains(document.activeElement) ?? false
+      });
+    }
+    setSpeedDialContext({
+      get isOpen() {
+        return open;
+      },
+      get direction() {
+        return direction;
+      },
+      close,
+      focusTrigger,
+      register,
+      unregister
+    });
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      hidden: hidden ? true : undefined,
+      role: "group",
+      "aria-label": accessibleLabel(),
+      "aria-hidden": hidden ? "true" : undefined,
+      inert: hidden ? true : undefined,
+      class: $.clsx(classNames("cinder-speed-dial", customClassName)),
+      "data-cinder-open": open ? "" : undefined,
+      "data-cinder-direction": direction,
+      "data-cinder-hidden": hidden ? "true" : undefined
+    })}><div${$.attr("id", actionsId)} role="toolbar" aria-label="Actions"${$.attr("aria-orientation", orientation())} class="cinder-speed-dial__actions"${$.attr("data-cinder-open", open ? "" : undefined)}${$.attr("inert", !open ? true : undefined, true)} tabindex="-1">`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div> <div class="cinder-speed-dial__trigger">`);
+    Floating_action_button($$renderer2, {
+      "aria-label": accessibleLabel(),
+      "aria-expanded": open ? "true" : "false",
+      "aria-controls": actionsId,
+      disabled: hidden,
+      tabindex: hidden ? -1 : undefined,
+      onclick: toggleOpen,
+      onkeydown: handleTriggerKeydown,
+      children: ($$renderer3) => {
+        trigger?.($$renderer3);
+        $$renderer3.push(`<!---->`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----></div></div>`);
+    $.bind_props($$props, { open });
+  });
+}
+
+// src/components/speed-dial/index.ts
+var SpeedDial = Object.assign(Speed_dial, {
+  Action: Speed_dial_action
+});
+var speed_dial_default = SpeedDial;
+export { SpeedDial, speed_dial_default };
+
+//# debugId=D703D7C4A98C613864756E2164756E21