@tenerife.music/ui 1.0.13 → 1.0.15

package/dist/tokens/index.d.ts

@@ -1,2 +1,89 @@
-export { B as BaseColorTokens, b as ChartColors, C as ColorScale, c as ColorTokens, M as Mode, a as SemanticColors, S as SurfaceColors, T as TextColors, e as accentColors, f as baseColors, g as chartColors, h as colorCSSVariables, d as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-CVA7_16U.js';
-export { A as ALERT_TOKENS, y as AlertVariant, d8 as AlignOffsetToken, bB as Animation, d9 as AnimationPresetToken, da as AspectRatioToken, z as BUTTON_TOKENS, c2 as BorderRadius, D as ButtonFontSize, E as ButtonHeight, F as ButtonPaddingHorizontal, G as ButtonPaddingVertical, H as ButtonShadow, I as CARD_TOKENS, P as CHECKBOX_TOKENS, cz as CanonicalFontSize, cA as CanonicalFontWeight, cB as CanonicalLetterSpacing, cC as CanonicalLineHeight, cD as CanonicalTextColor, J as CardPadding, K as CardRadius, L as CardShadow, N as CardSize, O as CardSpacingVertical, Q as CheckboxSize, U as CheckboxState, V as CheckboxVariant, db as ColorToken, c8 as ColoredShadow, c3 as ComponentRadius, cm as ComponentSpacing, dc as ContainerMaxWidthToken, dd as ContainerPaddingToken, cn as ContainerSpacing, W as DATA_TOKENS, Z as DOMAIN_TOKENS, a7 as DROPDOWN_TOKENS, X as DataListLabelWidth, Y as DataListRowPadding, de as DelayToken, _ as DomainCardBadge, $ as DomainCardImage, a0 as DomainCardLayout, a1 as DomainCardMetadata, a2 as DomainCardMotion, a3 as DomainCardPriceCapacity, a4 as DomainCardSkeleton, a5 as DomainCardSkeletonContentWidth, a6 as DomainCardSurface, a8 as DropdownItemSize, a9 as DropdownMenuSize, aa as DropdownTriggerSize, ab as DropdownVariant, bC as Duration, bD as Easing, c9 as ElevationShadow, ac as EmptyStateIconSize, df as FlexBasisToken, ca as FocusRing, cE as FontFamily, cF as FontSize, cG as FontWeight, cb as GlowEffect, co as GridSpacing, bt as ICON_TOKENS, ad as INPUT_TOKENS, bu as IconColor, bv as IconSize, bw as IconStroke, ae as InputFontSize, af as InputHeight, ag as InputPaddingHorizontal, ah as InputPaddingVertical, ai as InputRadius, aj as InputSize, bE as Keyframe, dg as LayoutSpaceToken, cH as LetterSpacing, cI as LineHeight, ak as MENU_TOKENS, ax as MOTION_TOKENS, al as MenuContentMinWidth, am as MenuContentPadding, an as MenuContentRadius, ao as MenuContentShadow, ap as MenuIndicatorOffset, aq as MenuIndicatorSize, ar as MenuItemGap, as as MenuItemHeight, at as MenuItemPadding, au as MenuItemRadius, av as MenuLabelPadding, aw as MenuSeparatorMargin, M as ModalFooterAlignToken, dh as ModalHeightToken, di as ModalSizeToken, dj as ModalWidthToken, ay as MotionAnimation, az as MotionDuration, dk as MotionDurationToken, aA as MotionEasing, dl as MotionEasingToken, dm as MotionToken, aB as MotionTransition, aC as MotionTransitionPreset, dn as MotionTransitionToken, bF as MotionV2CombinedType, bG as MotionV2Duration, bH as MotionV2Easing, bI as MotionV2SlideDirection, bJ as MotionV2Transition, aD as NAVIGATION_TOKENS, aK as NOTIFICATION_TOKENS, aE as NavigationItemPadding, aF as NavigationListGap, aG as NavigationRadius, aH as NavigationShadow, aI as NavigationSize, aJ as NavigationState, aL as NotificationPanelWidth, aM as NotificationVariant, aN as OVERLAY_TOKENS, aO as OverlayBackdropVariant, aP as OverlayModalSize, aQ as POPOVER_TOKENS, aR as PopoverArrowOffset, aS as PopoverArrowSize, aT as PopoverContentPadding, aU as PopoverContentRadius, aV as PopoverContentShadow, aW as PopoverContentWidth, aX as RADIO_TOKENS, aY as RadioSize, aZ as RadioState, a_ as RadioVariant, k as RadiusToken, c as ResponsiveAlignOffset, x as ResponsiveAnimationPreset, dp as ResponsiveAspectRatio, o as ResponsiveColor, q as ResponsiveContainerMaxWidth, dq as ResponsiveContainerPadding, s as ResponsiveDelay, r as ResponsiveFlexBasis, i as ResponsiveModalHeight, g as ResponsiveModalSize, h as ResponsiveModalWidth, dr as ResponsiveMotion, m as ResponsiveRadius, R as ResponsiveSelectSize, a as ResponsiveSelectWidth, ds as ResponsiveShadow, b as ResponsiveSideOffset, j as ResponsiveSpace, dt as ResponsiveSurface, du as ResponsiveTextLineHeight, dv as ResponsiveTextSize, dw as ResponsiveTextWeight, a$ as SECTION_TOKENS, cT as SELECT_TOKENS, b5 as SURFACE_TOKENS, ba as SWITCH_TOKENS, b0 as SectionGap, b1 as SectionPadding, cp as SectionSpacing, cU as SelectContentPadding, cV as SelectContentRadius, cW as SelectItemFontSize, cX as SelectItemPaddingHorizontal, cY as SelectItemPaddingVertical, cZ as SelectItemRadius, c_ as SelectLabelFontSize, c$ as SelectLabelPaddingHorizontal, d0 as SelectLabelPaddingVertical, d1 as SelectSeparatorMarginHorizontal, d2 as SelectSeparatorMarginVertical, d as SelectSizeToken, e as SelectStateToken, d3 as SelectTriggerFontSize, d4 as SelectTriggerHeight, d5 as SelectTriggerPaddingHorizontal, d6 as SelectTriggerPaddingVertical, d7 as SelectTriggerRadius, S as SelectVariantToken, f as SelectWidthToken, cq as SemanticSpacing, n as ShadowToken, dx as SideOffsetToken, b2 as SkeletonAnimation, b3 as SkeletonBackground, b4 as SkeletonVariant, dy as SpaceToken, cr as Spacing, dz as SpacingToken, bK as Spring, cs as StackSpacing, b6 as SurfacePadding, b7 as SurfaceRadius, b8 as SurfaceShadow, l as SurfaceToken, b9 as SurfaceVariant, bb as SwitchSize, bc as SwitchState, bd as SwitchVariant, bj as TEXT_TOKENS, bo as TOAST_TOKENS, bq as TOOLTIP_TOKENS, be as TableCellPadding, bf as TableGap, bg as TableHeaderPadding, bh as TableRowHeight, bi as TableShadow, bk as TextFontSize, bl as TextFontWeight, bm as TextLetterSpacing, dA as TextLetterSpacingToken, bn as TextLineHeight, dB as TextLineHeightToken, dC as TextSizeToken, cJ as TextStyle, dD as TextWeightToken, bp as ToastVariant, br as TooltipContentRadius, bs as TooltipContentShadow, bL as Transition, cy as UI_COLORS, cc as accentColoredShadows, bx as allCSSVariables, by as allCSSVariablesCSS, bM as animations, c4 as borderRadius, c5 as componentRadius, cd as componentShadowMapping, bN as durations, bO as easings, ce as elevationShadows, cf as focusRings, cK as fontFamily, cL as fontSize, cM as fontSizeWithMd, cN as fontWeight, bz as generateCSSVariablesCSS, cg as glowEffects, bP as keyframes, ct as layoutSpacing, cO as letterSpacing, cP as lineHeight, bQ as motionCSSVariables, bS as motionV2CSSVariables, bR as motionV2Combined, bT as motionV2Durations, bU as motionV2Easings, bV as motionV2Fade, bW as motionV2Scale, bX as motionV2Slide, bY as motionV2TailwindConfig, bZ as motionV2Transitions, ch as primaryColoredShadows, c6 as radiusCSSVariables, b_ as reducedMotion, cu as semanticSpacing, ci as shadowBase, cj as shadowCSSVariables, ck as shadowOpacity, cv as spacing, cw as spacingCSSVariables, b$ as springs, c0 as tailwindMotionConfig, c7 as tailwindRadiusConfig, cl as tailwindShadowConfig, cx as tailwindSpacingConfig, cQ as tailwindTypographyConfig, cR as textStyles, bA as tokenSystemSummary, c1 as transitions, cS as typographyCSSVariables } from '../index-Bv4wWj9I.js';
+export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-BZtZJBBm.js';
+export { A as ALERT_TOKENS, l as AlertVariant, cG as AlignOffsetToken, bo as Animation, cH as AnimationPresetToken, cI as AspectRatioToken, B as BUTTON_TOKENS, bR as BorderRadius, m as ButtonFontSize, n as ButtonHeight, o as ButtonPaddingHorizontal, p as ButtonPaddingVertical, q as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, cm as CanonicalFontSize, cn as CanonicalFontWeight, co as CanonicalLetterSpacing, cp as CanonicalLineHeight, cq as CanonicalTextColor, r as CardPadding, s as CardRadius, t as CardShadow, u as CardSize, v as CardSpacingVertical, w as CheckboxSize, x as CheckboxState, y as CheckboxVariant, cJ as ColorToken, bX as ColoredShadow, bS as ComponentRadius, c9 as ComponentSpacing, cK as ContainerMaxWidthToken, cL as ContainerPaddingToken, ca as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, c as DROPDOWN_TOKENS, z as DataListLabelWidth, E as DataListRowPadding, cM as DelayToken, F as DomainCardBadge, G as DomainCardImage, H as DomainCardLayout, J as DomainCardMetadata, K as DomainCardMotion, L as DomainCardPriceCapacity, Q as DomainCardSkeleton, U as DomainCardSkeletonContentWidth, V as DomainCardSurface, W as DropdownItemSize, X as DropdownMenuSize, Y as DropdownTriggerSize, Z as DropdownVariant, bp as Duration, bq as Easing, bY as ElevationShadow, _ as EmptyStateIconSize, cN as FlexBasisToken, bZ as FocusRing, cr as FontFamily, cs as FontSize, ct as FontWeight, b_ as GlowEffect, cb as GridSpacing, I as ICON_TOKENS, d as INPUT_TOKENS, $ as IconColor, a0 as IconSize, a1 as IconStroke, a2 as InputFontSize, a3 as InputHeight, a4 as InputPaddingHorizontal, a5 as InputPaddingVertical, a6 as InputRadius, a7 as InputSize, br as Keyframe, cO as LayoutSpaceToken, cu as LetterSpacing, cv as LineHeight, M as MENU_TOKENS, e as MOTION_TOKENS, a8 as MenuContentMinWidth, a9 as MenuContentPadding, aa as MenuContentRadius, ab as MenuContentShadow, ac as MenuIndicatorOffset, ad as MenuIndicatorSize, ae as MenuItemGap, af as MenuItemHeight, ag as MenuItemPadding, ah as MenuItemRadius, ai as MenuLabelPadding, aj as MenuSeparatorMargin, cP as ModalFooterAlignToken, cQ as ModalHeightToken, cR as ModalSizeToken, cS as ModalWidthToken, ak as MotionAnimation, al as MotionDuration, cT as MotionDurationToken, am as MotionEasing, cU as MotionEasingToken, cV as MotionToken, an as MotionTransition, ao as MotionTransitionPreset, cW as MotionTransitionToken, bD as MotionV2CombinedType, bE as MotionV2Duration, bF as MotionV2Easing, bG as MotionV2SlideDirection, bH as MotionV2Transition, N as NAVIGATION_TOKENS, f as NOTIFICATION_TOKENS, ap as NavigationItemPadding, aq as NavigationListGap, ar as NavigationRadius, as as NavigationShadow, at as NavigationSize, au as NavigationState, av as NotificationPanelWidth, aw as NotificationVariant, O as OVERLAY_TOKENS, ax as OverlayBackdropVariant, ay as OverlayModalSize, P as POPOVER_TOKENS, az as PopoverArrowOffset, aA as PopoverArrowSize, aB as PopoverContentPadding, aC as PopoverContentRadius, aD as PopoverContentShadow, aE as PopoverContentWidth, R as RADIO_TOKENS, aF as RadioSize, aG as RadioState, aH as RadioVariant, cX as RadiusToken, cY as ResponsiveAlignOffset, cZ as ResponsiveAnimationPreset, c_ as ResponsiveAspectRatio, c$ as ResponsiveColor, d0 as ResponsiveContainerMaxWidth, d1 as ResponsiveContainerPadding, d2 as ResponsiveDelay, d3 as ResponsiveFlexBasis, d4 as ResponsiveModalHeight, d5 as ResponsiveModalSize, d6 as ResponsiveModalWidth, d7 as ResponsiveMotion, d8 as ResponsiveRadius, d9 as ResponsiveSelectSize, da as ResponsiveSelectWidth, db as ResponsiveShadow, dc as ResponsiveSideOffset, dd as ResponsiveSpace, de as ResponsiveSurface, df as ResponsiveTextLineHeight, dg as ResponsiveTextSize, dh as ResponsiveTextWeight, S as SECTION_TOKENS, g as SELECT_TOKENS, h as SURFACE_TOKENS, i as SWITCH_TOKENS, aI as SectionGap, aJ as SectionPadding, cc as SectionSpacing, aK as SelectContentPadding, aL as SelectContentRadius, aM as SelectItemFontSize, aN as SelectItemPaddingHorizontal, aO as SelectItemPaddingVertical, aP as SelectItemRadius, aQ as SelectLabelFontSize, aR as SelectLabelPaddingHorizontal, aS as SelectLabelPaddingVertical, aT as SelectSeparatorMarginHorizontal, aU as SelectSeparatorMarginVertical, di as SelectSizeToken, dj as SelectStateToken, aV as SelectTriggerFontSize, aW as SelectTriggerHeight, aX as SelectTriggerPaddingHorizontal, aY as SelectTriggerPaddingVertical, aZ as SelectTriggerRadius, dk as SelectVariantToken, dl as SelectWidthToken, cd as SemanticSpacing, dm as ShadowToken, dn as SideOffsetToken, a_ as SkeletonAnimation, a$ as SkeletonBackground, b0 as SkeletonVariant, dp as SpaceToken, ce as Spacing, dq as SpacingToken, bs as Spring, cf as StackSpacing, b1 as SurfacePadding, b2 as SurfaceRadius, b3 as SurfaceShadow, dr as SurfaceToken, b4 as SurfaceVariant, b5 as SwitchSize, b6 as SwitchState, b7 as SwitchVariant, T as TEXT_TOKENS, j as TOAST_TOKENS, k as TOOLTIP_TOKENS, b8 as TableCellPadding, b9 as TableGap, ba as TableHeaderPadding, bb as TableRowHeight, bc as TableShadow, bd as TextFontSize, be as TextFontWeight, bf as TextLetterSpacing, ds as TextLetterSpacingToken, bg as TextLineHeight, dt as TextLineHeightToken, du as TextSizeToken, cw as TextStyle, dv as TextWeightToken, bh as ToastVariant, bi as TooltipContentRadius, bj as TooltipContentShadow, bt as Transition, cl as UI_COLORS, b$ as accentColoredShadows, bk as allCSSVariables, bl as allCSSVariablesCSS, bu as animations, bT as borderRadius, bU as componentRadius, c0 as componentShadowMapping, bv as durations, bw as easings, c1 as elevationShadows, c2 as focusRings, cx as fontFamily, cy as fontSize, cz as fontSizeWithMd, cA as fontWeight, bm as generateCSSVariablesCSS, c3 as glowEffects, bx as keyframes, cg as layoutSpacing, cB as letterSpacing, cC as lineHeight, by as motionCSSVariables, bI as motionV2CSSVariables, bJ as motionV2Combined, bK as motionV2Durations, bL as motionV2Easings, bM as motionV2Fade, bN as motionV2Scale, bO as motionV2Slide, bP as motionV2TailwindConfig, bQ as motionV2Transitions, c4 as primaryColoredShadows, bV as radiusCSSVariables, bz as reducedMotion, ch as semanticSpacing, c5 as shadowBase, c6 as shadowCSSVariables, c7 as shadowOpacity, ci as spacing, cj as spacingCSSVariables, bA as springs, bB as tailwindMotionConfig, bW as tailwindRadiusConfig, c8 as tailwindShadowConfig, ck as tailwindSpacingConfig, cD as tailwindTypographyConfig, cE as textStyles, bn as tokenSystemSummary, bC as transitions, cF as typographyCSSVariables } from '../index-CP_dmFn4.js';
+
+/**
+ * Artist Card Component Tokens
+ *
+ * Domain-specific design tokens for ArtistCard component.
+ * Provides artist-specific styling tokens that complement DOMAIN_TOKENS.
+ * All values reference foundation tokens or other component tokens.
+ *
+ * Foundation tokens referenced:
+ * - DOMAIN_TOKENS: image, spacing, metadata, text from src/tokens/components/domain.ts
+ * - Layout utilities: flex, positioning, sizing from Tailwind (allowed)
+ */
+/**
+ * Artist Card Component Tokens
+ *
+ * Defines artist-specific tokens for ArtistCard component.
+ * Values reference DOMAIN_TOKENS and foundation tokens where possible.
+ */
+declare const ARTIST_TOKENS: {
+    /**
+     * Image container tokens
+     * Layout classes for image container wrapper
+     */
+    readonly image: {
+        /**
+         * Container layout tokens
+         * Positioning and sizing for image container
+         */
+        readonly container: {
+            /**
+             * Base container layout
+             * Relative positioning, full width, overflow hidden
+             * Uses Tailwind layout utilities (allowed per architecture)
+             */
+            readonly layout: "relative w-full overflow-hidden";
+        };
+        /**
+         * Image sizing tokens
+         * Full width and height for images
+         */
+        readonly sizing: {
+            /**
+             * Full size image
+             * Uses Tailwind sizing utilities (allowed per architecture)
+             */
+            readonly full: "h-full w-full";
+        };
+        /**
+         * Placeholder container tokens
+         * Layout for placeholder icon container when no image is provided
+         */
+        readonly placeholder: {
+            /**
+             * Placeholder container layout
+             * Flex centering for placeholder icon
+             * Uses Tailwind layout utilities (allowed per architecture)
+             */
+            readonly container: "flex h-full w-full items-center justify-center";
+        };
+    };
+    /**
+     * Footer border tokens
+     * Border styling for card footer separator
+     */
+    readonly footer: {
+        /**
+         * Footer border tokens
+         * Top border separator for footer section
+         */
+        readonly border: {
+            /**
+             * Footer border top
+             * Uses semantic border color token
+             */
+            readonly top: "border-t border-border";
+        };
+    };
+};
+/**
+ * Type exports for Artist Card tokens
+ */
+type ArtistCardImageContainer = typeof ARTIST_TOKENS.image.container;
+type ArtistCardImageSizing = typeof ARTIST_TOKENS.image.sizing;
+type ArtistCardImagePlaceholder = typeof ARTIST_TOKENS.image.placeholder;
+type ArtistCardFooterBorder = typeof ARTIST_TOKENS.footer.border;
+
+export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing };

