@sentropic/design-system-svelte 0.3.0 → 0.4.0

package/dist/NumberInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type NumberInputProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    incrementLabel?: string;
+    decrementLabel?: string;
+    class?: string;
+};
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;
+//# sourceMappingURL=NumberInput.svelte.d.ts.map

package/dist/NumberInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NumberInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkFJ,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/PasswordInput.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type PasswordInputProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    showLabel?: string;
+    hideLabel?: string;
+    visible?: boolean;
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    size = "md",
+    value = $bindable(""),
+    showLabel = "Show password",
+    hideLabel = "Hide password",
+    visible = $bindable(false),
+    disabled,
+    class: className,
+    ...rest
+  }: PasswordInputProps = $props();
+
+  const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
+  const groupClasses = () => ["st-passwordInput", `st-passwordInput--${size}`].join(" ");
+  const isInvalid = () => invalid || Boolean(errorText);
+
+  function toggle() {
+    visible = !visible;
+  }
+</script>
+
+<div class={fieldClasses()}>
+  <label class="st-field__control">
+    {#if label}<span class="st-field__label">{label}</span>{/if}
+    <span class={groupClasses()}>
+      <input
+        {...rest}
+        type={visible ? "text" : "password"}
+        class="st-passwordInput__control"
+        bind:value
+        {disabled}
+        aria-invalid={isInvalid() ? "true" : undefined}
+        autocomplete="current-password"
+      />
+      <button
+        type="button"
+        class="st-passwordInput__toggle"
+        aria-label={visible ? hideLabel : showLabel}
+        aria-pressed={visible ? "true" : "false"}
+        {disabled}
+        onclick={toggle}
+      >
+        {#if visible}
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" width="16" height="16" aria-hidden="true">
+            <path d="M2 8s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4Z" />
+            <circle cx="8" cy="8" r="2" />
+            <path d="M2 2l12 12" stroke-linecap="round" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" width="16" height="16" aria-hidden="true">
+            <path d="M2 8s2-4 6-4 6 4 6 4-2 4-6 4-6-4-6-4Z" />
+            <circle cx="8" cy="8" r="2" />
+          </svg>
+        {/if}
+      </button>
+    </span>
+  </label>
+  {#if errorText}
+    <span class="st-field__error">{errorText}</span>
+  {:else if helperText}
+    <span class="st-field__help">{helperText}</span>
+  {/if}
+</div>
+
+<style>
+  .st-field {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+    max-width: var(--st-component-field-maxWidth, 28rem);
+  }
+
+  .st-field__control {
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+  }
+
+  .st-field__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-field__help,
+  .st-field__error {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .st-field__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-field__error {
+    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-passwordInput {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    display: inline-flex;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 100%;
+  }
+
+  .st-passwordInput--sm {
+    min-height: var(--st-component-control-smHeight, 2rem);
+  }
+
+  .st-passwordInput--md {
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+  }
+
+  .st-passwordInput--lg {
+    min-height: var(--st-component-control-lgHeight, 3rem);
+  }
+
+  .st-passwordInput:hover:not(:has(input:disabled)) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-passwordInput:focus-within {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-passwordInput:has([aria-invalid="true"]) {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-passwordInput__control {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 auto;
+    font: inherit;
+    min-width: 0;
+    padding: 0 0.75rem;
+    width: 100%;
+  }
+
+  .st-passwordInput__control:focus {
+    outline: none;
+  }
+
+  .st-passwordInput__control::placeholder {
+    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
+  }
+
+  .st-passwordInput__control:disabled {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+
+  .st-passwordInput__toggle {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    height: 100%;
+    justify-content: center;
+    padding: 0 0.625rem;
+    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-passwordInput__toggle:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-passwordInput__toggle:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: -2px;
+  }
+
+  .st-passwordInput__toggle:disabled {
+    cursor: not-allowed;
+  }
+</style>

package/dist/PasswordInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type PasswordInputProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    showLabel?: string;
+    hideLabel?: string;
+    visible?: boolean;
+    class?: string;
+};
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value" | "visible">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.svelte.d.ts.map

package/dist/PasswordInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PasswordInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6DJ,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ProgressBar.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    helperText?: string;
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    tone?: "neutral" | "success" | "warning" | "error";
+    size?: "sm" | "md" | "lg";
+    showValue?: boolean;
+    valueText?: string;
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    value = 0,
+    max = 100,
+    indeterminate = false,
+    tone = "neutral",
+    size = "md",
+    showValue = false,
+    valueText,
+    class: className,
+    ...rest
+  }: ProgressBarProps = $props();
+
+  const wrapperClasses = () => ["st-progressBar", className].filter(Boolean).join(" ");
+  const trackClasses = () =>
+    [
+      "st-progressBar__track",
+      `st-progressBar__track--${size}`,
+      `st-progressBar__track--${tone}`,
+      indeterminate ? "st-progressBar__track--indeterminate" : null
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  const clampedValue = () => {
+    if (max <= 0) return 0;
+    if (value < 0) return 0;
+    if (value > max) return max;
+    return value;
+  };
+
+  const percent = () => (indeterminate ? 0 : (clampedValue() / max) * 100);
+  const displayValue = () => {
+    if (valueText) return valueText;
+    if (indeterminate) return "";
+    return `${Math.round(percent())}%`;
+  };
+</script>
+
+<div {...rest} class={wrapperClasses()}>
+  {#if label || (showValue && !indeterminate)}
+    <div class="st-progressBar__header">
+      {#if label}<span class="st-progressBar__label">{label}</span>{/if}
+      {#if showValue && !indeterminate}
+        <span class="st-progressBar__value" aria-hidden="true">{displayValue()}</span>
+      {/if}
+    </div>
+  {/if}
+  <div
+    class={trackClasses()}
+    role="progressbar"
+    aria-valuemin={indeterminate ? undefined : 0}
+    aria-valuemax={indeterminate ? undefined : max}
+    aria-valuenow={indeterminate ? undefined : clampedValue()}
+    aria-valuetext={indeterminate ? undefined : displayValue()}
+    aria-label={label}
+  >
+    <div class="st-progressBar__fill" style="--st-progressBar-pct: {percent()}%"></div>
+  </div>
+  {#if helperText}<span class="st-progressBar__help">{helperText}</span>{/if}
+</div>
+
+<style>
+  .st-progressBar {
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    gap: 0.375rem;
+    width: 100%;
+  }
+
+  .st-progressBar__header {
+    align-items: baseline;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
+  }
+
+  .st-progressBar__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-progressBar__value {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .st-progressBar__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+
+  .st-progressBar__track {
+    background: var(--st-semantic-surface-subtle);
+    border-radius: var(--st-radius-pill, 999px);
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  .st-progressBar__track--sm {
+    height: 0.25rem;
+  }
+
+  .st-progressBar__track--md {
+    height: 0.5rem;
+  }
+
+  .st-progressBar__track--lg {
+    height: 0.75rem;
+  }
+
+  .st-progressBar__fill {
+    background: var(--st-progressBar-color, var(--st-semantic-action-primary));
+    border-radius: inherit;
+    height: 100%;
+    transform-origin: left center;
+    transition: width var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: var(--st-progressBar-pct, 0%);
+  }
+
+  .st-progressBar__track--neutral .st-progressBar__fill {
+    background: var(--st-semantic-action-primary);
+  }
+
+  .st-progressBar__track--success .st-progressBar__fill {
+    background: var(--st-semantic-feedback-success);
+  }
+
+  .st-progressBar__track--warning .st-progressBar__fill {
+    background: var(--st-semantic-feedback-warning);
+  }
+
+  .st-progressBar__track--error .st-progressBar__fill {
+    background: var(--st-semantic-feedback-error);
+  }
+
+  .st-progressBar__track--indeterminate .st-progressBar__fill {
+    animation: st-progressBar-indeterminate 1.4s ease-in-out infinite;
+    width: 30%;
+  }
+
+  @keyframes st-progressBar-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(380%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-progressBar__track--indeterminate .st-progressBar__fill {
+      animation: none;
+      width: 100%;
+    }
+  }
+</style>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "svelte/elements";
+type ProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    label?: string;
+    helperText?: string;
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    tone?: "neutral" | "success" | "warning" | "error";
+    size?: "sm" | "md" | "lg";
+    showValue?: boolean;
+    valueText?: string;
+    class?: string;
+};
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.svelte.d.ts.map

package/dist/ProgressBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgEJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Search.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type SearchProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    placeholder?: string;
+    clearLabel?: string;
+    class?: string;
+  };
+
+  let {
+    label,
+    helperText,
+    errorText,
+    invalid = false,
+    size = "md",
+    value = $bindable(""),
+    placeholder = "Search",
+    clearLabel = "Clear search",
+    disabled,
+    class: className,
+    ...rest
+  }: SearchProps = $props();
+
+  const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
+  const groupClasses = () => ["st-search", `st-search--${size}`].join(" ");
+  const isInvalid = () => invalid || Boolean(errorText);
+
+  function clear() {
+    value = "";
+  }
+</script>
+
+<div class={fieldClasses()}>
+  <label class="st-field__control">
+    {#if label}<span class="st-field__label">{label}</span>{/if}
+    <span class={groupClasses()}>
+      <span class="st-search__icon" aria-hidden="true">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
+          <circle cx="7" cy="7" r="4.5" />
+          <path d="m13 13-2.6-2.6" stroke-linecap="round" />
+        </svg>
+      </span>
+      <input
+        {...rest}
+        type="search"
+        role="searchbox"
+        class="st-search__control"
+        bind:value
+        {placeholder}
+        {disabled}
+        aria-invalid={isInvalid() ? "true" : undefined}
+      />
+      {#if value}
+        <button
+          type="button"
+          class="st-search__clear"
+          aria-label={clearLabel}
+          {disabled}
+          onclick={clear}
+        >
+          <span aria-hidden="true">×</span>
+        </button>
+      {/if}
+    </span>
+  </label>
+  {#if errorText}
+    <span class="st-field__error">{errorText}</span>
+  {:else if helperText}
+    <span class="st-field__help">{helperText}</span>
+  {/if}
+</div>
+
+<style>
+  .st-field {
+    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+    max-width: var(--st-component-field-maxWidth, 28rem);
+  }
+
+  .st-field__control {
+    display: grid;
+    gap: var(--st-component-field-gap, 0.5rem);
+  }
+
+  .st-field__label {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-field__help,
+  .st-field__error {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+
+  .st-field__help {
+    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
+  }
+
+  .st-field__error {
+    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
+  }
+
+  .st-search {
+    align-items: center;
+    background: var(--st-component-control-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-component-control-text, var(--st-semantic-text-primary));
+    display: inline-flex;
+    transition:
+      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 100%;
+  }
+
+  .st-search--sm {
+    min-height: var(--st-component-control-smHeight, 2rem);
+  }
+
+  .st-search--md {
+    min-height: var(--st-component-control-mdHeight, 2.5rem);
+  }
+
+  .st-search--lg {
+    min-height: var(--st-component-control-lgHeight, 3rem);
+  }
+
+  .st-search:hover:not(:has(input:disabled)) {
+    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-search:focus-within {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+  }
+
+  .st-search:has([aria-invalid="true"]) {
+    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
+  }
+
+  .st-search__icon {
+    align-items: center;
+    color: var(--st-semantic-text-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding-inline-start: 0.625rem;
+  }
+
+  .st-search__control {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    flex: 1 1 auto;
+    font: inherit;
+    min-width: 0;
+    padding: 0 0.5rem;
+    width: 100%;
+  }
+
+  .st-search__control:focus {
+    outline: none;
+  }
+
+  .st-search__control::placeholder {
+    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
+  }
+
+  .st-search__control::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .st-search__control:disabled {
+    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+  }
+
+  .st-search__clear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    font-size: 1.125rem;
+    height: 1.5rem;
+    justify-content: center;
+    line-height: 1;
+    margin-inline-end: 0.375rem;
+    padding: 0;
+    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+    width: 1.5rem;
+  }
+
+  .st-search__clear:hover:not(:disabled) {
+    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  }
+
+  .st-search__clear:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 1px;
+  }
+
+  .st-search__clear:disabled {
+    cursor: not-allowed;
+  }
+</style>

package/dist/Search.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type SearchProps = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value"> & {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    placeholder?: string;
+    clearLabel?: string;
+    class?: string;
+};
+declare const Search: import("svelte").Component<SearchProps, {}, "value">;
+type Search = ReturnType<typeof Search>;
+export default Search;
+//# sourceMappingURL=Search.svelte.d.ts.map

package/dist/Search.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,WAAW,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAyDJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}