plasma-svelte 0.0.1

package/dist/sidebar/Sidebar.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    width?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    width = "240px",
+    header,
+    footer,
+    children,
+    class: customClass = "",
+    style = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<aside
+  class="plasma-sidebar {customClass}"
+  style="width: {width}; {style}"
+  {...restProps}
+>
+  {#if header}
+    <div class="plasma-sidebar-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <nav class="plasma-sidebar-content">
+    {@render children?.()}
+  </nav>
+
+  {#if footer}
+    <div class="plasma-sidebar-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</aside>
+
+<style>
+  .plasma-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 320px;
+    background-color: var(--plasma-color-surface);
+    border-right: 1px solid var(--plasma-color-border-subtle);
+    font-family: var(--plasma-font-sans);
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .plasma-sidebar-header {
+    padding: var(--plasma-space-md);
+    border-bottom: 1px solid var(--plasma-color-border-subtle);
+  }
+
+  .plasma-sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--plasma-space-md) var(--plasma-space-sm);
+    display: flex;
+    flex-direction: column;
+    scrollbar-width: thin;
+    scrollbar-color: var(--plasma-color-border) transparent;
+  }
+
+  .plasma-sidebar-footer {
+    padding: var(--plasma-space-md);
+    border-top: 1px solid var(--plasma-color-border-subtle);
+    background-color: var(--plasma-color-surface-sunken);
+  }
+</style>

package/dist/sidebar/Sidebar.svelte.d.ts

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

