@stridge/noctis-design-tokens 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/graph/components.js

@@ -597,6 +597,152 @@ const autocomplete = {
 		}, "0.625rem", "Leading inset of a group label.", "The start inset that lines a group heading up with the option row's content edge (the same inline padding the rows use). Keep it in step with the item inline padding.")
 	]
 };
+const command = {
+	component: "command",
+	category: "overlays",
+	slotPrefix: "noctis",
+	anatomy: [
+		"command",
+		"command-input",
+		"command-list",
+		"command-item",
+		"command-empty",
+		"command-group-label"
+	],
+	options: {},
+	states: [
+		"highlighted",
+		"disabled",
+		"active"
+	],
+	consumes: [],
+	mints: [
+		raw("964c156e-493a-40af-bf7f-e8f918cbe1e3", {
+			kind: "component",
+			component: "command",
+			property: "inset-block-start"
+		}, "12vh", "Distance from the top of the viewport to the modal palette.", "How far down the palette floats in its modal form; smaller values raise it toward the top."),
+		raw("6ea3439e-6935-46ec-ac98-f5235643ed2d", {
+			kind: "component",
+			component: "command",
+			property: "height"
+		}, "min(60vh, 460px)", "Fixed height of the modal palette so it never jumps as results stream in.", "The modal palette's locked height; capped at 460px on tall viewports."),
+		raw("723a3bbd-cdad-40c7-bf00-8292c524b076", {
+			kind: "component",
+			component: "command",
+			property: "width"
+		}, "min(40rem, 92vw)", "Width of the modal palette.", "The modal palette's width; shrinks to 92vw on narrow viewports."),
+		raw("3ff47eea-2f40-4c74-bafe-ad12aae8db43", {
+			kind: "component",
+			component: "command",
+			property: "border-radius"
+		}, "var(--noctis-radius-md)", "Corner radius of the palette panel.", "The rounding of the panel's outer corners — a tight popover radius, not a soft card."),
+		aliased("f9443395-0ea6-4ec4-8c95-535f5c0acd61", {
+			kind: "component",
+			component: "command",
+			property: "transition-duration"
+		}, { raw: "var(--noctis-duration-overlay)" }, "Duration of the modal palette's scale-fade enter/exit.", "How long the modal palette takes to scale and fade in and out."),
+		raw("e7f3b78b-2c73-45af-b182-c50b53f6452c", {
+			kind: "component",
+			component: "command",
+			anatomy: "input",
+			property: "height"
+		}, "3rem", "Height of the query input row.", "The tap target of the query input; taller than a standard control for a command-bar feel."),
+		raw("2c7c1c86-ec81-432e-a194-2dc1a784e747", {
+			kind: "component",
+			component: "command",
+			anatomy: "list",
+			property: "padding"
+		}, "0.375rem", "Padding around the scrollable command list.", "The inset between the panel edge and its rows (the row highlight's gutter)."),
+		raw("a9f7ec66-8a03-4c53-9d97-2c8d21e8151f", {
+			kind: "component",
+			component: "command",
+			anatomy: "list",
+			property: "height"
+		}, "auto", "Measured height of the scrollable list (runtime-driven; the resting default is content height).", "The list's own height. A ResizeObserver writes the current content height to this var as the rows change, so the panel can animate between sizes instead of jumping; until then it falls back to fitting its content."),
+		aliased("08697fcf-2ec0-4ab4-931e-72229f37ee80", {
+			kind: "component",
+			component: "command",
+			anatomy: "list",
+			property: "transition-duration"
+		}, { raw: "var(--noctis-duration-regular)" }, "Duration of the list's height animation as the rows change.", "How long the palette takes to grow or shrink to fit a new set of rows."),
+		raw("580f7118-6742-4b78-9d18-6bc64bdd8fec", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "height"
+		}, "2.5rem", "Minimum height of a command row.", "The row's min-height; the inline padding rhythm fills any extra space."),
+		raw("9cbb6199-6558-4212-ad3d-218d4023251d", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "padding-inline"
+		}, "0.375rem", "Inline padding of a command row.", "The horizontal inset of a row's content inside its highlight."),
+		raw("4fa3d1bf-7c5b-46dc-b126-0e309e641dd4", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "padding-block"
+		}, "0.25rem", "Block padding of a command row.", "The vertical inset of a row's content, so multi-line rows breathe; single-line rows keep their min-height."),
+		raw("02f374e1-7d62-48b1-9cae-e50e8a22a9fe", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "gap"
+		}, "0.5rem", "Gap between a command's leading glyph and its label.", "The spacing between a row's optional icon column and its label."),
+		raw("6c79bb24-9347-458a-8ff5-270f3d892217", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "border-radius"
+		}, "var(--noctis-radius-sm)", "Corner radius of a command row's highlight.", "The radius of the row's highlight fill — a tight rounding so the highlighted row reads as a crisp bar, not a pill."),
+		aliased("718e3a0a-2357-41c1-b023-a275a8a69110", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "color"
+		}, { role: "secondary" }, "Command row label colour at rest.", "The resting text colour of a row."),
+		aliased("85bd4c15-9ffa-46f6-97fc-4ea45136ba2d", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "color",
+			state: "highlighted"
+		}, { role: "foreground" }, "Command row label colour while highlighted.", "The text colour of the keyboard- or pointer-highlighted row."),
+		aliased("7bc8fa50-3db9-4758-9771-6bd5013fe999", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "background-color",
+			state: "highlighted"
+		}, { role: "control-ghost-hover" }, "Command row highlight fill.", "The neutral fill behind the highlighted row; the accent stays a signal, not a hover."),
+		aliased("27205743-dee6-49de-931a-4d13e510d9bc", {
+			kind: "component",
+			component: "command",
+			anatomy: "item",
+			property: "background-color",
+			state: "active"
+		}, { role: "control-ghost-selected" }, "Command row pressed fill.", "The firmer neutral fill while a row is pressed, as tactile feedback before it commits."),
+		raw("48640222-69af-4b5f-800d-8e1261403438", {
+			kind: "component",
+			component: "command",
+			anatomy: "empty",
+			property: "padding-block"
+		}, "var(--noctis-space-6)", "Block padding of the empty / no-results message.", "The vertical breathing room around the centred no-results copy."),
+		raw("1f519fba-56e9-42ea-8316-462624c96dcd", {
+			kind: "component",
+			component: "command",
+			anatomy: "group-label",
+			property: "padding-inline"
+		}, "var(--noctis-space-2\\.5)", "Trailing inline padding of a group label.", "The end inset of a section heading."),
+		raw("a1280649-2d3d-41ed-a363-c793ec6aac83", {
+			kind: "component",
+			component: "command",
+			anatomy: "group-label",
+			property: "padding-inline-start"
+		}, "0.375rem", "Leading inset of a group label.", "The start inset that lines a section heading up with the row's content edge (the same inline padding the rows use). Keep it in step with the item inline padding.")
+	]
+};
 const input = {
 	component: "input",
 	category: "fields",
@@ -1365,6 +1511,84 @@ const toolbar = {
 		}, "5rem", "Default width of a toolbar input field.", "The resting width of a `Toolbar.Input` — sized for a short value like a zoom percentage; override per use.")
 	]
 };
