@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/separator/docs.props.js

@@ -1,9 +1,9 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 3dc04e42e3fe60388a317edd5035cc9c
+// @quaffHash c1abfb6f47a067eca5b1a3da885e61e2
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",
@@ -36,7 +36,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -61,7 +61,7 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",

package/dist/components/separator/props.d.ts

@@ -1,16 +1,15 @@
-import type { NativeProps, QuaffSizes } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
-interface QSeparatorPropsVertical extends NativeProps {
-    spacing?: QuaffSizes;
+interface QSeparatorPropsVertical extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
     inset?: boolean;
     vertical?: true;
     color?: string;
-    size: string;
+    size?: string;
     text?: string;
     textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivElement> {
-    spacing?: QuaffSizes;
+interface QSeparatorPropsHorizontal extends HTMLAttributes<HTMLDivElement> {
+    spacing?: Q.Size;
     inset?: boolean;
     vertical?: false;
     color?: string;
@@ -19,5 +18,4 @@ interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivE
     textAlign?: "left" | "center" | "right";
 }
 export type QSeparatorProps = QSeparatorPropsHorizontal | QSeparatorPropsVertical;
-export declare const QSeparatorPropsDefaults: QSeparatorProps;
 export {};

package/dist/components/separator/props.js

@@ -1,9 +1 @@
-export const QSeparatorPropsDefaults = {
-    spacing: "sm",
-    inset: false,
-    vertical: false,
-    color: undefined,
-    size: "1px",
-    text: undefined,
-    textAlign: "center",
-};
+export {};

package/dist/components/switch/QSwitch.scss

@@ -0,0 +1,305 @@
+@use "sass:list";
+@use "$css/mixins";
+@use "$css/disabled";
+
+$root: ".q-switch";
+$track: "#{$root}__track";
+$handle: "#{$root}__handle";
+$icon: "#{$root}__icon";
+
+$checked: "[aria-checked]";
+$unchecked: ":not([aria-checked])";
+
+$check-map: (
+  "checked": "[aria-checked]",
+  "unchecked": ":not([aria-checked])",
+);
+
+@function getColor($el, $checked: false, $hovered: null) {
+  @if $el == "track" {
+    @return if($checked, var(--primary), var(--surface-container-highest));
+  } @else if $el == "icon" {
+    @return if($checked, var(--on-primary-container), var(--surface-container-highest));
+  } @else if $el == "handle" {
+    @if ($checked) {
+      @return if($hovered, var(--primary-container), var(--on-primary));
+    } @else {
+      @return if($hovered, var(--on-surface-variant), var(--outline));
+    }
+  }
+
+  @error "The given element #{$el} is not supported.";
+}
+
+@layer q-switch {
+  .q-switch {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0; // Stop from collapsing in flex containers
+    gap: 0.8rem;
+
+    cursor: pointer;
+
+    outline: none;
+
+    &--reversed {
+      flex-direction: row-reverse;
+    }
+
+    &__inner {
+      width: 3.25rem;
+      height: 2rem;
+      border-radius: 10rem;
+    }
+
+    & input {
+      appearance: none;
+      outline: none;
+      margin: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+      cursor: inherit;
+    }
+  }
+
+  // Track
+  .q-switch {
+    & #{$track} {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      border-radius: 10rem;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+
+        border-radius: inherit;
+        box-sizing: border-box;
+        transition-property: opacity, background-color;
+        transition-timing-function: linear;
+        transition-duration: 67ms;
+      }
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector} #{$track}::before {
+        background-color: getColor("track", $state == "checked");
+      }
+    }
+
+    &#{$checked} #{$track} {
+      background-color: transparent;
+      border-color: transparent;
+
+      &::before {
+        background-clip: content-box;
+      }
+    }
+
+    &#{$unchecked} #{$track}::before {
+      border-color: var(--outline);
+      border-style: solid;
+      border-width: 0.125rem;
+    }
+
+    &[aria-disabled] #{$track}:is(::before, ::after) {
+      transition: none;
+      opacity: 38%;
+    }
+  }
+
+  // Handle container
+  .q-switch {
+    & #{$handle}-container {
+      position: relative;
+
+      display: flex;
+      place-content: center;
+      place-items: center;
+
+      // cubic-bezier(0.13, 0.78, 0.33, 1.15) for little bounce
+      transition: margin 200ms ease;
+    }
+
+    &#{$checked} #{$handle}-container {
+      margin-inline-start: 1.25rem;
+    }
+
+    &#{$unchecked} #{$handle}-container {
+      margin-inline-end: 1.25rem;
+    }
+
+    &[aria-disabled] #{$handle}-container {
+      transition: none;
+    }
+  }
+
+  // Handle
+  .q-switch {
+    & #{$handle} {
+      height: 1rem;
+      width: 1rem;
+
+      border-radius: 100%;
+
+      transform-origin: center;
+      transition-property: height, width;
+      transition-duration: 250ms, 250ms;
+      transition-timing-function: cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1);
+      z-index: 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+
+        display: flex;
+        border-radius: inherit;
+        box-sizing: border-box;
+        transition: background-color 67ms linear;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: -0.5rem;
+        border-radius: inherit;
+
+        background-color: transparent;
+        opacity: 0.08;
+      }
+    }
+
+    &:not([aria-disabled])#{$checked}:is(:hover, :focus-within) #{$handle}::after {
+      background-color: var(--primary);
+    }
+
+    &:not([aria-disabled])#{$unchecked}:is(:hover, :focus-within) #{$handle}::after {
+      background-color: var(--on-surface);
+    }
+
+    & #{$handle}--with-icon,
+    &#{$checked} #{$handle} {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    &:not([aria-disabled]):active #{$handle} {
+      height: 1.75rem;
+      width: 1.75rem;
+      transition-timing-function: linear;
+      transition-duration: 100ms;
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector}:not([aria-disabled]) {
+        & #{$handle}::before {
+          background-color: getColor("handle", $state == "checked", false);
+        }
+
+        &:is(:hover, :focus-within, :active) #{$handle}::before {
+          background-color: getColor("handle", $state == "checked", true);
+        }
+      }
+    }
+  }
+
+  // Icon
+  .q-switch {
+    & #{$icon} {
+      position: absolute;
+      // Equivalent to top, right, bottom and left set to 0
+      inset: 0;
+      margin: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: currentColor;
+
+      transition:
+        opacity 33ms linear,
+        transform 167ms cubic-bezier(0.2, 0, 0, 1);
+      opacity: 0;
+    }
+
+    &[aria-checked] #{$icon}--checked,
+    &:not([aria-checked]) #{$icon}--unchecked {
+      opacity: 1;
+    }
+
+    // rotate checked icon into view when there is no unchecked icon
+    &:not([aria-checked]) #{$handle}:not(#{$handle}--with-icon) #{icon}--checked {
+      transform: rotate(-45deg);
+    }
+
+    &#{$checked} {
+      & #{$icon} {
+        transition: none;
+      }
+    }
+
+    @each $state, $selector in $check-map {
+      &#{$selector} {
+        & #{$icon}--#{$state} {
+          color: getColor("icon", $state == "checked");
+        }
+      }
+    }
+  }
+}
+
+// Disabled
+@layer q-switch--disabled {
+  .q-switch[aria-disabled] {
+    &,
+    & * {
+      @include disabled.base();
+    }
+
+    & #{$track}::before {
+      background-color: disabled.rest-color("surface-container-high");
+      border-color: disabled.rest-color("on-surface");
+    }
+
+    & #{$handle} {
+      background-color: disabled.font-color();
+    }
+
+    & #{$icon} {
+      color: disabled.font-color("surface-container-high");
+    }
+
+    &#{$checked} {
+      & #{$track}::before {
+        background-color: disabled.rest-color();
+      }
+
+      & #{$handle} {
+        background-color: var(--surface);
+      }
+
+      & #{$icon} {
+        color: disabled.font-color();
+      }
+    }
+
+    & :is(#{$handle}, #{$handle}::before) {
+      transition: none;
+    }
+  }
+}