package/dist/sidebar/SidebarGroup.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = "",
+    children,
+    class: customClass = "",
+    ...restProps
+  }: Props = $props();
+</script>
+
+<div class="plasma-sidebar-group {customClass}" {...restProps}>
+  {#if title}
+    <div class="plasma-sidebar-group-title">{title}</div>
+  {/if}
+  <div class="plasma-sidebar-group-items">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>
+  .plasma-sidebar-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: var(--plasma-space-md);
+  }
+
+  .plasma-sidebar-group-title {
+    padding: var(--plasma-space-xs) var(--plasma-space-md);
+    font-family: var(--plasma-font-sans);
+    font-size: 11px;
+    font-weight: var(--plasma-font-weight-bold);
+    color: var(--plasma-color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    user-select: none;
+  }
+
+  .plasma-sidebar-group-items {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+</style>

package/dist/sidebar/SidebarGroup.svelte.d.ts

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

package/dist/sidebar/SidebarItem.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
+    id?: string;
+    label?: string;
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    icon?: Snippet;
+    badge?: string | number;
+    children?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+  }
+
+  let {
+    id = "",
+    label = "",
+    active = false,
+    disabled = false,
+    href,
+    icon,
+    badge,
+    children,
+    class: customClass = "",
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onclick?.(e);
+  }
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="plasma-sidebar-item {customClass}"
+    class:plasma-sidebar-item--active={active}
+    class:plasma-sidebar-item--disabled={disabled}
+    aria-current={active ? "page" : undefined}
+    aria-disabled={disabled}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if icon}
+      <span class="plasma-sidebar-item-icon">
+        {@render icon()}
+      </span>
+    {/if}
+
+    <span class="plasma-sidebar-item-label">
+      {#if children}
+        {@render children()}
+      {:else}
+        {label}
+      {/if}
+    </span>
+
+    {#if badge !== undefined}
+      <span class="plasma-sidebar-item-badge">{badge}</span>
+    {/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class="plasma-sidebar-item {customClass}"
+    class:plasma-sidebar-item--active={active}
+    class:plasma-sidebar-item--disabled={disabled}
+    aria-pressed={active}
+    {disabled}
+    onclick={handleClick}
+    {...restProps}
+  >
+    {#if icon}
+      <span class="plasma-sidebar-item-icon">
+        {@render icon()}
+      </span>
+    {/if}
+
+    <span class="plasma-sidebar-item-label">
+      {#if children}
+        {@render children()}
+      {:else}
+        {label}
+      {/if}
+    </span>
+
+    {#if badge !== undefined}
+      <span class="plasma-sidebar-item-badge">{badge}</span>
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .plasma-sidebar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+    width: 100%;
+    padding: 7px var(--plasma-space-md);
+    border: none;
+    border-radius: var(--plasma-radius-md);
+    background: transparent;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+    text-decoration: none;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-sidebar-item:hover:not(.plasma-sidebar-item--disabled) {
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  /* Active KDE Breeze Row Indicator */
+  .plasma-sidebar-item--active {
+    background-color: var(--plasma-color-highlight-soft);
+    color: var(--plasma-color-highlight);
+    font-weight: var(--plasma-font-weight-medium);
+  }
+
+  .plasma-sidebar-item--active::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 6px;
+    bottom: 6px;
+    width: 3px;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-highlight);
+  }
+
+  .plasma-sidebar-item--active .plasma-sidebar-item-icon {
+    color: var(--plasma-color-highlight);
+  }
+
+  .plasma-sidebar-item--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .plasma-sidebar-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    color: var(--plasma-color-text-muted);
+    flex-shrink: 0;
+  }
+
+  .plasma-sidebar-item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .plasma-sidebar-item-badge {
+    padding: 1px 6px;
+    font-size: 11px;
+    font-weight: var(--plasma-font-weight-bold);
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-surface-sunken);
+    color: var(--plasma-color-text-muted);
+    border: 1px solid var(--plasma-color-border-subtle);
+  }
+
+  .plasma-sidebar-item--active .plasma-sidebar-item-badge {
+    background-color: var(--plasma-color-highlight);
+    color: #ffffff;
+    border-color: transparent;
+  }
+</style>

package/dist/sidebar/SidebarItem.svelte.d.ts

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

package/dist/slider/Slider.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "value"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    label?: string;
+    children?: Snippet;
+    style?: string;
+  }
+
+  let {
+    value = $bindable(50),
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showValue = false,
+    label,
+    children,
+    class: customClass = "",
+    style: customStyle = "",
+    id,
+    ...restProps
+  }: Props = $props();
+
+  const percentage = $derived(
+    Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
+  );
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = parseFloat(target.value);
+  }
+</script>
+
+<div
+  class="plasma-slider-wrapper {customClass}"
+  class:plasma-slider--disabled={disabled}
+  style={customStyle}
+>
+
+  {#if label || children || showValue}
+    <div class="plasma-slider-header">
+      {#if children}
+        <span class="plasma-slider-label">
+          {@render children()}
+        </span>
+      {:else if label}
+        <label for={id} class="plasma-slider-label">
+          {label}
+        </label>
+      {/if}
+
+      {#if showValue}
+        <span class="plasma-slider-value">
+          {value}
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="plasma-slider-track-container">
+    <input
+      {id}
+      type="range"
+      {min}
+      {max}
+      {step}
+      {disabled}
+      {value}
+      oninput={handleInput}
+      style="--slider-percent: {percentage}%;"
+      class="plasma-slider-input"
+      {...restProps}
+    />
+  </div>
+</div>
+
+<style>
+  .plasma-slider-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--plasma-space-xs);
+    width: 100%;
+    font-family: var(--plasma-font-sans);
+    color: var(--plasma-color-text);
+  }
+
+  .plasma-slider--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .plasma-slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--plasma-font-size-sm);
+  }
+
+  .plasma-slider-label {
+    color: var(--plasma-color-text);
+    font-weight: var(--plasma-font-weight-medium);
+  }
+
+  .plasma-slider-value {
+    font-family: var(--plasma-font-mono);
+    font-size: var(--plasma-font-size-xs);
+    color: var(--plasma-color-text-muted);
+    background-color: var(--plasma-color-surface-sunken);
+    padding: 1px 6px;
+    border-radius: var(--plasma-radius-sm);
+  }
+
+  .plasma-slider-track-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 20px;
+  }
+
+  /* --------------------------------------------------------------------------
+     Range Input Reset & Breeze Styling
+     -------------------------------------------------------------------------- */
+  .plasma-slider-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 6px;
+    border-radius: var(--plasma-radius-full);
+    outline: none;
+    background: linear-gradient(
+      to right,
+      var(--plasma-color-highlight) 0%,
+      var(--plasma-color-highlight) var(--slider-percent),
+      var(--plasma-color-border) var(--slider-percent),
+      var(--plasma-color-border) 100%
+    );
+    margin: 0;
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-slider--disabled .plasma-slider-input {
+    cursor: not-allowed;
+  }
+
+  /* WebKit Thumb */
+  .plasma-slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-surface);
+    border: 1px solid var(--plasma-color-border);
+    box-shadow: var(--plasma-shadow-xs);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-slider-input:hover:not(:disabled)::-webkit-slider-thumb {
+    border-color: var(--plasma-color-border-hover);
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  .plasma-slider-input:active:not(:disabled)::-webkit-slider-thumb {
+    border-color: var(--plasma-color-highlight-hover);
+    background-color: var(--plasma-color-surface-active);
+  }
+
+  /* Firefox Thumb */
+  .plasma-slider-input::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-surface);
+    border: 1px solid var(--plasma-color-border);
+    box-shadow: var(--plasma-shadow-xs);
+    cursor: pointer;
+    transition: var(--plasma-transition-fast);
+  }
+
+  .plasma-slider-input:hover:not(:disabled)::-moz-range-thumb {
+    border-color: var(--plasma-color-border-hover);
+    background-color: var(--plasma-color-surface-hover);
+  }
+
+  .plasma-slider-input:active:not(:disabled)::-moz-range-thumb {
+    border-color: var(--plasma-color-highlight-hover);
+    background-color: var(--plasma-color-surface-active);
+  }
+
+  /* Focus visible */
+  .plasma-slider-input:focus-visible {
+    box-shadow: var(--plasma-shadow-focus);
+  }
+</style>

package/dist/slider/Slider.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLInputAttributes, "size" | "type" | "value"> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    label?: string;
+    children?: Snippet;
+    style?: string;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;