plasma-svelte 0.0.1

package/dist/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    separator?: string | Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    separator,
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<nav
+  aria-label="Breadcrumb"
+  class="plasma-breadcrumb {customClass}"
+  {...restProps}
+>
+  <ol class="plasma-breadcrumb-list">
+    {@render children?.()}
+  </ol>
+</nav>
+
+<style>
+  .plasma-breadcrumb {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .plasma-breadcrumb-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+    margin: 0;
+    padding: 2px 6px;
+    list-style: none;
+    background-color: var(--plasma-color-view-bg);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-md);
+  }
+
+  /* Default Dolphin Chevron Separator */
+  :global(.plasma-breadcrumb-list > li + li::before) {
+    content: "›";
+    display: inline-block;
+    padding: 0 4px;
+    font-size: 14px;
+    font-weight: bold;
+    color: var(--plasma-color-text-muted);
+    opacity: 0.7;
+    user-select: none;
+  }
+</style>

package/dist/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLElement> {
+    separator?: string | Snippet;
+    children?: Snippet;
+}
+declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLLIElement> {
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+    label?: string;
+    onclick?: (e: MouseEvent) => void;
+  }
+
+  let {
+    href,
+    active = false,
+    disabled = false,
+    icon,
+    children,
+    label = "",
+    class: customClass = "",
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  function handleClick(e: MouseEvent) {
+    if (disabled || active) {
+      e.preventDefault();
+      return;
+    }
+    onclick?.(e);
+  }
+</script>
+
+<li
+  class="plasma-breadcrumb-item {customClass}"
+  class:plasma-breadcrumb-item--active={active}
+  class:plasma-breadcrumb-item--disabled={disabled}
+  aria-current={active ? "page" : undefined}
+  {...restProps}
+>
+  {#if href && !active}
+    <a
+      {href}
+      class="plasma-breadcrumb-link"
+      onclick={handleClick}
+    >
+      {#if icon}
+        <span class="plasma-breadcrumb-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      <span>
+        {#if children}
+          {@render children()}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </a>
+  {:else if !active}
+    <button
+      type="button"
+      {disabled}
+      class="plasma-breadcrumb-btn"
+      onclick={handleClick}
+    >
+      {#if icon}
+        <span class="plasma-breadcrumb-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      <span>
+        {#if children}
+          {@render children()}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </button>
+  {:else}
+    <span class="plasma-breadcrumb-current">
+      {#if icon}
+        <span class="plasma-breadcrumb-icon">
+          {@render icon()}
+        </span>
+      {/if}
+      <span>
+        {#if children}
+          {@render children()}
+        {:else}
+          {label}
+        {/if}
+      </span>
+    </span>
+  {/if}
+</li>
+
+<style>
+  .plasma-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-sm);
+  }
+
+  .plasma-breadcrumb-link,
+  .plasma-breadcrumb-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border: none;
+    border-radius: var(--plasma-radius-sm);
+    background: transparent;
+    color: var(--plasma-color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-breadcrumb-link:hover,
+  .plasma-breadcrumb-btn:hover:not(:disabled) {
+    background-color: var(--plasma-color-surface-hover);
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-breadcrumb-current {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    color: var(--plasma-color-text);
+    font-weight: var(--plasma-font-weight-bold);
+  }
+
+  .plasma-breadcrumb-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  .plasma-breadcrumb-item--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+</style>

package/dist/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends HTMLAttributes<HTMLLIElement> {
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+    label?: string;
+    onclick?: (e: MouseEvent) => void;
+}
+declare const BreadcrumbItem: import("svelte").Component<Props, {}, "">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/button/Button.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+
+  type ButtonVariant = "default" | "secondary" | "primary" | "flat" | "tool" | "danger";
+  type ButtonSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+    variant?: ButtonVariant;
+    primary?: boolean;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: HTMLButtonAttributes["type"];
+    form?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    download?: boolean | string;
+    label?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = "default",
+    primary = false,
+    size = "md",
+    disabled = false,
+    loading = false,
+    type = "button",
+    form,
+    href,
+    target,
+    rel,
+    download,
+    label,
+    children,
+    class: customClass = "",
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Normalize size strings
+  const resolvedSize = $derived(
+    size === "small" ? "sm" : size === "large" ? "lg" : size === "medium" ? "md" : size
+  );
+
+  // Normalize variant strings (primary prop overrides, secondary maps to default, tool maps to flat)
+  const resolvedVariant = $derived(
+    primary
+      ? "primary"
+      : variant === "secondary"
+        ? "default"
+        : variant === "tool"
+          ? "flat"
+          : variant
+  );
+
+  const isInteractiveDisabled = $derived(disabled || loading);
+
+  function handleClick(e: MouseEvent) {
+    if (isInteractiveDisabled) {
+      e.preventDefault();
+      return;
+    }
+    (onclick as ((e: MouseEvent) => void) | undefined)?.(e);
+  }
+</script>
+
+{#if href}
+  <a
+    {href}
+    {target}
+    {download}
+    rel={target === "_blank" && !rel ? "noopener noreferrer" : rel}
+    class="plasma-btn plasma-btn--{resolvedVariant} plasma-btn--{resolvedSize} {customClass}"
+    class:plasma-btn--loading={loading}
+    class:plasma-btn--disabled={isInteractiveDisabled}
+    aria-disabled={isInteractiveDisabled ? "true" : undefined}
+    aria-busy={loading ? "true" : undefined}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="plasma-btn-spinner" aria-hidden="true"></span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {:else if label}
+      {label}
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    {form}
+    class="plasma-btn plasma-btn--{resolvedVariant} plasma-btn--{resolvedSize} {customClass}"
+    class:plasma-btn--loading={loading}
+    disabled={isInteractiveDisabled}
+    aria-busy={loading ? "true" : undefined}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if loading}
+      <span class="plasma-btn-spinner" aria-hidden="true"></span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {:else if label}
+      {label}
+    {/if}
+  </button>
+{/if}
+
+
+<style>
+  .plasma-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--plasma-space-xs);
+    font-family: var(--plasma-font-sans);
+    font-weight: var(--plasma-font-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    border-radius: var(--plasma-radius-md);
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid transparent;
+    transition: var(--plasma-transition-fast);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-btn--sm {
+    height: var(--plasma-control-height-sm);
+    padding: 0 var(--plasma-space-sm);
+    font-size: var(--plasma-font-size-xs);
+  }
+
+  .plasma-btn--md {
+    height: var(--plasma-control-height-md);
+    padding: 0 var(--plasma-space-md);
+    font-size: var(--plasma-font-size-base);
+  }
+
+  .plasma-btn--lg {
+    height: var(--plasma-control-height-lg);
+    padding: 0 var(--plasma-space-lg);
+    font-size: var(--plasma-font-size-md);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variant: Default (Breeze Standard PushButton)
+     -------------------------------------------------------------------------- */
+  .plasma-btn--default {
+    background-color: var(--plasma-color-surface);
+    border-color: var(--plasma-color-border);
+    color: var(--plasma-color-text);
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  .plasma-btn--default:hover:not(:disabled) {
+    background-color: var(--plasma-color-surface-hover);
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-btn--default:active:not(:disabled) {
+    background-color: var(--plasma-color-surface-active);
+    border-color: var(--plasma-color-border-focus);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variant: Primary (Breeze Default/Highlight Action)
+     -------------------------------------------------------------------------- */
+  .plasma-btn--primary {
+    background-color: var(--plasma-color-highlight);
+    border-color: var(--plasma-color-highlight-hover);
+    color: var(--plasma-color-highlight-text);
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  .plasma-btn--primary:hover:not(:disabled) {
+    background-color: var(--plasma-color-highlight-hover);
+    border-color: var(--plasma-color-highlight-active);
+  }
+
+  .plasma-btn--primary:active:not(:disabled) {
+    background-color: var(--plasma-color-highlight-active);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variant: Flat / ToolButton (KDE Toolbar style)
+     -------------------------------------------------------------------------- */
+  .plasma-btn--flat {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-btn--flat:hover:not(:disabled) {
+    background-color: var(--plasma-color-surface-hover);
+    border-color: var(--plasma-color-border-subtle);
+  }
+
+  .plasma-btn--flat:active:not(:disabled) {
+    background-color: var(--plasma-color-surface-active);
+    border-color: var(--plasma-color-border);
+  }
+
+  /* --------------------------------------------------------------------------
+     Variant: Danger (Destructive Action)
+     -------------------------------------------------------------------------- */
+  .plasma-btn--danger {
+    background-color: var(--plasma-color-negative);
+    border-color: var(--plasma-color-negative-hover);
+    color: #ffffff;
+    box-shadow: var(--plasma-shadow-xs);
+  }
+
+  .plasma-btn--danger:hover:not(:disabled) {
+    background-color: var(--plasma-color-negative-hover);
+    border-color: var(--plasma-color-negative-hover);
+  }
+
+  .plasma-btn--danger:active:not(:disabled) {
+    background-color: #ba2837;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  /* --------------------------------------------------------------------------
+     Focus & Disabled States
+     -------------------------------------------------------------------------- */
+  .plasma-btn:focus-visible {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 1px;
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  .plasma-btn:disabled,
+  .plasma-btn--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  /* --------------------------------------------------------------------------
+     Spinner for loading button
+     -------------------------------------------------------------------------- */
+  .plasma-btn-spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--plasma-radius-full);
+    animation: plasma-btn-spin 0.75s linear infinite;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  @keyframes plasma-btn-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/button/Button.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+type ButtonVariant = "default" | "secondary" | "primary" | "flat" | "tool" | "danger";
+type ButtonSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+    variant?: ButtonVariant;
+    primary?: boolean;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: HTMLButtonAttributes["type"];
+    form?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+    download?: boolean | string;
+    label?: string;
+    children?: Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/button/ButtonGroup.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ButtonGroupOrientation = "horizontal" | "vertical";
+  type ButtonGroupSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "size"> {
+    orientation?: ButtonGroupOrientation;
+    size?: ButtonGroupSize;
+    children?: Snippet;
+  }
+
+  let {
+    orientation = "horizontal",
+    size = "md",
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+
+  const resolvedSize = $derived(
+    size === "small"
+      ? "sm"
+      : size === "large"
+        ? "lg"
+        : size === "medium"
+          ? "md"
+          : size
+  );
+</script>
+
+<div
+  role="group"
+  class="plasma-button-group plasma-button-group--{orientation} plasma-button-group--{resolvedSize} {customClass}"
+  {...restProps}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .plasma-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+    box-sizing: border-box;
+  }
+
+  /* --------------------------------------------------------------------------
+     Horizontal Grouping
+     -------------------------------------------------------------------------- */
+  .plasma-button-group--horizontal {
+    flex-direction: row;
+  }
+
+  .plasma-button-group--horizontal > :global(.plasma-button:not(:first-child)),
+  .plasma-button-group--horizontal > :global(button:not(:first-child)) {
+    margin-left: -1px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .plasma-button-group--horizontal > :global(.plasma-button:not(:last-child)),
+  .plasma-button-group--horizontal > :global(button:not(:last-child)) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+     Vertical Grouping
+     -------------------------------------------------------------------------- */
+  .plasma-button-group--vertical {
+    flex-direction: column;
+  }
+
+  .plasma-button-group--vertical > :global(.plasma-button:not(:first-child)),
+  .plasma-button-group--vertical > :global(button:not(:first-child)) {
+    margin-top: -1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .plasma-button-group--vertical > :global(.plasma-button:not(:last-child)),
+  .plasma-button-group--vertical > :global(button:not(:last-child)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+     Hover & Focus Layering
+     -------------------------------------------------------------------------- */
+  .plasma-button-group > :global(.plasma-button:hover),
+  .plasma-button-group > :global(button:hover),
+  .plasma-button-group > :global(.plasma-button:focus-visible),
+  .plasma-button-group > :global(button:focus-visible),
+  .plasma-button-group > :global(.plasma-button--primary) {
+    z-index: 1;
+  }
+</style>

package/dist/button/ButtonGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type ButtonGroupOrientation = "horizontal" | "vertical";
+type ButtonGroupSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "size"> {
+    orientation?: ButtonGroupOrientation;
+    size?: ButtonGroupSize;
+    children?: Snippet;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;