lapikit 0.7.2 → 0.7.4

package/dist/components/accordion/modules/accordion-item.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
-	import { useClassName, useElevation, useStyles } from '../../../utils';
-	import { makeComponentProps } from '../../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../../utils';
 	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		activator,
 		indicator,
 		text,
 		color,
-		background,
 		index,
 		open,
 		toggle,
@@ -25,26 +23,13 @@
 		...rest
 	}: AccordionItemProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-accordion-item', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-accordion-item',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
+	const uid = $props.id();
+	const triggerId = `${uid}-trigger`;
+	const contentId = `${uid}-content`;
 
 	let safeOpen = $derived(!!open);
 	let model: AccordionItemModelProps = {
@@ -59,38 +44,30 @@
 		if (readOnly || disabled || !toggle) return;
 		toggle(index);
 	}
-
-	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('; ')
-	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-disabled={disabled}
 	data-read-only={readOnly}
 	data-active={safeOpen}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	{...restProps}
+	{...attrs.rest}
 >
 	<span class="outline"></span>
 
 	<button
+		id={triggerId}
 		class="kit-accordion-item__trigger"
 		type="button"
 		onclick={handleToggle}
 		aria-expanded={safeOpen}
+		aria-controls={contentId}
 		aria-disabled={disabled || readOnly || undefined}
 		{disabled}
 	>
@@ -119,113 +96,140 @@
 
 	<span class="kit-accordion-item__separator"></span>
 
-	<div class="kit-accordion-item__content" hidden={!safeOpen}>
+	<div
+		id={contentId}
+		class="kit-accordion-item__content"
+		role="region"
+		aria-labelledby={triggerId}
+		hidden={!safeOpen}
+	>
 		<div class="kit-accordion-item__content-inner">
 			{@render children?.()}
 		</div>
 	</div>
 </svelte:element>
 
-<style>
-	.kit-accordion-item {
-		flex: 1 0 100%;
-		max-width: 100%;
-		position: relative;
-		border: 0;
-		box-sizing: border-box;
-		background: var(--kit-accordion-item-bg);
-		color: var(--kit-accordion-item-fg);
-		gap: var(--kit-accordion-item-gap);
-		text-decoration: none;
-		font-size: var(--kit-accordion-item-font);
-		overflow: clip;
-	}
-
-	.kit-accordion-item > button {
-		appearance: none;
-		border: 0;
-		font: inherit;
-		text-align: inherit;
-	}
-
-	.kit-accordion-item__trigger {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--kit-accordion-item-gap);
-		min-height: calc(var(--kit-accordion-item-h) + var(--kit-accordion-density-offset) / 2);
-		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
-		cursor: pointer;
-		text-align: left;
-		background: var(--kit-accordion-item-bg);
-		color: var(--kit-accordion-item-fg);
-	}
-
-	.kit-accordion-item__trigger:disabled,
-	.kit-accordion-item[data-disabled='true'] .kit-accordion-item__trigger {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-
-	.kit-accordion-item__title {
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-
-	.kit-accordion-item__indicator {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		flex: 0 0 auto;
-	}
-
-	.kit-accordion-item__indicator svg {
-		width: 1.125rem;
-		height: 1.125rem;
-		display: block;
-	}
-
-	.kit-accordion-item__content {
-		display: block;
-	}
-
-	.kit-accordion-item__content[hidden] {
-		display: none;
-	}
-
-	.kit-accordion-item__content-inner {
-		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
-	}
-
-	.kit-accordion-item__separator {
-		width: 100%;
-		height: 1px;
-		display: block;
-		position: relative;
-		background: var(--kit-accordion-item-fg);
-		margin: 0 auto;
-	}
-
-	/* .kit-accordion-item[data-read-only='false'][data-disabled='false']:not([data-variant='text'])
-		> button:hover {
-		background: var(--kit-accordion-item-hover-bg);
-	} */
-
-	/**I think is a good idea for not use this*/
-	/* .kit-accordion-item[data-active='true'][data-disabled='false'][data-read-only='false'] > button {
-		background: var(--kit-accordion-item-active-bg);
-	}
-	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:active {
-		background: var(--kit-accordion-item-active-bg);
-	} */
-
-	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:focus-visible {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-accordion-item .outline {
-		--outline-color: var(--kit-accordion-item-bd);
-	}
-</style>
+<style>:where(.kit-accordion-item) {
+  --kit-accordion-item-color: initial;
+  --kit-accordion-item-on-color: initial;
+  --kit-accordion-item-active-fg: initial;
+  --kit-accordion-item-active-shade: initial;
+  --kit-accordion-item-hover-fg: initial;
+  --kit-accordion-item-pressed-fg: initial;
+  --kit-accordion-item-bg: var(--kit-accordion-item-color, var(--kit-color-surface-1));
+  --kit-accordion-item-fg: var(--kit-accordion-item-on-color, var(--kit-accordion-item-contrast, var(--kit-color-text)));
+  --kit-accordion-item-ink: var(--kit-accordion-item-color, var(--kit-color-text));
+  --kit-accordion-item-hover: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-accordion-item-fg) 8%);
+  --kit-accordion-item-pressed: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-accordion-item-fg) 14%);
+  --kit-accordion-item-soft: color-mix(in oklab, var(--kit-accordion-item-bg) 16%, transparent);
+  --kit-accordion-item-border: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-accordion-item-fg) 20%);
+  --kit-accordion-item-active: color-mix(
+  	in oklab,
+  	var(--kit-accordion-item-color),
+  	var(--kit-accordion-item-fg) var(--kit-accordion-item-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-accordion-item) {
+    --kit-accordion-item-contrast: color(from var(--kit-accordion-item-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);
+  }
+}
+:where(.kit-accordion-item) {
+  --kit-accordion-item-color: var(--kit-accordion-color);
+  --kit-accordion-item-on-color: var(--kit-accordion-on-color);
+}
+
+.kit-accordion-item {
+  position: relative;
+  flex: 1 0 100%;
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: clip;
+  border: 0;
+  background-color: var(--kit-accordion-item-bg);
+  color: var(--kit-accordion-item-fg);
+  font-size: var(--kit-accordion-item-font);
+  text-decoration: none;
+  transition-property: background-color, color;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-accordion-item {
+    transition: none;
+  }
+}
+
+.kit-accordion-item__trigger {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-accordion-item-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--kit-accordion-item-h) + var(--kit-accordion-density-offset) / 2);
+  padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-accordion-item__trigger {
+    transition: none;
+  }
+}
+.kit-accordion-item__trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--kit-disabled-opacity, 0.55);
+}
+.kit-accordion-item__trigger:focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-accordion-item[data-read-only=true] .kit-accordion-item__trigger {
+  cursor: default;
+}
+
+.kit-accordion-item__title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.kit-accordion-item__indicator {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+.kit-accordion-item__indicator svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.kit-accordion-item__content[hidden] {
+  display: none;
+}
+
+.kit-accordion-item__content-inner {
+  padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
+}
+
+.kit-accordion-item__separator {
+  display: block;
+  width: 100%;
+  height: var(--kit-outline-weight);
+  background-color: color-mix(in oklab, var(--kit-accordion-item-fg) 20%, transparent);
+}
+
+:where(.kit-accordion-item .outline) {
+  --outline-color: var(--kit-accordion-item-border);
+}</style>