package/dist/tokens/index.mjs

@@ -682,6 +682,68 @@ var CARD_TOKENS = {
   }
 };
 
+// src/tokens/components/artist.ts
+var ARTIST_TOKENS = {
+  /**
+   * Image container tokens
+   * Layout classes for image container wrapper
+   */
+  image: {
+    /**
+     * Container layout tokens
+     * Positioning and sizing for image container
+     */
+    container: {
+      /**
+       * Base container layout
+       * Relative positioning, full width, overflow hidden
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      layout: "relative w-full overflow-hidden"
+    },
+    /**
+     * Image sizing tokens
+     * Full width and height for images
+     */
+    sizing: {
+      /**
+       * Full size image
+       * Uses Tailwind sizing utilities (allowed per architecture)
+       */
+      full: "h-full w-full"
+    },
+    /**
+     * Placeholder container tokens
+     * Layout for placeholder icon container when no image is provided
+     */
+    placeholder: {
+      /**
+       * Placeholder container layout
+       * Flex centering for placeholder icon
+       * Uses Tailwind layout utilities (allowed per architecture)
+       */
+      container: "flex h-full w-full items-center justify-center"
+    }
+  },
+  /**
+   * Footer border tokens
+   * Border styling for card footer separator
+   */
+  footer: {
+    /**
+     * Footer border tokens
+     * Top border separator for footer section
+     */
+    border: {
+      /**
+       * Footer border top
+       * Uses semantic border color token
+       */
+      top: "border-t border-border"
+    }
+  }
+};
+
 // src/tokens/spacing.ts
 var spacing = {
   // Zero spacing
@@ -944,101 +1006,6 @@ var tailwindSpacingConfig = {
 
 // src/tokens/components/data.ts
 var DATA_TOKENS = {
-  /**
-   * Table Component Tokens
-   */
-  table: {
-    /**
-     * Table row heights by size
-     * Maps to Tailwind height utilities
-     */
-    rowHeight: {
-      sm: "h-8",
-      // 32px (2rem) - compact rows
-      md: "h-10",
-      // 40px (2.5rem) - default rows
-      lg: "h-12"
-      // 48px (3rem) - spacious rows
-    },
-    /**
-     * Table cell and header padding by size
-     * Maps to semantic spacing tokens
-     */
-    padding: {
-      cell: {
-        sm: "p-xs",
-        // 4px (0.25rem) - maps to semanticSpacing.xs
-        md: "p-sm",
-        // 8px (0.5rem) - maps to semanticSpacing.sm
-        lg: "p-md"
-        // 16px (1rem) - maps to semanticSpacing.md
-      },
-      header: {
-        sm: "px-xs py-sm",
-        // 4px horizontal, 8px vertical
-        md: "px-sm py-md",
-        // 8px horizontal, 16px vertical
-        lg: "px-md py-lg"
-        // 16px horizontal, 24px vertical
-      }
-    },
-    /**
-     * Gap between table cells (horizontal spacing)
-     */
-    gap: {
-      sm: "gap-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "gap-sm"
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-    },
-    /**
-     * Border radius for table
-     */
-    radius: {
-      default: "rounded-md"
-      // 6px (0.375rem) - maps to borderRadius.md
-    },
-    /**
-     * Shadow tokens for table
-     * Maps to foundation elevation shadow tokens
-     */
-    shadow: {
-      none: "shadow-none",
-      // No shadow
-      subtle: "shadow-sm"
-      // Maps to elevationShadows.sm
-    },
-    /**
-     * Typography tokens for table headers and cells
-     * Maps to foundation typography fontSize tokens
-     */
-    typography: {
-      header: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      cell: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    },
-    /**
-     * Color tokens for table states
-     * Uses semantic color tokens
-     */
-    colors: {
-      border: "border-border",
-      // Border color
-      rowHover: "hover:bg-muted/50",
-      // Row hover background
-      rowSelected: "bg-muted"
-      // Selected row background
-    }
-  },
   /**
    * Skeleton Component Tokens
    */
@@ -1104,97 +1071,6 @@ var DATA_TOKENS = {
       inline: "inline-block"
       // Inline block display
     }
-  },
-  /**
-   * EmptyState Component Tokens
-   */
-  emptyState: {
-    /**
-     * Spacing tokens for EmptyState
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between elements - maps to semanticSpacing.md
-      padding: "p-lg"
-      // 24px (1.5rem) - container padding - maps to semanticSpacing.lg
-    },
-    /**
-     * Border radius for EmptyState container
-     */
-    radius: {
-      default: "rounded-xl"
-      // 12px (0.75rem) - maps to borderRadius.xl
-    },
-    /**
-     * Icon sizes by variant
-     * Maps to Tailwind size utilities
-     */
-    iconSize: {
-      sm: "size-8",
-      // 32px (2rem)
-      md: "size-12",
-      // 48px (3rem)
-      lg: "size-16"
-      // 64px (4rem)
-    },
-    /**
-     * Typography tokens for EmptyState
-     * Maps to foundation typography tokens
-     */
-    typography: {
-      title: {
-        fontSize: "text-lg",
-        // Maps to fontSize.lg[0]
-        fontWeight: "font-semibold"
-        // Maps to fontWeight.semibold
-      },
-      description: {
-        fontSize: "text-sm",
-        // Maps to fontSize.sm[0]
-        fontWeight: "font-normal"
-        // Maps to fontWeight.normal
-      }
-    }
-  },
-  /**
-   * DataList Component Tokens
-   */
-  dataList: {
-    /**
-     * Spacing tokens for DataList
-     * Maps to semantic spacing tokens
-     */
-    spacing: {
-      gap: "gap-md",
-      // 16px (1rem) - gap between items - maps to semanticSpacing.md
-      padding: "p-md"
-      // 16px (1rem) - container padding - maps to semanticSpacing.md
-    },
-    /**
-     * Label width tokens (for desktop horizontal layout)
-     * Maps to Tailwind width utilities
-     */
-    labelWidth: {
-      sm: "w-24",
-      // 96px (6rem) - small label width
-      md: "w-32",
-      // 128px (8rem) - default label width
-      lg: "w-40"
-      // 160px (10rem) - large label width
-    },
-    /**
-     * Row padding tokens
-     * Maps to semantic spacing tokens
-     */
-    rowPadding: {
-      sm: "py-xs",
-      // 4px (0.25rem) - maps to semanticSpacing.xs
-      md: "py-sm",
-      // 8px (0.5rem) - maps to semanticSpacing.sm
-      lg: "py-md"
-      // 16px (1rem) - maps to semanticSpacing.md
-    }
   }
 };
 
@@ -1539,7 +1415,7 @@ var DOMAIN_TOKENS = {
   },
   /**
    * Image tokens for card media
-   * Defines aspect ratio, radius, and overlay styles
+   * Defines aspect ratio, radius, overlay styles, and placeholder gradients
    */
   image: {
     /**
@@ -1562,6 +1438,40 @@ var DOMAIN_TOKENS = {
     overlay: {
       gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
       // Gradient overlay for image hover states
+    },
+    /**
+     * Placeholder gradient tokens for image placeholders
+     * Used when no image URL is provided
+     */
+    placeholder: {
+      gradient: "bg-gradient-to-br from-muted to-muted/50"
+      // Placeholder gradient background
+    }
+  },
+  /**
+   * Text tokens for card text elements
+   * Defines hover states and line clamping for titles and descriptions
+   */
+  text: {
+    /**
+     * Hover state tokens for text elements
+     * Used for interactive text elements like titles
+     */
+    hover: {
+      primary: "group-hover:text-primary"
+      // Hover state for primary text color
+    },
+    /**
+     * Line clamp tokens for text truncation
+     * Used for limiting text to specific number of lines
+     */
+    lineClamp: {
+      one: "line-clamp-1",
+      // Single line clamp
+      two: "line-clamp-2",
+      // Two line clamp
+      three: "line-clamp-3"
+      // Three line clamp
     }
   },
   /**
@@ -1784,6 +1694,94 @@ var DOMAIN_TOKENS = {
       height: "h-6"
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
+  },
+  /**
+   * CTA (Call-to-Action) button tokens for domain card components
+   * Provides PromoCard-specific CTA button styling tokens
+   * These tokens are semantically owned by domain card components, not by the Button component
+   * References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
+   */
+  cta: {
+    /**
+     * CTA button styling tokens
+     * Used by PromoCard and other domain card components for CTA button elements
+     */
+    button: {
+      /**
+       * Button heights by size
+       * Maps to Tailwind height utilities: h-8, h-9
+       */
+      height: {
+        sm: "h-8",
+        // 32px (2rem) - compact size
+        md: "h-9"
+        // 36px (2.25rem) - default size
+      },
+      /**
+       * Button padding by size
+       * Horizontal and vertical padding values
+       * References semanticSpacing tokens
+       */
+      padding: {
+        horizontal: {
+          sm: "px-sm",
+          // 8px (0.5rem) - maps to semanticSpacing.sm
+          md: "px-md"
+          // 16px (1rem) - maps to semanticSpacing.md
+        },
+        vertical: {
+          sm: "py-xs"
+          // 4px (0.25rem) - maps to semanticSpacing.xs
+        }
+      },
+      /**
+       * Border radius for CTA buttons
+       * References borderRadius.md (6px / 0.375rem)
+       * Using Tailwind class "rounded-md" which maps to borderRadius.md
+       */
+      radius: "rounded-md",
+      // References borderRadius.md via Tailwind
+      /**
+       * Font sizes by button size
+       * Maps to foundation typography fontSize tokens
+       */
+      fontSize: {
+        sm: "text-xs",
+        // Maps to fontSize.xs[0]
+        md: "text-sm"
+        // Maps to fontSize.sm[0]
+      },
+      /**
+       * Shadow tokens for CTA buttons
+       * Maps to foundation elevation shadow tokens
+       */
+      shadow: {
+        primary: "shadow"
+        // Maps to elevationShadows.xs (primary variant uses shadow)
+      },
+      /**
+       * Color tokens for CTA button variants
+       * Uses semantic color tokens that map to CSS variables
+       */
+      variant: {
+        primary: {
+          background: "bg-primary",
+          // Primary background using CSS var
+          text: "text-primary-foreground",
+          // Primary text using CSS var
+          hover: "hover:bg-primary/90"
+          // Primary hover using CSS var
+        }
+      },
+      /**
+       * Transition tokens for CTA buttons
+       * References MOTION_TOKENS for transitions
+       */
+      transition: {
+        colors: "transition-colors"
+        // Color transition using motion tokens
+      }
+    }
   }
 };
 
@@ -1887,40 +1885,6 @@ var INPUT_TOKENS = {
     text: "text-[hsl(var(--foreground))]"
     // File input text color using CSS var
   },
-  /**
-   * Select listbox tokens
-   * Styling for select dropdown container
-   */
-  selectListbox: {
-    border: "border border-[hsl(var(--border))]",
-    // Border color using CSS var
-    background: "bg-[hsl(var(--popover))]",
-    // Background using CSS var
-    text: "text-[hsl(var(--popover-foreground))]",
-    // Text color using CSS var
-    radius: "rounded-md",
-    // Radius token (6px)
-    shadow: "shadow-md"
-    // Shadow token
-  },
-  /**
-   * Select option tokens
-   * Styling for select option items
-   */
-  selectOption: {
-    focus: {
-      background: "focus:bg-[hsl(var(--accent))]",
-      // Focus background using CSS var
-      text: "focus:text-[hsl(var(--accent-foreground))]"
-      // Focus text using CSS var
-    },
-    selected: {
-      background: "bg-[hsl(var(--accent))]",
-      // Selected background using CSS var
-      text: "text-[hsl(var(--accent-foreground))]"
-      // Selected text using CSS var
-    }
-  },
   /**
    * Variant-based tokens
    * Border, background, and text colors for different variants
@@ -4201,6 +4165,14 @@ var DROPDOWN_TOKENS = {
       // 256px
     }
   },
+  /**
+   * Width tokens
+   * Common width utilities
+   */
+  width: {
+    full: "w-full"
+    // Full width (100%)
+  },
   /**
    * Item tokens by size
    * Individual menu item
@@ -6114,4 +6086,4 @@ var tokenSystemSummary = {
 // src/tokens/theme.ts
 var UI_COLORS = tailwindThemeColors;
 
-export { ALERT_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };
+export { ALERT_TOKENS, ARTIST_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SELECT_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tenerife.music/ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "private": false,
+  "packageManager": "pnpm@10.18.2",
   "type": "module",
   "sideEffects": [
     "**/*.css",
@@ -117,6 +118,7 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/eslintrc": "^3.3.1",
+    "@floating-ui/react-dom": "^2.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
@@ -143,6 +145,7 @@
     "@vitest/coverage-v8": "^4.0.15",
     "@vitest/ui": "^4.0.15",
     "autoprefixer": "^10.0.0",
+    "axe-core": "^4.10.0",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.38.0",
     "eslint-config-prettier": "^9.1.2",
@@ -164,6 +167,8 @@
     "tsx": "^4.19.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.47.0",
+    "@typescript-eslint/utils": "^8.47.0",
+    "@typescript-eslint/types": "^8.47.0",
     "vite": "^5.0.0",
     "vitest": "^4.0.15",
     "vitest-axe": "^0.1.0"