seblify 0.2.0 → 0.2.1

package/dist/components/display/data-display/visual/timeline/TimelineItem.svelte

@@ -0,0 +1,470 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import {
+    getTimelineContext,
+    type TimelineItemSide,
+    type TimelineItemTone,
+  } from './context';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    contentSide?: TimelineItemSide;
+    label?: string;
+    labelSide?: TimelineItemSide;
+    marker?: Snippet;
+    text?: string;
+    tone?: TimelineItemTone;
+  }>;
+
+  let {
+    children,
+    class: className,
+    contentSide,
+    label,
+    labelSide,
+    marker,
+    text,
+    tone,
+    ...restProps
+  }: Props = $props();
+
+  const timeline = getTimelineContext();
+  const resolvedContentSide = $derived(contentSide ?? timeline.contentSide);
+  const resolvedLabelSide = $derived(labelSide ?? timeline.labelSide);
+  const resolvedTone = $derived(tone ?? timeline.tone);
+  const hasCustomContent = $derived(Boolean(children));
+
+  let markerContentElement = $state<HTMLSpanElement | undefined>(undefined);
+  let markerContentInlineSize = $state(0);
+  let markerContentBlockSize = $state(0);
+
+  $effect(() => {
+    if (!markerContentElement) {
+      markerContentInlineSize = 0;
+      markerContentBlockSize = 0;
+      return;
+    }
+
+    const updateMarkerContentSize = () => {
+      markerContentInlineSize = markerContentElement?.offsetWidth ?? 0;
+      markerContentBlockSize = markerContentElement?.offsetHeight ?? 0;
+    };
+
+    updateMarkerContentSize();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateMarkerContentSize();
+    });
+
+    resizeObserver.observe(markerContentElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  let labelSharesSide = $derived(resolvedContentSide === resolvedLabelSide);
+</script>
+
+<article
+  {...restProps}
+  class={`timeline-item${className ? ` ${className}` : ''}`}
+  data-content-side={resolvedContentSide}
+  data-label-side={resolvedLabelSide}
+  data-orientation={timeline.orientation}
+>
+  <div class="timeline-item__side timeline-item__side--start">
+    {#if resolvedContentSide === 'start'}
+      <div class="timeline-item__content">
+        {#if hasCustomContent}
+          {@render children?.()}
+        {:else if text}
+          {text}
+        {/if}
+      </div>
+    {/if}
+
+    {#if label && resolvedLabelSide === 'start'}
+      <div class="timeline-item__label" data-stacked={labelSharesSide}>
+        {label}
+      </div>
+    {/if}
+  </div>
+
+  <div
+    class="timeline-item__axis seblify-tone-context"
+    data-seblify-tone={resolvedTone}
+    style:--timeline-marker-content-block-size={`${markerContentBlockSize}px`}
+    style:--timeline-marker-content-inline-size={`${markerContentInlineSize}px`}
+  >
+    <span class="timeline-item__line timeline-item__line--before"></span>
+    <span class="timeline-item__marker">
+      {#if marker}
+        <span
+          bind:this={markerContentElement}
+          class="timeline-item__marker-content seblify-tone-publisher"
+        >
+          {@render marker()}
+        </span>
+      {:else}
+        <span class="timeline-item__marker-dot"></span>
+      {/if}
+    </span>
+    <span class="timeline-item__line timeline-item__line--after"></span>
+  </div>
+
+  <div class="timeline-item__side timeline-item__side--end">
+    {#if resolvedContentSide === 'end'}
+      <div class="timeline-item__content">
+        {#if hasCustomContent}
+          {@render children?.()}
+        {:else if text}
+          {text}
+        {/if}
+      </div>
+    {/if}
+
+    {#if label && resolvedLabelSide === 'end'}
+      <div class="timeline-item__label" data-stacked={labelSharesSide}>
+        {label}
+      </div>
+    {/if}
+  </div>
+</article>
+
+<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);
+}
+
+.timeline-item {
+    --timeline-line: var(--seblify-color-border, #c8d2df);
+    --timeline-line-before-opacity: 1;
+    --timeline-line-after-opacity: 1;
+    --timeline-item-label: var(--seblify-color-text-muted, #516176);
+    --timeline-item-axis-size: var(--timeline-axis-min-size, 2.5rem);
+    --timeline-gap-size: var(--timeline-gap, 1.5rem);
+    --timeline-marker-gap: 1.25rem;
+    --timeline-marker-size: 1.25rem;
+    --timeline-side-align-block: start;
+    --timeline-side-align-inline: start;
+    --timeline-side-text-align-inline: left;
+
+    display: grid;
+    min-width: 0;
+    color: var(--seblify-color-text, #172033);
+  }
+
+.timeline-item__side {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+.timeline-item__content,
+  .timeline-item__label {
+    min-width: 0;
+  }
+
+.timeline-item__label {
+    color: var(--timeline-item-label);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+.timeline-item__label[data-stacked='true'] {
+    margin-top: -0.125rem;
+  }
+
+.timeline-item__axis {
+    position: relative;
+    display: grid;
+    min-width: max(
+      var(--timeline-item-axis-size),
+      var(--timeline-marker-content-inline-size, 0px)
+    );
+    min-height: max(
+      var(--timeline-item-axis-size),
+      var(--timeline-marker-content-block-size, 0px)
+    );
+  }
+
+.timeline-item__line {
+    position: absolute;
+    background: var(--timeline-line);
+  }
+
+.timeline-item__marker {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    min-width: var(--timeline-marker-size);
+    min-height: var(--timeline-marker-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--seblify-tone-fill-text);
+  }
+
+:global([data-timeline-align='start']) .timeline-item {
+    --timeline-marker-center-block: calc(var(--timeline-marker-size) * 0.5);
+    --timeline-marker-center-inline: calc(var(--timeline-marker-size) * 0.5);
+    --timeline-side-align-block: start;
+    --timeline-side-align-inline: start;
+    --timeline-side-text-align-inline: left;
+  }
+
+:global([data-timeline-align='center']) .timeline-item {
+    --timeline-marker-center-block: 50%;
+    --timeline-marker-center-inline: 50%;
+    --timeline-side-align-block: center;
+    --timeline-side-align-inline: center;
+    --timeline-side-text-align-inline: center;
+  }
+
+:global([data-timeline-align='end']) .timeline-item {
+    --timeline-marker-center-block: calc(
+      100% - (var(--timeline-marker-size) * 0.5)
+    );
+    --timeline-marker-center-inline: calc(
+      100% - (var(--timeline-marker-size) * 0.5)
+    );
+    --timeline-side-align-block: end;
+    --timeline-side-align-inline: end;
+    --timeline-side-text-align-inline: right;
+  }
+
+.timeline-item__marker-content {
+    --seblify-current-tone-fill: var(--seblify-tone-fill);
+    --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+    --seblify-current-tone-text: var(--seblify-tone-text);
+    --seblify-current-tone-surface: var(--seblify-tone-surface);
+    --seblify-current-tone-border: var(--seblify-tone-border);
+    --seblify-current-size: var(--timeline-marker-size);
+
+    display: inline-flex;
+    min-width: var(--timeline-marker-size);
+    min-height: var(--timeline-marker-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--seblify-tone-fill);
+    line-height: 0;
+  }
+
+.timeline-item__marker-dot {
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 2px solid var(--seblify-color-surface, #ffffff);
+    border-radius: 999px;
+    background: var(--seblify-tone-fill);
+    box-shadow: 0 0 0 1px
+      color-mix(in srgb, var(--seblify-tone-fill) 20%, transparent);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: start;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side--start {
+    grid-column: 1;
+    text-align: right;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side--end {
+    grid-column: 3;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side {
+    align-self: stretch;
+    justify-content: var(--timeline-side-align-block);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__axis {
+    grid-column: 2;
+    align-self: stretch;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__marker {
+    inset-inline-start: 50%;
+    top: var(--timeline-marker-center-block);
+    transform: translate(-50%, -50%);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line {
+    width: 2px;
+    inset-inline-start: calc(50% - 1px);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line--before {
+    top: calc(var(--timeline-gap-size) * -0.5);
+    bottom: calc(
+      100% - var(--timeline-marker-center-block) + var(--timeline-marker-gap)
+    );
+    opacity: var(--timeline-line-before-opacity);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line--after {
+    top: calc(
+      var(--timeline-marker-center-block) + var(--timeline-marker-gap)
+    );
+    bottom: calc(var(--timeline-gap-size) * -0.5);
+    opacity: var(--timeline-line-after-opacity);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item {
+    grid-row: 1 / -1;
+    grid-template-rows: subgrid;
+    min-width: 12rem;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__side {
+    justify-self: stretch;
+    justify-items: var(--timeline-side-align-inline);
+    text-align: var(--timeline-side-text-align-inline);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__side--start {
+    grid-row: 1;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__axis {
+    grid-row: 2;
+    min-height: var(--timeline-item-axis-size);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__marker {
+    inset-block-start: 50%;
+    left: var(--timeline-marker-center-inline);
+    transform: translate(-50%, -50%);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__side--end {
+    grid-row: 3;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__line {
+    height: 2px;
+    inset-block-start: calc(50% - 1px);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__line--before {
+    inset-inline: calc(var(--timeline-gap-size) * -0.5)
+      calc(
+        100% - var(--timeline-marker-center-inline) +
+          var(--timeline-marker-gap)
+      );
+    opacity: var(--timeline-line-before-opacity);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__line--after {
+    inset-inline: calc(
+        var(--timeline-marker-center-inline) + var(--timeline-marker-gap)
+      )
+      calc(var(--timeline-gap-size) * -0.5);
+    opacity: var(--timeline-line-after-opacity);
+  }
+
+@media (max-width: 760px) {
+    :global([data-timeline-orientation='horizontal']) .timeline-item {
+      min-width: 10rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type TimelineItemSide, type TimelineItemTone } from './context';
+declare const TimelineItem: import("svelte").Component<{
+    [x: string]: unknown;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    contentSide?: TimelineItemSide | undefined;
+    label?: string | undefined;
+    labelSide?: TimelineItemSide | undefined;
+    marker?: Snippet | undefined;
+    text?: string | undefined;
+    tone?: TimelineItemTone | undefined;
+}, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

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

@@ -0,0 +1,14 @@
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineAlign = 'start' | 'center' | 'end';
+export type TimelineItemSide = 'start' | 'end';
+export type TimelineItemTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+interface TimelineContextValue {
+    align: TimelineAlign;
+    contentSide: TimelineItemSide;
+    labelSide: TimelineItemSide;
+    orientation: TimelineOrientation;
+    tone: TimelineItemTone;
+}
+export declare function setTimelineContext(value: TimelineContextValue): void;
+export declare function getTimelineContext(): TimelineContextValue;
+export {};

package/dist/components/display/data-display/visual/timeline/context.js

@@ -0,0 +1,14 @@
+import { getContext, setContext } from 'svelte';
+const timelineContextKey = Symbol('seblify-timeline');
+export function setTimelineContext(value) {
+    setContext(timelineContextKey, value);
+}
+export function getTimelineContext() {
+    return (getContext(timelineContextKey) ?? {
+        align: 'start',
+        contentSide: 'end',
+        labelSide: 'start',
+        orientation: 'vertical',
+        tone: 'primary',
+    });
+}