lapikit 0.7.2 → 0.7.4

package/dist/@types/components.d.ts

@@ -1,12 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { ClassNameType, IdElementType, KitClassNameType, KitStylePropertiesType, PropValue, SClassProp, SStyleProp, StylePropertiesType } from './';
+import type { ClassNameType, IdElementType, KitClassNameType, KitStylePropertiesType, PropValue, SStyleProp, StylePropertiesType } from './';
 import type { ClassValue } from 'svelte/elements';
-export interface useClassNameProps {
-    baseClass?: string;
-    className?: string;
-    sClass?: SClassProp;
-    classProps?: Record<string, PropValue>;
-}
 export interface useStylesProps {
     styleAttr?: string;
     sStyle?: SStyleProp;

package/dist/@types/dom.d.ts

@@ -1,7 +1,8 @@
+import type { ClassValue } from 'svelte/elements';
 export type IdElementType = string | undefined;
-export type ClassNameType = string | string[] | undefined;
+export type ClassNameType = ClassValue | undefined;
 export type StylePropertiesType = string | undefined;
-export type KitClassNameType = string | string[] | undefined;
+export type KitClassNameType = ClassValue | undefined;
 export type KitStylePropertiesType = Record<string, boolean | string> | undefined;
-export type SClassProp = string | string[] | Record<string, boolean | string> | undefined;
+export type SClassProp = ClassValue | Record<string, boolean | string> | undefined;
 export type SStyleProp = Record<string, boolean | string> | undefined;

package/dist/@types/props.d.ts

@@ -10,7 +10,7 @@ export interface ElevationState {
 }
 export type ElevationProps = ElevationType | ElevationState;
 export interface ColorState {
-    base?: string;
-    active?: string;
+    base?: string | false;
+    active?: string | false;
 }
-export type ColorProps = string | ColorState;
+export type ColorProps = string | false | ColorState;

package/dist/animations/ripple.js

@@ -1,14 +1,14 @@
-const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
-const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
+const triggerEvents = ['pointerdown', 'keydown'];
+const cancelEvents = ['pointerleave', 'pointercancel', 'dragleave', 'pointerup', 'keyup', 'blur'];
+const activationKeys = ['Enter', ' '];
+const nestedControls = 'a[href], button, input, select, textarea, summary, [role="button"], [role="link"]';
+const hosts = new WeakMap();
+function isHostControl(node) {
+    return node instanceof Element && node.hasAttribute('data-ripple-host');
+}
 function resolveDuration(options) {
     return options.duration && options.duration > 0 ? options.duration : undefined;
 }
-function getCoords(e) {
-    if (window.TouchEvent && e instanceof TouchEvent) {
-        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
-    }
-    return { x: e.clientX, y: e.clientY };
-}
 export function ripple(el, options = {}) {
     // created on first interaction, removed once every ripple has faded out
     let rippleContainer;
@@ -16,6 +16,18 @@ export function ripple(el, options = {}) {
     function isAriaDisabled() {
         return el.getAttribute('aria-disabled') === 'true';
     }
+    /** The click starts in a child that handles it itself: an enabled ripple (a btn in a card) or a native control */
+    function isFromNestedControl(target) {
+        let node = target instanceof Element ? target : null;
+        while (node && node !== el) {
+            if (hosts.get(node)?.())
+                return true;
+            if (node.matches(nestedControls) && !isHostControl(node))
+                return true;
+            node = node.parentElement;
+        }
+        return false;
+    }
     function applyOptions(container) {
         if (options.component) {
             container.style.setProperty('--system-ripple-radius', `var(--kit-${options.component}-radius)`);
@@ -55,22 +67,24 @@ export function ripple(el, options = {}) {
             applyOptions(rippleContainer);
         }
     }
-    function createRipple(e, center) {
+    function createRipple(e) {
         if (options.disabled || isAriaDisabled()) {
             return;
         }
-        if (e instanceof KeyboardEvent) {
-            if (!['Enter', 'Space'].includes(e.code) || e.repeat) {
+        const isKeyboard = e instanceof KeyboardEvent;
+        if (isKeyboard) {
+            const isOwnTarget = e.target === el || isHostControl(e.target);
+            if (!activationKeys.includes(e.key) || e.repeat || !isOwnTarget) {
                 return;
             }
-            e.preventDefault();
-            const click = new PointerEvent('pointerdown');
-            createRipple(click, true);
+        }
+        else if (e.button !== 0 || isFromNestedControl(e.target)) {
             return;
         }
-        const container = mountContainer(center);
+        const container = mountContainer(isKeyboard);
         const rect = el.getBoundingClientRect();
-        const { x: clientX, y: clientY } = getCoords(e);
+        const clientX = isKeyboard ? rect.left + rect.width / 2 : e.clientX;
+        const clientY = isKeyboard ? rect.top + rect.height / 2 : e.clientY;
         const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
         const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
         const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
@@ -105,9 +119,11 @@ export function ripple(el, options = {}) {
         activeRipples.add(cleanup);
         cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
     }
-    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
+    hosts.set(el, () => !options.disabled && !isAriaDisabled());
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: true }));
     return {
         destroy() {
+            hosts.delete(el);
             triggerEvents.forEach((event) => {
                 el.removeEventListener(event, createRipple);
             });

package/dist/components/accordion/accordion.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs } from '../../utils';
 	import type { AccordionProps } from './accordion.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		size = 'md',
@@ -17,49 +16,21 @@
 		rounded = 'md',
 		text,
 		color,
-		background,
 		spacer,
 		hideIcon,
 		...rest
 	}: AccordionProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-accordion',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-accordion-item-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-accordion-item-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-accordion', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-text={text ? true : undefined}
 	data-spacer={spacer}
 	data-hide-icon={hideIcon}
@@ -67,199 +38,192 @@
 	data-variant={variant}
 	data-density={density}
 	data-rounded={rounded}
-	{...restProps}
+	{...attrs.rest}
 >
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-accordion {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		width: 100%;
-		padding: 0;
-		list-style: none;
-		position: relative;
-		gap: var(--kit-accordion-gap, 0);
-		border: 0;
-		box-sizing: border-box;
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	.kit-accordion[data-spacer='true'] {
-		--kit-accordion-gap: 0.5rem;
-	}
-
-	.kit-accordion[data-spacer='true'] :global(.kit-accordion-item) {
-		border-radius: var(--kit-accordion-item-radius);
-	}
-
-	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:first-child) {
-		border-top-left-radius: var(--kit-accordion-item-radius);
-		border-top-right-radius: var(--kit-accordion-item-radius);
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item) {
-		border-radius: 0;
-	}
-
-	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:last-child) {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-		border-bottom-left-radius: var(--kit-accordion-item-radius);
-		border-bottom-right-radius: var(--kit-accordion-item-radius);
-	}
-
-	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:first-child:last-child) {
-		border-radius: var(--kit-accordion-item-radius);
-	}
-
-	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
-		display: none;
-	}
-
-	.kit-accordion[data-variant='text'] :global(.kit-accordion-item),
-	.kit-accordion[data-variant='text'] :global(.kit-accordion-item:first-child:last-child) {
-		border-radius: 0 !important;
-	}
-
-	.kit-accordion:not([data-variant='text'])
-		:global(.kit-accordion-item[data-read-only='false'][data-disabled='false'] > button:hover) {
-		background: var(--kit-accordion-item-hover-bg);
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-accordion[data-rounded='0'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-none);
-	}
-	.kit-accordion[data-rounded='xs'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-xs);
-	}
-	.kit-accordion[data-rounded='sm'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-sm);
-	}
-	.kit-accordion[data-rounded='md'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-md);
-	}
-	.kit-accordion[data-rounded='lg'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-lg);
-	}
-	.kit-accordion[data-rounded='xl'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-xl);
-	}
-	.kit-accordion[data-rounded='full'] :global(.kit-accordion-item) {
-		--kit-accordion-item-radius: var(--kit-shape-full);
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-accordion[data-density='compact'] {
-		--kit-accordion-density-offset: var(--kit-density-compact);
-	}
-	.kit-accordion[data-density='default'] {
-		--kit-accordion-density-offset: var(--kit-density-default);
-	}
-	.kit-accordion[data-density='comfortable'] {
-		--kit-accordion-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * variant
-	 * @link no links...
-	 */
-	.kit-accordion[data-variant='filled'] :global(.kit-accordion-item) {
-		--kit-accordion-item-bg: var(--kit-color-surface-1);
-		--kit-accordion-item-fg: var(--kit-color-text);
-
-		--kit-accordion-item-hover-bg: color-mix(in oklab, var(--kit-accordion-item-bg), black 10%);
-		--kit-accordion-item-active-bg: color-mix(in oklab, var(--kit-accordion-item-bg), black 16%);
-	}
-	.kit-accordion[data-variant='outline'] :global(.kit-accordion-item) {
-		--kit-accordion-item-bg: transparent;
-		--kit-accordion-item-fg: var(--kit-color-text);
-		--kit-accordion-item-bd: var(--kit-accordion-item-fg);
-
-		--kit-accordion-item-hover-bg: color-mix(
-			in oklab,
-			var(--kit-accordion-item-fg),
-			transparent 80%
-		);
-		--kit-accordion-item-active-bg: color-mix(
-			in oklab,
-			var(--kit-accordion-item-fg),
-			transparent 92%
-		);
-	}
-	.kit-accordion[data-variant='text'] :global(.kit-accordion-item) {
-		--kit-accordion-item-bg: transparent;
-		--kit-accordion-item-fg: var(--kit-color-text);
-
-		--kit-accordion-item-hover-bg: color-mix(
-			in oklab,
-			var(--kit-accordion-item-fg),
-			transparent 80%
-		);
-		--kit-accordion-item-active-bg: color-mix(
-			in oklab,
-			var(--kit-accordion-item-fg),
-			transparent 92%
-		);
-	}
-
-	.kit-accordion[data-variant='text'] :global(.kit-accordion-item .outline),
-	.kit-accordion[data-variant='filled'] :global(.kit-accordion-item .outline) {
-		display: none;
-	}
-
-	.kit-accordion[data-variant='filled']
-		:global(.kit-accordion-item .kit-accordion-item__separator) {
-		display: none;
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-accordion[data-size='xs'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 32px;
-		--kit-accordion-item-p: 8px;
-		--kit-accordion-item-gap: var(--kit-space-compact);
-		--kit-accordion-item-font: var(--kit-font-xs);
-	}
-	.kit-accordion[data-size='sm'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 40px;
-		--kit-accordion-item-p: 10px;
-		--kit-accordion-item-gap: var(--kit-space-default);
-		--kit-accordion-item-font: var(--kit-font-sm);
-	}
-	.kit-accordion[data-size='md'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 48px;
-		--kit-accordion-item-p: 12px;
-		--kit-accordion-item-gap: var(--kit-space-default);
-		--kit-accordion-item-font: var(--kit-font-md);
-	}
-	.kit-accordion[data-size='lg'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 56px;
-		--kit-accordion-item-p: 16px;
-		--kit-accordion-item-gap: var(--kit-space-default);
-		--kit-accordion-item-font: var(--kit-font-lg);
-	}
-	.kit-accordion[data-size='xl'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 64px;
-		--kit-accordion-item-p: 20px;
-		--kit-accordion-item-gap: var(--kit-space-comfortable);
-		--kit-accordion-item-font: var(--kit-font-xl);
-	}
-</style>
+<style>:where(.kit-accordion) {
+  --kit-accordion-color: initial;
+  --kit-accordion-on-color: initial;
+  --kit-accordion-item-radius: var(--kit-accordion-radius);
+  --kit-accordion-gap: 0;
+}
+
+.kit-accordion {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--kit-accordion-gap);
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  list-style: none;
+}
+.kit-accordion[data-spacer=true] {
+  --kit-accordion-gap: 0.5rem;
+}
+.kit-accordion[data-spacer=true] :global(.kit-accordion-item) {
+  border-radius: var(--kit-accordion-item-radius);
+}
+.kit-accordion:not([data-spacer=true]) :global(.kit-accordion-item) {
+  border-radius: 0;
+}
+.kit-accordion:not([data-spacer=true]) :global(.kit-accordion-item:first-child) {
+  border-start-start-radius: var(--kit-accordion-item-radius);
+  border-start-end-radius: var(--kit-accordion-item-radius);
+}
+.kit-accordion:not([data-spacer=true]) :global(.kit-accordion-item:last-child) {
+  border-end-start-radius: var(--kit-accordion-item-radius);
+  border-end-end-radius: var(--kit-accordion-item-radius);
+}
+.kit-accordion[data-hide-icon=true] :global(.kit-accordion-item__indicator) {
+  display: none;
+}
+.kit-accordion:not([data-variant=outline], [data-variant=surface]) :global(.kit-accordion-item .outline) {
+  display: none;
+}
+.kit-accordion:is([data-variant=filled], [data-variant=tonal]) :global(.kit-accordion-item .kit-accordion-item__separator) {
+  display: none;
+}
+.kit-accordion:not([data-variant=text]) :global(.kit-accordion-item[data-read-only='false'][data-disabled='false']
+    > .kit-accordion-item__trigger:hover) {
+  background-color: var(--kit-accordion-item-hover);
+}
+
+:where(.kit-accordion[data-variant=text]) {
+  --kit-accordion-item-radius: 0;
+}
+
+/**
+ * size: read by the items
+ * @link https://lapikit.dev/docs/components/accordion#size
+ */
+:where(.kit-accordion[data-size=xs]) {
+  --kit-accordion-item-h: 2rem;
+  --kit-accordion-item-p: 0.5rem;
+  --kit-accordion-item-gap: 0.125rem;
+  --kit-accordion-item-font: var(--kit-font-xs);
+}
+
+:where(.kit-accordion[data-size=sm]) {
+  --kit-accordion-item-h: 2.5rem;
+  --kit-accordion-item-p: 0.625rem;
+  --kit-accordion-item-gap: 0.25rem;
+  --kit-accordion-item-font: var(--kit-font-sm);
+}
+
+:where(.kit-accordion[data-size=md]) {
+  --kit-accordion-item-h: 3rem;
+  --kit-accordion-item-p: 0.75rem;
+  --kit-accordion-item-gap: 0.25rem;
+  --kit-accordion-item-font: var(--kit-font-md);
+}
+
+:where(.kit-accordion[data-size=lg]) {
+  --kit-accordion-item-h: 3.5rem;
+  --kit-accordion-item-p: 1rem;
+  --kit-accordion-item-gap: 0.25rem;
+  --kit-accordion-item-font: var(--kit-font-lg);
+}
+
+:where(.kit-accordion[data-size=xl]) {
+  --kit-accordion-item-h: 4rem;
+  --kit-accordion-item-p: 1.25rem;
+  --kit-accordion-item-gap: 0.375rem;
+  --kit-accordion-item-font: var(--kit-font-xl);
+}
+
+/**
+ * variant: applied on the items, (0,1,0) to win over the base of the item whatever the order of the styles
+ * @link https://lapikit.dev/docs/components/accordion#variants
+ */
+:where(.kit-accordion[data-variant=tonal]) :global(.kit-accordion-item) {
+  --kit-accordion-item-bg: color-mix(in oklab, var(--kit-accordion-item-ink) 16%, transparent);
+  --kit-accordion-item-fg: var(--kit-accordion-item-ink);
+  --kit-accordion-item-border: transparent;
+  --kit-accordion-item-active: color-mix(in oklab, var(--kit-accordion-item-ink) 28%, transparent);
+  --kit-accordion-item-active-fg: var(--kit-accordion-item-ink);
+}
+
+:where(.kit-accordion[data-variant=outline]) :global(.kit-accordion-item) {
+  --kit-accordion-item-bg: transparent;
+  --kit-accordion-item-fg: var(--kit-accordion-item-ink);
+  --kit-accordion-item-border: var(--kit-accordion-item-color, var(--kit-color-border));
+  --kit-accordion-item-active: color-mix(in oklab, var(--kit-accordion-item-ink) 14%, transparent);
+  --kit-accordion-item-active-fg: var(--kit-accordion-item-ink);
+}
+
+:where(.kit-accordion[data-variant=surface]) :global(.kit-accordion-item) {
+  --kit-accordion-item-bg: color-mix(in oklab, var(--kit-accordion-item-ink) 8%, transparent);
+  --kit-accordion-item-fg: var(--kit-accordion-item-ink);
+  --kit-accordion-item-border: color-mix(in oklab, var(--kit-accordion-item-ink) 35%, transparent);
+  --kit-accordion-item-active: color-mix(in oklab, var(--kit-accordion-item-ink) 18%, transparent);
+  --kit-accordion-item-active-fg: var(--kit-accordion-item-ink);
+}
+
+:where(.kit-accordion[data-variant=text]) :global(.kit-accordion-item) {
+  --kit-accordion-item-bg: transparent;
+  --kit-accordion-item-fg: var(--kit-accordion-item-ink);
+  --kit-accordion-item-border: transparent;
+  --kit-accordion-item-active: color-mix(in oklab, var(--kit-accordion-item-ink) 14%, transparent);
+  --kit-accordion-item-active-fg: var(--kit-accordion-item-ink);
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-accordion[data-rounded="0"]) {
+  --kit-accordion-radius: var(--kit-shape-none);
+}
+
+:where(.kit-accordion[data-rounded=xs]) {
+  --kit-accordion-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-accordion[data-rounded=sm]) {
+  --kit-accordion-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-accordion[data-rounded=md]) {
+  --kit-accordion-radius: var(--kit-shape-md);
+}
+
+:where(.kit-accordion[data-rounded=lg]) {
+  --kit-accordion-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-accordion[data-rounded=xl]) {
+  --kit-accordion-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-accordion[data-rounded=full]) {
+  --kit-accordion-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/accordion#density
+ */
+:where(.kit-accordion[data-density=dense]) {
+  --kit-accordion-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-accordion[data-density=compact]) {
+  --kit-accordion-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-accordion[data-density=default]) {
+  --kit-accordion-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-accordion[data-density=comfortable]) {
+  --kit-accordion-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-accordion[data-density=spacious]) {
+  --kit-accordion-density-offset: var(--kit-density-spacious);
+}</style>

package/dist/components/accordion/accordion.types.d.ts

@@ -1,6 +1,6 @@
-import type { RoundedType, Component, SizeType, DensityType, ElevationProps } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
-type AccordionVariant = 'filled' | 'outline' | 'text';
+type AccordionVariant = 'filled' | 'tonal' | 'outline' | 'surface' | 'text';
 export type ModelAccordionItemProps = {
     open: boolean;
 };
@@ -8,12 +8,11 @@ export interface AccordionProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';
     text?: string;
-    color?: string;
-    background?: string;
+    color?: string | false;
     rounded?: RoundedType | 'full';
     size?: SizeType;
     variant?: AccordionVariant;
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     spacer?: boolean;
     hideIcon?: boolean;
 }
@@ -25,8 +24,7 @@ export interface AccordionItemProps extends Component {
     is?: 'div';
     index: number | string;
     text?: string;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
     readOnly?: boolean;
     open?: boolean;
     disabled?: boolean;