+const pagination = {
+	component: "pagination",
+	category: "navigation",
+	slotPrefix: "noctis",
+	anatomy: [
+		"pagination",
+		"pagination-info",
+		"pagination-page-size",
+		"pagination-page",
+		"pagination-controls",
+		"pagination-separator"
+	],
+	options: { size: ["sm", "md"] },
+	states: [],
+	consumes: [],
+	optionSlots: { size: "pagination" },
+	mints: [
+		raw("0cbc4655-bb4e-4fd5-9c04-057351efe727", {
+			kind: "component",
+			component: "pagination",
+			property: "gap"
+		}, "var(--noctis-space-3)", "Gap between the pagination's clusters.", "The spacing the pagination row holds between its info line, page-size picker, separator, page field, and controls."),
+		raw("41dfe2e5-18e2-4197-a956-8ff5b4fe0e41", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "info",
+			property: "font-size"
+		}, "var(--noctis-text-small)", "Info line font size.", "The type size of the “Showing X–Y of Z” status line."),
+		aliased("72cd3ff8-3ebe-4c30-9fdd-6130842a3274", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "info",
+			property: "color"
+		}, { role: "muted" }, "Info line text colour.", "The colour of the status line — the quieter muted role, since it is secondary to the controls."),
+		raw("1282b0be-d667-4311-a247-bfb08e980d7b", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "page-size",
+			property: "gap"
+		}, "var(--noctis-space-2)", "Gap inside the page-size cluster.", "The spacing between the page-size label and its select."),
+		raw("a907344a-4e70-4b2d-a92b-ad740a165f31", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "page",
+			property: "gap"
+		}, "var(--noctis-space-2)", "Gap inside the page field cluster.", "The spacing between the “Page” label, the page input, and the “of N” total."),
+		raw("d501c15c-b399-4366-80fb-66b43511ca19", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "page",
+			property: "inline-size"
+		}, "3.5rem", "Width of the editable page input.", "The resting width of the page-number field, sized for a few digits; override per use for larger page counts."),
+		aliased("d8abfead-9e96-437c-9af1-dbccf3fd34b9", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "page",
+			property: "block-size"
+		}, { raw: "var(--noctis-size-control-md)" }, "Height of the welded page input.", "The control height of the page field per size, kept level with the nav buttons beside it (the `Input` shell itself floors at `md`, so the welded field's height is pinned here); `sm` drops to `control-sm`.", { size: { sm: { raw: "var(--noctis-size-control-sm)" } } }),
+		aliased("d5bbc9bc-de84-4050-a437-d0d864c6c2ba", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "separator",
+			property: "color"
+		}, { role: "border" }, "Colour of the divider between pagination clusters.", "The hairline separator's colour — the default border role, so it reads as a quiet rule."),
+		raw("3f5f5f70-1e70-40e7-a05c-9b6ba5892b70", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "separator",
+			property: "inline-size"
+		}, "1px", "Thickness of the divider between pagination clusters.", "The thickness of the vertical hairline separator."),
+		raw("9fcd3857-34b8-42e4-95af-14e2c3e65744", {
+			kind: "component",
+			component: "pagination",
+			anatomy: "separator",
+			property: "block-size"
+		}, "1.5rem", "Height of the divider between pagination clusters.", "The height of the vertical hairline separator within the centred row.")
+	]
+};
 const accordion = {
 	component: "accordion",
 	category: "surfaces",
@@ -3421,6 +3645,156 @@ const badge = {
 		}, { raw: "0.875rem" }, "Edge length of a leading icon glyph.", "The width and height the chip clamps a leading icon to, per size, so the glyph tracks the label.", { size: { sm: { raw: "0.75rem" } } })
 	]
 };
