@insymetri/styleguide 0.1.83 → 0.1.85

package/dist/IICheckbox/IICheckbox.svelte

@@ -3,6 +3,7 @@
 	import {Checkbox} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		checked: boolean
@@ -33,7 +34,7 @@
 
 <label class={cn('flex items-center gap-8', className)}>
 	<Checkbox.Root
-		class="peer [all:unset] cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+		class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50')}
 		bind:checked
 		{onCheckedChange}
 		{disabled}

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -4,6 +4,7 @@
 	import IIBadge from '../IIBadge/IIBadge.svelte'
 	import type {BadgeVariant} from '../IIBadge/IIBadge.types'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Item = {
 		value: string
@@ -50,7 +51,7 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger class="[all:unset] flex items-center gap-4 flex-wrap cursor-default">
+	<Popover.Trigger class={cn(buttonReset, 'flex items-center gap-4 flex-wrap cursor-default')}>
 		{#if selectedItems.length === 0}
 			<IIBadge variant="grey">{emptyText}</IIBadge>
 		{:else}
@@ -72,7 +73,8 @@
 					<button
 						type="button"
 						class={cn(
-							'[all:unset] flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
+							buttonReset,
+							'flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
 							isSelected && 'border-2',
 							optionVariantClasses[variant]
 						)}

package/dist/IIEditableText/IIEditableText.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		value: string
@@ -132,7 +133,8 @@
 	<button
 		type="button"
 		class={cn(
-			'[all:unset] cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
+			buttonReset,
+			'cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
 			disabled && 'cursor-not-allowed opacity-60'
 		)}
 		onclick={startEditing}

package/dist/IIMenu/IIMenu.svelte

@@ -3,6 +3,7 @@
 	import {createAttachmentKey} from 'svelte/attachments'
 	import {fly} from 'svelte/transition'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 	import {IIIcon} from '../IIIcon'
 	import {createMenuSearch, getSelectableItems, isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
 	import {useFloating, portal, clickOutside} from '../utils/menu'
@@ -283,15 +284,10 @@
 		return -1
 	}
 
-	// Named-utility button reset. Avoids `[all:unset]`, which in TW v4 sorts after
-	// named utilities and so wins the cascade over any layout classes a consumer
-	// passes (clobbering their `display`/padding). These named resets participate
-	// in the cascade normally and are overridable via `cn`/tailwind-merge.
-	const buttonReset = 'appearance-none bg-transparent border-0 p-0 m-0 text-inherit [font:inherit] outline-none cursor-default'
 	// Children triggers own their content layout; default to an inline-flex row so a
 	// value + caret sit on one line even when the consumer passes no display class.
-	const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left`
-	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-4 text-secondary transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
+	const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left cursor-default`
+	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-4 text-secondary cursor-default transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
 </script>
 
 {#snippet itemContent(item: MenuItem)}

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -3,6 +3,7 @@
 	import {DropdownMenu} from 'bits-ui'
 	import {IIButton} from '../IIButton'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 	import {IIIcon} from '../IIIcon'
 
 	type Action = {
@@ -67,7 +68,7 @@
 	{#if overflowing}
 		<DropdownMenu.Root bind:open={kebabOpen}>
 			<DropdownMenu.Trigger
-				class="[all:unset] cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none"
+				class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none')}
 			>
 				<IIIcon iconName="dots-three-vertical" size="inherit" />
 			</DropdownMenu.Trigger>

package/dist/IIPopover/IIPopover.svelte

@@ -2,6 +2,7 @@
 	import type {Snippet} from 'svelte'
 	import {Popover} from 'bits-ui'
 	import {cn} from '../utils/cn'
+	import {buttonReset} from '../utils/button-reset'
 
 	type Props = {
 		open?: boolean
@@ -52,7 +53,7 @@
 			{/snippet}
 		</Popover.Trigger>
 	{:else}
-		<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
+		<Popover.Trigger class={cn(buttonReset, 'cursor-default', triggerClass)}>
 			{@render trigger?.()}
 		</Popover.Trigger>
 	{/if}

package/dist/icons.d.ts

@@ -89,6 +89,7 @@ export declare const icons: {
     readonly eye: "<path fill=\"currentColor\" d=\"M247.31 124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57 61.26 162.88 48 128 48S61.43 61.26 36.34 86.35C17.51 105.18 9 124 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208s66.57-13.26 91.66-38.34c18.83-18.83 27.3-37.61 27.65-38.4a8 8 0 0 0 0-6.5M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.5 133.5 0 0 1 25 128a133.3 133.3 0 0 1 23.07-30.75C70.33 75.19 97.22 64 128 64s57.67 11.19 79.93 33.25A133.5 133.5 0 0 1 231.05 128c-7.21 13.46-38.62 64-103.05 64m0-112a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32\"/>";
     readonly 'eye-slash': "<path fill=\"currentColor\" d=\"M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z\"/>";
     readonly robot: "<path fill=\"currentColor\" d=\"M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
+    readonly lightning: "<path fill=\"currentColor\" d=\"M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5.16-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5.16 9.06l52.68 19.75Z\"/>";
     readonly headset: "<path fill=\"currentColor\" d=\"M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z\"/>";
     readonly 'bell-slash': "<path fill=\"currentColor\" d=\"M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z\"/>";
     readonly moon: "<path fill=\"currentColor\" d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\"/>";

package/dist/icons.js

@@ -102,6 +102,7 @@ export const icons = {
     'eye-slash': `<path fill="currentColor" d="M53.92 34.62a8 8 0 1 0-11.84 10.76l19.24 21.17C25 88.84 9.38 123.2 8.69 124.76a8 8 0 0 0 0 6.5c.35.79 8.82 19.57 27.65 38.4C61.43 194.74 93.12 208 128 208a127.1 127.1 0 0 0 52.07-10.83l22 24.21a8 8 0 1 0 11.84-10.76Zm47.33 75.84l41.67 45.85a32 32 0 0 1-41.67-45.85M128 192c-30.78 0-57.67-11.19-79.93-33.25A133.2 133.2 0 0 1 25 128c4.69-8.79 19.66-33.39 47.35-49.38l18 19.75a48 48 0 0 0 63.66 70l14.73 16.2A112 112 0 0 1 128 192m6-95.43a8 8 0 0 1 3-15.72a48.16 48.16 0 0 1 38.77 42.64a8 8 0 0 1-7.22 8.71a6 6 0 0 1-.75 0a8 8 0 0 1-8-7.26A32.09 32.09 0 0 0 134 96.57m113.28 34.69c-.42.94-10.55 23.37-33.36 43.8a8 8 0 1 1-10.67-11.92a132.8 132.8 0 0 0 27.8-35.14a133.2 133.2 0 0 0-23.12-30.77C185.67 75.19 158.78 64 128 64a118.4 118.4 0 0 0-19.36 1.57A8 8 0 1 1 106 49.79A134 134 0 0 1 128 48c34.88 0 66.57 13.26 91.66 38.35c18.83 18.83 27.3 37.62 27.65 38.41a8 8 0 0 1 0 6.5Z"/>`,
     // Other
     robot: `<path fill="currentColor" d="M200 48h-64V16a8 8 0 0 0-16 0v32H56a32 32 0 0 0-32 32v112a32 32 0 0 0 32 32h144a32 32 0 0 0 32-32V80a32 32 0 0 0-32-32m16 144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16Zm-52-56H92a28 28 0 0 0 0 56h72a28 28 0 0 0 0-56m-24 16v24h-24v-24Zm-60 12a12 12 0 0 1 12-12h8v24h-8a12 12 0 0 1-12-12m84 12h-8v-24h8a12 12 0 0 1 0 24m-92-68a12 12 0 1 1 12 12a12 12 0 0 1-12-12m88 0a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
+    lightning: `<path fill="currentColor" d="M215.79 118.17a8 8 0 0 0-5-5.66L153.18 90.9l14.66-73.33a8 8 0 0 0-13.69-7l-112 120a8 8 0 0 0 3 13l57.63 21.61l-14.62 73.25a8 8 0 0 0 13.69 7l112-120a8 8 0 0 0 1.94-7.26M109.37 214l10.47-52.38a8 8 0 0 0-5.16-9.06L62 132.71l84.62-90.66l-10.46 52.38a8 8 0 0 0 5.16 9.06l52.68 19.75Z"/>`,
     // Status & Presence
     headset: `<path fill="currentColor" d="M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z"/>`,
     'bell-slash': `<path fill="currentColor" d="M53.92,34.62A8,8,0,1,0,42.08,45.38L58.82,63.8A79.59,79.59,0,0,0,48,104c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.8a40,40,0,0,0,78.4,0h15.44l19.44,21.38a8,8,0,1,0,11.84-10.76ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a63.65,63.65,0,0,1,6.26-27.62L168.09,184Zm166-4.73a8.13,8.13,0,0,1-2.93.55,8,8,0,0,1-7.44-5.08C196.35,156.19,192,129.75,192,104A64,64,0,0,0,96.43,48.31a8,8,0,0,1-7.9-13.91A80,80,0,0,1,208,104c0,35.35,8.05,58.59,10.52,64.88A8,8,0,0,1,214,179.25Z"/>`,

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { buttonReset } from './utils/button-reset';
 export { default as DensityProvider } from './DensityProvider/DensityProvider.svelte';
 export { useDensity, type Density } from './density';
 export { default as StepIndicator } from './MobileOnboarding/StepIndicator.svelte';

package/dist/index.js

@@ -1,4 +1,6 @@
 // @insymetri/styleguide
+// Utilities
+export { buttonReset } from './utils/button-reset';
 // Density
 export { default as DensityProvider } from './DensityProvider/DensityProvider.svelte';
 export { useDensity } from './density';

package/dist/utils/button-reset.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Named-utility reset for bare `<button>` (and `Popover.Trigger`) elements.
+ *
+ * Replaces the `[all:unset]` idiom. In Tailwind v4 `[all:unset]` is an arbitrary
+ * property that sorts *after* named utilities in the generated stylesheet, so it
+ * wins the cascade over any layout classes a consumer passes on the same element
+ * (silently clobbering `display`, padding, etc.). That is why e.g. a trigger's
+ * `flex` was ignored and its caret wrapped onto a new line.
+ *
+ * These named utilities participate in the cascade normally, so a consumer's
+ * `flex` / `inline-flex` / `grid` and any real padding win predictably (no
+ * `!important` needed).
+ *
+ * Deliberately minimal — it only includes resets that are never in tension with
+ * a component's own styling:
+ *   - `appearance-none` strips native control chrome (mainly Safari).
+ *   - `p-0 m-0` drops the UA button box; a component's real padding (`p-4`,
+ *     `px-12`, …) still wins via Tailwind's canonical utility ordering.
+ *   - `outline-none` preserves the prior `[all:unset]` behaviour of no default
+ *     focus ring; components that want one add a `focus-visible:` outline.
+ *
+ * Everything else `[all:unset]` used to reset (border-width, background, and
+ * inherited color/font) is already handled by Tailwind's Preflight on form
+ * controls, so it is intentionally left out to avoid fighting components that
+ * set a real `border` / `bg-*` / `text-*` (e.g. IIEditableBadges option rows).
+ *
+ * Does NOT set `display` or `cursor` — each consumer picks those.
+ */
+export declare const buttonReset = "appearance-none p-0 m-0 outline-none";

package/dist/utils/button-reset.js

@@ -0,0 +1,29 @@
+/**
+ * Named-utility reset for bare `<button>` (and `Popover.Trigger`) elements.
+ *
+ * Replaces the `[all:unset]` idiom. In Tailwind v4 `[all:unset]` is an arbitrary
+ * property that sorts *after* named utilities in the generated stylesheet, so it
+ * wins the cascade over any layout classes a consumer passes on the same element
+ * (silently clobbering `display`, padding, etc.). That is why e.g. a trigger's
+ * `flex` was ignored and its caret wrapped onto a new line.
+ *
+ * These named utilities participate in the cascade normally, so a consumer's
+ * `flex` / `inline-flex` / `grid` and any real padding win predictably (no
+ * `!important` needed).
+ *
+ * Deliberately minimal — it only includes resets that are never in tension with
+ * a component's own styling:
+ *   - `appearance-none` strips native control chrome (mainly Safari).
+ *   - `p-0 m-0` drops the UA button box; a component's real padding (`p-4`,
+ *     `px-12`, …) still wins via Tailwind's canonical utility ordering.
+ *   - `outline-none` preserves the prior `[all:unset]` behaviour of no default
+ *     focus ring; components that want one add a `focus-visible:` outline.
+ *
+ * Everything else `[all:unset]` used to reset (border-width, background, and
+ * inherited color/font) is already handled by Tailwind's Preflight on form
+ * controls, so it is intentionally left out to avoid fighting components that
+ * set a real `border` / `bg-*` / `text-*` (e.g. IIEditableBadges option rows).
+ *
+ * Does NOT set `display` or `cursor` — each consumer picks those.
+ */
+export const buttonReset = 'appearance-none p-0 m-0 outline-none';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.83",
+	"version": "0.1.85",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {