seblify 0.2.1 → 0.3.0

package/dist/design-system/theme/tokens.js

@@ -113,6 +113,30 @@ const themeTokens = [
         value: '#ffffff',
         description: 'Text or foreground placed on accent fills.',
     },
+    {
+        name: '--seblify-color-fill-secondary',
+        category: 'Fill',
+        value: '#5b5fc7',
+        description: 'Secondary accent fill for alternate selected states.',
+    },
+    {
+        name: '--seblify-color-fill-secondary-text',
+        category: 'Fill',
+        value: '#ffffff',
+        description: 'Text or foreground placed on secondary fills.',
+    },
+    {
+        name: '--seblify-color-fill-strong',
+        category: 'Fill',
+        value: '#172033',
+        description: 'Strong neutral fill for high-contrast emphasis.',
+    },
+    {
+        name: '--seblify-color-fill-strong-text',
+        category: 'Fill',
+        value: '#ffffff',
+        description: 'Text or foreground placed on strong neutral fills.',
+    },
     {
         name: '--seblify-color-info-surface',
         category: 'Status',
@@ -131,6 +155,24 @@ const themeTokens = [
         value: '#102f55',
         description: 'Text on info status surfaces.',
     },
+    {
+        name: '--seblify-color-secondary-surface',
+        category: 'Status',
+        value: '#f0efff',
+        description: 'Secondary tone surface.',
+    },
+    {
+        name: '--seblify-color-secondary-border',
+        category: 'Status',
+        value: '#c8c6f4',
+        description: 'Secondary tone border.',
+    },
+    {
+        name: '--seblify-color-secondary-text',
+        category: 'Status',
+        value: '#2f316f',
+        description: 'Text on secondary tone surfaces.',
+    },
     {
         name: '--seblify-color-success-surface',
         category: 'Status',
@@ -215,5 +257,11 @@ const themeTokens = [
         value: '0 10px 24px rgb(20 61 37 / 14%)',
         description: 'Soft shadow for status messages.',
     },
+    {
+        name: '--seblify-z-index-tooltip',
+        category: 'Layer',
+        value: '30',
+        description: 'Layer for portaled tooltip bubbles.',
+    },
 ];
 export default themeTokens;

package/dist/icons/generated/check-thick.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.99906 20.4199L2.78906 14.2099L5.61906 11.3799L8.99906 14.7699L18.8791 4.87988L21.7091 7.70988L8.99906 20.4199Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/check-thick.svelte.d.ts

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

package/dist/icons/generated/check.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="M21 6.99984L9 18.9998L3.5 13.4998L4.91 12.0898L9 16.1698L19.59 5.58984L21 6.99984Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

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

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

package/dist/icons/generated/close-thick.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="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/close-thick.svelte.d.ts

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

package/dist/icons/generated/close.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="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

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

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

package/dist/icons/generated/index.d.ts

@@ -34,6 +34,8 @@ export { default as ChatProcessingIcon } from './chat-processing.svelte';
 export { default as ChatQuestionOutlineIcon } from './chat-question-outline.svelte';
 export { default as ChatQuestionIcon } from './chat-question.svelte';
 export { default as ChatIcon } from './chat.svelte';
+export { default as CheckThickIcon } from './check-thick.svelte';
+export { default as CheckIcon } from './check.svelte';
 export { default as ChevronDoubleDownIcon } from './chevron-double-down.svelte';
 export { default as ChevronDoubleLeftIcon } from './chevron-double-left.svelte';
 export { default as ChevronDoubleRightIcon } from './chevron-double-right.svelte';
@@ -61,6 +63,8 @@ export { default as ClipboardTextOutlineIcon } from './clipboard-text-outline.sv
 export { default as ClipboardTextIcon } from './clipboard-text.svelte';
 export { default as ClockOutlineIcon } from './clock-outline.svelte';
 export { default as ClockIcon } from './clock.svelte';
+export { default as CloseThickIcon } from './close-thick.svelte';
+export { default as CloseIcon } from './close.svelte';
 export { default as CogOutlineIcon } from './cog-outline.svelte';
 export { default as CogIcon } from './cog.svelte';
 export { default as CopyIcon } from './copy.svelte';

package/dist/icons/generated/index.js

@@ -34,6 +34,8 @@ export { default as ChatProcessingIcon } from './chat-processing.svelte';
 export { default as ChatQuestionOutlineIcon } from './chat-question-outline.svelte';
 export { default as ChatQuestionIcon } from './chat-question.svelte';
 export { default as ChatIcon } from './chat.svelte';
+export { default as CheckThickIcon } from './check-thick.svelte';
+export { default as CheckIcon } from './check.svelte';
 export { default as ChevronDoubleDownIcon } from './chevron-double-down.svelte';
 export { default as ChevronDoubleLeftIcon } from './chevron-double-left.svelte';
 export { default as ChevronDoubleRightIcon } from './chevron-double-right.svelte';
@@ -61,6 +63,8 @@ export { default as ClipboardTextOutlineIcon } from './clipboard-text-outline.sv
 export { default as ClipboardTextIcon } from './clipboard-text.svelte';
 export { default as ClockOutlineIcon } from './clock-outline.svelte';
 export { default as ClockIcon } from './clock.svelte';
+export { default as CloseThickIcon } from './close-thick.svelte';
+export { default as CloseIcon } from './close.svelte';
 export { default as CogOutlineIcon } from './cog-outline.svelte';
 export { default as CogIcon } from './cog.svelte';
 export { default as CopyIcon } from './copy.svelte';

package/dist/icons/generated/manifest.js

@@ -308,6 +308,20 @@ export const iconManifest = [
         "name": "chat",
         "tags": []
     },
+    {
+        "componentName": "CheckThickIcon",
+        "folder": "check",
+        "name": "check-thick",
+        "tags": [
+            "thick"
+        ]
+    },
+    {
+        "componentName": "CheckIcon",
+        "folder": "check",
+        "name": "check",
+        "tags": []
+    },
     {
         "componentName": "ChevronDoubleDownIcon",
         "folder": "chevron",
@@ -537,6 +551,20 @@ export const iconManifest = [
         "name": "clock",
         "tags": []
     },
+    {
+        "componentName": "CloseThickIcon",
+        "folder": "close",
+        "name": "close-thick",
+        "tags": [
+            "thick"
+        ]
+    },
+    {
+        "componentName": "CloseIcon",
+        "folder": "close",
+        "name": "close",
+        "tags": []
+    },
     {
         "componentName": "CogOutlineIcon",
         "folder": "cog",

package/dist/index.d.ts

@@ -1,11 +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';
@@ -14,6 +19,7 @@ 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/navigation/sidebar/sidebar/Sidebar.svelte';
 export { default as SegmentControl } from './components/action/input/select/segment-control/SegmentControl.svelte';
@@ -30,6 +36,9 @@ export { default as ThemeSwitch } from './components/action/input/select/theme-s
 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, 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';

package/dist/index.js

@@ -1,11 +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';
@@ -14,6 +19,7 @@ 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/navigation/sidebar/sidebar/Sidebar.svelte';
 export { default as SegmentControl } from './components/action/input/select/segment-control/SegmentControl.svelte';
@@ -30,3 +36,6 @@ export { default as ThemeSwitch } from './components/action/input/select/theme-s
 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

@@ -37,6 +37,14 @@
   --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);
@@ -45,6 +53,17 @@
   --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);

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.1",
+  "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",
@@ -24,6 +25,13 @@
     "!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": {
@@ -52,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",