+const skeleton = {
+	component: "skeleton",
+	category: "data",
+	slotPrefix: "noctis",
+	anatomy: [
+		"skeleton",
+		"skeleton-box",
+		"skeleton-circle",
+		"skeleton-text",
+		"skeleton-line"
+	],
+	options: { variant: [
+		"shimmer",
+		"pulse",
+		"none"
+	] },
+	states: [],
+	consumes: [],
+	optionSlots: { variant: "skeleton" },
+	slotGroups: {
+		root: ["skeleton"],
+		fill: [
+			"skeleton-box",
+			"skeleton-circle",
+			"skeleton-line"
+		],
+		shimmer: [
+			"skeleton-box",
+			"skeleton-circle",
+			"skeleton-line"
+		]
+	},
+	mints: [
+		raw("e698ed6f-926b-4795-9c8b-b5b389c170c6", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "root",
+			property: "gap"
+		}, "var(--noctis-space-3)", "Gap between stacked placeholders in a group.", "The spacing the `Skeleton.Root` column holds between its child placeholders."),
+		aliased("2ecab953-f65f-4c6c-8527-289a44b4b2b7", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "fill",
+			property: "background-color"
+		}, { role: "well" }, "Placeholder fill colour shared by every shape.", "The base colour of a box/circle/line placeholder; the surface-adaptive `well` overlay, so a placeholder stays visible on any surface (canvas, card, or sunken panel)."),
+		aliased("d63ff16e-b1cf-4c96-9474-d8965343c8c7", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "shimmer",
+			property: "background-color"
+		}, { role: "surface-raised" }, "Colour of the moving shimmer band.", "The brighter neutral the `shimmer` variant sweeps across the placeholder; a raised surface, so the sweep reads as a light highlight in both light and dark mode."),
+		raw("d00c5ade-6bf1-4771-8563-eb2af18551c3", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "shimmer",
+			property: "animation-duration"
+		}, "calc(var(--noctis-duration-slow) * 4)", "Duration of one shimmer sweep / pulse cycle.", "How long the `shimmer` sweep takes to cross a placeholder (and the half-cycle of the `pulse` fade); a multiple of the slow motion stop so it stays calm."),
+		raw("c1409cc8-3865-4487-b1a0-09ef7612bee4", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "box",
+			property: "block-size"
+		}, "1.25rem", "Default height of a box placeholder.", "The block size of `Skeleton.Box` before any override; box fills its inline space, so only the height has a default — set the `style`/`className` height to match the content it stands in for."),
+		raw("61e6be3d-db11-463b-bbf0-da36c32bc923", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "box",
+			property: "border-radius"
+		}, "var(--noctis-radius-md)", "Corner radius of a box placeholder.", "The rounding of `Skeleton.Box`; follows the radius knob on the capped md step."),
+		raw("76001ed2-a124-487f-b6cb-f87c7454c324", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "circle",
+			property: "size"
+		}, "2.5rem", "Default diameter of a circle placeholder.", "The width and height of `Skeleton.Circle` before any override; size it to match the avatar or icon it stands in for."),
+		raw("f1beb79a-1de6-4d9f-81fc-9a22e37384a1", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "line",
+			property: "block-size"
+		}, "0.7em", "Height of a single text line placeholder.", "The block size of one `Skeleton.Line`, in `em` so it tracks the surrounding text size — the cap height a real line of text would occupy."),
+		raw("9cc376d7-90b0-4ece-8c21-7542c8059a47", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "line",
+			property: "border-radius"
+		}, "var(--noctis-radius-sm)", "Corner radius of a text line placeholder.", "The rounding of a `Skeleton.Line`; a small radius so a thin line reads as a soft bar."),
+		raw("0e8f7d2c-1b3a-4c5e-9f6d-7a8b9c0d1e2f", {
+			kind: "component",
+			component: "skeleton",
+			anatomy: "text",
+			property: "gap"
+		}, "var(--noctis-space-2)", "Gap between lines in a text placeholder.", "The spacing `Skeleton.Text` holds between its stacked `Skeleton.Line`s.")
+	]
+};
+const breadcrumb = {
+	component: "breadcrumb",
+	category: "navigation",
+	slotPrefix: "noctis",
+	anatomy: [
+		"breadcrumb",
+		"breadcrumb-list",
+		"breadcrumb-item",
+		"breadcrumb-link",
+		"breadcrumb-page",
+		"breadcrumb-separator",
+		"breadcrumb-ellipsis",
+		"breadcrumb-icon"
+	],
+	options: { size: ["sm", "md"] },
+	states: [],
+	consumes: [],
+	optionSlots: { size: "breadcrumb" },
+	mints: [
+		aliased("5ac8741d-5850-46fa-8258-80067e1bf193", {
+			kind: "component",
+			component: "breadcrumb",
+			property: "gap"
+		}, { raw: "0.375rem" }, "Gap between a crumb's leading icon and its label.", "The spacing a `link` or `page` holds between a leading icon and the label text, per size; declared on the root and inherited by both crumb kinds.", { size: { sm: { raw: "0.25rem" } } }),
+		aliased("34e53704-fe40-4c9d-bc61-ca7d81786eeb", {
+			kind: "component",
+			component: "breadcrumb",
+			property: "font-size"
+		}, { raw: "var(--noctis-text-small)" }, "Trail type size.", "The font size of every crumb and separator, per size; the 14px `small` step at `md`, the 13px `mini` step at `sm`.", { size: { sm: { raw: "var(--noctis-text-mini)" } } }),
+		aliased("fe63d830-e58e-4bc9-b4c0-dd5b9fee1540", {
+			kind: "component",
+			component: "breadcrumb",
+			anatomy: "list",
+			property: "gap"
+		}, { raw: "0.375rem" }, "Gap between crumbs and separators in the trail.", "The spacing the ordered list holds between adjacent crumbs and the separators between them, per size.", { size: { sm: { raw: "0.25rem" } } }),
+		aliased("219dcd50-453f-4094-aa5b-aeeacfceef18", {
+			kind: "component",
+			component: "breadcrumb",
+			anatomy: "icon",
+			property: "size"
+		}, { raw: "1rem" }, "Edge length of a crumb's leading icon.", "The width and height a crumb clamps a leading icon to, per size, so the glyph tracks the label.", { size: { sm: { raw: "0.875rem" } } }),
+		aliased("416cd517-ae0b-46e7-b62c-34c2614bf928", {
+			kind: "component",
+			component: "breadcrumb",
+			anatomy: "separator",
+			property: "size"
+		}, { raw: "1rem" }, "Edge length of the separator glyph.", "The width and height of the chevron (or custom) glyph between crumbs, per size.", { size: { sm: { raw: "0.875rem" } } }),
+		raw("9082c151-ac80-451f-a0bd-f5a9becfb7e5", {
+			kind: "component",
+			component: "breadcrumb",
+			anatomy: "link",
+			property: "border-radius"
+		}, "var(--noctis-radius-sm)", "Corner radius of a link's focus ring.", "The rounding of the focus-visible outline drawn around an interactive crumb, so the ring hugs the link's hit area.")
+	]
+};
 const colorSwatch = {
 	component: "color-swatch",
 	category: "fields",
@@ -4320,6 +4694,7 @@ const COMPONENT_DECLARATIONS = [
 	buttonGroup,
 	tabs,
 	toolbar,
+	pagination,
 	accordion,
 	toggle,
 	numberField,
@@ -4333,6 +4708,7 @@ const COMPONENT_DECLARATIONS = [
 	alertDialog,
 	rail,
 	combobox,
+	command,
 	searchDialog,
 	dialog,
 	colorPicker,
@@ -4342,6 +4718,8 @@ const COMPONENT_DECLARATIONS = [
 	checkbox,
 	avatar,
 	badge,
+	skeleton,
+	breadcrumb,
 	otpField,
 	switchControl,
 	progress,

package/dist/tokens.css

@@ -1701,6 +1701,29 @@
         --_toolbar-input-height: var(--noctis-toolbar-input-height, var(--noctis-size-control-xs));
         --_toolbar-input-padding-inline: var(--noctis-toolbar-input-padding-inline, var(--noctis-space-1\.5));
     }
+    [data-slot="noctis-pagination"] {
+        --_pagination-gap: var(--noctis-pagination-gap, var(--noctis-space-3));
+    }
+    [data-slot="noctis-pagination-info"] {
+        --_pagination-info-font-size: var(--noctis-pagination-info-font-size, var(--noctis-text-small));
+        --_pagination-info-color: var(--noctis-pagination-info-color, var(--noctis-color-muted));
+    }
+    [data-slot="noctis-pagination-page-size"] {
+        --_pagination-page-size-gap: var(--noctis-pagination-page-size-gap, var(--noctis-space-2));
+    }
+    [data-slot="noctis-pagination-page"] {
+        --_pagination-page-gap: var(--noctis-pagination-page-gap, var(--noctis-space-2));
+        --_pagination-page-inline-size: var(--noctis-pagination-page-inline-size, 3.5rem);
+        --_pagination-page-block-size: var(--noctis-pagination-page-block-size, var(--noctis-size-control-md));
+    }
+    [data-slot="noctis-pagination-separator"] {
+        --_pagination-separator-color: var(--noctis-pagination-separator-color, var(--noctis-color-border));
+        --_pagination-separator-inline-size: var(--noctis-pagination-separator-inline-size, 1px);
+        --_pagination-separator-block-size: var(--noctis-pagination-separator-block-size, 1.5rem);
+    }
+    [data-slot="noctis-pagination"][data-size="sm"] [data-slot="noctis-pagination-page"] {
+        --_pagination-page-block-size: var(--noctis-pagination-page-block-size, var(--noctis-size-control-sm));
+    }
     [data-slot="noctis-accordion-trigger"] {
         --_accordion-trigger-padding-inline: var(--noctis-accordion-trigger-padding-inline, 0);
         --_accordion-trigger-padding-block: var(--noctis-accordion-trigger-padding-block, var(--noctis-space-4));
@@ -2104,6 +2127,45 @@
         --_combobox-input-height: var(--noctis-combobox-input-height, var(--noctis-size-control-lg));
         --_combobox-input-padding-inline: var(--noctis-combobox-input-padding-inline, 0.875rem);
     }
+    [data-slot="noctis-command"] {
+        --_command-inset-block-start: var(--noctis-command-inset-block-start, 12vh);
+        --_command-height: var(--noctis-command-height, min(60vh, 460px));
+        --_command-width: var(--noctis-command-width, min(40rem, 92vw));
+        --_command-border-radius: var(--noctis-command-border-radius, var(--noctis-radius-md));
+        --_command-transition-duration: var(--noctis-command-transition-duration, var(--noctis-duration-overlay));
+    }
+    [data-slot="noctis-command-input"] {
+        --_command-input-height: var(--noctis-command-input-height, 3rem);
+    }
+    [data-slot="noctis-command-list"] {
+        --_command-list-padding: var(--noctis-command-list-padding, 0.375rem);
+        --_command-list-height: var(--noctis-command-list-height, auto);
+        --_command-list-transition-duration: var(--noctis-command-list-transition-duration, var(--noctis-duration-regular));
+    }
+    [data-slot="noctis-command-item"] {
+        --_command-item-height: var(--noctis-command-item-height, 2.5rem);
+        --_command-item-padding-inline: var(--noctis-command-item-padding-inline, 0.375rem);
+        --_command-item-padding-block: var(--noctis-command-item-padding-block, 0.25rem);
+        --_command-item-gap: var(--noctis-command-item-gap, 0.5rem);
+        --_command-item-border-radius: var(--noctis-command-item-border-radius, var(--noctis-radius-sm));
+        --_command-item-color: var(--noctis-command-item-color, var(--noctis-color-secondary));
+        --_command-item-color-highlighted: var(--noctis-command-item-color-highlighted, var(--noctis-color-foreground));
+        --_command-item-background-color-highlighted: var(
+            --noctis-command-item-background-color-highlighted,
+            var(--noctis-color-control-ghost-hover)
+        );
+        --_command-item-background-color-active: var(
+            --noctis-command-item-background-color-active,
+            var(--noctis-color-control-ghost-selected)
+        );
+    }
+    [data-slot="noctis-command-empty"] {
+        --_command-empty-padding-block: var(--noctis-command-empty-padding-block, var(--noctis-space-6));
+    }
+    [data-slot="noctis-command-group-label"] {
+        --_command-group-label-padding-inline: var(--noctis-command-group-label-padding-inline, var(--noctis-space-2\.5));
+        --_command-group-label-padding-inline-start: var(--noctis-command-group-label-padding-inline-start, 0.375rem);
+    }
     [data-slot="noctis-search-dialog"] {
         --_search-dialog-inset-block-start: var(--noctis-search-dialog-inset-block-start, 12vh);
         --_search-dialog-height: var(--noctis-search-dialog-height, min(56vh, 420px));
@@ -2462,6 +2524,62 @@
     [data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-icon"] {
         --_badge-icon-size: var(--noctis-badge-icon-size, 0.75rem);
     }
+    [data-slot="noctis-skeleton"] {
+        --_skeleton-root-gap: var(--noctis-skeleton-root-gap, var(--noctis-space-3));
+    }
+    [data-slot="noctis-skeleton-box"],
+    [data-slot="noctis-skeleton-circle"],
+    [data-slot="noctis-skeleton-line"] {
+        --_skeleton-fill-background-color: var(--noctis-skeleton-fill-background-color, var(--noctis-color-well));
+        --_skeleton-shimmer-background-color: var(--noctis-skeleton-shimmer-background-color, var(--noctis-color-surface-raised));
+        --_skeleton-shimmer-animation-duration: var(
+            --noctis-skeleton-shimmer-animation-duration,
+            calc(var(--noctis-duration-slow) * 4)
+        );
+    }
+    [data-slot="noctis-skeleton-box"] {
+        --_skeleton-box-block-size: var(--noctis-skeleton-box-block-size, 1.25rem);
+        --_skeleton-box-border-radius: var(--noctis-skeleton-box-border-radius, var(--noctis-radius-md));
+    }
+    [data-slot="noctis-skeleton-circle"] {
+        --_skeleton-circle-size: var(--noctis-skeleton-circle-size, 2.5rem);
+    }
+    [data-slot="noctis-skeleton-line"] {
+        --_skeleton-line-block-size: var(--noctis-skeleton-line-block-size, 0.7em);
+        --_skeleton-line-border-radius: var(--noctis-skeleton-line-border-radius, var(--noctis-radius-sm));
+    }
+    [data-slot="noctis-skeleton-text"] {
+        --_skeleton-text-gap: var(--noctis-skeleton-text-gap, var(--noctis-space-2));
+    }
+    [data-slot="noctis-breadcrumb"] {
+        --_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.375rem);
+        --_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-small));
+    }
+    [data-slot="noctis-breadcrumb-list"] {
+        --_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.375rem);
+    }
+    [data-slot="noctis-breadcrumb-icon"] {
+        --_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 1rem);
+    }
+    [data-slot="noctis-breadcrumb-separator"] {
+        --_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 1rem);
+    }
+    [data-slot="noctis-breadcrumb-link"] {
+        --_breadcrumb-link-border-radius: var(--noctis-breadcrumb-link-border-radius, var(--noctis-radius-sm));
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] {
+        --_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.25rem);
+        --_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-mini));
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-list"] {
+        --_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.25rem);
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-icon"] {
+        --_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 0.875rem);
+    }
+    [data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-separator"] {
+        --_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 0.875rem);
+    }
     [data-slot="noctis-otp-field"] {
         --_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
     }