seblify 0.1.4

package/dist/components/component-doc.d.ts

@@ -0,0 +1,23 @@
+export type ComponentStatus = 'draft' | 'planned' | 'stable';
+export interface ComponentDocExample {
+    id: string;
+    title: string;
+    summary: string;
+}
+export interface DocSectionMetadata {
+    title: string;
+    summary: string;
+    order?: number;
+}
+export interface DocPageMetadata {
+    id: string;
+    title: string;
+    summary: string;
+    status: ComponentStatus;
+    tags: string[];
+    related?: string[];
+    examples?: ComponentDocExample[];
+}
+export interface ComponentDocMetadata extends DocPageMetadata {
+    importName: string;
+}

package/dist/components/component-doc.js

@@ -0,0 +1 @@
+export {};

package/dist/components/display/annotation/badge/Badge.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { scale } from 'svelte/transition';
+
+  type BadgePlacement =
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'end'
+    | 'bottom-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'start';
+  type BadgeTone =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+  type BadgeShape = 'pill' | 'dot';
+
+  type Props = SeblifyProps<{
+    children?: Snippet;
+    fitToRounded?: boolean;
+    hideWhenEmpty?: boolean;
+    max?: number;
+    placement?: BadgePlacement;
+    shape?: BadgeShape;
+    tone?: BadgeTone;
+    value?: number | string;
+  }>;
+
+  let {
+    children,
+    fitToRounded = false,
+    hideWhenEmpty = false,
+    max = 99,
+    placement = 'top-end',
+    shape = 'pill',
+    tone = 'primary',
+    value,
+  }: Props = $props();
+
+  function hasMeaningfulValue(
+    sourceValue: number | string | undefined,
+  ): boolean {
+    if (sourceValue === undefined || sourceValue === null) {
+      return false;
+    }
+
+    if (typeof sourceValue === 'number') {
+      return sourceValue !== 0;
+    }
+
+    const trimmedValue = sourceValue.trim();
+
+    return trimmedValue.length > 0 && trimmedValue !== '0';
+  }
+
+  function formatValue(
+    sourceValue: number | string | undefined,
+    maximum: number,
+  ): string {
+    if (sourceValue === undefined || sourceValue === null) {
+      return '';
+    }
+
+    if (typeof sourceValue === 'number') {
+      if (!Number.isFinite(sourceValue)) {
+        return '';
+      }
+
+      return sourceValue > maximum ? `${maximum}+` : `${sourceValue}`;
+    }
+
+    return sourceValue.trim().toUpperCase();
+  }
+
+  let meaningfulValue = $derived(hasMeaningfulValue(value));
+  let displayValue = $derived(formatValue(value, max));
+  let shouldRender = $derived.by(() => {
+    if (shape === 'dot') {
+      return hideWhenEmpty ? meaningfulValue : true;
+    }
+
+    if (hideWhenEmpty) {
+      return meaningfulValue;
+    }
+
+    return displayValue.length > 0;
+  });
+</script>
+
+<span class="badge-anchor">
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#if shouldRender}
+    <span
+      class:dot={shape === 'dot'}
+      class:fit-rounded={fitToRounded}
+      class={`badge badge--${placement}`}
+      data-tone={tone}
+      transition:scale={{ duration: 120, start: 0.7 }}
+    >
+      {#if shape === 'pill'}
+        {displayValue}
+      {/if}
+    </span>
+  {/if}
+</span>
+
+<style>
+  :global(:root) {
+    --seblify-badge-rounded-inset: 14.645%;
+  }
+
+  .badge-anchor {
+    position: relative;
+    display: inline-grid;
+    width: fit-content;
+    flex: 0 0 auto;
+  }
+
+  .badge {
+    --badge-translate-x: 0;
+    --badge-translate-y: 0;
+
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    width: fit-content;
+    height: 1.25rem;
+    min-width: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    padding-inline: 0.375rem;
+    color: var(--badge-color, var(--seblify-color-fill-primary-text, #ffffff));
+    background: var(
+      --badge-background,
+      var(--seblify-color-fill-primary, #146a6f)
+    );
+    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+    transform-origin: center;
+  }
+
+  .badge:dir(rtl) {
+    --badge-start-translate-x: 50%;
+    --badge-end-translate-x: -50%;
+    --badge-center-translate-x: 50%;
+  }
+
+  .badge:dir(ltr),
+  .badge:not(:dir(rtl)) {
+    --badge-start-translate-x: -50%;
+    --badge-end-translate-x: 50%;
+    --badge-center-translate-x: -50%;
+  }
+
+  .dot {
+    width: 0.5rem;
+    min-width: 0.5rem;
+    height: 0.5rem;
+    padding: 0;
+  }
+
+  .badge[data-tone='neutral'] {
+    --badge-background: var(--seblify-color-fill-neutral, #516176);
+    --badge-color: var(--seblify-color-fill-neutral-text, #ffffff);
+  }
+
+  .badge[data-tone='primary'] {
+    --badge-background: var(--seblify-color-fill-primary, #146a6f);
+    --badge-color: var(--seblify-color-fill-primary-text, #ffffff);
+  }
+
+  .badge[data-tone='success'] {
+    --badge-background: var(--seblify-color-fill-success, #1f7a3f);
+    --badge-color: var(--seblify-color-fill-success-text, #ffffff);
+  }
+
+  .badge[data-tone='danger'] {
+    --badge-background: var(--seblify-color-fill-danger, #c93434);
+    --badge-color: var(--seblify-color-fill-danger-text, #ffffff);
+  }
+
+  .badge[data-tone='warning'] {
+    --badge-background: var(--seblify-color-fill-warning, #8a5a00);
+    --badge-color: var(--seblify-color-fill-warning-text, #ffffff);
+  }
+
+  .badge[data-tone='info'] {
+    --badge-background: var(--seblify-color-fill-info, #1f6fb2);
+    --badge-color: var(--seblify-color-fill-info-text, #ffffff);
+  }
+
+  .badge[data-tone='inverse'] {
+    --badge-background: var(--seblify-color-fill-inverse, #172033);
+    --badge-color: var(--seblify-color-fill-inverse-text, #ffffff);
+  }
+
+  .badge--top-start {
+    --badge-translate-x: var(--badge-start-translate-x);
+    --badge-translate-y: -50%;
+
+    top: 0;
+    inset-inline-start: 0;
+  }
+
+  .badge--top {
+    --badge-translate-x: var(--badge-center-translate-x);
+    --badge-translate-y: -50%;
+
+    top: 0;
+    inset-inline-start: 50%;
+  }
+
+  .badge--top-end {
+    --badge-translate-x: var(--badge-end-translate-x);
+    --badge-translate-y: -50%;
+
+    top: 0;
+    inset-inline-end: 0;
+  }
+
+  .badge--end {
+    --badge-translate-x: var(--badge-end-translate-x);
+    --badge-translate-y: -50%;
+
+    top: 50%;
+    inset-inline-end: 0;
+  }
+
+  .badge--bottom-end {
+    --badge-translate-x: var(--badge-end-translate-x);
+    --badge-translate-y: 50%;
+
+    bottom: 0;
+    inset-inline-end: 0;
+  }
+
+  .badge--bottom {
+    --badge-translate-x: var(--badge-center-translate-x);
+    --badge-translate-y: 50%;
+
+    bottom: 0;
+    inset-inline-start: 50%;
+  }
+
+  .badge--bottom-start {
+    --badge-translate-x: var(--badge-start-translate-x);
+    --badge-translate-y: 50%;
+
+    bottom: 0;
+    inset-inline-start: 0;
+  }
+
+  .badge--start {
+    --badge-translate-x: var(--badge-start-translate-x);
+    --badge-translate-y: -50%;
+
+    top: 50%;
+    inset-inline-start: 0;
+  }
+
+  .fit-rounded.badge--top-start {
+    top: var(--seblify-badge-rounded-inset);
+    inset-inline-start: var(--seblify-badge-rounded-inset);
+  }
+
+  .fit-rounded.badge--top-end {
+    top: var(--seblify-badge-rounded-inset);
+    inset-inline-end: var(--seblify-badge-rounded-inset);
+  }
+
+  .fit-rounded.badge--bottom-end {
+    bottom: var(--seblify-badge-rounded-inset);
+    inset-inline-end: var(--seblify-badge-rounded-inset);
+  }
+
+  .fit-rounded.badge--bottom-start {
+    bottom: var(--seblify-badge-rounded-inset);
+    inset-inline-start: var(--seblify-badge-rounded-inset);
+  }
+</style>

package/dist/components/display/annotation/badge/Badge.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type BadgePlacement = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
+type BadgeTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type BadgeShape = 'pill' | 'dot';
+declare const Badge: import("svelte").Component<{
+    children?: Snippet | undefined;
+    fitToRounded?: boolean | undefined;
+    hideWhenEmpty?: boolean | undefined;
+    max?: number | undefined;
+    placement?: BadgePlacement | undefined;
+    shape?: BadgeShape | undefined;
+    tone?: BadgeTone | undefined;
+    value?: number | string | undefined;
+}, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

@@ -0,0 +1,227 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SeblifyProps } from 'seblify';
+
+  type TagBorder = 'none' | 'solid' | 'dash';
+  type TagRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+  type TagTone =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+  type TagVariant = 'solid' | 'soft' | 'tint' | 'plain';
+
+  type Props = SeblifyProps<{
+    border?: TagBorder;
+    children?: Snippet;
+    end?: Snippet;
+    radius?: TagRadius;
+    start?: Snippet;
+    tone?: TagTone;
+    variant?: TagVariant;
+  }>;
+
+  let {
+    border = 'none',
+    children,
+    end,
+    radius = 'sm',
+    start,
+    tone = 'neutral',
+    variant = 'tint',
+  }: Props = $props();
+</script>
+
+<span
+  class="tag"
+  data-border={border}
+  data-radius={radius}
+  data-tone={tone}
+  data-variant={variant}
+>
+  {#if start}
+    <span class="tag__media">
+      {@render start()}
+    </span>
+  {/if}
+
+  <span class="tag__content">
+    {#if children}
+      {@render children()}
+    {/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);
+    --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);
+
+    display: inline-flex;
+    max-width: 100%;
+    min-height: 1.5rem;
+    align-items: center;
+    gap: 0.25rem;
+    border: 1px solid transparent;
+    padding-block: 0.125rem;
+    padding-inline: 0.5rem;
+    color: var(--tag-text);
+    background: transparent;
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1.2;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .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;
+
+    display: inline-flex;
+    min-width: 0.875rem;
+    min-height: 0.875rem;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  .tag[data-radius='none'] {
+    border-radius: 0;
+  }
+
+  .tag[data-radius='sm'] {
+    border-radius: 0.25rem;
+  }
+
+  .tag[data-radius='md'] {
+    border-radius: 0.375rem;
+  }
+
+  .tag[data-radius='lg'] {
+    border-radius: 0.5rem;
+  }
+
+  .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-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'] {
+    color: var(--tag-fill-text);
+    background: var(--tag-fill);
+  }
+
+  .tag[data-variant='soft'] {
+    color: var(--tag-default-text);
+    background: var(--tag-surface);
+  }
+
+  .tag[data-variant='tint'] {
+    color: var(--tag-text);
+    background: var(--tag-surface);
+  }
+
+  .tag[data-variant='plain'] {
+    color: var(--tag-text);
+    background: transparent;
+  }
+
+  .tag[data-border='solid'] {
+    border-color: var(--tag-border);
+  }
+
+  .tag[data-border='dash'] {
+    border-color: var(--tag-border);
+    border-style: dashed;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type TagBorder = 'none' | 'solid' | 'dash';
+type TagRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type TagTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type TagVariant = 'solid' | 'soft' | 'tint' | 'plain';
+declare const Tag: import("svelte").Component<{
+    border?: TagBorder | undefined;
+    children?: Snippet | undefined;
+    end?: Snippet | undefined;
+    radius?: TagRadius | undefined;
+    start?: Snippet | undefined;
+    tone?: TagTone | undefined;
+    variant?: TagVariant | undefined;
+}, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/display/annotation/tag-group/TagGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { Cluster } from 'seblify';
+
+  type TagGroupElement = keyof HTMLElementTagNameMap;
+  type TagGroupAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type TagGroupJustify =
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'between'
+    | 'around'
+    | 'evenly';
+
+  type Props = SeblifyProps<{
+    align?: TagGroupAlign;
+    as?: TagGroupElement;
+    children?: Snippet;
+    justify?: TagGroupJustify;
+  }>;
+
+  let {
+    align = 'center',
+    as = 'div',
+    children,
+    justify = 'start',
+  }: Props = $props();
+</script>
+
+<Cluster {align} {as} gap="sm" {justify}>
+  {@render children?.()}
+</Cluster>

package/dist/components/display/annotation/tag-group/TagGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type TagGroupElement = keyof HTMLElementTagNameMap;
+type TagGroupAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type TagGroupJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+declare const TagGroup: import("svelte").Component<{
+    align?: TagGroupAlign | undefined;
+    as?: TagGroupElement | undefined;
+    children?: Snippet | undefined;
+    justify?: TagGroupJustify | undefined;
+}, {}, "">;
+type TagGroup = ReturnType<typeof TagGroup>;
+export default TagGroup;