plasma-svelte 0.0.1

package/dist/spinbox/SpinBox.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SpinBoxSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "size" | "onchange" | "prefix"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: SpinBoxSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    placeholder?: string;
+    onchange?: (val: number) => void;
+  }
+
+
+  let {
+    value = $bindable(0),
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    size = "md",
+    disabled = false,
+    readonly = false,
+    invalid = false,
+    prefix,
+    suffix,
+    placeholder = "",
+    onchange,
+    class: customClass = "",
+    id,
+    ...restProps
+  }: Props = $props();
+
+  const resolvedSize = $derived(
+    size === "small"
+      ? "sm"
+      : size === "large"
+        ? "lg"
+        : size === "medium"
+          ? "md"
+          : size
+  );
+
+  function clamp(val: number): number {
+    return Math.min(max, Math.max(min, val));
+  }
+
+  function increment() {
+    if (disabled || readonly) return;
+    const next = clamp((value ?? 0) + step);
+    value = next;
+    onchange?.(next);
+  }
+
+  function decrement() {
+    if (disabled || readonly) return;
+    const next = clamp((value ?? 0) - step);
+    value = next;
+    onchange?.(next);
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const num = parseFloat(target.value);
+    if (!isNaN(num)) {
+      value = clamp(num);
+      onchange?.(value);
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (disabled || readonly) return;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      increment();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      decrement();
+    }
+  }
+</script>
+
+<div
+  class="plasma-spinbox plasma-spinbox--{resolvedSize} {customClass}"
+  class:plasma-spinbox--disabled={disabled}
+  class:plasma-spinbox--readonly={readonly}
+  class:plasma-spinbox--invalid={invalid}
+  {...restProps}
+>
+  {#if prefix}
+    <span class="plasma-spinbox-affix plasma-spinbox-prefix">
+      {#if typeof prefix === "string"}
+        {prefix}
+      {:else}
+        {@render prefix()}
+      {/if}
+    </span>
+  {/if}
+
+  <input
+    {id}
+    type="number"
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {readonly}
+    {placeholder}
+    value={value}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    class="plasma-spinbox-input"
+  />
+
+  {#if suffix}
+    <span class="plasma-spinbox-affix plasma-spinbox-suffix">
+      {#if typeof suffix === "string"}
+        {suffix}
+      {:else}
+        {@render suffix()}
+      {/if}
+    </span>
+  {/if}
+
+  <div class="plasma-spinbox-steppers">
+    <button
+      type="button"
+      tabindex="-1"
+      aria-label="Increment"
+      {disabled}
+      onclick={increment}
+      class="plasma-spinbox-btn plasma-spinbox-btn--up"
+    >
+      <svg aria-hidden="true" viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
+        <path d="M3.146 10.354a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0l4.5 4.5a.5.5 0 0 1-.708.708L8 6.207l-4.146 4.147a.5.5 0 0 1-.708 0z" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      tabindex="-1"
+      aria-label="Decrement"
+      {disabled}
+      onclick={decrement}
+      class="plasma-spinbox-btn plasma-spinbox-btn--down"
+    >
+      <svg aria-hidden="true" viewBox="0 0 16 16" width="10" height="10" fill="currentColor">
+        <path d="M3.146 5.646a.5.5 0 0 0 0 .708l4.5 4.5a.5.5 0 0 0 .708 0l4.5-4.5a.5.5 0 0 0-.708-.708L8 9.793 3.854 5.646a.5.5 0 0 0-.708 0z" />
+      </svg>
+    </button>
+  </div>
+</div>
+
+<style>
+  .plasma-spinbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: var(--plasma-font-sans);
+    background-color: var(--plasma-color-view-bg);
+    border: 1px solid var(--plasma-color-border);
+    border-radius: var(--plasma-radius-md);
+    color: var(--plasma-color-text);
+    box-shadow: var(--plasma-shadow-xs);
+    transition: var(--plasma-transition-fast);
+    overflow: hidden;
+  }
+
+  .plasma-spinbox:hover:not(.plasma-spinbox--disabled):not(:focus-within) {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-spinbox:focus-within:not(.plasma-spinbox--disabled) {
+    border-color: var(--plasma-color-highlight);
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  .plasma-spinbox--invalid {
+    border-color: var(--plasma-color-negative);
+  }
+
+  .plasma-spinbox--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background-color: var(--plasma-color-surface-sunken);
+  }
+
+  /* --------------------------------------------------------------------------
+     Input Field
+     -------------------------------------------------------------------------- */
+  .plasma-spinbox-input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font-family: var(--plasma-font-mono);
+    font-size: inherit;
+    padding: 0 var(--plasma-space-sm);
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+
+  .plasma-spinbox-input::-webkit-outer-spin-button,
+  .plasma-spinbox-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .plasma-spinbox-affix {
+    display: inline-flex;
+    align-items: center;
+    color: var(--plasma-color-text-muted);
+    font-size: var(--plasma-font-size-xs);
+    user-select: none;
+  }
+
+  .plasma-spinbox-prefix {
+    padding-left: var(--plasma-space-sm);
+  }
+
+  .plasma-spinbox-suffix {
+    padding-right: var(--plasma-space-xs);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-spinbox--sm {
+    height: var(--plasma-control-height-sm);
+    font-size: var(--plasma-font-size-xs);
+  }
+
+  .plasma-spinbox--md {
+    height: var(--plasma-control-height-md);
+    font-size: var(--plasma-font-size-base);
+  }
+
+  .plasma-spinbox--lg {
+    height: var(--plasma-control-height-lg);
+    font-size: var(--plasma-font-size-md);
+  }
+
+  /* --------------------------------------------------------------------------
+     Stepper Buttons
+     -------------------------------------------------------------------------- */
+  .plasma-spinbox-steppers {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 24px;
+    border-left: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface);
+    flex-shrink: 0;
+  }
+
+  .plasma-spinbox-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: var(--plasma-color-text-muted);
+    cursor: pointer;
+    padding: 0;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-spinbox-btn--up {
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+  }
+
+  .plasma-spinbox-btn:hover:not(:disabled) {
+    background-color: var(--plasma-color-highlight-soft);
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-spinbox-btn:active:not(:disabled) {
+    background-color: var(--plasma-color-highlight);
+    color: #ffffff;
+  }
+
+  .plasma-spinbox-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

package/dist/spinbox/SpinBox.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type SpinBoxSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "size" | "onchange" | "prefix"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: SpinBoxSize;
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    placeholder?: string;
+    onchange?: (val: number) => void;
+}
+declare const SpinBox: import("svelte").Component<Props, {}, "value">;
+type SpinBox = ReturnType<typeof SpinBox>;
+export default SpinBox;

package/dist/spinner/Spinner.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SpinnerSize = "sm" | "md" | "lg" | "xl";
+  type SpinnerVariant = "primary" | "current" | "white" | "muted";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+    label?: string;
+  }
+
+  let {
+    size = "md",
+    variant = "primary",
+    label = "Loading...",
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div
+  role="status"
+  aria-label={label}
+  class="plasma-spinner plasma-spinner--{size} plasma-spinner--{variant} {customClass}"
+  {...restProps}
+>
+  <span class="plasma-spinner-circle"></span>
+  <span class="sr-only">{label}</span>
+</div>
+
+<style>
+  .plasma-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  .plasma-spinner-circle {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--plasma-radius-full);
+    border-style: solid;
+    animation: plasma-spin 0.8s linear infinite;
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizing
+     -------------------------------------------------------------------------- */
+  .plasma-spinner--sm {
+    width: 14px;
+    height: 14px;
+  }
+  .plasma-spinner--sm .plasma-spinner-circle {
+    border-width: 2px;
+  }
+
+  .plasma-spinner--md {
+    width: 20px;
+    height: 20px;
+  }
+  .plasma-spinner--md .plasma-spinner-circle {
+    border-width: 2.5px;
+  }
+
+  .plasma-spinner--lg {
+    width: 32px;
+    height: 32px;
+  }
+  .plasma-spinner--lg .plasma-spinner-circle {
+    border-width: 3px;
+  }
+
+  .plasma-spinner--xl {
+    width: 48px;
+    height: 48px;
+  }
+  .plasma-spinner--xl .plasma-spinner-circle {
+    border-width: 4px;
+  }
+
+  /* --------------------------------------------------------------------------
+     Variants
+     -------------------------------------------------------------------------- */
+  .plasma-spinner--primary .plasma-spinner-circle {
+    border-color: var(--plasma-color-border-subtle);
+    border-top-color: var(--plasma-color-highlight);
+  }
+
+  .plasma-spinner--current .plasma-spinner-circle {
+    border-color: transparent;
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+  }
+
+  .plasma-spinner--white .plasma-spinner-circle {
+    border-color: rgba(255, 255, 255, 0.25);
+    border-top-color: #ffffff;
+  }
+
+  .plasma-spinner--muted .plasma-spinner-circle {
+    border-color: var(--plasma-color-border-subtle);
+    border-top-color: var(--plasma-color-text-muted);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @keyframes plasma-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/dist/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+type SpinnerSize = "sm" | "md" | "lg" | "xl";
+type SpinnerVariant = "primary" | "current" | "white" | "muted";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    size?: SpinnerSize;
+    variant?: SpinnerVariant;
+    label?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/style/base.css

@@ -0,0 +1,178 @@
+/* ==========================================================================
+   Plasma / KDE Breeze Base & Global Styles
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   KDE Breeze Typography Web Fonts (Noto Sans & JetBrains Mono)
+   -------------------------------------------------------------------------- */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html {
+	font-family: var(--plasma-font-sans);
+	font-size: 16px;
+	line-height: var(--plasma-line-height-base);
+	-webkit-text-size-adjust: 100%;
+	tab-size: 4;
+}
+
+body {
+	margin: 0;
+	font-family: var(--plasma-font-sans);
+	font-size: var(--plasma-font-size-base);
+	color: var(--plasma-color-text);
+	background-color: var(--plasma-color-window-bg);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* --------------------------------------------------------------------------
+   Headings & Typography Hierarchy
+   -------------------------------------------------------------------------- */
+h1, h2, h3, h4, h5, h6 {
+	margin: 0 0 var(--plasma-space-sm) 0;
+	font-family: var(--plasma-font-sans);
+	font-weight: var(--plasma-font-weight-bold);
+	line-height: var(--plasma-line-height-tight);
+	color: var(--plasma-color-text);
+}
+
+h1 { font-size: var(--plasma-font-size-2xl); }
+h2 { font-size: var(--plasma-font-size-xl); }
+h3 { font-size: var(--plasma-font-size-lg); }
+h4 { font-size: var(--plasma-font-size-md); }
+h5 { font-size: var(--plasma-font-size-base); }
+h6 { font-size: var(--plasma-font-size-sm); }
+
+p {
+	margin: 0 0 var(--plasma-space-md) 0;
+	line-height: var(--plasma-line-height-base);
+}
+
+small {
+	font-size: var(--plasma-font-size-xs);
+	color: var(--plasma-color-text-muted);
+}
+
+/* --------------------------------------------------------------------------
+   Code & Monospace Blocks
+   -------------------------------------------------------------------------- */
+code,
+kbd,
+samp,
+pre {
+	font-family: var(--plasma-font-mono);
+	font-size: var(--plasma-font-size-xs);
+}
+
+code {
+	padding: 2px 4px;
+	border-radius: var(--plasma-radius-sm);
+	background-color: var(--plasma-color-surface-sunken);
+	border: 1px solid var(--plasma-color-border-subtle);
+	color: var(--plasma-color-highlight);
+}
+
+pre {
+	padding: var(--plasma-space-md);
+	border-radius: var(--plasma-radius-md);
+	background-color: var(--plasma-color-surface-sunken);
+	border: 1px solid var(--plasma-color-border);
+	overflow-x: auto;
+}
+
+pre code {
+	padding: 0;
+	background: transparent;
+	border: none;
+	color: inherit;
+}
+
+kbd {
+	display: inline-block;
+	padding: 2px 5px;
+	font-size: 11px;
+	line-height: 1;
+	color: var(--plasma-color-text);
+	background-color: var(--plasma-color-surface);
+	border: 1px solid var(--plasma-color-border);
+	border-radius: var(--plasma-radius-sm);
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* --------------------------------------------------------------------------
+   Form Elements Font Inheritance
+   -------------------------------------------------------------------------- */
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+/* --------------------------------------------------------------------------
+   Selection Highlight (Breeze Blue)
+   -------------------------------------------------------------------------- */
+::selection {
+	background-color: var(--plasma-color-highlight);
+	color: var(--plasma-color-highlight-text);
+}
+
+/* --------------------------------------------------------------------------
+   KDE Breeze Scrollbars
+   -------------------------------------------------------------------------- */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--plasma-color-border) transparent;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--plasma-color-border);
+	border-radius: var(--plasma-radius-full);
+	border: 2px solid transparent;
+	background-clip: padding-box;
+	transition: var(--plasma-transition-fast);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--plasma-color-text-muted);
+}
+
+/* --------------------------------------------------------------------------
+   Default Focus Outline (Breeze 2px Accent Ring)
+   -------------------------------------------------------------------------- */
+:focus-visible {
+	outline: 2px solid var(--plasma-color-highlight);
+	outline-offset: 1px;
+}
+
+/* --------------------------------------------------------------------------
+   Links
+   -------------------------------------------------------------------------- */
+a {
+	color: var(--plasma-color-text-link);
+	text-decoration: none;
+	transition: var(--plasma-transition-fast);
+}
+
+a:hover {
+	text-decoration: underline;
+	color: var(--plasma-color-highlight-hover);
+}

package/dist/style/index.css

@@ -0,0 +1,2 @@
+@import "./token.css";
+@import "./base.css";