seblify 0.2.0 → 0.3.0

package/dist/components/action/input/select/switch/Switch.svelte.d.ts

@@ -1,10 +1,30 @@
+import type { CustomCssSize } from 'seblify';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type SwitchAnimation = 'smooth' | 'bouncy';
+type SwitchOrientation = 'horizontal' | 'vertical';
+type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
+type SwitchSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+type SwitchTone = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type SwitchVariant = 'solid' | 'soft' | 'tint' | 'outline';
 declare const Switch: import("svelte").Component<{
+    animation?: SwitchAnimation | undefined;
+    ariaLabel?: string | undefined;
     checked?: boolean | undefined;
+    description?: string | undefined;
     disabled?: boolean | undefined;
+    duration?: number | undefined;
+    focusTone?: SwitchTone | undefined;
     label?: string | undefined;
-    description?: string | undefined;
     name?: string | undefined;
+    orientation?: SwitchOrientation | undefined;
+    radius?: SwitchRadius | undefined;
+    shape?: SwitchShape | undefined;
+    showGripIcon?: boolean | undefined;
+    showTrackIcon?: boolean | undefined;
+    size?: SwitchSize | undefined;
+    tone?: SwitchTone | undefined;
     value?: string | undefined;
+    variant?: SwitchVariant | undefined;
 }, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/display/annotation/tag/Tag.svelte

@@ -30,49 +30,160 @@
     end,
     radius = 'sm',
     start,
-    tone = 'neutral',
+    tone,
     variant = 'tint',
   }: Props = $props();
 </script>
 
 <span
-  class="tag"
+  class="tag seblify-tone-context"
   data-border={border}
   data-radius={radius}
-  data-tone={tone}
+  data-seblify-tone={tone ?? 'inherit'}
   data-variant={variant}
 >
