@photonix/basic 3.1.0 → 3.3.0

package/dist/index.css

@@ -5486,6 +5486,7 @@
   letter-spacing: var(--phx-letter-spacing-base, inherit);
   line-height: var(--phx-line-height-base, inherit);
   margin: 0;
+  text-align: var(--phx-text-align-base);
 }
 @media (width >= 640px) {
   .textRoot {
@@ -5956,20 +5957,11 @@
 }
 .badgeShapeNumber {
   block-size: var(--dimensions-16);
+  border-radius: var(--radius-full);
   min-block-size: var(--dimensions-16);
   min-inline-size: var(--dimensions-16);
   padding: var(--space-none);
 }
-.badgeShapeText.singleChar {
-  block-size: var(--dimensions-16);
-  border-radius: var(--radius-full);
-  inline-size: auto;
-  min-inline-size: var(--dimensions-16);
-  padding: var(--space-none) !important;
-}
-.badgeShapeText.singleChar .badgeLabel {
-  padding: 0 var(--space-4xs);
-}
 .badgeShapeDot {
   block-size: var(--dimensions-8);
   border-radius: 50%;
@@ -5989,6 +5981,15 @@
   border: var(--border-sm) solid transparent;
   color: var(--badge-text-subtle);
 }
+.secondary.badgeShapeDot {
+  background-color: var(--badge-color);
+}
+.brand {
+  --badge-color: var(--surface-brand-primary);
+  --badge-on-color: var(--text-neutral-primary-inverse);
+  --badge-bg-subtle: var(--surface-brand-subtle);
+  --badge-text-subtle: var(--text-brand-primary);
+}
 .gray {
   --badge-color: var(--surface-neutral-on-surface);
   --badge-on-color: var(--text-neutral-secondary);
@@ -6187,7 +6188,7 @@
 .primary:active:not(:disabled)::after {
   background-color: var(--surface-state-inverse-press);
 }
-.primary:disabled {
+.primary:disabled:not(.buttonLoading) {
   background-color: var(--surface-state-disabled);
   color: var(--text-state-disabled);
 }
@@ -6196,7 +6197,7 @@
   border: var(--border-sm) solid var(--border-neutral-tertiary);
   color: var(--text-neutral-primary);
 }
-.secondary:disabled {
+.secondary:disabled:not(.buttonLoading) {
   background-color: transparent;
   border-color: var(--border-state-disabled);
   color: var(--text-state-disabled);
@@ -6218,7 +6219,7 @@
   background-color: transparent;
   color: var(--text-neutral-primary);
 }
-.tertiary:disabled {
+.tertiary:disabled:not(.buttonLoading) {
   background-color: transparent;
   color: var(--text-state-disabled);
 }
@@ -6237,7 +6238,7 @@
       var(--gradient-special-2-end) 100%);
   color: var(--text-neutral-on-dark-fixed);
 }
-.brand:disabled {
+.brand:disabled:not(.buttonLoading) {
   background: var(--surface-state-disabled);
   color: var(--text-state-disabled);
 }
@@ -6279,7 +6280,7 @@
 .tertiary .buttonIcon {
   color: var(--foreground-neutral-primary);
 }
-.button:disabled .buttonIcon {
+.button:disabled:not(.buttonLoading) .buttonIcon {
   color: var(--foreground-state-disabled);
 }
 .large .buttonContent,
@@ -6662,8 +6663,11 @@
   gap: var(--space-xs);
   vertical-align: middle;
 }
-.checkboxContainer .checkboxRoot {
-  margin: calc((var(--dimensions-20) - var(--dimensions-40)) / 2);
+.checkboxContainer .checkboxRoot.medium {
+  margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
+}
+.checkboxContainer .checkboxRoot.small {
+  margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
 }
 .checkboxContainer.disabled {
   cursor: not-allowed;
@@ -6759,7 +6763,7 @@
   position: relative;
   z-index: var(--z-local-below);
 }
-.small {
+.radioRoot.small {
   block-size: var(--dimensions-32);
   inline-size: var(--dimensions-32);
 }
@@ -6767,7 +6771,7 @@
   block-size: var(--dimensions-20);
   inline-size: var(--dimensions-20);
 }
-.medium {
+.radioRoot.medium {
   block-size: var(--dimensions-40);
   inline-size: var(--dimensions-40);
 }
@@ -6784,8 +6788,11 @@
   min-inline-size: max-content;
   vertical-align: middle;
 }
-.radioContainer .radioRoot {
-  margin: calc((var(--dimensions-20) - var(--dimensions-40)) / 2);
+.radioContainer .radioRoot.medium {
+  margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
+}
+.radioContainer .radioRoot.small {
+  margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
 }
 .radioContainer.disabled {
   cursor: not-allowed;
@@ -8666,6 +8673,87 @@
   color: var(--foreground-state-disabled);
 }
 
+/* ../ultimate/src/components/sticky-stack/StickyStack.module.css */
+.stickyStackItem {
+  position: sticky;
+  transition-duration:
+    var(--motion-duration-normal),
+    var(--motion-duration-normal),
+    var(--motion-duration-medium);
+  transition-property:
+    background-color,
+    box-shadow,
+    transform;
+  transition-timing-function: var(--motion-ease-standard);
+}
+.stickyStackItem[data-retracted] {
+  transform: translateY(-100%);
+}
+.stickyStackItemPainted {
+  background-color: var(--surface-neutral-primary);
+}
+.stickyStackItemPainted::after {
+  background-color: var(--border-neutral-tertiary);
+  block-size: var(--border-sm);
+  content: "";
+  inset-block-end: 0;
+  inset-inline: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--motion-duration-normal) var(--motion-ease-standard);
+  z-index: var(--z-local-above);
+}
+.stickyStackItem[data-tonal=false] {
+  --sticky-stack-raised-surface: var(--surface-neutral-primary);
+}
+.stickyStackItemPainted[data-surface=merged],
+.stickyStackItemPainted[data-surface=elevated] {
+  background-color: var(--sticky-stack-raised-surface, var(--surface-neutral-elevator));
+  transition-duration:
+    0s,
+    0s,
+    var(--motion-duration-medium);
+}
+.stickyStackItemPainted[data-surface=elevated] {
+  box-shadow: var(--shadow-down-sm);
+}
+.stickyStackItemPainted[data-surface=elevated]::after {
+  opacity: 1;
+  transition: none;
+}
+.stickyStackItemPainted[data-edge=fade]::before {
+  background:
+    linear-gradient(
+      to bottom,
+      var(--sticky-stack-raised-surface, var(--surface-neutral-elevator)),
+      transparent);
+  block-size: var(--dimensions-40);
+  content: "";
+  inset-block-start: 100%;
+  inset-inline: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity var(--motion-duration-normal) var(--motion-ease-standard);
+}
+.stickyStackItemPainted[data-edge=fade][data-surface=elevated] {
+  box-shadow: none;
+}
+.stickyStackItemPainted[data-edge=fade][data-surface=elevated]::before {
+  opacity: 1;
+}
+.stickyStackItemPainted[data-edge=fade][data-surface=elevated]::after {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .stickyStackItem,
+  .stickyStackItemPainted::before,
+  .stickyStackItemPainted::after {
+    transition: none;
+  }
+}
+
 /* ../ultimate/src/components/chip-bar/ChipBar.module.css */
 .chipBarRoot {
   align-items: center;
@@ -8695,6 +8783,14 @@
   background-color: var(--surface-neutral-elevator);
   box-shadow: inset 0 calc(-1 * var(--border-sm)) 0 0 var(--border-neutral-tertiary), var(--shadow-down-sm);
 }
+.chipBarMerged,
+.chipBarRaised {
+  background-color: var(--sticky-stack-raised-surface, var(--surface-neutral-elevator));
+  transition: none;
+}
+.chipBarRaised {
+  box-shadow: inset 0 calc(-1 * var(--border-sm)) 0 0 var(--border-neutral-tertiary), var(--shadow-down-sm);
+}
 .chipBarLeading {
   align-items: center;
   display: flex;
@@ -8881,10 +8977,19 @@
 .chipBarStuck .chipBarNavButton {
   background: var(--surface-neutral-elevator);
 }
+.chipBarMerged .chipBarNavButton,
+.chipBarRaised .chipBarNavButton {
+  background: var(--sticky-stack-raised-surface, var(--surface-neutral-elevator));
+  transition-duration: 0s;
+}
 @media (hover: hover) and (pointer: fine) {
   .chipBarStuck .chipBarNavButton {
     background: var(--surface-neutral-elevator);
   }
+  .chipBarMerged .chipBarNavButton,
+  .chipBarRaised .chipBarNavButton {
+    background: var(--sticky-stack-raised-surface, var(--surface-neutral-elevator));
+  }
 }
 
 /* ../ultimate/src/components/star/Star.module.css */

package/dist/index.d.mts

@@ -690,6 +690,11 @@ interface InputFormatOptions {
     maxDigits?: number;
     /** Allow decimal input for currency. Default: true */
     allowDecimal?: boolean;
+    /**
+     * Calling code for `phone` when it is shown outside the value (a country
+     * picker, say). A `leadingText` such as `+84` is picked up on its own.
+     */
+    countryCode?: string;
 }
 interface TextFieldDropdownOption {
     label: string;
@@ -800,16 +805,20 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * Color theme of the badge
      */
-    color?: 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
+    color?: 'brand' | 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
     /**
      * Shape of the badge
      * - rounded: Small border radius (6px)
      * - pill: Fully rounded (capsule) - DEFAULT
-     * - icon: Circle shape with icon only
-     * - text: Pill shape with text only
-     * - dot: Small dot status indicator (8px)
+     * - icon: 24px circle holding an icon, or a one- or two-character label
+     *   (a step number) when no icon is given
+     * - number: Compact 16px capsule for a count (Figma `number`, native `.number`)
+     * - text: Web-only shorthand that picks for the content: `number` for a count
+     *   ("3", "99+") or a single character, `pill` without an icon otherwise
+     * - dot: Small dot status indicator (8px). Always the solid colour: `variant`
+     *   does not change a dot (a subtle dot is too faint to read)
      */
-    shape?: 'rounded' | 'pill' | 'icon' | 'text' | 'dot';
+    shape?: 'rounded' | 'pill' | 'icon' | 'number' | 'text' | 'dot';
     /**
      * Icon to display (for rounded, pill, icon shapes)
      */
@@ -820,7 +829,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      */
     trailingIcon?: React.ReactNode;
     /**
-     * Text label (for rounded, pill, text shapes)
+     * Text label (for rounded, pill, text shapes; icon shape when no icon)
      */
     label?: string;
     /**
@@ -834,7 +843,9 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     stroke?: boolean;
     /**
      * Force a specific theme's color tokens
-     * Useful when component needs to use Light theme tokens regardless of current theme
+     * Useful when component needs to use Light theme tokens regardless of current theme.
+     * Web only: on iOS/Android wrap the badge in `.phxTheme(.dark)` /
+     * `PhxTheme(PhxColorScheme.Dark) { }`, which themes any subtree.
      */
     forceTheme?: 'light' | 'dark';
 }
@@ -1085,6 +1096,16 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * How a bar paints itself against content scrolling beneath it.
+ * - `flat`: nothing beneath it, primary surface.
+ * - `merged`: raised surface without its own shadow or divider, because a bar below carries them.
+ * - `elevated`: raised surface with divider and shadow, the bottom edge of a pinned stack.
+ *
+ * The raised surface is the elevator surface, or the primary one inside a non-tonal StickyStack.
+ */
+type BarSurface = 'flat' | 'merged' | 'elevated';
+
 interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Element to show on the left, typically a filter Chip or IconButton
@@ -1112,6 +1133,11 @@ interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Optional externally controlled stuck state
      */
     stuck?: boolean;
+    /**
+     * Surface against content scrolled beneath the bar. Inherited from an enclosing
+     * StickyStackItem; when set, it replaces the stuck state `sticky` detects.
+     */
+    surface?: BarSurface;
     /**
      * Whether the ChipBar has horizontal padding (16px default), or custom value
      */

package/dist/index.d.ts

@@ -690,6 +690,11 @@ interface InputFormatOptions {
     maxDigits?: number;
     /** Allow decimal input for currency. Default: true */
     allowDecimal?: boolean;
+    /**
+     * Calling code for `phone` when it is shown outside the value (a country
+     * picker, say). A `leadingText` such as `+84` is picked up on its own.
+     */
+    countryCode?: string;
 }
 interface TextFieldDropdownOption {
     label: string;
@@ -800,16 +805,20 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * Color theme of the badge
      */
-    color?: 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
+    color?: 'brand' | 'gray' | 'black' | 'white' | 'red' | 'orange' | 'yellow' | 'green' | 'mint' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'pink' | 'brown';
     /**
      * Shape of the badge
      * - rounded: Small border radius (6px)
      * - pill: Fully rounded (capsule) - DEFAULT
-     * - icon: Circle shape with icon only
-     * - text: Pill shape with text only
-     * - dot: Small dot status indicator (8px)
+     * - icon: 24px circle holding an icon, or a one- or two-character label
+     *   (a step number) when no icon is given
+     * - number: Compact 16px capsule for a count (Figma `number`, native `.number`)
+     * - text: Web-only shorthand that picks for the content: `number` for a count
+     *   ("3", "99+") or a single character, `pill` without an icon otherwise
+     * - dot: Small dot status indicator (8px). Always the solid colour: `variant`
+     *   does not change a dot (a subtle dot is too faint to read)
      */
-    shape?: 'rounded' | 'pill' | 'icon' | 'text' | 'dot';
+    shape?: 'rounded' | 'pill' | 'icon' | 'number' | 'text' | 'dot';
     /**
      * Icon to display (for rounded, pill, icon shapes)
      */
@@ -820,7 +829,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      */
     trailingIcon?: React.ReactNode;
     /**
-     * Text label (for rounded, pill, text shapes)
+     * Text label (for rounded, pill, text shapes; icon shape when no icon)
      */
     label?: string;
     /**
@@ -834,7 +843,9 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     stroke?: boolean;
     /**
      * Force a specific theme's color tokens
-     * Useful when component needs to use Light theme tokens regardless of current theme
+     * Useful when component needs to use Light theme tokens regardless of current theme.
+     * Web only: on iOS/Android wrap the badge in `.phxTheme(.dark)` /
+     * `PhxTheme(PhxColorScheme.Dark) { }`, which themes any subtree.
      */
     forceTheme?: 'light' | 'dark';
 }
@@ -1085,6 +1096,16 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * How a bar paints itself against content scrolling beneath it.
+ * - `flat`: nothing beneath it, primary surface.
+ * - `merged`: raised surface without its own shadow or divider, because a bar below carries them.
+ * - `elevated`: raised surface with divider and shadow, the bottom edge of a pinned stack.
+ *
+ * The raised surface is the elevator surface, or the primary one inside a non-tonal StickyStack.
+ */
+type BarSurface = 'flat' | 'merged' | 'elevated';
+
 interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Element to show on the left, typically a filter Chip or IconButton
@@ -1112,6 +1133,11 @@ interface ChipBarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Optional externally controlled stuck state
      */
     stuck?: boolean;
+    /**
+     * Surface against content scrolled beneath the bar. Inherited from an enclosing
+     * StickyStackItem; when set, it replaces the stuck state `sticky` detects.
+     */
+    surface?: BarSurface;
     /**
      * Whether the ChipBar has horizontal padding (16px default), or custom value
      */