lapikit 0.7.1 → 0.7.3

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

@@ -9,3 +9,8 @@ export interface ElevationState {
     active?: ElevationType;
 }
 export type ElevationProps = ElevationType | ElevationState;
+export interface ColorState {
+    base?: string;
+    active?: string;
+}
+export type ColorProps = string | ColorState;

package/dist/animations/ripple.js

@@ -1,14 +1,11 @@
-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 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 +13,16 @@ 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)?.() || node.matches(nestedControls))
+                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 +62,23 @@ 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) {
+            if (!activationKeys.includes(e.key) || e.repeat || e.target !== el) {
                 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 +113,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/app/app.svelte

@@ -45,6 +45,8 @@
   --kit-shape-lg: 0.875rem;
   --kit-shape-xl: 1.125rem;
   --kit-shape-full: 9999px;
+  --kit-animation-component: 150ms;
+  --kit-outline-weight: 1px;
 }
 
 :global html {
@@ -56,9 +58,11 @@
   --kit-space-compact: 2px;
   --kit-space-default: 4px;
   --kit-space-comfortable: 6px;
+  --kit-density-dense: -8px;
   --kit-density-compact: -4px;
   --kit-density-default: 0px;
   --kit-density-comfortable: 4px;
+  --kit-density-spacious: 8px;
   --kit-shadow-opacity: 30%;
   --kit-shadow-ambient-opacity: 15%;
   --kit-disabled-opacity: 0.55;
@@ -183,7 +187,7 @@
 :global .outline {
   position: absolute;
   inset: 0;
-  border: 1px solid var(--outline-color);
+  border: var(--kit-outline-weight) solid var(--outline-color);
   border-radius: inherit;
   box-sizing: border-box;
   z-index: 1;
@@ -199,7 +203,7 @@
   animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 50%;
 }
-:global .kit-ripple--center {
+:global .kit-ripple--center > .kit-ripple {
   top: 50% !important;
   left: 50% !important;
   translate: -50% -50% !important;

package/dist/components/card/card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useClassName, useElevation, useIsInteractive, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation, useIsInteractive } from '../../utils';
 	import { ripple } from '../../animations';
 	import type { CardProps } from './card.types.js';
 
@@ -8,8 +7,8 @@
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		href,
@@ -17,61 +16,37 @@
 		variant = 'filled',
 		density = 'default',
 		rounded = 'md',
-		interactive = false,
+		interactive,
 		active = false,
 		disabled = false,
 		noRipple,
 		color,
-		background,
 		elevation,
 		...rest
 	}: CardProps = $props();
 
 	let tag = $derived((href && 'a') || is);
-	let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
+	// undefined: detected (a, button, onclick...), true: forced, false: no visual feedback (still clickable)
+	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
 	let isDisabled = $derived(!!disabled);
 	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
 	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
 	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
 	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-card-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-card-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
+	let elevationState = $derived(useElevation(elevation));
+	// the border is drawn over the content, so the outline and surface variants keep the same box
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	href={resolvedHref}
 	type={resolvedType}
 	disabled={resolvedDisabled}
@@ -88,149 +63,211 @@
 	aria-disabled={isDisabled || undefined}
 	use:ripple={{
 		component: 'card',
-		disabled: noRipple || disabled || !isInteractive
+		disabled: noRipple || isDisabled || !isInteractive
 	}}
-	{...restProps}
+	{...attrs.rest}
 >
-	{#if variant === 'outline'}
+	{#if hasOutline}
 		<span class="outline"></span>
 	{/if}
 
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card {
-		display: flex;
-		position: relative;
-		flex-direction: column;
-		gap: var(--kit-card-gap);
-		background: var(--kit-card-bg);
-		color: var(--kit-card-fg);
-		border-radius: var(--kit-card-radius);
-		border: 0;
-		box-sizing: border-box;
-		padding: calc(10px + var(--kit-card-density-offset) / 2);
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	a.kit-card {
-		text-decoration: none;
-	}
-
-	button.kit-card {
-		appearance: none;
-		border: 0;
-		background: none;
-		font: inherit;
-		text-align: inherit;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-card[data-rounded='0'] {
-		--kit-card-radius: var(--kit-shape-none);
-	}
-	.kit-card[data-rounded='xs'] {
-		--kit-card-radius: var(--kit-shape-xs);
-	}
-	.kit-card[data-rounded='sm'] {
-		--kit-card-radius: var(--kit-shape-sm);
-	}
-	.kit-card[data-rounded='md'] {
-		--kit-card-radius: var(--kit-shape-md);
-	}
-	.kit-card[data-rounded='lg'] {
-		--kit-card-radius: var(--kit-shape-lg);
-	}
-	.kit-card[data-rounded='xl'] {
-		--kit-card-radius: var(--kit-shape-xl);
-	}
-
-	/** 
-	 * density
-	 * @link https://lapikit.dev/docs/components/card#density 
-	 */
-	.kit-card[data-density='compact'] {
-		--kit-card-gap: var(--kit-space-compact);
-		--kit-card-density-offset: var(--kit-density-compact);
-	}
-	.kit-card[data-density='default'] {
-		--kit-card-gap: var(--kit-space-default);
-		--kit-card-density-offset: var(--kit-density-default);
-	}
-	.kit-card[data-density='comfortable'] {
-		--kit-card-gap: var(--kit-space-comfortable);
-		--kit-card-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * variant
-	 * @link https://lapikit.dev/docs/components/card#variants
-	 */
-	.kit-card[data-variant='filled'] {
-		--kit-card-bg: var(--kit-color-surface-1);
-		--kit-card-fg: var(--kit-color-text);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), black 10%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), black 16%);
-	}
-	.kit-card[data-variant='outline'] {
-		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-color-text);
-		--kit-card-bd: var(--kit-card-fg);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
-	}
-	.kit-card[data-variant='text'] {
-		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-color-text);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false'] {
-		cursor: pointer;
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:hover {
-		background: var(--kit-card-hover-bg);
-	}
-
-	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
-		background: var(--kit-card-hover-bg);
-	}
-
-	.kit-card[data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card[data-interactive='true'][data-disabled='false']:active {
-		translate: 0 0;
-		background: var(--kit-card-active-bg);
-	}
-
-	.kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:active {
-		background: var(--kit-card-active-bg);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-card[data-disabled='true'] {
-		opacity: var(--kit-disabled-opacity, 0.55);
-		pointer-events: none;
-	}
-
-	.kit-card .outline {
-		--outline-color: var(--kit-card-bd);
-	}
-</style>
+<style>.kit-card {
+  --kit-card-color: initial;
+  --kit-card-on-color: initial;
+  --kit-card-active-fg: initial;
+  --kit-card-active-shade: initial;
+  --kit-card-hover-fg: initial;
+  --kit-card-pressed-fg: initial;
+  --kit-card-bg: var(--kit-card-color, var(--kit-color-surface-1));
+  --kit-card-fg: var(--kit-card-on-color, var(--kit-card-contrast, var(--kit-color-text)));
+  --kit-card-ink: var(--kit-card-color, var(--kit-color-text));
+  --kit-card-hover: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 8%);
+  --kit-card-pressed: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 14%);
+  --kit-card-soft: color-mix(in oklab, var(--kit-card-bg) 16%, transparent);
+  --kit-card-border: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 20%);
+  --kit-card-active: color-mix(
+  	in oklab,
+  	var(--kit-card-color),
+  	var(--kit-card-fg) var(--kit-card-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  .kit-card {
+    --kit-card-contrast: color(from var(--kit-card-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+.kit-card {
+  --kit-card-gap: calc(var(--kit-space-default) + var(--kit-card-density-offset) / 2);
+  --kit-card-padding: calc(10px + var(--kit-card-density-offset) / 2);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: var(--kit-card-gap);
+  background-color: var(--kit-card-bg);
+  color: var(--kit-card-fg);
+  border-radius: var(--kit-card-radius);
+  border: 0;
+  box-sizing: border-box;
+  padding: var(--kit-card-padding);
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-card {
+    transition: none;
+  }
+}
+
+/* native resets: no background here, it would beat the background of .kit-card */
+a.kit-card {
+  text-decoration: none;
+}
+
+button.kit-card {
+  appearance: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/card#variants
+ */
+.kit-card[data-variant=tonal] {
+  --kit-card-bg: color-mix(in oklab, var(--kit-card-ink) 16%, transparent);
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 28%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+.kit-card[data-variant=text] {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 14%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+.kit-card[data-variant=plain] {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-hover: transparent;
+  --kit-card-pressed: transparent;
+  --kit-card-hover-fg: color-mix(in oklab, var(--kit-card-fg) 72%, transparent);
+  --kit-card-pressed-fg: color-mix(in oklab, var(--kit-card-fg) 56%, transparent);
+  --kit-card-active: transparent;
+  --kit-card-active-fg: var(--kit-card-color, var(--kit-color-accent));
+}
+
+.kit-card[data-variant=outline] {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: var(--kit-card-color, var(--kit-color-border));
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 14%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+.kit-card[data-variant=surface] {
+  --kit-card-bg: color-mix(in oklab, var(--kit-card-ink) 8%, transparent);
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: color-mix(in oklab, var(--kit-card-ink) 35%, transparent);
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 18%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+.kit-card .outline {
+  --outline-color: var(--kit-card-border);
+}
+
+.kit-card[data-active=true] {
+  --kit-card-bg: var(--kit-card-active, var(--kit-color-accent));
+  --kit-card-fg: var(
+  	--kit-card-active-fg,
+  	var(--kit-card-on-color, var(--kit-card-contrast, var(--kit-color-on-accent)))
+  );
+}
+
+/**
+ * interactive: hover, pressed, focus-visible and disabled
+ */
+.kit-card[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-card[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-card-hover);
+  color: var(--kit-card-hover-fg, var(--kit-card-fg));
+}
+.kit-card[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-card-pressed);
+  color: var(--kit-card-pressed-fg, var(--kit-card-fg));
+}
+
+.kit-card:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-card[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+.kit-card[data-rounded="0"] {
+  --kit-card-radius: var(--kit-shape-none);
+}
+
+.kit-card[data-rounded=xs] {
+  --kit-card-radius: var(--kit-shape-xs);
+}
+
+.kit-card[data-rounded=sm] {
+  --kit-card-radius: var(--kit-shape-sm);
+}
+
+.kit-card[data-rounded=md] {
+  --kit-card-radius: var(--kit-shape-md);
+}
+
+.kit-card[data-rounded=lg] {
+  --kit-card-radius: var(--kit-shape-lg);
+}
+
+.kit-card[data-rounded=xl] {
+  --kit-card-radius: var(--kit-shape-xl);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/card#density
+ */
+.kit-card[data-density=dense] {
+  --kit-card-density-offset: var(--kit-density-dense);
+}
+
+.kit-card[data-density=compact] {
+  --kit-card-density-offset: var(--kit-density-compact);
+}
+
+.kit-card[data-density=default] {
+  --kit-card-density-offset: var(--kit-density-default);
+}
+
+.kit-card[data-density=comfortable] {
+  --kit-card-density-offset: var(--kit-density-comfortable);
+}
+
+.kit-card[data-density=spacious] {
+  --kit-card-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,25 +1,28 @@
-import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
 export interface CardProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';
     href?: string;
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'filled' | 'outline' | 'text';
-    density?: DensityType;
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType;
     elevation?: ElevationProps;
     interactive?: boolean;
     active?: boolean;
     disabled?: boolean;
     noRipple?: boolean;
+    color?: ColorProps;
 }
 export interface CardTitleProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    color?: string;
 }
 export interface CardContentProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    color?: string;
 }
 export interface CardMediaProps extends Component {
     ref?: HTMLElement | null;

package/dist/components/card/modules/card-actions.svelte

@@ -1,53 +1,29 @@
 <script lang="ts">
 	import type { CardActionsProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: CardActionsProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-actions',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-card-actions', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--kit-card-gap);
-	}
-</style>
+<style>.kit-card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-card-gap);
+}</style>