package/dist/components/switch/QSwitch.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import QIconSnippet from "../private/QIconSnippet.svelte";
+  import { ripple } from "../../helpers";
+  import { isActivationKey } from "../../utils";
+  let {
+    value = $bindable(),
+    label = void 0,
+    labelPosition = "right",
+    disabled = false,
+    icons = false,
+    showOnlyCheckedIcon = false,
+    checkedIcon,
+    uncheckedIcon,
+    ...props
+  } = $props();
+  let qSwitch;
+  let qSwitchInput;
+  function toggle() {
+    value = !value;
+  }
+  function onclick(event) {
+    event.preventDefault();
+    if (!qSwitchInput || disabled) {
+      return;
+    }
+    props.onclick?.(event);
+    qSwitchInput.focus();
+    toggle();
+  }
+  function onkeydown(event) {
+    if (!qSwitch || disabled || !isActivationKey(event)) {
+      return;
+    }
+    props.onkeydown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    qSwitch.click();
+  }
+</script>
+
+<div
+  bind:this={qSwitch}
+  {...props}
+  class="q-switch{props.class ? ` ${props.class}` : ''}"
+  class:q-switch--disabled={disabled}
+  class:q-switch--reversed={labelPosition === "left"}
+  {onclick}
+  {onkeydown}
+  aria-disabled={disabled || undefined}
+  role="switch"
+  aria-checked={value || undefined}
+  tabindex={disabled ? -1 : 0}
+>
+  <label class="q-switch__inner">
+    <input
+      bind:checked={value}
+      bind:this={qSwitchInput}
+      type="checkbox"
+      disabled={disabled || undefined}
+    />
+    <span class="q-switch__track">
+      <span class="q-switch__touch"></span>
+      <span class="q-switch__handle-container" use:ripple={{ disabled }}>
+        <span
+          class="q-switch__handle"
+          class:q-switch__handle--with-icon={showOnlyCheckedIcon
+            ? !!value
+            : icons || uncheckedIcon}
+        >
+          {#if (uncheckedIcon || icons) && !showOnlyCheckedIcon}
+            {@render icon("unchecked")}
+          {/if}
+          {#if checkedIcon || icons || showOnlyCheckedIcon}
+            {@render icon("checked")}
+          {/if}
+        </span>
+      </span>
+    </span>
+  </label>
+  {#if label}
+    <span class="q-switch__label">
+      {label}
+    </span>
+  {/if}
+</div>
+
+{#snippet icon(type: "unchecked" | "checked")}
+  <QIconSnippet
+    icon={type === "unchecked" ? uncheckedIcon : checkedIcon}
+    defaultIcon={type === "unchecked" ? "close" : "check"}
+    size="1rem"
+    class="q-switch__icon q-switch__icon--{type}"
+  />
+{/snippet}

package/dist/components/switch/QSwitch.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { QSwitchProps } from "./props";
+declare const QSwitch: import("svelte").Component<QSwitchProps, {}, "value">;
+export default QSwitch;

package/dist/components/{toggle → switch}/docs.d.ts

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QToggleDocs: QComponentDocs;
+export declare const QSwitchDocs: QComponentDocs;

package/dist/components/{toggle → switch}/docs.js

@@ -1,6 +1,6 @@
-export let QToggleDocs = {
-    name: "QToggle",
-    description: "QToggle is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
+export const QSwitchDocs = {
+    name: "QSwitch",
+    description: "QSwitch is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
     docs: {
         props: [
             {

package/dist/components/{toggle → switch}/docs.props.d.ts

@@ -1,4 +1,4 @@
-export declare const QToggleDocsProps: {
+export declare const QSwitchDocsProps: {
     name: string;
     type: string;
     optional: boolean;

package/dist/components/{toggle → switch}/docs.props.js

@@ -1,6 +1,6 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash ace8c9aeca6b2affbd44ebe6a8219105
-export const QToggleDocsProps = [
+// @quaffHash 1f6e8500a10f28d00338bc8232a16447
+export const QSwitchDocsProps = [
     {
         name: "value",
         type: "boolean",
@@ -18,7 +18,15 @@ export const QToggleDocsProps = [
         default: "",
     },
     {
-        name: "leftLabel",
+        name: "labelPosition",
+        type: '"left" | "right"',
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "",
+    },
+    {
+        name: "icons",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -26,15 +34,31 @@ export const QToggleDocsProps = [
         default: "",
     },
     {
-        name: "icon",
-        type: "string",
+        name: "showOnlyCheckedIcon",
+        type: "boolean",
         optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
-        name: "disable",
+        name: "checkedIcon",
+        type: "MaterialSymbol | Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "uncheckedIcon",
+        type: "MaterialSymbol | Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,

package/dist/components/switch/props.d.ts

@@ -0,0 +1,13 @@
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QSwitchProps extends HTMLAttributes<HTMLDivElement> {
+    value?: boolean;
+    label?: string;
+    labelPosition?: "left" | "right";
+    icons?: boolean;
+    showOnlyCheckedIcon?: boolean;
+    checkedIcon?: MaterialSymbol | Snippet;
+    uncheckedIcon?: MaterialSymbol | Snippet;
+    disabled?: boolean;
+}

package/dist/components/switch/props.js

@@ -0,0 +1 @@
+export {};