seblify 0.2.0 → 0.3.0

package/dist/icons/generated/triangle-small.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15H16L12 8" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/triangle-small.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const TriangleSmall: import("svelte").Component<Props, {}, "">;
+type TriangleSmall = ReturnType<typeof TriangleSmall>;
+export default TriangleSmall;

package/dist/icons/generated/triangle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 21H23L12 2" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/triangle.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const Triangle: import("svelte").Component<Props, {}, "">;
+type Triangle = ReturnType<typeof Triangle>;
+export default Triangle;

package/dist/icons/generated/view-grid-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 11H11V3H3M5 5H9V9H5M13 21H21V13H13M15 15H19V19H15M3 21H11V13H3M5 15H9V19H5M13 3V11H21V3M19 9H15V5H19V9Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/view-grid-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ViewGridOutline: import("svelte").Component<Props, {}, "">;
+type ViewGridOutline = ReturnType<typeof ViewGridOutline>;
+export default ViewGridOutline;

package/dist/icons/generated/view-grid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 11H11V3H3M3 21H11V13H3M13 21H21V13H13M13 3V11H21V3" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/view-grid.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ViewGrid: import("svelte").Component<Props, {}, "">;
+type ViewGrid = ReturnType<typeof ViewGrid>;
+export default ViewGrid;

package/dist/index.d.ts

@@ -1,10 +1,16 @@
 export { default as AppShell } from './components/framework/layout/container/app-shell/AppShell.svelte';
+export { default as Accordion } from './components/display/typography/accordion/Accordion.svelte';
+export { default as AccordionGroup } from './components/display/typography/accordion/AccordionGroup.svelte';
 export { default as Badge } from './components/display/annotation/badge/Badge.svelte';
 export { default as Banner } from './components/Banner.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Breadcrumb } from './components/framework/navigation/context/breadcrumb/Breadcrumb.svelte';
 export { default as Checkbox } from './components/action/input/select/checkbox/Checkbox.svelte';
+export { createCheckboxRelations, type CheckboxRelations, type CheckboxRelationsConfig, type CheckboxRelationsGroupConfig, type CheckboxRelationsGroupState, type CheckboxRelationsId, type CheckboxRelationsItemConfig, type CheckboxRelationsItemState, type CheckboxRelationsVisualState, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
 export { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
+export { default as Collapse } from './components/display/motion/collapse/Collapse.svelte';
+export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.svelte';
+export { default as Duration } from './components/display/data-display/metric/duration/Duration.svelte';
 export { default as Eyebrow } from './components/display/typography/eyebrow/Eyebrow.svelte';
 export { default as Grid } from './components/framework/layout/alignment/grid/Grid.svelte';
 export { default as Highlight } from './components/display/typography/highlight/Highlight.svelte';
@@ -13,10 +19,12 @@ export { default as LoadingDots } from './components/display/feedback/loading/lo
 export { default as Paper } from './components/framework/surface/paper/Paper.svelte';
 export { default as PageHeader } from './components/framework/layout/container/page-header/PageHeader.svelte';
 export { default as PinInput } from './components/action/input/field/pin-input/PinInput.svelte';
+export { default as RelativeTime } from './components/display/data-display/metric/relative-time/RelativeTime.svelte';
 export { default as Row } from './components/framework/layout/alignment/row/Row.svelte';
-export { default as Sidebar } from './components/framework/layout/container/sidebar/Sidebar.svelte';
+export { default as Sidebar } from './components/framework/navigation/sidebar/sidebar/Sidebar.svelte';
 export { default as SegmentControl } from './components/action/input/select/segment-control/SegmentControl.svelte';
-export { default as Sidenav } from './components/framework/navigation/sidenav/Sidenav.svelte';
+export { default as Sidenav } from './components/framework/navigation/sidebar/sidenav/Sidenav.svelte';
+export { default as SidenavItem } from './components/framework/navigation/sidebar/sidenav/SidenavItem.svelte';
 export { default as Slider } from './components/action/input/select/slider/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as Spinner } from './components/display/feedback/loading/spinner/Spinner.svelte';
@@ -25,8 +33,13 @@ export { default as Switch } from './components/action/input/select/switch/Switc
 export { default as Tag } from './components/display/annotation/tag/Tag.svelte';
 export { default as TagGroup } from './components/display/annotation/tag-group/TagGroup.svelte';
 export { default as ThemeSwitch } from './components/action/input/select/theme-switch/ThemeSwitch.svelte';
+export { default as Timeline } from './components/display/data-display/visual/timeline/Timeline.svelte';
+export { default as TimelineItem } from './components/display/data-display/visual/timeline/TimelineItem.svelte';
 export { default as Toast } from './components/Toast.svelte';
-export type { SidenavItem } from './components/framework/navigation/sidenav/sidenav';
+export { default as Tooltip } from './components/framework/overlay/tooltip/Tooltip.svelte';
+export { formatDuration, type DurationFormat, type DurationRounding, type DurationStyle, type DurationUnit, type FormatDurationOptions, } from './components/utility/format/duration/formatDuration';
+export { formatRelativeTime, type FormatRelativeTimeOptions, type RelativeTimeDirection, type RelativeTimeInput, type RelativeTimeLabel, type RelativeTimeMode, type RelativeTimePresentation, type RelativeTimeState, type RelativeTimeStyle, type RelativeTimeUnit, type RelativeTimeUnitSteps, } from './components/utility/format/relative-time/formatRelativeTime';
+export type { SidenavActionDetail, SidenavIconComponent, SidenavItemData, SidenavItemKind, } from './components/framework/navigation/sidebar/sidenav/sidenav';
 export type { ComponentDocExample, ComponentDocMetadata, ComponentStatus, DocPageMetadata, DocSectionMetadata, } from './components/component-doc';
 export type { SeblifyProps } from './design-system/reserved-props/type';
 export type { CustomCssSize } from './design-system/reserved-props/complex-types';

package/dist/index.js

@@ -1,10 +1,16 @@
 export { default as AppShell } from './components/framework/layout/container/app-shell/AppShell.svelte';
+export { default as Accordion } from './components/display/typography/accordion/Accordion.svelte';
+export { default as AccordionGroup } from './components/display/typography/accordion/AccordionGroup.svelte';
 export { default as Badge } from './components/display/annotation/badge/Badge.svelte';
 export { default as Banner } from './components/Banner.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Breadcrumb } from './components/framework/navigation/context/breadcrumb/Breadcrumb.svelte';
 export { default as Checkbox } from './components/action/input/select/checkbox/Checkbox.svelte';
+export { createCheckboxRelations, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
 export { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
+export { default as Collapse } from './components/display/motion/collapse/Collapse.svelte';
+export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.svelte';
+export { default as Duration } from './components/display/data-display/metric/duration/Duration.svelte';
 export { default as Eyebrow } from './components/display/typography/eyebrow/Eyebrow.svelte';
 export { default as Grid } from './components/framework/layout/alignment/grid/Grid.svelte';
 export { default as Highlight } from './components/display/typography/highlight/Highlight.svelte';
@@ -13,10 +19,12 @@ export { default as LoadingDots } from './components/display/feedback/loading/lo
 export { default as Paper } from './components/framework/surface/paper/Paper.svelte';
 export { default as PageHeader } from './components/framework/layout/container/page-header/PageHeader.svelte';
 export { default as PinInput } from './components/action/input/field/pin-input/PinInput.svelte';
+export { default as RelativeTime } from './components/display/data-display/metric/relative-time/RelativeTime.svelte';
 export { default as Row } from './components/framework/layout/alignment/row/Row.svelte';
-export { default as Sidebar } from './components/framework/layout/container/sidebar/Sidebar.svelte';
+export { default as Sidebar } from './components/framework/navigation/sidebar/sidebar/Sidebar.svelte';
 export { default as SegmentControl } from './components/action/input/select/segment-control/SegmentControl.svelte';
-export { default as Sidenav } from './components/framework/navigation/sidenav/Sidenav.svelte';
+export { default as Sidenav } from './components/framework/navigation/sidebar/sidenav/Sidenav.svelte';
+export { default as SidenavItem } from './components/framework/navigation/sidebar/sidenav/SidenavItem.svelte';
 export { default as Slider } from './components/action/input/select/slider/Slider.svelte';
 export { default as Snackbar } from './components/Snackbar.svelte';
 export { default as Spinner } from './components/display/feedback/loading/spinner/Spinner.svelte';
@@ -25,4 +33,9 @@ export { default as Switch } from './components/action/input/select/switch/Switc
 export { default as Tag } from './components/display/annotation/tag/Tag.svelte';
 export { default as TagGroup } from './components/display/annotation/tag-group/TagGroup.svelte';
 export { default as ThemeSwitch } from './components/action/input/select/theme-switch/ThemeSwitch.svelte';
+export { default as Timeline } from './components/display/data-display/visual/timeline/Timeline.svelte';
+export { default as TimelineItem } from './components/display/data-display/visual/timeline/TimelineItem.svelte';
 export { default as Toast } from './components/Toast.svelte';
+export { default as Tooltip } from './components/framework/overlay/tooltip/Tooltip.svelte';
+export { formatDuration, } from './components/utility/format/duration/formatDuration';
+export { formatRelativeTime, } from './components/utility/format/relative-time/formatRelativeTime';

package/dist/styles/tone-context.css

@@ -0,0 +1,113 @@
+:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}

package/dist/theme.css

@@ -21,8 +21,12 @@
   --seblify-color-fill-accent-text: #ffffff;
   --seblify-color-fill-primary: var(--seblify-color-fill-accent);
   --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
+  --seblify-color-fill-secondary: #5b5fc7;
+  --seblify-color-fill-secondary-text: #ffffff;
   --seblify-color-fill-neutral: #516176;
   --seblify-color-fill-neutral-text: #ffffff;
+  --seblify-color-fill-strong: #172033;
+  --seblify-color-fill-strong-text: #ffffff;
   --seblify-color-fill-success: #1f7a3f;
   --seblify-color-fill-success-text: #ffffff;
   --seblify-color-fill-danger: #c93434;
@@ -36,6 +40,9 @@
   --seblify-color-info-surface: #eaf3ff;
   --seblify-color-info-border: #bfd1ea;
   --seblify-color-info-text: #102f55;
+  --seblify-color-secondary-surface: #f0efff;
+  --seblify-color-secondary-border: #c8c6f4;
+  --seblify-color-secondary-text: #2f316f;
   --seblify-color-success-surface: #e8f8ee;
   --seblify-color-success-border: #b8ddc7;
   --seblify-color-success-text: #143d25;
@@ -50,6 +57,7 @@
   --seblify-shadow-control: 0 1px 3px rgb(16 24 40 / 24%);
   --seblify-shadow-raised: 0 12px 28px rgb(23 32 51 / 22%);
   --seblify-shadow-status: 0 10px 24px rgb(20 61 37 / 14%);
+  --seblify-z-index-tooltip: 30;
 }
 
 [data-theme='dark'] {
@@ -74,8 +82,12 @@
   --seblify-color-fill-accent-text: #092d31;
   --seblify-color-fill-primary: var(--seblify-color-fill-accent);
   --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
+  --seblify-color-fill-secondary: #b8baff;
+  --seblify-color-fill-secondary-text: #16172f;
   --seblify-color-fill-neutral: #aab7c5;
   --seblify-color-fill-neutral-text: #12181f;
+  --seblify-color-fill-strong: #020617;
+  --seblify-color-fill-strong-text: #ffffff;
   --seblify-color-fill-success: #58d77b;
   --seblify-color-fill-success-text: #082211;
   --seblify-color-fill-danger: #ff7a7a;
@@ -89,6 +101,9 @@
   --seblify-color-info-surface: #10243a;
   --seblify-color-info-border: #2f5f91;
   --seblify-color-info-text: #b9dcff;
+  --seblify-color-secondary-surface: #24234a;
+  --seblify-color-secondary-border: #6c6fd1;
+  --seblify-color-secondary-text: #dbddff;
   --seblify-color-success-surface: #123220;
   --seblify-color-success-border: #3d7951;
   --seblify-color-success-text: #b9f3c8;
@@ -128,8 +143,12 @@
     --seblify-color-fill-accent-text: #092d31;
     --seblify-color-fill-primary: var(--seblify-color-fill-accent);
     --seblify-color-fill-primary-text: var(--seblify-color-fill-accent-text);
+    --seblify-color-fill-secondary: #b8baff;
+    --seblify-color-fill-secondary-text: #16172f;
     --seblify-color-fill-neutral: #aab7c5;
     --seblify-color-fill-neutral-text: #12181f;
+    --seblify-color-fill-strong: #020617;
+    --seblify-color-fill-strong-text: #ffffff;
     --seblify-color-fill-success: #58d77b;
     --seblify-color-fill-success-text: #082211;
     --seblify-color-fill-danger: #ff7a7a;
@@ -143,6 +162,9 @@
     --seblify-color-info-surface: #10243a;
     --seblify-color-info-border: #2f5f91;
     --seblify-color-info-text: #b9dcff;
+    --seblify-color-secondary-surface: #24234a;
+    --seblify-color-secondary-border: #6c6fd1;
+    --seblify-color-secondary-text: #dbddff;
     --seblify-color-success-surface: #123220;
     --seblify-color-success-border: #3d7951;
     --seblify-color-success-text: #b9f3c8;

package/package.json

@@ -2,11 +2,12 @@
   "name": "seblify",
   "private": false,
   "license": "MIT",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
-    "build": "svelte-package --input src --output dist --tsconfig ./tsconfig.json",
+    "build": "svelte-package --input src --output dist --tsconfig ./tsconfig.json && node ./scripts/test-results/clean-package-artifacts.mjs",
     "generate:icons": "node ./scripts/generate-icons.mjs",
+    "test": "node ./scripts/test-results/run-tests.mjs",
     "doc": "node ./scripts/change-log/document-change.mjs",
     "change-log:validate": "node ./scripts/change-log/validate-pending.mjs",
     "prepare-release": "node ./scripts/prepare-release.mjs",
@@ -17,12 +18,20 @@
   "files": [
     "dist",
     "README.md",
+    "!dist/**/*.txt",
     "!dist/**/*.md",
     "!dist/**/*.docs.d.ts",
     "!dist/**/*.docs.js",
     "!dist/**/doc-section.d.ts",
     "!dist/**/doc-section.js",
     "!dist/**/examples/**",
+    "!dist/**/*.test.d.ts",
+    "!dist/**/*.test.js",
+    "!dist/**/*.visual.d.ts",
+    "!dist/**/*.visual.js",
+    "!dist/**/*.test-results.json",
+    "!dist/testing/**",
+    "!dist/visual-tests/**",
     "!dist/icons/svg/**"
   ],
   "exports": {
@@ -51,9 +60,13 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "svelte": "^5.38.6"
+    "@testing-library/svelte": "^5.3.1",
+    "jsdom": "^29.1.1",
+    "svelte": "^5.38.6",
+    "vitest": "^4.0.0"
   },
   "dependencies": {
     "prompts": "^2.4.2",

package/dist/components/framework/layout/container/sidebar/Sidebar.svelte

@@ -1,134 +0,0 @@
-<script lang="ts">
-  import type { SeblifyProps } from 'seblify';
-  import type { Snippet } from 'svelte';
-
-  type Props = SeblifyProps<{
-    children?: Snippet;
-    header?: Snippet;
-    label?: string;
-    open?: boolean;
-  }>;
-
-  let {
-    children,
-    header,
-    label = 'Sidebar',
-    open = $bindable(false),
-  }: Props = $props();
-
-  function close(): void {
-    open = false;
-  }
-</script>
-
-{#if open}
-  <button
-    aria-label="Close sidebar"
-    class="sidebar-backdrop"
-    onclick={close}
-    type="button"
-  ></button>
-{/if}
-
-<aside aria-label={label} class:open class="sidebar">
-  <div class="sidebar__inner">
-    {#if header}
-      <div class="sidebar__header">
-        {@render header()}
-        <button
-          aria-label="Close sidebar"
-          class="sidebar__close"
-          onclick={close}
-          type="button"
-        >
-          Close
-        </button>
-      </div>
-    {/if}
-
-    <div class="sidebar__body">
-      {@render children?.()}
-    </div>
-  </div>
-</aside>
-
-<style>
-  .sidebar {
-    position: sticky;
-    top: 0;
-    z-index: 30;
-    height: 100vh;
-    overflow: auto;
-    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
-    background: var(--seblify-color-surface, #ffffff);
-    color: var(--seblify-color-text, #172033);
-  }
-
-  .sidebar__inner {
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    align-content: start;
-    gap: 8px;
-    min-height: 100%;
-    padding: var(--sidebar-padding, 18px 14px);
-  }
-
-  .sidebar__header {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
-  .sidebar__body {
-    align-self: start;
-    min-width: 0;
-  }
-
-  .sidebar__close,
-  .sidebar-backdrop {
-    display: none;
-  }
-
-  @media (max-width: 760px) {
-    .sidebar {
-      position: fixed;
-      inset: 0 auto 0 0;
-      width: min(320px, calc(100vw - 48px));
-      max-width: 100%;
-      border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
-      box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
-      transform: translateX(-100%);
-      transition: transform 160ms ease;
-    }
-
-    .open {
-      transform: translateX(0);
-    }
-
-    .sidebar__close {
-      display: inline-flex;
-      min-height: 34px;
-      align-items: center;
-      border: 1px solid var(--seblify-color-border, #c8d2df);
-      border-radius: 6px;
-      padding: 0 10px;
-      color: var(--seblify-color-text, #172033);
-      background: var(--seblify-color-surface, #ffffff);
-      font: inherit;
-      font-size: 0.875rem;
-      font-weight: 800;
-      cursor: pointer;
-    }
-
-    .sidebar-backdrop {
-      position: fixed;
-      inset: 0;
-      z-index: 20;
-      display: block;
-      border: 0;
-      background: rgb(13 17 23 / 48%);
-      cursor: pointer;
-    }
-  }
-</style>

package/dist/components/framework/layout/container/sidebar/Sidebar.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Sidebar: import("svelte").Component<{
-    children?: Snippet | undefined;
-    header?: Snippet | undefined;
-    label?: string | undefined;
-    open?: boolean | undefined;
-}, {}, "open">;
-type Sidebar = ReturnType<typeof Sidebar>;
-export default Sidebar;

package/dist/components/framework/navigation/sidenav/Sidenav.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  import type { SeblifyProps } from 'seblify';
-  import { untrack } from 'svelte';
-  import SidenavTree from './SidenavTree.svelte';
-  import type { SidenavItem } from './sidenav';
-
-  type Props = SeblifyProps<{
-    items: SidenavItem[];
-    currentHref?: string;
-    label?: string;
-  }>;
-
-  let { items, currentHref, label = 'Navigation' }: Props = $props();
-  let expandedItemId = $state<string | undefined>();
-  let collapsedItemId = $state<string | undefined>();
-  let retainedExpandedItemId = $state<string | undefined>();
-  let previousSelectedItemId: string | undefined;
-  let selectedItemIds = $derived(findSelectedItemIds(items, currentHref));
-  let selectedItemId = $derived(selectedItemIds.at(-1));
-
-  $effect(() => {
-    const nextSelectedItemId = selectedItemId;
-
-    untrack(() => {
-      if (!nextSelectedItemId) {
-        return;
-      }
-
-      if (nextSelectedItemId !== previousSelectedItemId) {
-        expandedItemId = undefined;
-        collapsedItemId = undefined;
-      }
-
-      previousSelectedItemId = nextSelectedItemId;
-      retainedExpandedItemId = nextSelectedItemId;
-    });
-  });
-
-  function setItemOpen(id: string, open: boolean): void {
-    expandedItemId = open ? id : undefined;
-    collapsedItemId = open ? undefined : id;
-  }
-
-  function findSelectedItemIds(
-    navItems: SidenavItem[],
-    href: string | undefined,
-  ): string[] {
-    if (!href) {
-      return [];
-    }
-
-    for (const item of navItems) {
-      if (item.href === href) {
-        return [item.id];
-      }
-
-      const childPath = findSelectedItemIds(item.children ?? [], href);
-
-      if (item.children?.length && childPath.length) {
-        return [item.id, ...childPath];
-      }
-    }
-
-    return [];
-  }
-</script>
-
-<nav aria-label={label} class="sidenav">
-  <SidenavTree
-    activeItemIds={selectedItemIds}
-    {collapsedItemId}
-    {currentHref}
-    depth={0}
-    {expandedItemId}
-    {items}
-    onToggle={setItemOpen}
-    {retainedExpandedItemId}
-  />
-</nav>
-
-<style>
-  .sidenav {
-    color: var(--seblify-color-text-muted, #516176);
-    font-size: 0.925rem;
-  }
-</style>