seblify 0.2.1 → 0.4.0

package/dist/components/action/input/select/checkbox/tests/visual-fixtures/visual-state.js

@@ -0,0 +1,278 @@
+import { mount } from 'svelte';
+import '../../../../../../../theme.css';
+import Checkbox from '../../Checkbox.svelte';
+function createSection(className) {
+    const section = document.createElement('div');
+    section.className = className;
+    document.getElementById('checkbox-root').append(section);
+    return section;
+}
+mount(Checkbox, {
+    target: createSection('direct-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Direct checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});
+mount(Checkbox, {
+    target: createSection('indirect-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Indirect checkbox',
+        size: 'xl',
+        tone: 'primary',
+        visualState: 'indirect',
+    },
+});
+mount(Checkbox, {
+    target: createSection('intermediate-checkbox'),
+    props: {
+        animation: 'fade',
+        indeterminate: true,
+        label: 'Intermediate checkbox',
+        size: 'xl',
+        tone: 'primary',
+    },
+});
+mount(Checkbox, {
+    target: createSection('overflow-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Overflow checkbox',
+        size: 'xl',
+        tone: 'primary',
+        variant: 'overflow',
+    },
+});
+mount(Checkbox, {
+    target: createSection('overflow-small-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Small overflow checkbox',
+        size: '10px',
+        tone: 'primary',
+        variant: 'overflow',
+    },
+});
+mount(Checkbox, {
+    target: createSection('overflow-large-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Large overflow checkbox',
+        size: '40px',
+        tone: 'primary',
+        variant: 'overflow',
+    },
+});
+mount(Checkbox, {
+    target: createSection('overflow-indirect-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Indirect overflow checkbox',
+        size: 'xl',
+        tone: 'primary',
+        variant: 'overflow',
+        visualState: 'indirect',
+    },
+});
+mount(Checkbox, {
+    target: createSection('small-label-alignment-checkbox'),
+    props: {
+        label: 'Small label alignment checkbox',
+        size: '10px',
+    },
+});
+mount(Checkbox, {
+    target: createSection('small-description-alignment-checkbox'),
+    props: {
+        description: 'The small checkbox should align with the label line.',
+        label: 'Small description alignment checkbox',
+        size: '10px',
+    },
+});
+mount(Checkbox, {
+    target: createSection('top-aligned-description-checkbox'),
+    props: {
+        description: 'The text block is taller than this checkbox.',
+        label: 'Top aligned description checkbox',
+        size: 'xl',
+    },
+});
+mount(Checkbox, {
+    target: createSection('large-description-alignment-checkbox'),
+    props: {
+        description: 'The text block should center inside this tall checkbox.',
+        label: 'Large description alignment checkbox',
+        size: '64px',
+    },
+});
+mount(Checkbox, {
+    target: createSection('blank-checkbox'),
+    props: {
+        checked: true,
+        label: 'Blank checkbox',
+        size: 'xl',
+        tone: 'primary',
+        variant: 'blank',
+    },
+});
+mount(Checkbox, {
+    target: createSection('inset-checkbox'),
+    props: {
+        checked: true,
+        duration: 1000,
+        label: 'Inset checkbox',
+        size: 'xl',
+        tone: 'primary',
+        variant: 'inset',
+    },
+});
+for (const variant of ['blank', 'inset']) {
+    mount(Checkbox, {
+        target: createSection(`${variant}-intermediate-checkbox`),
+        props: {
+            indeterminate: true,
+            label: `${variant} intermediate checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant,
+        },
+    });
+    mount(Checkbox, {
+        target: createSection(`${variant}-indirect-checkbox`),
+        props: {
+            checked: true,
+            label: `${variant} indirect checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant,
+            visualState: 'indirect',
+        },
+    });
+    mount(Checkbox, {
+        target: createSection(`${variant}-indirect-intermediate-checkbox`),
+        props: {
+            indeterminate: true,
+            label: `${variant} indirect intermediate checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant,
+            visualState: 'indirect',
+        },
+    });
+}
+for (const animation of ['scale', 'draw', 'rise']) {
+    mount(Checkbox, {
+        target: createSection(`blank-${animation}-checkbox`),
+        props: {
+            animation,
+            duration: animation === 'scale' ? 1000 : undefined,
+            label: `Blank ${animation} checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant: 'blank',
+        },
+    });
+    mount(Checkbox, {
+        target: createSection(`inset-${animation}-checkbox`),
+        props: {
+            animation,
+            duration: animation === 'scale' ? 1000 : undefined,
+            label: `Inset ${animation} checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant: 'inset',
+        },
+    });
+}
+for (const variant of ['outline', 'inset', 'overflow']) {
+    mount(Checkbox, {
+        target: createSection(`${variant}-bump-checkbox`),
+        props: {
+            animation: 'bump',
+            duration: 600,
+            label: `${variant} bump checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant,
+        },
+    });
+}
+for (const animation of ['bump', 'pop']) {
+    mount(Checkbox, {
+        target: createSection(`blank-${animation}-checkbox`),
+        props: {
+            animation,
+            duration: 600,
+            label: `Blank ${animation} checkbox`,
+            size: 'xl',
+            tone: 'primary',
+            variant: 'blank',
+        },
+    });
+}
+mount(Checkbox, {
+    target: createSection('plain-bump-checkbox'),
+    props: {
+        animation: 'bump',
+        duration: 600,
+        label: 'Plain bump checkbox',
+        size: 'xl',
+        tone: 'primary',
+        variant: 'plain',
+    },
+});
+mount(Checkbox, {
+    target: createSection('direct-neutral-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Direct neutral checkbox',
+        size: 'xl',
+        tone: 'neutral',
+    },
+});
+mount(Checkbox, {
+    target: createSection('indirect-neutral-checkbox'),
+    props: {
+        animation: 'fade',
+        checked: true,
+        label: 'Indirect neutral checkbox',
+        size: 'xl',
+        tone: 'neutral',
+        visualState: 'indirect',
+    },
+});
+for (const variant of ['soft', 'tint', 'outline', 'plain']) {
+    mount(Checkbox, {
+        target: createSection(`direct-neutral-${variant}-checkbox`),
+        props: {
+            animation: 'fade',
+            checked: true,
+            label: `Direct neutral ${variant} checkbox`,
+            size: 'xl',
+            tone: 'neutral',
+            variant,
+        },
+    });
+    mount(Checkbox, {
+        target: createSection(`indirect-neutral-${variant}-checkbox`),
+        props: {
+            animation: 'fade',
+            checked: true,
+            label: `Indirect neutral ${variant} checkbox`,
+            size: 'xl',
+            tone: 'neutral',
+            variant,
+            visualState: 'indirect',
+        },
+    });
+}

package/dist/components/action/input/select/{theme-switch/ThemeSwitch.svelte → color-mode-switch/ColorModeSwitch.svelte}

@@ -2,10 +2,10 @@
   import type { SeblifyProps } from 'seblify';
   import SegmentControl from '../segment-control/SegmentControl.svelte';
 
-  type ThemeMode = 'system' | 'light' | 'dark';
+  type ColorMode = 'system' | 'light' | 'dark';
 
   type Props = SeblifyProps<{
-    value?: ThemeMode;
+    value?: ColorMode;
     label?: string;
     description?: string;
     name?: string;
@@ -14,13 +14,13 @@
 
   let {
     value = $bindable('system'),
-    label = 'Theme',
-    description = 'Choose how Seblify should resolve colors.',
-    name = 'seblify-theme',
+    label = 'Color mode',
+    description = 'Choose how Seblify resolves light and dark colors.',
+    name = 'seblify-color-mode',
     applyToDocument = true,
   }: Props = $props();
 
-  const options: { value: ThemeMode; label: string }[] = [
+  const options: { value: ColorMode; label: string }[] = [
     { value: 'system', label: 'System' },
     { value: 'light', label: 'Light' },
     { value: 'dark', label: 'Dark' },
@@ -32,11 +32,11 @@
     }
 
     if (value === 'system') {
-      delete document.documentElement.dataset.theme;
+      delete document.documentElement.dataset.colorMode;
       return;
     }
 
-    document.documentElement.dataset.theme = value;
+    document.documentElement.dataset.colorMode = value;
   });
 </script>
 

package/dist/components/action/input/select/color-mode-switch/ColorModeSwitch.svelte.d.ts

@@ -0,0 +1,10 @@
+type ColorMode = 'system' | 'light' | 'dark';
+declare const ColorModeSwitch: import("svelte").Component<{
+    value?: ColorMode | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+    name?: string | undefined;
+    applyToDocument?: boolean | undefined;
+}, {}, "value">;
+type ColorModeSwitch = ReturnType<typeof ColorModeSwitch>;
+export default ColorModeSwitch;

package/dist/components/action/input/select/segment-control/SegmentControl.svelte

@@ -196,7 +196,7 @@
     top: 3px;
     bottom: 3px;
     border-radius: 999px;
-    background: var(--seblify-color-fill-accent, #146a6f);
+    background: var(--seblify-color-primary-fill, #146a6f);
     transition:
       left 220ms cubic-bezier(0.22, 1, 0.36, 1),
       width 220ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -255,7 +255,7 @@
   }
 
   input:checked + .option-content {
-    color: var(--seblify-color-fill-accent-text, #ffffff);
+    color: var(--seblify-color-primary-fill-text, #ffffff);
   }
 
   label:has(input:focus-visible) .option-content {

package/dist/components/action/input/select/slider/Slider.svelte

@@ -62,7 +62,7 @@
 
   input {
     width: 100%;
-    accent-color: var(--seblify-color-fill-accent, #146a6f);
+    accent-color: var(--seblify-color-primary-fill, #146a6f);
   }
 
   output {