-  {#if start}
-    <span class="tag__media">
-      {@render start()}
+  <span class="tag__inner seblify-tone-publisher">
+    {#if start}
+      <span class="tag__media">
+        {@render start()}
+      </span>
+    {/if}
+
+    <span class="tag__content">
+      {#if children}
+        {@render children()}
+      {/if}
     </span>
-  {/if}
 
-  <span class="tag__content">
-    {#if children}
-      {@render children()}
+    {#if end}
+      <span class="tag__media">
+        {@render end()}
+      </span>
     {/if}
   </span>
-
-  {#if end}
-    <span class="tag__media">
-      {@render end()}
-    </span>
-  {/if}
 </span>
 
-<style>
-  .tag {
-    --tag-fill: var(--seblify-color-fill-neutral, #516176);
-    --tag-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
-    --tag-surface: var(--seblify-color-surface-muted, #d9e0e8);
+<style>: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);
+}
+
+.tag {
+    --tag-fill: var(--seblify-tone-fill);
+    --tag-fill-text: var(--seblify-tone-fill-text);
+    --tag-surface: var(--seblify-tone-surface);
     --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-text-muted, #516176);
-    --tag-border: var(--seblify-color-border, #c8d2df);
-    --seblify-current-tone-fill: var(--tag-fill);
-    --seblify-current-tone-text: var(--tag-text);
-    --seblify-current-tone-surface: var(--tag-surface);
-    --seblify-current-tone-border: var(--tag-border);
+    --tag-text: var(--seblify-tone-text);
+    --tag-border: var(--seblify-tone-border);
 
     display: inline-flex;
     max-width: 100%;
@@ -91,18 +202,21 @@
     white-space: nowrap;
   }
 
-  .tag__content {
+.tag__inner {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+.tag__content {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .tag__media {
-    --seblify-current-icon-size: 0.875rem;
-    --seblify-current-spinner-size: 0.875rem;
-    --seblify-current-spinner-width: 0.125rem;
-    --seblify-current-loading-dot-size: 0.25rem;
-    --seblify-current-loading-dots-gap: 0.1875rem;
+.tag__media {
+    --seblify-current-size: 0.875rem;
 
     display: inline-flex;
     min-width: 0.875rem;
@@ -113,114 +227,55 @@
     line-height: 0;
   }
 
-  .tag[data-radius='none'] {
+.tag[data-radius='none'] {
     border-radius: 0;
   }
 
-  .tag[data-radius='sm'] {
+.tag[data-radius='sm'] {
     border-radius: 0.25rem;
   }
 
-  .tag[data-radius='md'] {
+.tag[data-radius='md'] {
     border-radius: 0.375rem;
   }
 
-  .tag[data-radius='lg'] {
+.tag[data-radius='lg'] {
     border-radius: 0.5rem;
   }
 
-  .tag[data-radius='full'] {
+.tag[data-radius='full'] {
     border-radius: 999px;
   }
 
-  .tag[data-tone='neutral'] {
-    --tag-fill: var(--seblify-color-fill-neutral, #516176);
-    --tag-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
-    --tag-surface: var(--seblify-color-surface-muted, #d9e0e8);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-text-muted, #516176);
-    --tag-border: var(--seblify-color-border, #c8d2df);
-  }
-
-  .tag[data-tone='primary'] {
-    --tag-fill: var(--seblify-color-fill-primary, #146a6f);
-    --tag-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
-    --tag-surface: var(--seblify-color-surface-accent, #f7fbfb);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-fill-primary, #146a6f);
-    --tag-border: var(--seblify-color-border-accent, #9ab7ba);
-  }
-
-  .tag[data-tone='success'] {
-    --tag-fill: var(--seblify-color-fill-success, #1f7a3f);
-    --tag-fill-text: var(--seblify-color-fill-success-text, #ffffff);
-    --tag-surface: var(--seblify-color-success-surface, #e8f8ee);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-success-text, #143d25);
-    --tag-border: var(--seblify-color-success-border, #b8ddc7);
-  }
-
-  .tag[data-tone='danger'] {
-    --tag-fill: var(--seblify-color-fill-danger, #c93434);
-    --tag-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
-    --tag-surface: var(--seblify-color-error-surface, #fff0f0);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-error-text, #5a1717);
-    --tag-border: var(--seblify-color-error-border, #efb6b6);
-  }
-
-  .tag[data-tone='warning'] {
-    --tag-fill: var(--seblify-color-fill-warning, #8a5a00);
-    --tag-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
-    --tag-surface: var(--seblify-color-warning-surface, #fff6d8);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-warning-text, #4d3900);
-    --tag-border: var(--seblify-color-warning-border, #e8d28f);
-  }
-
-  .tag[data-tone='info'] {
-    --tag-fill: var(--seblify-color-fill-info, #1f6fb2);
-    --tag-fill-text: var(--seblify-color-fill-info-text, #ffffff);
-    --tag-surface: var(--seblify-color-info-surface, #eaf3ff);
-    --tag-default-text: var(--seblify-color-text, #172033);
-    --tag-text: var(--seblify-color-info-text, #102f55);
-    --tag-border: var(--seblify-color-info-border, #bfd1ea);
-  }
-
-  .tag[data-tone='inverse'] {
-    --tag-fill: var(--seblify-color-fill-inverse, #172033);
-    --tag-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
-    --tag-surface: var(--seblify-color-surface-inverse-hover, #263043);
+.tag[data-seblify-tone='inverse'] {
     --tag-default-text: var(--seblify-color-fill-inverse-text, #ffffff);
-    --tag-text: var(--seblify-color-fill-inverse-text, #ffffff);
-    --tag-border: var(--seblify-color-border-inverse, #263043);
   }
 
-  .tag[data-variant='solid'] {
+.tag[data-variant='solid'] {
     color: var(--tag-fill-text);
     background: var(--tag-fill);
   }
 
-  .tag[data-variant='soft'] {
+.tag[data-variant='soft'] {
     color: var(--tag-default-text);
     background: var(--tag-surface);
   }
 
-  .tag[data-variant='tint'] {
+.tag[data-variant='tint'] {
     color: var(--tag-text);
     background: var(--tag-surface);
   }
 
-  .tag[data-variant='plain'] {
+.tag[data-variant='plain'] {
     color: var(--tag-text);
     background: transparent;
   }
 
-  .tag[data-border='solid'] {
+.tag[data-border='solid'] {
     border-color: var(--tag-border);
   }
 
-  .tag[data-border='dash'] {
+.tag[data-border='dash'] {
     border-color: var(--tag-border);
     border-style: dashed;
   }

package/dist/components/display/data-display/metric/duration/Duration.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type {
+    DurationFormat,
+    DurationRounding,
+    DurationStyle,
+    DurationUnit,
+    FormatDurationOptions,
+  } from '../../../../utility/format/duration/formatDuration';
+  import { formatDuration } from '../../../../utility/format/duration/formatDuration';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    format?: DurationFormat;
+    largestUnit?: DurationUnit;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number;
+    minUnits?: number;
+    rounding?: DurationRounding;
+    smallestUnit?: DurationUnit;
+    unitStyle?: DurationStyle;
+    value: number;
+  }>;
+
+  let {
+    class: className,
+    format = 'unit',
+    largestUnit = 'day',
+    locale,
+    maxUnits = 2,
+    minUnits = 1,
+    rounding,
+    smallestUnit = 'second',
+    unitStyle = 'long',
+    value,
+    ...restProps
+  }: Props = $props();
+
+  const formatterOptions = $derived<FormatDurationOptions>({
+    format,
+    largestUnit,
+    locale,
+    maxUnits,
+    minUnits,
+    rounding,
+    smallestUnit,
+    style: unitStyle,
+  });
+  const text = $derived(formatDuration(value, formatterOptions));
+</script>
+
+<span
+  {...restProps}
+  class={`duration${className ? ` ${className}` : ''}`}
+>
+  {text}
+</span>
+
+<style>
+  .duration {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/duration/Duration.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DurationFormat, DurationRounding, DurationStyle, DurationUnit } from '../../../../utility/format/duration/formatDuration';
+declare const Duration: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    format?: DurationFormat | undefined;
+    largestUnit?: DurationUnit | undefined;
+    locale?: Intl.LocalesArgument;
+    maxUnits?: number | undefined;
+    minUnits?: number | undefined;
+    rounding?: DurationRounding | undefined;
+    smallestUnit?: DurationUnit | undefined;
+    unitStyle?: DurationStyle | undefined;
+    value: number;
+}, {}, "">;
+type Duration = ReturnType<typeof Duration>;
+export default Duration;

package/dist/components/display/data-display/metric/relative-time/RelativeTime.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type {
+    FormatRelativeTimeOptions,
+    RelativeTimeInput,
+    RelativeTimeLabel,
+    RelativeTimeMode,
+    RelativeTimePresentation,
+    RelativeTimeStyle,
+    RelativeTimeUnitSteps,
+  } from '../../../../utility/format/relative-time/formatRelativeTime';
+  import {
+    formatRelativeTime,
+    getRelativeTimeState,
+    relativeTimeDateTime,
+  } from '../../../../utility/format/relative-time/formatRelativeTime';
+  import type { SeblifyProps } from 'seblify';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    class?: string;
+    from?: RelativeTimeInput;
+    labels?: readonly RelativeTimeLabel[];
+    locale?: Intl.LocalesArgument;
+    mode?: RelativeTimeMode;
+    presentation?: RelativeTimePresentation;
+    unitStyle?: RelativeTimeStyle;
+    unitSteps?: RelativeTimeUnitSteps;
+    update?: 'auto' | false | number;
+    value: RelativeTimeInput;
+  }>;
+
+  let {
+    class: className,
+    from,
+    labels,
+    locale,
+    mode = 'time',
+    presentation = 'relative',
+    unitStyle = 'long',
+    unitSteps = 'detailed',
+    update = 'auto',
+    value,
+    ...restProps
+  }: Props = $props();
+
+  let currentFrom = $state(new Date());
+  let updateTimer: ReturnType<typeof window.setTimeout> | undefined;
+
+  const formatterOptions = $derived<FormatRelativeTimeOptions>({
+    from: from ?? currentFrom,
+    labels,
+    locale,
+    mode,
+    presentation,
+    style: unitStyle,
+    unitSteps,
+  });
+  const text = $derived(formatRelativeTime(value, formatterOptions));
+  const dateTime = $derived(relativeTimeDateTime(value));
+
+  function clearUpdateTimer(): void {
+    if (updateTimer === undefined) {
+      return;
+    }
+
+    window.clearTimeout(updateTimer);
+    updateTimer = undefined;
+  }
+
+  function updateCurrentFrom(): void {
+    currentFrom = new Date();
+  }
+
+  $effect(() => {
+    clearUpdateTimer();
+
+    if (from !== undefined || update === false) {
+      return;
+    }
+
+    const delay =
+      update === 'auto'
+        ? getRelativeTimeState(value, formatterOptions).updateInMilliseconds
+        : Math.max(1, update);
+
+    updateTimer = window.setTimeout(updateCurrentFrom, delay);
+
+    return clearUpdateTimer;
+  });
+</script>
+
+<time
+  {...restProps}
+  class={`relative-time${className ? ` ${className}` : ''}`}
+  datetime={dateTime}
+>
+  {text}
+</time>
+
+<style>
+  .relative-time {
+    white-space: nowrap;
+  }
+</style>

package/dist/components/display/data-display/metric/relative-time/RelativeTime.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { RelativeTimeInput, RelativeTimeLabel, RelativeTimeMode, RelativeTimePresentation, RelativeTimeStyle, RelativeTimeUnitSteps } from '../../../../utility/format/relative-time/formatRelativeTime';
+declare const RelativeTime: import("svelte").Component<{
+    [x: string]: unknown;
+    class?: string | undefined;
+    from?: RelativeTimeInput | undefined;
+    labels?: readonly RelativeTimeLabel[] | undefined;
+    locale?: Intl.LocalesArgument;
+    mode?: RelativeTimeMode | undefined;
+    presentation?: RelativeTimePresentation | undefined;
+    unitStyle?: RelativeTimeStyle | undefined;
+    unitSteps?: RelativeTimeUnitSteps | undefined;
+    update?: "auto" | false | number | undefined;
+    value: RelativeTimeInput;
+}, {}, "">;
+type RelativeTime = ReturnType<typeof RelativeTime>;
+export default RelativeTime;