seblify 0.2.0 → 0.2.1

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

@@ -1,10 +1,25 @@
+import type { CustomCssSize } from 'seblify';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type SwitchAnimation = 'smooth' | 'snappy' | 'bouncy';
+type SwitchShape = 'pill' | 'floating' | 'line' | 'flat' | 'long';
+type SwitchSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+type SwitchTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type SwitchVariant = 'solid' | 'soft' | 'tint';
 declare const Switch: import("svelte").Component<{
+    animation?: SwitchAnimation | undefined;
     checked?: boolean | undefined;
+    description?: string | undefined;
     disabled?: boolean | undefined;
     label?: string | undefined;
-    description?: string | undefined;
     name?: string | 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,141 @@
     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='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);
+}
+
+.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 +183,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 +208,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/visual/timeline/Timeline.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import {
+    setTimelineContext,
+    type TimelineAlign,
+    type TimelineItemSide,
+    type TimelineItemTone,
+    type TimelineOrientation,
+  } from './context';
+
+  type TimelineGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    align?: TimelineAlign;
+    contentSide?: TimelineItemSide;
+    gap?: TimelineGap;
+    labelSide?: TimelineItemSide;
+    orientation?: TimelineOrientation;
+    tone?: TimelineItemTone;
+  }>;
+
+  let {
+    children,
+    class: className,
+    align = 'start',
+    contentSide = 'end',
+    gap = 'lg',
+    labelSide = 'start',
+    orientation = 'vertical',
+    tone = 'primary',
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: TimelineGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  const timelineContext = $state({
+    align: 'start' as TimelineAlign,
+    contentSide: 'end' as TimelineItemSide,
+    labelSide: 'start' as TimelineItemSide,
+    orientation: 'vertical' as TimelineOrientation,
+    tone: 'primary' as TimelineItemTone,
+  });
+
+  $effect(() => {
+    timelineContext.align = align;
+    timelineContext.contentSide = contentSide;
+    timelineContext.labelSide = labelSide;
+    timelineContext.orientation = orientation;
+    timelineContext.tone = tone;
+  });
+
+  const gapValue = $derived(cssLength(gap));
+
+  setTimelineContext(timelineContext);
+</script>
+
+<div
+  {...restProps}
+  class={`timeline${className ? ` ${className}` : ''}`}
+  data-timeline-align={align}
+  data-timeline-orientation={orientation}
+  style:--timeline-gap={gapValue}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .timeline {
+    --timeline-axis-min-size: 2.5rem;
+    --timeline-axis-gap: 0.5rem;
+
+    display: grid;
+    row-gap: var(--timeline-gap, 1.5rem);
+    column-gap: var(--timeline-axis-gap);
+    min-width: 0;
+  }
+
+  .timeline[data-timeline-orientation='vertical'] {
+    grid-template-columns:
+      max-content minmax(var(--timeline-axis-min-size), max-content)
+      minmax(0, 1fr);
+  }
+
+  .timeline[data-timeline-orientation='horizontal'] {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(12rem, 1fr);
+    grid-template-rows:
+      max-content minmax(var(--timeline-axis-min-size), max-content)
+      auto;
+    align-items: stretch;
+    row-gap: var(--timeline-axis-gap);
+    column-gap: var(--timeline-gap, 1.5rem);
+    padding-block: 0.25rem;
+  }
+
+  @media (max-width: 760px) {
+    .timeline {
+      --timeline-axis-min-size: 2rem;
+    }
+  }
+
+  .timeline :global(.timeline-item) {
+    --timeline-line-before-opacity: 1;
+    --timeline-line-after-opacity: 1;
+  }
+
+  .timeline :global(.timeline-item:first-child) {
+    --timeline-line-before-opacity: 0;
+  }
+
+  .timeline :global(.timeline-item:last-child) {
+    --timeline-line-after-opacity: 0;
+  }
+</style>

package/dist/components/display/data-display/visual/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+import { type TimelineAlign, type TimelineItemSide, type TimelineItemTone, type TimelineOrientation } from './context';
+type TimelineGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+declare const Timeline: import("svelte").Component<{
+    [x: string]: unknown;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    align?: TimelineAlign | undefined;
+    contentSide?: TimelineItemSide | undefined;
+    gap?: TimelineGap | undefined;
+    labelSide?: TimelineItemSide | undefined;
+    orientation?: TimelineOrientation | undefined;
+    tone?: TimelineItemTone | undefined;
+}, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;