lapikit 0.7.3 → 0.7.5

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

@@ -1,18 +1,18 @@
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface ButtonProps extends Component {
     ref?: HTMLElement | null;
     is?: 'button' | 'a' | 'input';
     input?: boolean;
     href?: string;
-    variant?: 'outline' | 'text' | 'filled' | 'link';
-    density?: DensityType;
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface' | 'link';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     active?: boolean;
     loading?: boolean;
     disabled?: boolean;
     checked?: boolean;
     size?: SizeType;
-    rounded?: RoundedType;
+    rounded?: RoundedType | 'full';
     type?: 'button' | 'submit' | 'reset' | 'checkbox' | 'radio';
     value?: string | number | boolean;
     label?: string;
@@ -24,6 +24,5 @@ export interface ButtonProps extends Component {
     append?: Snippet;
     prepend?: Snippet;
     elevation?: ElevationProps;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
 }

package/dist/components/card/card.svelte

@@ -26,7 +26,6 @@
 	}: CardProps = $props();
 
 	let tag = $derived((href && 'a') || is);
-	// 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);
@@ -38,7 +37,6 @@
 		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>
 
@@ -74,7 +72,7 @@
 	{@render children?.()}
 </svelte:element>
 
-<style>.kit-card {
+<style>:where(.kit-card) {
   --kit-card-color: initial;
   --kit-card-on-color: initial;
   --kit-card-active-fg: initial;
@@ -95,13 +93,16 @@
   );
 }
 @supports (color: color(from red srgb-linear r g b)) {
-  .kit-card {
+  :where(.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 {
+:where(.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);
+}
+
+.kit-card {
   display: flex;
   position: relative;
   flex-direction: column;
@@ -138,7 +139,7 @@ button.kit-card {
  * variant
  * @link https://lapikit.dev/docs/components/card#variants
  */
-.kit-card[data-variant=tonal] {
+:where(.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;
@@ -146,7 +147,7 @@ button.kit-card {
   --kit-card-active-fg: var(--kit-card-ink);
 }
 
-.kit-card[data-variant=text] {
+:where(.kit-card[data-variant=text]) {
   --kit-card-bg: transparent;
   --kit-card-fg: var(--kit-card-ink);
   --kit-card-border: transparent;
@@ -154,7 +155,7 @@ button.kit-card {
   --kit-card-active-fg: var(--kit-card-ink);
 }
 
-.kit-card[data-variant=plain] {
+:where(.kit-card[data-variant=plain]) {
   --kit-card-bg: transparent;
   --kit-card-fg: var(--kit-card-ink);
   --kit-card-border: transparent;
@@ -166,7 +167,7 @@ button.kit-card {
   --kit-card-active-fg: var(--kit-card-color, var(--kit-color-accent));
 }
 
-.kit-card[data-variant=outline] {
+:where(.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));
@@ -174,7 +175,7 @@ button.kit-card {
   --kit-card-active-fg: var(--kit-card-ink);
 }
 
-.kit-card[data-variant=surface] {
+:where(.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);
@@ -182,11 +183,11 @@ button.kit-card {
   --kit-card-active-fg: var(--kit-card-ink);
 }
 
-.kit-card .outline {
+:where(.kit-card .outline) {
   --outline-color: var(--kit-card-border);
 }
 
-.kit-card[data-active=true] {
+:where(.kit-card[data-active=true]) {
   --kit-card-bg: var(--kit-card-active, var(--kit-color-accent));
   --kit-card-fg: var(
   	--kit-card-active-fg,
@@ -224,27 +225,27 @@ button.kit-card {
  * rounded
  * @link https://lapikit.dev/docs/customize
  */
-.kit-card[data-rounded="0"] {
+:where(.kit-card[data-rounded="0"]) {
   --kit-card-radius: var(--kit-shape-none);
 }
 
-.kit-card[data-rounded=xs] {
+:where(.kit-card[data-rounded=xs]) {
   --kit-card-radius: var(--kit-shape-xs);
 }
 
-.kit-card[data-rounded=sm] {
+:where(.kit-card[data-rounded=sm]) {
   --kit-card-radius: var(--kit-shape-sm);
 }
 
-.kit-card[data-rounded=md] {
+:where(.kit-card[data-rounded=md]) {
   --kit-card-radius: var(--kit-shape-md);
 }
 
-.kit-card[data-rounded=lg] {
+:where(.kit-card[data-rounded=lg]) {
   --kit-card-radius: var(--kit-shape-lg);
 }
 
-.kit-card[data-rounded=xl] {
+:where(.kit-card[data-rounded=xl]) {
   --kit-card-radius: var(--kit-shape-xl);
 }
 
@@ -252,22 +253,22 @@ button.kit-card {
  * density
  * @link https://lapikit.dev/docs/components/card#density
  */
-.kit-card[data-density=dense] {
+:where(.kit-card[data-density=dense]) {
   --kit-card-density-offset: var(--kit-density-dense);
 }
 
-.kit-card[data-density=compact] {
+:where(.kit-card[data-density=compact]) {
   --kit-card-density-offset: var(--kit-density-compact);
 }
 
-.kit-card[data-density=default] {
+:where(.kit-card[data-density=default]) {
   --kit-card-density-offset: var(--kit-density-default);
 }
 
-.kit-card[data-density=comfortable] {
+:where(.kit-card[data-density=comfortable]) {
   --kit-card-density-offset: var(--kit-density-comfortable);
 }
 
-.kit-card[data-density=spacious] {
+:where(.kit-card[data-density=spacious]) {
   --kit-card-density-offset: var(--kit-density-spacious);
 }</style>

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

@@ -17,12 +17,12 @@ export interface CardProps extends Component {
 export interface CardTitleProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    color?: string;
+    color?: string | false;
 }
 export interface CardContentProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    color?: string;
+    color?: string | false;
 }
 export interface CardMediaProps extends Component {
     ref?: HTMLElement | null;

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

@@ -23,8 +23,11 @@
 	{@render children?.()}
 </svelte:element>
 
-<style>.kit-card-content {
+<style>:where(.kit-card-content) {
   --kit-card-content-color: initial;
+}
+
+.kit-card-content {
   color: var(--kit-card-content-color, currentColor);
   display: block;
   line-height: 1.45;

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

@@ -23,8 +23,11 @@
 	{@render children?.()}
 </svelte:element>
 
-<style>.kit-card-title {
+<style>:where(.kit-card-title) {
   --kit-card-title-color: initial;
+}
+
+.kit-card-title {
   display: flex;
   align-items: center;
   gap: var(--kit-card-gap);