@misoto22/kioku-ui 0.1.0 → 0.2.0

package/src/tokens/contracts.ts

@@ -18,7 +18,8 @@ type ColorRole =
   | 'overlayActive'
   | 'disabledSurface'
   | 'disabledText'
-  | 'focus';
+  | 'focus'
+  | 'scrim';
 type BorderRole =
   'default' | 'strong' | 'interactive' | 'disabled' | 'width' | 'style';
 type StatusRole =
@@ -47,7 +48,13 @@ type TypographyRole =
   | 'fontWeightMedium'
   | 'fontWeightStrong'
   | 'lineHeightBody'
-  | 'lineHeightHeading';
+  | 'lineHeightHeading'
+  | 'letterSpacingTitle'
+  | 'letterSpacingHeading'
+  | 'letterSpacingBody'
+  | 'letterSpacingLabel'
+  | 'letterSpacingEyebrow'
+  | 'letterSpacingMono';
 type SpacingRole = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type RadiusRole = 'inner' | 'element' | 'container' | 'page' | 'full';
 type SizeRole = 'controlSm' | 'controlMd' | 'controlLg' | 'hitTarget';
@@ -92,6 +99,7 @@ export const tokenContract = {
     disabledSurface: 'color.disabledSurface',
     disabledText: 'color.disabledText',
     focus: 'color.focus',
+    scrim: 'color.scrim',
   },
   border: {
     default: 'border.default',
@@ -132,6 +140,12 @@ export const tokenContract = {
     fontWeightStrong: 'typography.fontWeightStrong',
     lineHeightBody: 'typography.lineHeightBody',
     lineHeightHeading: 'typography.lineHeightHeading',
+    letterSpacingTitle: 'typography.letterSpacingTitle',
+    letterSpacingHeading: 'typography.letterSpacingHeading',
+    letterSpacingBody: 'typography.letterSpacingBody',
+    letterSpacingLabel: 'typography.letterSpacingLabel',
+    letterSpacingEyebrow: 'typography.letterSpacingEyebrow',
+    letterSpacingMono: 'typography.letterSpacingMono',
   },
   spacing: {
     xs: 'spacing.xs',

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+/** Holds a number inside an inclusive range. */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export {clamp} from './clamp.js';
+export {mergeIds} from './mergeIds.js';
+export {resolveInvalid} from './resolveInvalid.js';

package/src/utils/mergeIds.ts

@@ -0,0 +1,11 @@
+/**
+ * Joins ids for an ARIA relationship attribute, dropping empty ones. Returns
+ * `undefined` rather than an empty string, because `aria-describedby=""`
+ * points at nothing and confuses some screen readers.
+ */
+export function mergeIds(
+  ...ids: readonly (string | undefined | false | null)[]
+): string | undefined {
+  const joined = ids.filter(Boolean).join(' ');
+  return joined === '' ? undefined : joined;
+}

package/src/utils/resolveInvalid.ts

@@ -0,0 +1,10 @@
+/**
+ * Reads an `aria-invalid` value as a boolean. The attribute accepts strings,
+ * and the string `"false"` means valid — a plain truthiness check would read
+ * it as invalid.
+ */
+export function resolveInvalid(
+  value: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined,
+): boolean {
+  return value !== undefined && value !== false && value !== 'false';
+}