@lostgradient/cinder 0.5.0 → 0.6.0

package/dist/components/menu-bar/index.js

@@ -1930,9 +1930,10 @@ function resolvePortalTarget(target) {
 }
 function copyInheritedPortalAttributes(element, source, inheritAttributes, fallbackAttributes = {
   dir: element.getAttribute("dir"),
+  dataTheme: element.getAttribute("data-theme"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const preservesExplicitDirection = fallbackAttributes.preserveDirection || element.dataset["cinderExplicitDirection"] === "true";
   const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
@@ -1940,13 +1941,51 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   } else {
     element.removeAttribute("dir");
   }
-  const inheritedTheme = inheritAttributes && source ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
+  const preservesExplicitDataTheme = fallbackAttributes.preserveDataTheme === true;
+  const inheritedDataTheme = inheritAttributes && source && !preservesExplicitDataTheme && fallbackAttributes.dataTheme === null ? source.closest("[data-theme]")?.getAttribute("data-theme") : null;
+  const nextDataTheme = inheritedDataTheme ?? fallbackAttributes.dataTheme;
+  if (nextDataTheme) {
+    element.setAttribute("data-theme", nextDataTheme);
+  } else {
+    element.removeAttribute("data-theme");
+  }
+  const preservesExplicitTheme = fallbackAttributes.preserveTheme === true;
+  const inheritedTheme = inheritAttributes && source && !preservesExplicitTheme && fallbackAttributes.theme === null ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
   const nextTheme = inheritedTheme ?? fallbackAttributes.theme;
   if (nextTheme) {
     element.setAttribute("data-cinder-theme", nextTheme);
   } else {
     element.removeAttribute("data-cinder-theme");
   }
+  return {
+    dir: inheritedDir ?? null,
+    dataTheme: inheritedDataTheme ?? null,
+    theme: inheritedTheme ?? null
+  };
+}
+function observeInheritedPortalAttributes(source, inheritAttributes, syncAttributes) {
+  if (!inheritAttributes || !source || typeof MutationObserver === "undefined")
+    return null;
+  const observer = new MutationObserver(() => {
+    syncAttributes();
+  });
+  function observe(elementToObserve) {
+    if (!elementToObserve || observedElements.includes(elementToObserve))
+      return;
+    observedElements.push(elementToObserve);
+    observer.observe(elementToObserve, {
+      attributes: true,
+      attributeFilter: ["dir", "data-theme", "data-cinder-theme"]
+    });
+  }
+  const observedElements = [];
+  let ancestor = source;
+  while (ancestor) {
+    observe(ancestor);
+    ancestor = ancestor.parentElement;
+  }
+  observe(document.documentElement);
+  return () => observer.disconnect();
 }
 function createPortalAttachment(options = {}) {
   let lastWarnedUnresolvedKey = null;
@@ -1954,8 +1993,33 @@ function createPortalAttachment(options = {}) {
     const initialParent = element.parentElement;
     const initialAttributes = {
       dir: element.getAttribute("dir"),
+      dataTheme: element.getAttribute("data-theme"),
       theme: element.getAttribute("data-cinder-theme")
     };
+    const managedAttributes = { dir: null, dataTheme: null, theme: null };
+    function currentFallbackAttributes() {
+      const explicitAttributes = readOption(options.explicitAttributes ?? {});
+      const explicitDirection = explicitAttributes.dir;
+      const explicitDataTheme = explicitAttributes.dataTheme;
+      const explicitTheme = explicitAttributes.theme;
+      const direction = element.getAttribute("dir");
+      const dataTheme = element.getAttribute("data-theme");
+      const theme = element.getAttribute("data-cinder-theme");
+      return {
+        dir: explicitDirection !== undefined ? explicitDirection : direction !== managedAttributes.dir ? direction : initialAttributes.dir,
+        preserveDirection: explicitDirection !== undefined,
+        dataTheme: explicitDataTheme !== undefined ? explicitDataTheme : dataTheme !== managedAttributes.dataTheme ? dataTheme : null,
+        preserveDataTheme: explicitDataTheme !== undefined,
+        theme: explicitTheme !== undefined ? explicitTheme : theme !== managedAttributes.theme ? theme : null,
+        preserveTheme: explicitTheme !== undefined
+      };
+    }
+    function syncInheritedAttributes(source, inheritAttributes) {
+      const nextManagedAttributes = copyInheritedPortalAttributes(element, source, inheritAttributes, currentFallbackAttributes());
+      managedAttributes.dir = nextManagedAttributes.dir;
+      managedAttributes.dataTheme = nextManagedAttributes.dataTheme;
+      managedAttributes.theme = nextManagedAttributes.theme;
+    }
     const anchor = typeof document !== "undefined" ? document.createComment("@lostgradient/cinder/portal") : null;
     if (anchor && initialParent && element.parentNode === initialParent) {
       initialParent.insertBefore(anchor, element);
@@ -1968,26 +2032,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $.user_effect(() => {
+      let stopObservingInheritedAttributes = null;
       const disabled = readOption(options.disabled ?? false);
       const inheritAttributes = readOption(options.inheritAttributes ?? true);
       const targetValue = readOption(options.target ?? null);
       const attributeSource = readOption(options.source ?? initialParent) ?? initialParent;
       const resolved = disabled ? null : resolvePortalTarget(targetValue);
       if (!disabled && resolved?.kind === "resolved") {
-        copyInheritedPortalAttributes(element, attributeSource, inheritAttributes, initialAttributes);
+        syncInheritedAttributes(attributeSource, inheritAttributes);
+        stopObservingInheritedAttributes = observeInheritedPortalAttributes(attributeSource, inheritAttributes, () => syncInheritedAttributes(attributeSource, inheritAttributes));
         resolved.target.appendChild(element);
         lastWarnedUnresolvedKey = null;
       } else if (!disabled && resolved?.kind === "unresolved") {
         restoreInline();
+        syncInheritedAttributes(null, false);
         if (lastWarnedUnresolvedKey !== resolved.key) {
           devWarn(`[cinder/portal] could not resolve portal target ${JSON.stringify(resolved.key)}.`);
           lastWarnedUnresolvedKey = resolved.key;
         }
       } else if (disabled) {
         restoreInline();
+        syncInheritedAttributes(null, false);
         lastWarnedUnresolvedKey = null;
       }
       return () => {
+        stopObservingInheritedAttributes?.();
         if (element.isConnected) {
           element.remove();
         }
@@ -2040,7 +2109,12 @@ function Portal($$anchor, $$props) {
   $2.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $2.append($$anchor, div);
   $2.pop();
@@ -3760,4 +3834,4 @@ export {
   Menu_bar as MenuBar
 };
 
-//# debugId=57BAB95DB880E6EC64756E2164756E21
+//# debugId=17D1E39D933BDB7164756E2164756E21

package/dist/components/navigation-bar/index.d.ts

@@ -1,5 +1,5 @@
 import './navigation-bar.css';
 import NavigationBar from './navigation-bar.svelte';
 export default NavigationBar;
-export type { NavigationBarItemsContext, NavigationBarLabelVisibility, NavigationBarPlacement, NavigationBarProps, NavigationBarToggleAttributes, NavigationVariant, } from './navigation-bar.types.ts';
+export type { NavigationBarItemsContext, NavigationBarLabelVisibility, NavigationBarMenuTogglePlacement, NavigationBarPlacement, NavigationBarProps, NavigationBarToggleAttributes, NavigationVariant, } from './navigation-bar.types.ts';
 export { NavigationBar };

package/dist/components/navigation-bar/index.js

@@ -66,22 +66,24 @@ function classNames(...parts) {
 }
 
 // src/components/navigation-bar/navigation-bar.svelte
-var root_1 = $.from_html(`<div class="cinder-navigation-bar__brand"><!></div>`);
-var root_2 = $.from_html(`<div class="cinder-navigation-bar__menu-toggle"><!></div>`);
-var root_3 = $.from_html(`<div class="cinder-navigation-bar__actions"><!></div>`);
-var root = $.from_html(`<nav><!> <!> <div class="cinder-navigation-bar__items"><!></div> <!></nav>`);
+var root_1 = $.from_html(`<div class="cinder-navigation-bar__menu-toggle"><!></div>`);
+var root_2 = $.from_html(`<div class="cinder-navigation-bar__brand"><!></div>`);
+var root_3 = $.from_html(`<div class="cinder-navigation-bar__menu-toggle"><!></div>`);
+var root_4 = $.from_html(`<div class="cinder-navigation-bar__actions"><!></div>`);
+var root = $.from_html(`<nav><!> <!> <!> <div class="cinder-navigation-bar__items"><!></div> <!></nav>`);
 function Navigation_bar($$anchor, $$props) {
   const regionId = $.props_id();
   $.push($$props, true);
   const COLLAPSIBLE_MAX_WIDTH_REM = 47.99;
   const FALLBACK_ROOT_FONT_SIZE_PX = 16;
-  let placement = $.prop($$props, "placement", 3, "top"), showLabels = $.prop($$props, "showLabels", 3, "always"), mobileMenuOpen = $.prop($$props, "mobileMenuOpen", 15, false), label = $.prop($$props, "label", 3, "Main navigation"), rest = $.rest_props($$props, [
+  let placement = $.prop($$props, "placement", 3, "top"), showLabels = $.prop($$props, "showLabels", 3, "always"), menuTogglePlacement = $.prop($$props, "menuTogglePlacement", 3, "after-brand"), mobileMenuOpen = $.prop($$props, "mobileMenuOpen", 15, false), label = $.prop($$props, "label", 3, "Main navigation"), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "class",
     "placement",
     "showLabels",
+    "menuTogglePlacement",
     "brand",
     "items",
     "actions",
@@ -92,6 +94,7 @@ function Navigation_bar($$anchor, $$props) {
     "data-collapsible",
     "data-cinder-placement",
     "data-cinder-label-visibility",
+    "data-cinder-menu-toggle-placement",
     "onkeydown"
   ]);
   const navigationItemSelector = "[data-cinder-navigation-item]";
@@ -226,6 +229,7 @@ function Navigation_bar($$anchor, $$props) {
     "data-collapsible": $.get(isCollapsible) ? "true" : "false",
     "data-cinder-placement": placement(),
     "data-cinder-label-visibility": showLabels(),
+    "data-cinder-menu-toggle-placement": menuTogglePlacement(),
     onkeydown: handleKeyDown
   }), [() => classNames("cinder-navigation-bar", $$props.class)]);
   var node = $.child(nav);
@@ -233,12 +237,19 @@ function Navigation_bar($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var div = root_1();
       var node_1 = $.child(div);
-      $.snippet(node_1, () => $$props.brand);
+      {
+        let $0 = $.derived(() => ({
+          "aria-expanded": mobileMenuOpen() ? "true" : "false",
+          "aria-controls": regionId,
+          ...true_default ? { onclick: handleToggle } : {}
+        }));
+        $.snippet(node_1, () => $$props.menuToggle, () => $.get($0));
+      }
       $.reset(div);
       $.append($$anchor2, div);
     };
     $.if(node, ($$render) => {
-      if ($$props.brand)
+      if ($.get(isCollapsible) && $$props.menuToggle && menuTogglePlacement() === "before-brand")
         $$render(consequent);
     });
   }
@@ -247,51 +258,65 @@ function Navigation_bar($$anchor, $$props) {
     var consequent_1 = ($$anchor2) => {
       var div_1 = root_2();
       var node_3 = $.child(div_1);
+      $.snippet(node_3, () => $$props.brand);
+      $.reset(div_1);
+      $.append($$anchor2, div_1);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.brand)
+        $$render(consequent_1);
+    });
+  }
+  var node_4 = $.sibling(node_2, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var div_2 = root_3();
+      var node_5 = $.child(div_2);
       {
         let $0 = $.derived(() => ({
           "aria-expanded": mobileMenuOpen() ? "true" : "false",
           "aria-controls": regionId,
           ...true_default ? { onclick: handleToggle } : {}
         }));
-        $.snippet(node_3, () => $$props.menuToggle, () => $.get($0));
+        $.snippet(node_5, () => $$props.menuToggle, () => $.get($0));
       }
-      $.reset(div_1);
-      $.append($$anchor2, div_1);
+      $.reset(div_2);
+      $.append($$anchor2, div_2);
     };
-    $.if(node_2, ($$render) => {
-      if ($.get(isCollapsible) && $$props.menuToggle)
-        $$render(consequent_1);
+    $.if(node_4, ($$render) => {
+      if ($.get(isCollapsible) && $$props.menuToggle && menuTogglePlacement() === "after-brand")
+        $$render(consequent_2);
     });
   }
-  var div_2 = $.sibling(node_2, 2);
-  var node_4 = $.child(div_2);
-  $.snippet(node_4, () => $$props.items, () => ({
+  var div_3 = $.sibling(node_4, 2);
+  var node_6 = $.child(div_3);
+  $.snippet(node_6, () => $$props.items, () => ({
     variant: $.get(variant),
     placement: placement(),
     showLabels: showLabels()
   }));
-  $.reset(div_2);
-  $.bind_this(div_2, ($$value) => itemsRegionElement = $$value, () => itemsRegionElement);
-  var node_5 = $.sibling(div_2, 2);
+  $.reset(div_3);
+  $.bind_this(div_3, ($$value) => itemsRegionElement = $$value, () => itemsRegionElement);
+  var node_7 = $.sibling(div_3, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var div_3 = root_3();
-      var node_6 = $.child(div_3);
-      $.snippet(node_6, () => $$props.actions);
-      $.reset(div_3);
-      $.append($$anchor2, div_3);
+    var consequent_3 = ($$anchor2) => {
+      var div_4 = root_4();
+      var node_8 = $.child(div_4);
+      $.snippet(node_8, () => $$props.actions);
+      $.reset(div_4);
+      $.append($$anchor2, div_4);
     };
-    $.if(node_5, ($$render) => {
+    $.if(node_7, ($$render) => {
       if ($$props.actions)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
   $.reset(nav);
   $.bind_this(nav, ($$value) => navigationBarElement = $$value, () => navigationBarElement);
   $.template_effect(() => {
-    $.set_attribute(div_2, "id", regionId);
-    $.set_attribute(div_2, "data-open", mobileMenuOpen() ? "true" : "false");
-    div_2.inert = $.get(isCollapsible) && $.get(isMobileLayout) && !mobileMenuOpen() ? true : undefined;
+    $.set_attribute(div_3, "id", regionId);
+    $.set_attribute(div_3, "data-open", mobileMenuOpen() ? "true" : "false");
+    div_3.inert = $.get(isCollapsible) && $.get(isMobileLayout) && !mobileMenuOpen() ? true : undefined;
   });
   $.append($$anchor, nav);
   $.pop();
@@ -304,4 +329,4 @@ export {
   Navigation_bar as NavigationBar
 };
 
-//# debugId=5BBA9B76F6F0EFA864756E2164756E21
+//# debugId=C2A9DAAC387BF21364756E2164756E21

package/dist/components/navigation-bar/navigation-bar.css

@@ -133,6 +133,11 @@
       display: inline-flex;
     }
 
+    .cinder-navigation-bar[data-collapsible='true'][data-cinder-menu-toggle-placement='after-brand']
+      .cinder-navigation-bar__menu-toggle {
+      margin-inline-start: auto;
+    }
+
     .cinder-navigation-bar[data-collapsible='true'] .cinder-navigation-bar__items {
       position: absolute;
       inset-inline: 0;
@@ -173,6 +178,16 @@
       inline-size: 100%;
       justify-content: flex-start;
       padding-block: var(--cinder-space-3);
+      border-bottom: none;
+      border-inline-start: 2px solid transparent;
+      border-radius: var(--cinder-radius-sm);
+    }
+
+    .cinder-navigation-bar[data-collapsible='true']
+      .cinder-navigation-bar__items[data-open='true']
+      .cinder-navigation-item[data-variant='mobile'][data-active='true'] {
+      border-inline-start-color: var(--cinder-accent);
+      background-color: var(--cinder-surface-inset);
     }
   }
 

package/dist/components/navigation-bar/navigation-bar.schema.js

@@ -70,6 +70,11 @@ var schema = {
       description: "Label visibility for mobile bottom-tab compositions. Hidden labels remain in\nthe accessibility tree when wrapped in `[data-cinder-navigation-label]`.",
       default: "always"
     },
+    menuTogglePlacement: {
+      enum: ["after-brand", "before-brand"],
+      description: 'Placement for the collapsible mobile menu toggle in top navigation bars.\nIgnored for `placement="bottom"`.',
+      default: "after-brand"
+    },
     mobileMenuOpen: {
       type: "boolean",
       description: "Two-way bindable open state of the mobile menu."
@@ -109,4 +114,4 @@ export {
   navigation_bar_schema_default as default
 };
 
-//# debugId=04895A5CE87018D064756E2164756E21
+//# debugId=E420ED51C799C59664756E2164756E21

package/dist/components/navigation-bar/navigation-bar.svelte.d.ts

@@ -11,7 +11,7 @@
  * @avoidWhen Building a tall, dense sidebar of grouped sections — use side-navigation instead.
  * @related navigation-item, breadcrumbs, side-navigation
  */
-export type { NavigationBarLabelVisibility, NavigationBarItemsContext, NavigationBarPlacement, NavigationBarProps, NavigationBarToggleAttributes, NavigationVariant, } from './navigation-bar.types.ts';
+export type { NavigationBarLabelVisibility, NavigationBarItemsContext, NavigationBarMenuTogglePlacement, NavigationBarPlacement, NavigationBarProps, NavigationBarToggleAttributes, NavigationVariant, } from './navigation-bar.types.ts';
 import type { NavigationBarProps } from './navigation-bar.types.ts';
 declare const NavigationBar: import("svelte").Component<NavigationBarProps, {}, "mobileMenuOpen">;
 type NavigationBar = ReturnType<typeof NavigationBar>;

package/dist/components/navigation-bar/navigation-bar.types.d.ts

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 export type NavigationVariant = 'horizontal' | 'mobile';
 export type NavigationBarPlacement = 'top' | 'bottom';
 export type NavigationBarLabelVisibility = 'always' | 'active' | 'never';
+export type NavigationBarMenuTogglePlacement = 'after-brand' | 'before-brand';
 /** Attributes injected into the consumer's toggle button via the menuToggle snippet parameter. */
 export type NavigationBarToggleAttributes = {
     'aria-expanded': 'true' | 'false';
@@ -33,6 +34,13 @@ export type NavigationBarProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
      * @default "always"
      */
     showLabels?: NavigationBarLabelVisibility;
+    /**
+     * Placement for the collapsible mobile menu toggle in top navigation bars.
+     * Ignored for `placement="bottom"`.
+     *
+     * @default "after-brand"
+     */
+    menuTogglePlacement?: NavigationBarMenuTogglePlacement;
     brand?: Snippet;
     /** Receives a context object with the current variant. */
     items: Snippet<[NavigationBarItemsContext]>;

package/dist/components/newsletter-section/newsletter-section.css

@@ -2,6 +2,7 @@
 @layer cinder.components {
   .cinder-newsletter-section {
     container-type: inline-size;
+    container-name: cinder-newsletter-section;
     padding-block: var(--cinder-space-10);
   }
 
@@ -45,7 +46,7 @@
     color: var(--cinder-text-subtle);
   }
 
-  @container (min-width: 48rem) {
+  @container cinder-newsletter-section (min-width: 48rem) {
     .cinder-newsletter-section__form {
       grid-template-columns: minmax(0, 1fr) auto;
     }

package/dist/components/pagination/index.js

@@ -75,19 +75,23 @@ var root_4 = $.from_html(`<li><button type="button" class="cinder-pagination__pa
 var root = $.from_html(`<nav><!> <div class="cinder-pagination__controls"><button type="button" class="cinder-pagination__step" aria-label="Go to previous page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="15 18 9 12 15 6"></polyline></svg></button> <ul class="cinder-pagination__pages" role="list"></ul> <button type="button" class="cinder-pagination__step" aria-label="Go to next page"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="9 18 15 12 9 6"></polyline></svg></button></div></nav>`);
 function Pagination($$anchor, $$props) {
   $.push($$props, true);
-  let currentPage = $.prop($$props, "currentPage", 15, 1), rest = $.rest_props($$props, [
+  let currentPage = $.prop($$props, "currentPage", 15, 1), hasNextPage = $.prop($$props, "hasNextPage", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "currentPage",
     "totalPages",
+    "hasPreviousPage",
+    "hasNextPage",
     "totalCount",
     "class"
   ]);
   const mergedClassName = $.derived(() => classNames("cinder-pagination", $$props.class));
-  const canGoPrevious = $.derived(() => currentPage() > 1);
-  const canGoNext = $.derived(() => currentPage() < $$props.totalPages);
+  const canGoPrevious = $.derived(() => currentPage() > 1 && ($$props.totalPages === undefined ? $$props.hasPreviousPage ?? true : true));
+  const canGoNext = $.derived(() => $$props.totalPages === undefined ? hasNextPage() : currentPage() < $$props.totalPages);
   const pageItems = $.derived(() => {
+    if ($$props.totalPages === undefined)
+      return [currentPage()];
     if ($$props.totalPages <= 1)
       return [];
     if ($$props.totalPages <= 7) {
@@ -120,7 +124,7 @@ function Pagination($$anchor, $$props) {
     return result;
   });
   function goToPage(page) {
-    if (page < 1 || page > $$props.totalPages || page === currentPage())
+    if (page < 1 || $$props.totalPages !== undefined && page > $$props.totalPages || page === currentPage())
       return;
     currentPage(page);
   }
@@ -201,4 +205,4 @@ export {
   Pagination
 };
 
-//# debugId=0D3D719EF6CDB0F364756E2164756E21
+//# debugId=930334CDF482828064756E2164756E21

package/dist/components/pagination/pagination.schema.js

@@ -62,7 +62,16 @@ var schema = {
     },
     totalPages: {
       type: "number",
-      description: "Total number of pages."
+      description: "Total number of pages. Omit when only previous/next availability is known."
+    },
+    hasPreviousPage: {
+      type: "boolean",
+      description: "Whether a previous page is available when totalPages is unknown. Defaults to currentPage > 1."
+    },
+    hasNextPage: {
+      type: "boolean",
+      description: "Whether a next page is available when totalPages is unknown. Defaults to false.",
+      default: false
     },
     totalCount: {
       type: "number",
@@ -74,11 +83,11 @@ var schema = {
     }
   },
   additionalProperties: false,
-  required: ["currentPage", "totalPages"]
+  required: ["currentPage"]
 };
 var pagination_schema_default = schema;
 export {
   pagination_schema_default as default
 };
 
-//# debugId=D83629C99427CC6564756E2164756E21
+//# debugId=5F07B2B04022F2AE64756E2164756E21

package/dist/components/pagination/pagination.types.d.ts

@@ -2,8 +2,12 @@ import type { HTMLAttributes } from 'svelte/elements';
 export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     /** Current page number (1-indexed). Bindable. */
     currentPage: number;
-    /** Total number of pages. */
-    totalPages: number;
+    /** Total number of pages. Omit when only previous/next availability is known. */
+    totalPages?: number;
+    /** Whether a previous page is available when totalPages is unknown. Defaults to currentPage > 1. */
+    hasPreviousPage?: boolean;
+    /** Whether a next page is available when totalPages is unknown. Defaults to false. @default false */
+    hasNextPage?: boolean;
     /** Optional total record count; formatted with formatNumber when provided. */
     totalCount?: number;
     /** Custom class merged with `.cinder-pagination`. */

package/dist/components/payload-inspector/index.js

@@ -171,7 +171,7 @@ function classNames(...parts) {
 
 // src/components/badge/badge.svelte
 var root_3 = $.from_svg(`<path></path>`);
-var root_2 = $.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_2 = $.from_svg(`<svg class="cinder-icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
 var root_1 = $.from_html(`<!> <!>`, 1);
 var root = $.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
@@ -595,7 +595,7 @@ function Copy_button($$anchor, $$props) {
       $6.append($$anchor2, fragment_1);
     };
     var consequent_1 = ($$anchor2) => {
-      Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Check($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
       var text3 = $6.text("Copied");
@@ -608,7 +608,7 @@ function Copy_button($$anchor, $$props) {
       $6.append($$anchor2, fragment_3);
     };
     var consequent_4 = ($$anchor2) => {
-      Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Copy($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var alternate = ($$anchor2) => {
       var text_1 = $6.text("Copy");
@@ -1339,7 +1339,7 @@ var root8 = $11.from_html(`<div><!></div>`);
 function Tabs($$anchor, $$props) {
   const baseId = $11.props_id();
   $11.push($$props, true);
-  let value = $11.prop($$props, "value", 15, ""), orientation = $11.prop($$props, "orientation", 3, "horizontal");
+  let value = $11.prop($$props, "value", 15, ""), orientation = $11.prop($$props, "orientation", 3, "horizontal"), fill = $11.prop($$props, "fill", 3, false);
   const effectiveActivateOnFocus = $11.derived(() => $$props.activateOnFocus ?? orientation() === "horizontal");
   const buttons = new Map;
   let version = $11.state(0);
@@ -1507,6 +1507,7 @@ function Tabs($$anchor, $$props) {
   $11.template_effect(($0) => {
     $11.set_class(div, 1, $0);
     $11.set_attribute(div, "data-cinder-orientation", orientation());
+    $11.set_attribute(div, "data-cinder-fill", fill() ? "" : undefined);
   }, [() => $11.clsx(classNames("cinder-tabs", $$props.class))]);
   $11.append($$anchor, div);
   $11.pop();
@@ -2256,4 +2257,4 @@ export {
   Payload_inspector as PayloadInspector
 };
 
-//# debugId=847EC5A29084C8F164756E2164756E21
+//# debugId=4744BBCF5563242A64756E2164756E21