shelving 1.260.1 → 1.260.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.260.1",
+	"version": "1.260.3",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/block/Details.module.css

@@ -59,13 +59,13 @@
 
 			/* Children */
 			[data-slot="icon"] {
-				flex: none;
 				width: var(--size-icon);
 				height: var(--size-icon);
 				color: var(--color-gray);
 				transform: rotate(180deg);
 				transition: var(--details-transition, all var(--duration-fast));
 				border-radius: var(--radius-xxsmall);
+				flex: none;
 			}
 		}
 

package/ui/form/Input.module.css

@@ -132,11 +132,6 @@
 			margin: 0;
 			outline: 0;
 		}
-		&& > [data-slot="icon"] {
-			inline-size: var(--input-icon-size, var(--size-icon));
-			block-size: var(--input-icon-size, var(--size-icon));
-			flex: none;
-		}
 
 		&.wrapper {
 			position: relative;

package/ui/misc/Icon.d.ts

@@ -1,15 +1,17 @@
 import type { ComponentType, ReactElement } from "react";
 import { type ColorVariants } from "../style/Color.js";
+import type { SpaceVariants } from "../style/Space.js";
 import { type StatusVariants } from "../style/Status.js";
+import type { TintVariant } from "../style/Tint.js";
 import { type SizeVariant } from "../style/Typography.js";
 /**
  * Props for `<Icon>` — the `status` to represent and optional icon `size`.
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
     /**
-     * Set the icon to use. Defaults to appropriate icon matching for `status`
+     * Set the icon to use. Defaults to appropriate icon for `status`
      */
     icon?: ComponentType<{
         className?: string | undefined;
@@ -18,7 +20,12 @@ export interface IconProps extends ColorVariants, StatusVariants {
      * Size of the icon.
      * @default var(--size-icon)
      */
-    size?: SizeVariant;
+    size?: SizeVariant | undefined;
+    /**
+     * Tint of the selected color.
+     * @default "50"
+     */
+    tint?: TintVariant | undefined;
 }
 /**
  * Render the icon for a given status, coloured to match.

package/ui/misc/Icon.module.css

@@ -4,15 +4,19 @@
 
 @layer defaults {
 	.icon {
-		font-size: var(--icon-size, var(--size-icon));
+		/* Box */
 		width: 1em;
 		height: 1em;
+		margin: 0;
+		padding: 0;
+
+		/* Style */
 		color: var(--icon-color, var(--tint-50));
-	}
-}
 
-@layer overrides {
-	.icon {
+		/* Contents */
 		flex: none;
+
+		/* Text */
+		font-size: var(--icon-size, var(--size-icon));
 	}
 }

package/ui/misc/Icon.tsx

@@ -1,7 +1,9 @@
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
 import type { ComponentType, ReactElement } from "react";
 import { type ColorVariants, getColorClass } from "../style/Color.js";
+import type { SpaceVariants } from "../style/Space.js";
 import { getStatusClass, type Status, type StatusVariants } from "../style/Status.js";
+import type { TintVariant } from "../style/Tint.js";
 import { getTypographyClass, type SizeVariant } from "../style/Typography.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import ICON_CSS from "./Icon.module.css";
@@ -22,16 +24,21 @@ const STATUS_ICONS: {
  *
  * @see https://shelving.cc/ui/IconProps
  */
-export interface IconProps extends ColorVariants, StatusVariants {
+export interface IconProps extends ColorVariants, StatusVariants, SpaceVariants {
 	/**
-	 * Set the icon to use. Defaults to appropriate icon matching for `status`
+	 * Set the icon to use. Defaults to appropriate icon for `status`
 	 */
 	icon?: ComponentType<{ className?: string | undefined }>;
 	/**
 	 * Size of the icon.
 	 * @default var(--size-icon)
 	 */
-	size?: SizeVariant;
+	size?: SizeVariant | undefined;
+	/**
+	 * Tint of the selected color.
+	 * @default "50"
+	 */
+	tint?: TintVariant | undefined;
 }
 
 /**
@@ -50,7 +57,7 @@ export function Icon(props: IconProps): ReactElement {
 				getModuleClass(ICON_CSS, "icon"), //
 				getColorClass(props),
 				getStatusClass(props),
-				getTypographyClass(props),
+				getTypographyClass(props), // Used for size and tint.
 			)}
 		/>
 	);

package/ui/style/Flex.module.css

@@ -12,8 +12,9 @@
 
 		/* Children */
 		> [data-slot="icon"] {
-			inline-size: var(--flex-icon-size, var(--size-icon));
-			block-size: var(--flex-icon-size, var(--size-icon));
+			font-size: var(--size-icon);
+			inline-size: 1em;
+			block-size: 1em;
 			flex: none;
 		}