seblify 0.2.0 → 0.2.1

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

@@ -5,6 +5,7 @@ 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 { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
+export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.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';
@@ -14,9 +15,10 @@ export { default as Paper } from './components/framework/surface/paper/Paper.sve
 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 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 +27,10 @@ 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 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

@@ -5,6 +5,7 @@ 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 { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
+export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.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';
@@ -14,9 +15,10 @@ export { default as Paper } from './components/framework/surface/paper/Paper.sve
 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 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 +27,6 @@ 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';

package/dist/styles/tone-context.css

@@ -0,0 +1,94 @@
+: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='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='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/package.json

@@ -2,7 +2,7 @@
   "name": "seblify",
   "private": false,
   "license": "MIT",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "build": "svelte-package --input src --output dist --tsconfig ./tsconfig.json",
@@ -17,6 +17,7 @@
   "files": [
     "dist",
     "README.md",
+    "!dist/**/*.txt",
     "!dist/**/*.md",
     "!dist/**/*.docs.d.ts",
     "!dist/**/*.docs.js",

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>

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

@@ -1,8 +0,0 @@
-import type { SidenavItem } from './sidenav';
-declare const Sidenav: import("svelte").Component<{
-    items: SidenavItem[];
-    currentHref?: string | undefined;
-    label?: string | undefined;
-}, {}, "">;
-type Sidenav = ReturnType<typeof Sidenav>;
-export default Sidenav;