seblify 0.1.8 → 0.2.1

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemRow.svelte

@@ -0,0 +1,404 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import TriangleSmallDownIcon from '../../../../../../icons/generated/triangle-small-down.svelte';
+  import type { SidenavItemData } from 'seblify';
+
+  type InteractiveMode = 'static' | 'button' | 'link';
+  type Appearance = 'default' | 'header' | 'muted';
+
+  type Props = {
+    item: SidenavItemData;
+    label: string;
+    depth: number;
+    compact?: boolean;
+    icon?: Component;
+    interactive: InteractiveMode;
+    appearance?: Appearance;
+    accentAncestor?: boolean;
+    href?: string;
+    disabled?: boolean;
+    current?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    ariaCurrent?: 'page' | undefined;
+    onPrimary?: () => void;
+    onToggle?: () => void;
+    onLinkClick?: (event: MouseEvent) => void;
+    labelContent?: Snippet<[SidenavItemData]>;
+    trailingContent?: Snippet<[SidenavItemData]>;
+    toggleDisabled?: boolean;
+    toggleMode?: 'button' | 'indicator';
+  };
+
+  let {
+    item,
+    label,
+    depth,
+    compact = false,
+    icon,
+    interactive,
+    appearance = 'default',
+    accentAncestor = false,
+    href,
+    disabled = false,
+    current = false,
+    expandable = false,
+    expanded = false,
+    ariaCurrent,
+    onPrimary,
+    onToggle,
+    onLinkClick,
+    labelContent,
+    trailingContent,
+    toggleDisabled = false,
+    toggleMode = 'button',
+  }: Props = $props();
+
+  let IconComponent = $derived(icon);
+
+  function handlePrimaryClick(): void {
+    if (disabled) {
+      return;
+    }
+
+    onPrimary?.();
+  }
+</script>
+
+<div
+  class:accent-ancestor={accentAncestor}
+  class:compact
+  class:current
+  class:header={appearance === 'header'}
+  class:link-item={interactive === 'link'}
+  class:muted={appearance === 'muted'}
+  class:expandable
+  class="sidenav-row"
+  style:--sidenav-depth={`${depth}`}
+>
+  {#if interactive === 'link' && href}
+    <a
+      aria-current={ariaCurrent}
+      aria-disabled={disabled}
+      class="sidenav-row__primary"
+      {href}
+      onclick={onLinkClick}
+      tabindex={disabled ? -1 : undefined}
+    >
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </a>
+  {:else if interactive === 'button'}
+    <button
+      aria-current={ariaCurrent}
+      class="sidenav-row__primary"
+      {disabled}
+      onclick={handlePrimaryClick}
+      type="button"
+    >
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </button>
+  {:else}
+    <div class="sidenav-row__primary sidenav-row__primary--static">
+      {#if IconComponent}
+        <span class="sidenav-row__icon">
+          <IconComponent size="1.5rem" />
+        </span>
+      {/if}
+      <span class="sidenav-row__label">
+        {#if labelContent}
+          {@render labelContent(item)}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </div>
+  {/if}
+
+  {#if trailingContent}
+    <div class="sidenav-row__trailing">
+      {@render trailingContent(item)}
+    </div>
+  {/if}
+
+  {#if expandable && !compact && toggleMode === 'button'}
+    <button
+      aria-expanded={expanded}
+      aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+      class="sidenav-row__toggle"
+      disabled={toggleDisabled}
+      onclick={onToggle}
+      type="button"
+    >
+      <span class:collapsed={!expanded} class="sidenav-row__chevron">
+        <TriangleSmallDownIcon />
+      </span>
+    </button>
+  {:else if expandable && !compact}
+    {#if interactive === 'link' && href}
+      <a
+        aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+        {href}
+        onclick={onLinkClick}
+        tabindex={disabled ? -1 : undefined}
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </a>
+    {:else if interactive === 'button'}
+      <button
+        aria-label={expanded ? `Collapse ${label}` : `Expand ${label}`}
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+        {disabled}
+        onclick={handlePrimaryClick}
+        type="button"
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </button>
+    {:else}
+      <span
+        aria-hidden="true"
+        class="sidenav-row__toggle sidenav-row__toggle--indicator"
+      >
+        <span class:collapsed={!expanded} class="sidenav-row__chevron">
+          <TriangleSmallDownIcon />
+        </span>
+      </span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .sidenav-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 0.375rem;
+    align-items: center;
+    min-height: 2.25rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--seblify-sidenav-supporting);
+    transition:
+      background-color 160ms ease,
+      color 160ms ease,
+      gap 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.current {
+    background: var(--seblify-sidenav-accent-background);
+  }
+
+  .sidenav-row.compact {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sidenav-row.header {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row.muted {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row__primary,
+  .sidenav-row__toggle {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  .sidenav-row__primary {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.625rem;
+    align-items: center;
+    min-width: 0;
+    min-height: 2.25rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem 0.625rem 0.5rem
+      calc(0.75rem + (var(--sidenav-depth) * 0.875rem));
+    color: inherit;
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .sidenav-row.compact .sidenav-row__primary {
+    grid-template-columns: auto 0;
+    gap: 0;
+    width: 100%;
+    justify-content: center;
+    padding: 0.5rem;
+    place-items: center;
+  }
+
+  .sidenav-row__primary:is(button, a) {
+    cursor: pointer;
+  }
+
+  .sidenav-row:has(.sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover),
+  .sidenav-row:has(.sidenav-row__toggle:not(:disabled):hover) {
+    background: var(--seblify-sidenav-hover-background);
+  }
+
+  .sidenav-row.current:has(.sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover),
+  .sidenav-row.current:has(.sidenav-row__toggle:not(:disabled):hover) {
+    background: var(--seblify-sidenav-accent-background);
+  }
+
+  .sidenav-row__primary:is(button, a):not(:disabled):not([aria-disabled='true']):hover,
+  .sidenav-row__toggle:not(:disabled):hover {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row.header.expandable:has(.sidenav-row__primary:is(button):not(:disabled):hover),
+  .sidenav-row.header.expandable:has(.sidenav-row__toggle:not(:disabled):hover) {
+    color: var(--seblify-sidenav-supporting);
+  }
+
+  .sidenav-row__primary:disabled,
+  .sidenav-row__primary[aria-disabled='true'] {
+    cursor: default;
+  }
+
+  .sidenav-row__primary--static,
+  .sidenav-row.header .sidenav-row__primary {
+    font-size: 0.75rem;
+    font-weight: 750;
+    text-transform: uppercase;
+  }
+
+  .sidenav-row__icon {
+    display: grid;
+    width: 1.5rem;
+    height: 1.5rem;
+    place-items: center;
+    color: inherit;
+  }
+
+  .sidenav-row.compact .sidenav-row__icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+  }
+
+  .sidenav-row__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 14rem;
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 140ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.compact .sidenav-row__label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-0.25rem);
+  }
+
+  .sidenav-row.link-item .sidenav-row__label {
+    color: var(--seblify-sidenav-link-label);
+  }
+
+  .sidenav-row.link-item.current .sidenav-row__label {
+    color: var(--seblify-sidenav-link-label-current);
+  }
+
+  .sidenav-row.link-item.current .sidenav-row__toggle,
+  .sidenav-row.link-item.current .sidenav-row__chevron {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row.accent-ancestor .sidenav-row__label {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row.accent-ancestor .sidenav-row__icon,
+  .sidenav-row.accent-ancestor .sidenav-row__toggle,
+  .sidenav-row.accent-ancestor .sidenav-row__chevron {
+    color: var(--seblify-sidenav-accent-foreground);
+  }
+
+  .sidenav-row__primary:disabled .sidenav-row__label,
+  .sidenav-row__primary[aria-disabled='true'] .sidenav-row__label,
+  .sidenav-row__primary:disabled .sidenav-row__icon,
+  .sidenav-row__primary[aria-disabled='true'] .sidenav-row__icon,
+  .sidenav-row__toggle:disabled,
+  .sidenav-row__toggle:disabled .sidenav-row__chevron {
+    color: var(--seblify-sidenav-disabled);
+  }
+
+  .sidenav-row__toggle {
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0.25rem;
+    place-items: center;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  .sidenav-row__toggle--indicator {
+    cursor: default;
+  }
+
+  .sidenav-row__trailing {
+    display: grid;
+    align-items: center;
+    min-width: 0;
+    max-width: 12rem;
+    opacity: 1;
+    overflow: hidden;
+    transition:
+      max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 140ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidenav-row.compact .sidenav-row__trailing {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-0.25rem);
+    pointer-events: none;
+  }
+
+  .sidenav-row__chevron {
+    display: grid;
+    transition: transform 160ms ease;
+  }
+
+  .sidenav-row__chevron.collapsed {
+    transform: rotate(-90deg);
+  }
+</style>

package/dist/components/framework/navigation/sidebar/sidenav/fragments/SidenavItemRow.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Component, Snippet } from 'svelte';
+import type { SidenavItemData } from 'seblify';
+type InteractiveMode = 'static' | 'button' | 'link';
+type Appearance = 'default' | 'header' | 'muted';
+type Props = {
+    item: SidenavItemData;
+    label: string;
+    depth: number;
+    compact?: boolean;
+    icon?: Component;
+    interactive: InteractiveMode;
+    appearance?: Appearance;
+    accentAncestor?: boolean;
+    href?: string;
+    disabled?: boolean;
+    current?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    ariaCurrent?: 'page' | undefined;
+    onPrimary?: () => void;
+    onToggle?: () => void;
+    onLinkClick?: (event: MouseEvent) => void;
+    labelContent?: Snippet<[SidenavItemData]>;
+    trailingContent?: Snippet<[SidenavItemData]>;
+    toggleDisabled?: boolean;
+    toggleMode?: 'button' | 'indicator';
+};
+declare const SidenavItemRow: Component<Props, {}, "">;
+type SidenavItemRow = ReturnType<typeof SidenavItemRow>;
+export default SidenavItemRow;

package/dist/components/framework/navigation/sidebar/sidenav/sidenav.d.ts

@@ -0,0 +1,29 @@
+import type { Component } from 'svelte';
+export type SidenavIconComponent = Component<{
+    size?: string;
+}>;
+export interface SidenavItemData {
+    id: string;
+    label?: string;
+    href?: string;
+    icon?: SidenavIconComponent;
+    children?: SidenavItemData[];
+    collapsible?: boolean;
+    disabled?: boolean;
+    action?: string;
+    payload?: unknown;
+}
+export interface SidenavActionDetail {
+    id: string;
+    action: string;
+    payload?: unknown;
+    item: SidenavItemData;
+}
+export type SidenavItemKind = 'divider' | 'header' | 'link' | 'action' | 'group' | 'action-group' | 'link-group';
+export declare function hasSidenavChildren(item: SidenavItemData): boolean;
+export declare function getSidenavItemLabel(item: SidenavItemData): string;
+export declare function getSidenavItemKind(item: SidenavItemData): SidenavItemKind;
+export declare function itemMatchesHref(item: SidenavItemData, currentHref: string | undefined): boolean;
+export declare function itemContainsHref(item: SidenavItemData, currentHref: string | undefined): boolean;
+export declare function getDescendantSidenavItemIds(items: SidenavItemData[] | undefined): string[];
+export declare function getSidenavAccentAncestorId(items: SidenavItemData[] | undefined, currentHref: string | undefined): string | undefined;

package/dist/components/framework/navigation/sidebar/sidenav/sidenav.js

@@ -0,0 +1,86 @@
+export function hasSidenavChildren(item) {
+    return Boolean(item.children?.length);
+}
+export function getSidenavItemLabel(item) {
+    if (item.label) {
+        return item.label;
+    }
+    if (item.href || item.action) {
+        return 'Label';
+    }
+    return '';
+}
+export function getSidenavItemKind(item) {
+    const hasChildren = hasSidenavChildren(item);
+    const hasLabelOrIcon = Boolean(item.label || item.icon);
+    if (item.action && hasChildren) {
+        return 'action-group';
+    }
+    if (item.action) {
+        return 'action';
+    }
+    if (item.href && hasChildren) {
+        return 'link-group';
+    }
+    if (hasChildren) {
+        return 'group';
+    }
+    if (item.href) {
+        return 'link';
+    }
+    if (hasLabelOrIcon) {
+        return 'header';
+    }
+    return 'divider';
+}
+export function itemMatchesHref(item, currentHref) {
+    return Boolean(item.href && currentHref && item.href === currentHref);
+}
+export function itemContainsHref(item, currentHref) {
+    if (!currentHref) {
+        return false;
+    }
+    if (itemMatchesHref(item, currentHref)) {
+        return true;
+    }
+    return Boolean(item.children?.some((child) => itemContainsHref(child, currentHref)));
+}
+export function getDescendantSidenavItemIds(items) {
+    if (!items?.length) {
+        return [];
+    }
+    const ids = [];
+    for (const item of items) {
+        ids.push(item.id);
+        ids.push(...getDescendantSidenavItemIds(item.children));
+    }
+    return ids;
+}
+function getSidenavSelectedPath(items, currentHref) {
+    if (!items?.length || !currentHref) {
+        return undefined;
+    }
+    for (const item of items) {
+        if (itemMatchesHref(item, currentHref)) {
+            return [item];
+        }
+        const childPath = getSidenavSelectedPath(item.children, currentHref);
+        if (childPath) {
+            return [item, ...childPath];
+        }
+    }
+    return undefined;
+}
+export function getSidenavAccentAncestorId(items, currentHref) {
+    const path = getSidenavSelectedPath(items, currentHref);
+    if (!path || path.length < 2) {
+        return undefined;
+    }
+    for (const item of path.slice(0, -1)) {
+        const kind = getSidenavItemKind(item);
+        if (kind !== 'header' && kind !== 'divider') {
+            return item.id;
+        }
+    }
+    return undefined;
+}

package/dist/design-system/inheritance/tokens.d.ts

@@ -0,0 +1,7 @@
+declare const inheritanceTokens: {
+    name: string;
+    category: string;
+    value: string;
+    description: string;
+}[];
+export default inheritanceTokens;

package/dist/design-system/inheritance/tokens.js

@@ -0,0 +1,39 @@
+const inheritanceTokens = [
+    {
+        name: '--seblify-current-tone-fill',
+        category: 'Tone',
+        value: 'ambient fill color',
+        description: 'Resolved fill color for the current tone context. Use when a child should inherit the parent tone fill.',
+    },
+    {
+        name: '--seblify-current-tone-fill-text',
+        category: 'Tone',
+        value: 'ambient fill text color',
+        description: 'Resolved readable foreground color for content placed on the current tone fill. Use when a child can render a solid tone surface.',
+    },
+    {
+        name: '--seblify-current-tone-text',
+        category: 'Tone',
+        value: 'ambient text color',
+        description: 'Resolved text color for the current tone context. Useful for icons, text, and indicators inside a styled parent.',
+    },
+    {
+        name: '--seblify-current-tone-surface',
+        category: 'Tone',
+        value: 'ambient surface color',
+        description: 'Resolved surface color for the current tone context. Use when a child needs the parent surface tone rather than the page surface.',
+    },
+    {
+        name: '--seblify-current-tone-border',
+        category: 'Tone',
+        value: 'ambient border color',
+        description: 'Resolved border color for the current tone context. Useful for outlined children or local borders inside a styled parent.',
+    },
+    {
+        name: '--seblify-current-size',
+        category: 'Size',
+        value: 'ambient size',
+        description: 'Resolved current size for the ambient context. Child components can translate this into their own width, height, spacing, stroke width, or other local sizing decisions.',
+    },
+];
+export default inheritanceTokens;

package/dist/design-system/reserved-props/allowed-options.d.ts

@@ -5,10 +5,12 @@ type ToneOptions = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'i
 type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
 type VariantOptions = 'solid' | 'soft' | 'tint' | 'plain';
 type BorderOptions = 'none' | 'solid' | 'dash';
-type ShapeOptions = 'pill' | 'dot';
+type ShapeOptions = 'pill' | 'dot' | 'floating' | 'line' | 'slim' | 'long' | 'flat';
 type AlignOptions = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type DirOptions = 'ltr' | 'rtl' | 'auto';
+type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy';
+type OrientationOptions = 'horizontal' | 'vertical';
 export type SeblifyReservedPropOptions = {
     class: string;
     as: keyof HTMLElementTagNameMap;
@@ -28,13 +30,15 @@ export type SeblifyReservedPropOptions = {
     open: boolean;
     checked: boolean;
     disabled: boolean;
+    wrap: boolean;
     border: BorderOptions & {};
-    radius: (SizeKeys | 'none' | 'full') & {};
+    radius: ((SizeKeys | 'none' | 'full') & {}) | CustomCssSize;
     shape: ShapeOptions & {};
     tone: ToneOptions & {};
     variant: VariantOptions & {};
     size: (SizeKeys & {}) | CustomCssSize;
     padding: ((SizeKeys | 'none') & {}) | CustomCssSize;
+    animation: AnimationOptions & {};
     gap: ((SizeKeys | 'none') & {}) | CustomCssSize;
     rowGap: ((SizeKeys | 'none') & {}) | CustomCssSize;
     columnGap: ((SizeKeys | 'none') & {}) | CustomCssSize;
@@ -42,5 +46,6 @@ export type SeblifyReservedPropOptions = {
     align: AlignOptions & {};
     justify: JustifyOptions & {};
     dir: DirOptions & {};
+    orientation: OrientationOptions & {};
 };
 export {};

package/dist/icons/generated/alarm-snooze.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.88 3.38938L6.6 1.85938L2 5.70937L3.29 7.23937L7.88 3.38938ZM22 5.71937L17.4 1.85938L16.11 3.38938L20.71 7.24937L22 5.71937ZM12 3.99937C9.61305 3.99937 7.32387 4.94759 5.63604 6.63541C3.94821 8.32324 3 10.6124 3 12.9994C3 15.3863 3.94821 17.6755 5.63604 19.3633C7.32387 21.0512 9.61305 21.9994 12 21.9994C14.3869 21.9994 16.6761 21.0512 18.364 19.3633C20.0518 17.6755 21 15.3863 21 12.9994C21 10.6124 20.0518 8.32324 18.364 6.63541C16.6761 4.94759 14.3869 3.99937 12 3.99937ZM12 19.9994C10.1435 19.9994 8.36301 19.2619 7.05025 17.9491C5.7375 16.6364 5 14.8559 5 12.9994C5 11.1429 5.7375 9.36238 7.05025 8.04963C8.36301 6.73687 10.1435 5.99937 12 5.99937C13.8565 5.99937 15.637 6.73687 16.9497 8.04963C18.2625 9.36238 19 11.1429 19 12.9994C19 14.8559 18.2625 16.6364 16.9497 17.9491C15.637 19.2619 13.8565 19.9994 12 19.9994ZM9 10.9994H12.63L9 15.1994V16.9994H15V14.9994H11.37L15 10.7994V8.99937H9V10.9994Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alarm-snooze.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const AlarmSnooze: import("svelte").Component<Props, {}, "">;
+type AlarmSnooze = ReturnType<typeof AlarmSnooze>;
+export default AlarmSnooze;

package/dist/icons/generated/alarm.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19.9994C10.1435 19.9994 8.36301 19.2619 7.05025 17.9491C5.7375 16.6364 5 14.8559 5 12.9994C5 11.1429 5.7375 9.36238 7.05025 8.04963C8.36301 6.73687 10.1435 5.99937 12 5.99937C13.8565 5.99937 15.637 6.73687 16.9497 8.04963C18.2625 9.36238 19 11.1429 19 12.9994C19 14.8559 18.2625 16.6364 16.9497 17.9491C15.637 19.2619 13.8565 19.9994 12 19.9994ZM12 3.99937C9.61305 3.99937 7.32387 4.94759 5.63604 6.63541C3.94821 8.32324 3 10.6124 3 12.9994C3 15.3863 3.94821 17.6755 5.63604 19.3633C7.32387 21.0512 9.61305 21.9994 12 21.9994C14.3869 21.9994 16.6761 21.0512 18.364 19.3633C20.0518 17.6755 21 15.3863 21 12.9994C21 10.6124 20.0518 8.32324 18.364 6.63541C16.6761 4.94759 14.3869 3.99937 12 3.99937ZM12.5 7.99937H11V13.9994L15.75 16.8494L16.5 15.6194L12.5 13.2494V7.99937ZM7.88 3.38938L6.6 1.85938L2 5.70937L3.29 7.23937L7.88 3.38938ZM22 5.71937L17.4 1.85938L16.11 3.38938L20.71 7.24937L22 5.71937Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alarm.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const Alarm: import("svelte").Component<Props, {}, "">;
+type Alarm = ReturnType<typeof Alarm>;
+export default Alarm;