seblify 0.1.4

package/dist/components/display/feedback/loading/loading-dots/LoadingDots.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type LoadingDotsTone =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+
+  type Props = SeblifyProps<{
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    tone?: LoadingDotsTone;
+  }>;
+
+  let { label = 'Loading', size, tone }: Props = $props();
+</script>
+
+<span
+  aria-label={label}
+  class:size-lg={size === 'lg'}
+  class:size-md={size === 'md'}
+  class:size-sm={size === 'sm'}
+  class:size-xs={size === 'xs'}
+  data-tone={tone}
+  class="loading-dots"
+  role="status"
+>
+  <span></span>
+  <span></span>
+  <span></span>
+</span>
+
+<style>
+  .loading-dots {
+    display: inline-flex;
+    gap: var(--dot-gap, var(--seblify-current-loading-dots-gap, 5px));
+    align-items: center;
+    width: fit-content;
+    color: var(
+      --loading-dots-color,
+      var(
+        --seblify-current-tone-fill,
+        var(--seblify-color-fill-primary, #146a6f)
+      )
+    );
+  }
+
+  .size-sm {
+    --dot-size: 6px;
+    --dot-gap: 4px;
+  }
+
+  .size-xs {
+    --dot-size: 4px;
+    --dot-gap: 3px;
+  }
+
+  .size-md {
+    --dot-size: 8px;
+    --dot-gap: 5px;
+  }
+
+  .size-lg {
+    --dot-size: 11px;
+    --dot-gap: 7px;
+  }
+
+  .loading-dots[data-tone='neutral'] {
+    --loading-dots-color: var(--seblify-color-fill-neutral, #516176);
+  }
+
+  .loading-dots[data-tone='primary'] {
+    --loading-dots-color: var(--seblify-color-fill-primary, #146a6f);
+  }
+
+  .loading-dots[data-tone='success'] {
+    --loading-dots-color: var(--seblify-color-fill-success, #1f7a3f);
+  }
+
+  .loading-dots[data-tone='danger'] {
+    --loading-dots-color: var(--seblify-color-fill-danger, #c93434);
+  }
+
+  .loading-dots[data-tone='warning'] {
+    --loading-dots-color: var(--seblify-color-fill-warning, #8a5a00);
+  }
+
+  .loading-dots[data-tone='info'] {
+    --loading-dots-color: var(--seblify-color-fill-info, #1f6fb2);
+  }
+
+  .loading-dots[data-tone='inverse'] {
+    --loading-dots-color: var(--seblify-color-fill-inverse, #172033);
+  }
+
+  span span {
+    width: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
+    height: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
+    border-radius: 999px;
+    background: currentColor;
+    animation: pulse 900ms ease-in-out infinite;
+  }
+
+  span span:nth-child(2) {
+    animation-delay: 120ms;
+  }
+
+  span span:nth-child(3) {
+    animation-delay: 240ms;
+  }
+
+  @keyframes pulse {
+    0%,
+    80%,
+    100% {
+      opacity: 0.35;
+      transform: scale(0.78);
+    }
+
+    40% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    span span {
+      animation: none;
+      opacity: 0.75;
+    }
+  }
+</style>

package/dist/components/display/feedback/loading/loading-dots/LoadingDots.svelte.d.ts

@@ -0,0 +1,8 @@
+type LoadingDotsTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+declare const LoadingDots: import("svelte").Component<{
+    label?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    tone?: LoadingDotsTone | undefined;
+}, {}, "">;
+type LoadingDots = ReturnType<typeof LoadingDots>;
+export default LoadingDots;

package/dist/components/display/feedback/loading/spinner/Spinner.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type SpinnerTone =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info'
+    | 'inverse';
+
+  type Props = SeblifyProps<{
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    tone?: SpinnerTone;
+  }>;
+
+  let { label = 'Loading', size, tone }: Props = $props();
+</script>
+
+<span
+  aria-label={label}
+  class:size-md={size === 'md'}
+  class:size-lg={size === 'lg'}
+  class:size-sm={size === 'sm'}
+  class:size-xs={size === 'xs'}
+  class="spinner"
+  data-tone={tone}
+  role="status"
+></span>
+
+<style>
+  .spinner {
+    display: inline-block;
+    width: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
+    height: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
+    border: var(--spinner-width, var(--seblify-current-spinner-width, 3px))
+      solid var(--seblify-color-border, #c8d2df);
+    border-top-color: var(
+      --spinner-color,
+      var(
+        --seblify-current-tone-fill,
+        var(--seblify-color-fill-primary, #146a6f)
+      )
+    );
+    border-radius: 999px;
+    animation: spin 800ms linear infinite;
+  }
+
+  .size-sm {
+    --spinner-size: 18px;
+    --spinner-width: 2px;
+  }
+
+  .size-xs {
+    --spinner-size: 14px;
+    --spinner-width: 2px;
+  }
+
+  .size-md {
+    --spinner-size: 26px;
+    --spinner-width: 3px;
+  }
+
+  .size-lg {
+    --spinner-size: 38px;
+    --spinner-width: 4px;
+  }
+
+  .spinner[data-tone='neutral'] {
+    --spinner-color: var(--seblify-color-fill-neutral, #516176);
+  }
+
+  .spinner[data-tone='primary'] {
+    --spinner-color: var(--seblify-color-fill-primary, #146a6f);
+  }
+
+  .spinner[data-tone='success'] {
+    --spinner-color: var(--seblify-color-fill-success, #1f7a3f);
+  }
+
+  .spinner[data-tone='danger'] {
+    --spinner-color: var(--seblify-color-fill-danger, #c93434);
+  }
+
+  .spinner[data-tone='warning'] {
+    --spinner-color: var(--seblify-color-fill-warning, #8a5a00);
+  }
+
+  .spinner[data-tone='info'] {
+    --spinner-color: var(--seblify-color-fill-info, #1f6fb2);
+  }
+
+  .spinner[data-tone='inverse'] {
+    --spinner-color: var(--seblify-color-fill-inverse, #172033);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation-duration: 1400ms;
+    }
+  }
+</style>

package/dist/components/display/feedback/loading/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,8 @@
+type SpinnerTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+declare const Spinner: import("svelte").Component<{
+    label?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    tone?: SpinnerTone | undefined;
+}, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/display/media/icon/Icon.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { SeblifyProps, CustomCssSize } from 'seblify';
+  import IconGlyph from './IconGlyph.svelte';
+
+  const iconModules = import.meta.glob<string>(
+    '../../../../icons/svg/**/*.svg',
+    {
+      eager: true,
+      import: 'default',
+      query: '?raw',
+    },
+  );
+
+  type Props = SeblifyProps<{
+    label?: string;
+    name: string;
+    size?: number | CustomCssSize;
+  }>;
+
+  let { label, name, size }: Props = $props();
+  const fallbackIcon =
+    iconModules['../../../../icons/svg/fallback/fallback.svg'];
+
+  function iconSource(iconName: string): string {
+    const safeName = iconName.trim();
+    const folder = safeName.split('-')[0];
+
+    if (!safeName || !folder) {
+      return fallbackIcon;
+    }
+
+    return (
+      iconModules[`../../../../icons/svg/${folder}/${safeName}.svg`] ??
+      fallbackIcon
+    );
+  }
+
+  let source = $derived(iconSource(name));
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/components/display/media/icon/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CustomCssSize } from 'seblify';
+declare const Icon: import("svelte").Component<{
+    label?: string | undefined;
+    name: string;
+    size?: (number | CustomCssSize) | undefined;
+}, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/display/media/icon/IconGlyph.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { SeblifyProps, CustomCssSize } from 'seblify';
+
+  type Props = SeblifyProps<{
+    label?: string;
+    size?: number | CustomCssSize;
+    source: string;
+  }>;
+
+  let { label, size, source }: Props = $props();
+
+  function cssSize(value?: number | string): string | undefined {
+    if (value === undefined) {
+      return undefined;
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  let sizeValue = $derived(cssSize(size));
+</script>
+
+<span
+  aria-hidden={label ? undefined : 'true'}
+  aria-label={label}
+  class="icon"
+  role={label ? 'img' : undefined}
+  style:--icon-size={sizeValue}
+>
+  {@html source}
+</span>
+
+<style>
+  .icon {
+    display: inline-block;
+    width: var(--icon-size, var(--seblify-current-icon-size, 24px));
+    height: var(--icon-size, var(--seblify-current-icon-size, 24px));
+    flex: 0 0 auto;
+    color: currentColor;
+    line-height: 0;
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .icon :global([fill]:not([fill='none'])) {
+    fill: currentColor;
+  }
+
+  .icon :global([stroke]:not([stroke='none'])) {
+    stroke: currentColor;
+  }
+</style>

package/dist/components/display/media/icon/IconGlyph.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CustomCssSize } from 'seblify';
+declare const IconGlyph: import("svelte").Component<{
+    label?: string | undefined;
+    size?: (number | CustomCssSize) | undefined;
+    source: string;
+}, {}, "">;
+type IconGlyph = ReturnType<typeof IconGlyph>;
+export default IconGlyph;

package/dist/components/display/typography/eyebrow/Eyebrow.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type EyebrowColor = 'accent' | 'neutral' | 'muted';
+
+  type Props = SeblifyProps<{
+    children?: Snippet;
+    color?: EyebrowColor;
+  }>;
+
+  let { children, color = 'accent' }: Props = $props();
+</script>
+
+<span
+  class:accent={color === 'accent'}
+  class:muted={color === 'muted'}
+  class:neutral={color === 'neutral'}
+  class="eyebrow"
+>
+  {@render children?.()}
+</span>
+
+<style>
+  .eyebrow {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    color: var(--seblify-color-fill-accent, #146a6f);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    line-height: 1.2;
+    text-transform: uppercase;
+  }
+
+  .neutral {
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .muted {
+    color: var(--seblify-color-text-subtle, #667085);
+  }
+
+  .accent {
+    color: var(--seblify-color-fill-accent, #146a6f);
+  }
+</style>

package/dist/components/display/typography/eyebrow/Eyebrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type EyebrowColor = 'accent' | 'neutral' | 'muted';
+declare const Eyebrow: import("svelte").Component<{
+    children?: Snippet | undefined;
+    color?: EyebrowColor | undefined;
+}, {}, "">;
+type Eyebrow = ReturnType<typeof Eyebrow>;
+export default Eyebrow;

package/dist/components/display/typography/highlight/Highlight.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+
+  type HighlightTone =
+    | 'neutral'
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info';
+  type HighlightVariant = 'soft' | 'tint' | 'plain';
+
+  interface Segment {
+    text: string;
+    match: boolean;
+  }
+
+  type Props = SeblifyProps<{
+    query?: string | string[];
+    text: string;
+    tone?: HighlightTone;
+    variant?: HighlightVariant;
+  }>;
+
+  let {
+    query = [],
+    text,
+    tone = 'primary',
+    variant = 'tint',
+  }: Props = $props();
+
+  function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function normalizeQueries(value: string | string[]): string[] {
+    const values = Array.isArray(value) ? value : [value];
+
+    return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
+  }
+
+  function splitSegments(
+    sourceText: string,
+    sourceQuery: string | string[],
+  ): Segment[] {
+    const queries = normalizeQueries(sourceQuery);
+
+    if (!sourceText || queries.length === 0) {
+      return [{ text: sourceText, match: false }];
+    }
+
+    const pattern = queries
+      .sort((left, right) => right.length - left.length)
+      .map(escapeRegExp)
+      .join('|');
+    const regex = new RegExp(`(${pattern})`, 'gi');
+    const parts = sourceText.split(regex).filter((part) => part.length > 0);
+
+    return parts.map((part) => ({
+      text: part,
+      match: queries.some(
+        (queryPart) => queryPart.toLowerCase() === part.toLowerCase(),
+      ),
+    }));
+  }
+
+  let segments = $derived(splitSegments(text, query));
+</script>
+
+<span class="highlight">
+  {#each segments as segment}
+    {#if segment.match}
+      <mark data-tone={tone} data-variant={variant}>{segment.text}</mark>
+    {:else}
+      {segment.text}
+    {/if}
+  {/each}
+</span>
+
+<style>
+  .highlight {
+    color: inherit;
+  }
+
+  mark {
+    --highlight-fill: var(--seblify-color-fill-primary, #146a6f);
+    --highlight-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+    --highlight-surface: var(--seblify-color-surface-accent, #f7fbfb);
+    --highlight-default-text: var(--seblify-color-text, currentColor);
+    --highlight-text: var(--seblify-color-fill-primary, #146a6f);
+
+    border-radius: 4px;
+    padding: 0;
+    color: var(--highlight-default-text);
+    background: var(--highlight-surface);
+  }
+
+  mark[data-tone='neutral'] {
+    --highlight-fill: var(--seblify-color-fill-neutral, #516176);
+    --highlight-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+    --highlight-surface: var(--seblify-color-surface-muted, #d9e0e8);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-text-muted, #516176);
+  }
+
+  mark[data-tone='primary'] {
+    --highlight-fill: var(--seblify-color-fill-primary, #146a6f);
+    --highlight-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+    --highlight-surface: var(--seblify-color-surface-accent, #f7fbfb);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-fill-primary, #146a6f);
+  }
+
+  mark[data-tone='success'] {
+    --highlight-fill: var(--seblify-color-fill-success, #1f7a3f);
+    --highlight-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+    --highlight-surface: var(--seblify-color-success-surface, #e8f8ee);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-success-text, #143d25);
+  }
+
+  mark[data-tone='danger'] {
+    --highlight-fill: var(--seblify-color-fill-danger, #c93434);
+    --highlight-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+    --highlight-surface: var(--seblify-color-error-surface, #fff0f0);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-error-text, #5a1717);
+  }
+
+  mark[data-tone='warning'] {
+    --highlight-fill: var(--seblify-color-fill-warning, #8a5a00);
+    --highlight-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+    --highlight-surface: var(--seblify-color-warning-surface, #fff6d8);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-warning-text, #4d3900);
+  }
+
+  mark[data-tone='info'] {
+    --highlight-fill: var(--seblify-color-fill-info, #1f6fb2);
+    --highlight-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+    --highlight-surface: var(--seblify-color-info-surface, #eaf3ff);
+    --highlight-default-text: var(--seblify-color-text, #172033);
+    --highlight-text: var(--seblify-color-info-text, #102f55);
+  }
+
+  mark[data-variant='soft'] {
+    color: var(--highlight-default-text);
+    background: var(--highlight-surface);
+  }
+
+  mark[data-variant='tint'] {
+    color: var(--highlight-text);
+    background: var(--highlight-surface);
+  }
+
+  mark[data-variant='plain'] {
+    color: var(--highlight-text);
+    background: transparent;
+  }
+</style>

package/dist/components/display/typography/highlight/Highlight.svelte.d.ts

@@ -0,0 +1,10 @@
+type HighlightTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
+type HighlightVariant = 'soft' | 'tint' | 'plain';
+declare const Highlight: import("svelte").Component<{
+    query?: string | string[] | undefined;
+    text: string;
+    tone?: HighlightTone | undefined;
+    variant?: HighlightVariant | undefined;
+}, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;