@photonix/basic 3.6.0 → 3.7.0

package/dist/index.css

@@ -14,6 +14,14 @@
   --surface-brand-subtle: var(--color-primary-100);
   --surface-brand-primary-subtle: var(--color-primary-100);
 }
+:root {
+  --corner-scale: 1;
+}
+@supports (corner-shape: squircle) {
+  :root {
+    --corner-scale: 1.5;
+  }
+}
 :root,
 [data-theme] {
   --shadow-xs: var(--shadow-down-xs);
@@ -944,40 +952,52 @@
   border-radius: var(--radius-none);
 }
 .rounded4Xs {
-  border-radius: var(--radius-4xs);
+  border-radius: calc(var(--radius-4xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .rounded3Xs {
-  border-radius: var(--radius-3xs);
+  border-radius: calc(var(--radius-3xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .rounded2Xs {
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedXs {
-  border-radius: var(--radius-xs);
+  border-radius: calc(var(--radius-xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedSm {
-  border-radius: var(--radius-sm);
+  border-radius: calc(var(--radius-sm) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedMd {
-  border-radius: var(--radius-md);
+  border-radius: calc(var(--radius-md) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedLg {
-  border-radius: var(--radius-lg);
+  border-radius: calc(var(--radius-lg) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedXl {
-  border-radius: var(--radius-xl);
+  border-radius: calc(var(--radius-xl) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .rounded2Xl {
-  border-radius: var(--radius-2xl);
+  border-radius: calc(var(--radius-2xl) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .rounded3Xl {
-  border-radius: var(--radius-3xl);
+  border-radius: calc(var(--radius-3xl) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .rounded4Xl {
-  border-radius: var(--radius-4xl);
+  border-radius: calc(var(--radius-4xl) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .roundedFull {
   border-radius: var(--radius-full);
+  corner-shape: round;
 }
 .borderNone {
   border-width: var(--border-none);
@@ -2734,6 +2754,7 @@
   border-radius: var(--radius-full);
   border-style: solid;
   border-width: var(--border-md);
+  corner-shape: round;
 }
 .scrollbarSm::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
@@ -2758,6 +2779,7 @@
   border-radius: var(--radius-full);
   border-style: solid;
   border-width: var(--border-md);
+  corner-shape: round;
 }
 .scrollbarMd::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
@@ -2852,7 +2874,8 @@
 .glass {
   backdrop-filter: var(--effects-blur-md);
   background-color: var(--color-blur-overlay);
-  border-radius: var(--radius-md);
+  border-radius: calc(var(--radius-md) * var(--corner-scale, 1));
+  corner-shape: squircle;
   position: relative;
 }
 .glass::before {
@@ -2863,6 +2886,7 @@
       var(--gradient-secondary-end) 100%);
   border-radius: inherit;
   content: "";
+  corner-shape: inherit;
   inset: 0;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
@@ -4797,6 +4821,12 @@
 @property --box-borderRadius-lg { inherits: false; syntax: "*"; }
 @property --box-borderRadius-xl { inherits: false; syntax: "*"; }
 @property --box-borderRadius-2xl { inherits: false; syntax: "*"; }
+@property --box-cornerShape-base { inherits: false; syntax: "*"; }
+@property --box-cornerShape-sm { inherits: false; syntax: "*"; }
+@property --box-cornerShape-md { inherits: false; syntax: "*"; }
+@property --box-cornerShape-lg { inherits: false; syntax: "*"; }
+@property --box-cornerShape-xl { inherits: false; syntax: "*"; }
+@property --box-cornerShape-2xl { inherits: false; syntax: "*"; }
 @property --box-border-base { inherits: false; syntax: "*"; }
 @property --box-border-sm { inherits: false; syntax: "*"; }
 @property --box-border-md { inherits: false; syntax: "*"; }
@@ -4928,6 +4958,7 @@
   box-shadow: var(--box-shadow-base, none);
   box-sizing: border-box;
   color: var(--box-color-base, inherit);
+  corner-shape: var(--box-cornerShape-base, round);
   cursor: var(--cursor-base, auto);
   gap: var(--rowGap-base, var(--gap-base, normal)) var(--columnGap-base, var(--gap-base, normal));
   display: var(--display-base, block);
@@ -4970,6 +5001,7 @@
     border-radius: var(--box-borderRadius-sm, var(--box-borderRadius-base, 0));
     box-shadow: var(--box-shadow-sm, var(--box-shadow-base, none));
     color: var(--box-color-sm, var(--box-color-base, inherit));
+    corner-shape: var(--box-cornerShape-sm, var(--box-cornerShape-base, round));
     cursor: var(--cursor-sm, var(--cursor-base, auto));
     gap: var(--rowGap-sm, var(--gap-sm, var(--rowGap-base, var(--gap-base, normal)))) var(--columnGap-sm, var(--gap-sm, var(--columnGap-base, var(--gap-base, normal))));
     display: var(--display-sm, var(--display-base, block));
@@ -5013,6 +5045,7 @@
     border-radius: var(--box-borderRadius-md, var(--box-borderRadius-sm, var(--box-borderRadius-base, 0)));
     box-shadow: var(--box-shadow-md, var(--box-shadow-sm, var(--box-shadow-base, none)));
     color: var(--box-color-md, var(--box-color-sm, var(--box-color-base, inherit)));
+    corner-shape: var(--box-cornerShape-md, var(--box-cornerShape-sm, var(--box-cornerShape-base, round)));
     cursor: var(--cursor-md, var(--cursor-sm, var(--cursor-base, auto)));
     gap: var(--rowGap-md, var(--gap-md, var(--rowGap-sm, var(--gap-sm, var(--rowGap-base, var(--gap-base, normal)))))) var(--columnGap-md, var(--gap-md, var(--columnGap-sm, var(--gap-sm, var(--columnGap-base, var(--gap-base, normal))))));
     display: var(--display-md, var(--display-sm, var(--display-base, block)));
@@ -5056,6 +5089,7 @@
     border-radius: var(--box-borderRadius-lg, var(--box-borderRadius-md, var(--box-borderRadius-sm, var(--box-borderRadius-base, 0))));
     box-shadow: var(--box-shadow-lg, var(--box-shadow-md, var(--box-shadow-sm, var(--box-shadow-base, none))));
     color: var(--box-color-lg, var(--box-color-md, var(--box-color-sm, var(--box-color-base, inherit))));
+    corner-shape: var(--box-cornerShape-lg, var(--box-cornerShape-md, var(--box-cornerShape-sm, var(--box-cornerShape-base, round))));
     cursor: var(--cursor-lg, var(--cursor-md, var(--cursor-sm, var(--cursor-base, auto))));
     gap: var(--rowGap-lg, var(--gap-lg, var(--rowGap-md, var(--gap-md, var(--rowGap-sm, var(--gap-sm, var(--rowGap-base, var(--gap-base, normal)))))))) var(--columnGap-lg, var(--gap-lg, var(--columnGap-md, var(--gap-md, var(--columnGap-sm, var(--gap-sm, var(--columnGap-base, var(--gap-base, normal))))))));
     display: var(--display-lg, var(--display-md, var(--display-sm, var(--display-base, block))));
@@ -5099,6 +5133,7 @@
     border-radius: var(--box-borderRadius-xl, var(--box-borderRadius-lg, var(--box-borderRadius-md, var(--box-borderRadius-sm, var(--box-borderRadius-base, 0)))));
     box-shadow: var(--box-shadow-xl, var(--box-shadow-lg, var(--box-shadow-md, var(--box-shadow-sm, var(--box-shadow-base, none)))));
     color: var(--box-color-xl, var(--box-color-lg, var(--box-color-md, var(--box-color-sm, var(--box-color-base, inherit)))));
+    corner-shape: var(--box-cornerShape-xl, var(--box-cornerShape-lg, var(--box-cornerShape-md, var(--box-cornerShape-sm, var(--box-cornerShape-base, round)))));
     cursor: var(--cursor-xl, var(--cursor-lg, var(--cursor-md, var(--cursor-sm, var(--cursor-base, auto)))));
     gap: var(--rowGap-xl, var(--gap-xl, var(--rowGap-lg, var(--gap-lg, var(--rowGap-md, var(--gap-md, var(--rowGap-sm, var(--gap-sm, var(--rowGap-base, var(--gap-base, normal)))))))))) var(--columnGap-xl, var(--gap-xl, var(--columnGap-lg, var(--gap-lg, var(--columnGap-md, var(--gap-md, var(--columnGap-sm, var(--gap-sm, var(--columnGap-base, var(--gap-base, normal))))))))));
     display: var(--display-xl, var(--display-lg, var(--display-md, var(--display-sm, var(--display-base, block)))));
@@ -5142,6 +5177,7 @@
     border-radius: var(--box-borderRadius-2xl, var(--box-borderRadius-xl, var(--box-borderRadius-lg, var(--box-borderRadius-md, var(--box-borderRadius-sm, var(--box-borderRadius-base, 0))))));
     box-shadow: var(--box-shadow-2xl, var(--box-shadow-xl, var(--box-shadow-lg, var(--box-shadow-md, var(--box-shadow-sm, var(--box-shadow-base, none))))));
     color: var(--box-color-2xl, var(--box-color-xl, var(--box-color-lg, var(--box-color-md, var(--box-color-sm, var(--box-color-base, inherit))))));
+    corner-shape: var(--box-cornerShape-2xl, var(--box-cornerShape-xl, var(--box-cornerShape-lg, var(--box-cornerShape-md, var(--box-cornerShape-sm, var(--box-cornerShape-base, round))))));
     cursor: var(--cursor-2xl, var(--cursor-xl, var(--cursor-lg, var(--cursor-md, var(--cursor-sm, var(--cursor-base, auto))))));
     gap: var(--rowGap-2xl, var(--gap-2xl, var(--rowGap-xl, var(--gap-xl, var(--rowGap-lg, var(--gap-lg, var(--rowGap-md, var(--gap-md, var(--rowGap-sm, var(--gap-sm, var(--rowGap-base, var(--gap-base, normal)))))))))))) var(--columnGap-2xl, var(--gap-2xl, var(--columnGap-xl, var(--gap-xl, var(--columnGap-lg, var(--gap-lg, var(--columnGap-md, var(--gap-md, var(--columnGap-sm, var(--gap-sm, var(--columnGap-base, var(--gap-base, normal))))))))))));
     display: var(--display-2xl, var(--display-xl, var(--display-lg, var(--display-md, var(--display-sm, var(--display-base, block))))));
@@ -5399,6 +5435,7 @@
 .customScrollbarThumbVertical {
   background-color: var(--scrollbar-thumb);
   border-radius: var(--radius-full);
+  corner-shape: round;
   cursor: pointer;
   inset-inline: 0;
   margin-inline: auto;
@@ -5421,6 +5458,7 @@
 .customScrollbarThumbHorizontal {
   background-color: var(--scrollbar-thumb);
   border-radius: var(--radius-full);
+  corner-shape: round;
   cursor: pointer;
   inset-block: 0;
   margin-block: auto;
@@ -5446,8 +5484,9 @@
   align-items: center;
   background-color: var(--surface-neutral-secondary);
   border: var(--border-sm) dashed var(--foreground-neutral-primary);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
   box-sizing: border-box;
+  corner-shape: squircle;
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
@@ -5941,23 +5980,28 @@
   padding: 0 var(--space-4xs);
 }
 .badgeShapeRounded {
-  border-radius: var(--radius-3xs);
+  border-radius: calc(var(--radius-3xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .badgeShapePill {
   border-radius: var(--radius-full);
+  corner-shape: round;
 }
 .badgeShapeIcon {
   block-size: var(--dimensions-24);
   border-radius: 50%;
+  corner-shape: round;
   inline-size: var(--dimensions-24);
   padding: var(--space-none);
 }
 .badgeShapeText {
   border-radius: var(--radius-full);
+  corner-shape: round;
 }
 .badgeShapeNumber {
   block-size: var(--dimensions-16);
   border-radius: var(--radius-full);
+  corner-shape: round;
   min-block-size: var(--dimensions-16);
   min-inline-size: var(--dimensions-16);
   padding: var(--space-none);
@@ -5965,6 +6009,7 @@
 .badgeShapeDot {
   block-size: var(--dimensions-8);
   border-radius: 50%;
+  corner-shape: round;
   inline-size: var(--dimensions-8);
   padding: var(--space-none);
 }
@@ -6143,10 +6188,12 @@
 }
 .button.buttonPill {
   border-radius: var(--radius-full) !important;
+  corner-shape: round !important;
 }
 .large {
   block-size: var(--dimensions-48);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   font-family: var(--title-md-family);
   font-size: var(--title-md-size);
   font-weight: var(--title-md-weight-emphasize);
@@ -6157,7 +6204,8 @@
 }
 .medium {
   block-size: var(--dimensions-44);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   font-family: var(--title-md-family);
   font-size: var(--title-md-size);
   font-weight: var(--title-md-weight-emphasize);
@@ -6168,7 +6216,8 @@
 }
 .small {
   block-size: var(--dimensions-36);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   font-family: var(--title-sm-family);
   font-size: var(--title-sm-size);
   font-weight: var(--title-sm-weight-emphasize);
@@ -6372,20 +6421,24 @@
 }
 .iconButtonRoot.iconButtonPill {
   border-radius: var(--radius-full) !important;
+  corner-shape: round !important;
 }
 .large {
   block-size: var(--dimensions-48);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   inline-size: var(--dimensions-48);
 }
 .medium {
   block-size: var(--dimensions-44);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   inline-size: var(--dimensions-44);
 }
 .small {
   block-size: var(--dimensions-36);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   inline-size: var(--dimensions-36);
 }
 .primary {
@@ -6397,6 +6450,7 @@
   background-color: transparent;
   border-radius: inherit;
   content: "";
+  corner-shape: inherit;
   inset: 0;
   pointer-events: none;
   position: absolute;
@@ -6445,6 +6499,7 @@
   background-color: transparent;
   border-radius: inherit;
   content: "";
+  corner-shape: inherit;
   inset: 0;
   pointer-events: none;
   position: absolute;
@@ -6474,6 +6529,7 @@
   background-color: transparent;
   border-radius: inherit;
   content: "";
+  corner-shape: inherit;
   inset: 0;
   pointer-events: none;
   position: absolute;
@@ -6546,6 +6602,7 @@
   block-size: var(--dimensions-40);
   border: none;
   border-radius: var(--radius-full);
+  corner-shape: round;
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
@@ -6578,6 +6635,7 @@
   background-color: transparent;
   border-radius: var(--radius-full);
   content: "";
+  corner-shape: round;
   inset: 0;
   opacity: var(--opacity-visible);
   pointer-events: none;
@@ -6700,6 +6758,7 @@
   block-size: var(--dimensions-40);
   border: none;
   border-radius: var(--radius-full);
+  corner-shape: round;
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
@@ -6723,6 +6782,7 @@
   background-color: transparent;
   border-radius: var(--radius-full);
   content: "";
+  corner-shape: round;
   inset: 0;
   opacity: var(--opacity-visible);
   pointer-events: none;
@@ -6850,6 +6910,7 @@
 .switchTrack {
   background-color: var(--surface-neutral-tertiary);
   border-radius: var(--radius-full);
+  corner-shape: round;
   display: block;
   position: relative;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
@@ -6874,6 +6935,7 @@
   block-size: 100%;
   border-radius: 50%;
   box-shadow: var(--shadow-down-sm);
+  corner-shape: round;
   display: flex;
   inline-size: 100%;
   justify-content: center;
@@ -7052,8 +7114,9 @@
   background-color: var(--surface-neutral-on-surface);
   block-size: var(--dimensions-48);
   border: var(--border-sm) solid transparent;
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
   box-sizing: border-box;
+  corner-shape: squircle;
   cursor: text;
   display: flex;
   font-family: var(--body-lg-family);
@@ -7083,6 +7146,7 @@
 }
 .searchFieldRounded {
   border-radius: var(--radius-full);
+  corner-shape: round;
 }
 .searchFieldRoot:hover:not(.searchFieldDisabled) {
   background-color: var(--surface-state-hover);
@@ -7173,8 +7237,9 @@
 .dropdownListRoot {
   background-color: var(--surface-neutral-elevator);
   border: var(--border-xs) solid var(--border-neutral-tertiary);
-  border-radius: var(--radius-sm);
+  border-radius: calc(var(--radius-sm) * var(--corner-scale, 1));
   box-shadow: var(--shadow-down-md);
+  corner-shape: squircle;
   display: flex;
   flex-direction: column;
   min-inline-size: calc(var(--dimensions-80) * 3 + var(--dimensions-24) + var(--dimensions-16));
@@ -7243,7 +7308,8 @@
   align-items: center;
   background-color: transparent;
   block-size: var(--dimensions-48);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   cursor: pointer;
   display: flex;
   gap: var(--space-xs);
@@ -7381,8 +7447,9 @@
   --text-field-content-gap: var(--space-xs);
   align-items: center;
   border: var(--border-sm) solid var(--border-neutral-tertiary);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
   box-sizing: border-box;
+  corner-shape: squircle;
   display: flex;
   isolation: isolate;
   min-block-size: var(--dimensions-56);
@@ -7471,8 +7538,9 @@
 .textFieldLeadingText {
   align-items: center;
   background-color: var(--surface-neutral-on-surface);
-  border-radius: var(--radius-4xs);
+  border-radius: calc(var(--radius-4xs) * var(--corner-scale, 1));
   color: var(--text-neutral-primary);
+  corner-shape: squircle;
   display: flex;
   font-family: var(--body-lg-family);
   font-size: var(--body-lg-size);
@@ -7664,7 +7732,8 @@
 }
 .textFieldChevronOnly:hover {
   background-color: var(--surface-state-hover);
-  border-radius: var(--radius-4xs);
+  border-radius: calc(var(--radius-4xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .readOnly {
   background-color: var(--surface-neutral-secondary);
@@ -7904,10 +7973,11 @@
 .textAreaInput {
   background-color: transparent;
   border: var(--border-sm) solid var(--border-neutral-tertiary);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
   box-sizing: border-box;
   caret-color: var(--text-neutral-primary);
   color: var(--text-neutral-primary);
+  corner-shape: squircle;
   font-family: var(--body-lg-family);
   font-size: var(--body-lg-size);
   font-weight: var(--body-lg-weight);
@@ -8004,6 +8074,7 @@
   block-size: 100%;
   border-radius: 50%;
   color: var(--foreground-neutral-primary-inverse);
+  corner-shape: round;
   display: flex;
   inline-size: 100%;
   justify-content: center;
@@ -8027,6 +8098,7 @@
 .avatarStatus {
   border-radius: 50%;
   box-shadow: 0 0 0 var(--avatar-status-stroke-width, var(--border-md)) var(--surface-neutral-primary);
+  corner-shape: round;
   inset-block-end: 0;
   inset-inline-end: 0;
   position: absolute;
@@ -8331,7 +8403,8 @@
 }
 .skeletonRoot {
   background-color: var(--surface-neutral-on-surface);
-  border-radius: var(--radius-4xs);
+  border-radius: calc(var(--radius-4xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   overflow: hidden;
   position: relative;
 }
@@ -8361,18 +8434,22 @@
 .skeletonAvatar {
   block-size: var(--dimensions-40);
   border-radius: 50%;
+  corner-shape: round;
   inline-size: var(--dimensions-40);
 }
 .skeletonRectangular {
   block-size: 100%;
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
   inline-size: 100%;
 }
 .skeletonCircular {
   border-radius: 50%;
+  corner-shape: round;
 }
 .skeletonRounded {
   border-radius: var(--radius-full);
+  corner-shape: round;
 }
 
 /* ../ultimate/src/components/chip/Chip.module.css */
@@ -8380,6 +8457,7 @@
   align-items: center;
   border-radius: var(--radius-full);
   box-sizing: border-box;
+  corner-shape: round;
   display: inline-flex;
   flex-shrink: 0;
   font-family:
@@ -8399,7 +8477,8 @@
   vertical-align: middle;
 }
 .chipRoot.rounded {
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
+  corner-shape: squircle;
 }
 .chipRoot::after {
   background-color: transparent;
@@ -8463,6 +8542,7 @@
   border: none;
   border-radius: var(--radius-full);
   color: var(--foreground-neutral-primary-inverse);
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
@@ -8481,6 +8561,7 @@
   border: none;
   border-radius: var(--radius-full);
   color: inherit;
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
@@ -8946,6 +9027,7 @@
   border: none;
   border-radius: var(--radius-full);
   color: var(--text-neutral-primary);
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   inline-size: var(--dimensions-32);
@@ -9003,6 +9085,7 @@
   border: none;
   border-radius: 50%;
   color: var(--foreground-neutral-primary);
+  corner-shape: round;
   cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
@@ -9027,6 +9110,7 @@
   background-color: transparent;
   border-radius: 50%;
   content: "";
+  corner-shape: round;
   inset: 0;
   opacity: var(--opacity-visible);
   pointer-events: none;
@@ -9109,6 +9193,7 @@
   background-color: var(--text-neutral-primary);
   block-size: var(--dimensions-8);
   border-radius: 50%;
+  corner-shape: round;
   inline-size: var(--dimensions-8);
   inset: 0;
   margin: auto;
@@ -9120,10 +9205,11 @@
   background: transparent;
   block-size: 100%;
   border: var(--border-sm) solid var(--border-neutral-tertiary);
-  border-radius: var(--radius-2xs);
+  border-radius: calc(var(--radius-2xs) * var(--corner-scale, 1));
   box-sizing: border-box;
   caret-color: var(--text-neutral-primary);
   color: var(--text-neutral-primary);
+  corner-shape: squircle;
   display: block;
   font: inherit;
   inline-size: 100%;
@@ -9189,6 +9275,7 @@
 }
 .cell.dotFieldInput {
   border-radius: 50%;
+  corner-shape: round;
   padding: 0;
 }
 .cell.dotFieldInput[data-filled=true] {

package/dist/index.d.mts

@@ -7,6 +7,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * Layout component type definitions
  * Provides TypeScript types for design token props used in Box, Stack, Grid, etc.
  */
+
 /** Public spacing token names mapped to canonical --space-* CSS variables */
 type SpacingToken = 'none' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
 /** Public background token names mapped to canonical surface CSS variables */

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * Layout component type definitions
  * Provides TypeScript types for design token props used in Box, Stack, Grid, etc.
  */
+
 /** Public spacing token names mapped to canonical --space-* CSS variables */
 type SpacingToken = 'none' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
 /** Public background token names mapped to canonical surface CSS variables */

package/dist/index.js

@@ -519,7 +519,8 @@ var BoxImpl = React.forwardRef(
     const Component = as || "div";
     const toPx = (v) => typeof v === "number" ? `${v}px` : v;
     const spacingMapper = (v) => v === "auto" ? "auto" : spacingVar(v);
-    const radiusMapper = (v) => radiusVar(v);
+    const radiusMapper = (v) => v === "full" || v === "none" ? radiusVar(v) : `calc(${radiusVar(v)} * var(--corner-scale, 1))`;
+    const cornerShapeMapper = (v) => v === "full" ? "round" : "squircle";
     const shadowMapper = (v) => shadowVar(v);
     const bgMapper = (v) => backgroundVar(v);
     const pageBgMapper = (v) => pageBackgroundVar(v);
@@ -577,6 +578,7 @@ var BoxImpl = React.forwardRef(
       ...getResponsiveVars("page-bg", pageBg, pageBgMapper),
       ...getResponsiveVars("box-bg", bg, bgMapper),
       ...getResponsiveVars("box-borderRadius", borderRadius, radiusMapper),
+      ...getResponsiveVars("box-cornerShape", borderRadius, cornerShapeMapper),
       ...getResponsiveVars("box-shadow", shadow, shadowMapper),
       ...getResponsiveVars("box-opacity", opacity),
       ...getResponsiveVars("box-border", border),
@@ -9489,6 +9491,7 @@ function OTP({
   const currentDigits = React251.useRef(digits);
   currentDigits.current = digits;
   const composing = React251.useRef(null);
+  const picked = React251.useRef(false);
   const inputs = React251.useRef([]);
   const first = React251.useRef(null);
   const previousReadOnly = React251.useRef(readOnly);
@@ -9522,6 +9525,9 @@ function OTP({
     const index = sequential ? nextCell(currentDigits.current) : cell;
     const text = normalize(raw);
     if (raw && !text) return;
+    const wasPicked = picked.current;
+    picked.current = false;
+    if (text && text.length < count && index === count - 1 && !wasPicked && currentDigits.current.every(Boolean)) return;
     const start = text.length === count ? 0 : index;
     const next = [...currentDigits.current];
     if (!text) next[index] = "";
@@ -9622,6 +9628,7 @@ function OTP({
                 value: digits[index] ?? "",
                 tabIndex: sequential && index !== nextCell(digits) ? -1 : void 0,
                 onMouseDown: (event) => {
+                  picked.current = true;
                   if (!sequential || disabled || readOnly) return;
                   event.preventDefault();
                   focus(nextCell(currentDigits.current));
@@ -9652,6 +9659,7 @@ function OTP({
                   if (composing.current === index && next && !/^[0-9]+$/.test(next)) return;
                   composing.current = null;
                   enter(index, next);
+                  event.currentTarget.value = currentDigits.current[index] ?? "";
                 },
                 onPaste: (event) => {
                   event.preventDefault();
@@ -9691,6 +9699,7 @@ function OTP({
                   } else if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
                     event.preventDefault();
                     if (sequential) return;
+                    picked.current = true;
                     focus(
                       event.key === "Home" ? 0 : event.key === "End" ? count - 1 : Math.max(
                         0,

package/dist/index.mjs

@@ -229,7 +229,8 @@ var BoxImpl = React.forwardRef(
     const Component = as || "div";
     const toPx = (v) => typeof v === "number" ? `${v}px` : v;
     const spacingMapper = (v) => v === "auto" ? "auto" : spacingVar(v);
-    const radiusMapper = (v) => radiusVar(v);
+    const radiusMapper = (v) => v === "full" || v === "none" ? radiusVar(v) : `calc(${radiusVar(v)} * var(--corner-scale, 1))`;
+    const cornerShapeMapper = (v) => v === "full" ? "round" : "squircle";
     const shadowMapper = (v) => shadowVar(v);
     const bgMapper = (v) => backgroundVar(v);
     const pageBgMapper = (v) => pageBackgroundVar(v);
@@ -287,6 +288,7 @@ var BoxImpl = React.forwardRef(
       ...getResponsiveVars("page-bg", pageBg, pageBgMapper),
       ...getResponsiveVars("box-bg", bg, bgMapper),
       ...getResponsiveVars("box-borderRadius", borderRadius, radiusMapper),
+      ...getResponsiveVars("box-cornerShape", borderRadius, cornerShapeMapper),
       ...getResponsiveVars("box-shadow", shadow, shadowMapper),
       ...getResponsiveVars("box-opacity", opacity),
       ...getResponsiveVars("box-border", border),
@@ -9199,6 +9201,7 @@ function OTP({
   const currentDigits = React251.useRef(digits);
   currentDigits.current = digits;
   const composing = React251.useRef(null);
+  const picked = React251.useRef(false);
   const inputs = React251.useRef([]);
   const first = React251.useRef(null);
   const previousReadOnly = React251.useRef(readOnly);
@@ -9232,6 +9235,9 @@ function OTP({
     const index = sequential ? nextCell(currentDigits.current) : cell;
     const text = normalize(raw);
     if (raw && !text) return;
+    const wasPicked = picked.current;
+    picked.current = false;
+    if (text && text.length < count && index === count - 1 && !wasPicked && currentDigits.current.every(Boolean)) return;
     const start = text.length === count ? 0 : index;
     const next = [...currentDigits.current];
     if (!text) next[index] = "";
@@ -9332,6 +9338,7 @@ function OTP({
                 value: digits[index] ?? "",
                 tabIndex: sequential && index !== nextCell(digits) ? -1 : void 0,
                 onMouseDown: (event) => {
+                  picked.current = true;
                   if (!sequential || disabled || readOnly) return;
                   event.preventDefault();
                   focus(nextCell(currentDigits.current));
@@ -9362,6 +9369,7 @@ function OTP({
                   if (composing.current === index && next && !/^[0-9]+$/.test(next)) return;
                   composing.current = null;
                   enter(index, next);
+                  event.currentTarget.value = currentDigits.current[index] ?? "";
                 },
                 onPaste: (event) => {
                   event.preventDefault();
@@ -9401,6 +9409,7 @@ function OTP({
                   } else if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
                     event.preventDefault();
                     if (sequential) return;
+                    picked.current = true;
                     focus(
                       event.key === "Home" ? 0 : event.key === "End" ? count - 1 : Math.max(
                         0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photonix/basic",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Photonix Basic - Foundation primitives and essential UI building blocks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,8 +17,8 @@
     "./dist/index.css": "./dist/index.css"
   },
   "dependencies": {
-    "@photonix/icons": "^3.6.0",
-    "@photonix/illustrations": "^3.6.0"
+    "@photonix/illustrations": "^3.7.0",
+    "@photonix/icons": "^3.7.0"
   },
   "devDependencies": {
     "@repo/typescript-config": "*",
@@ -26,7 +26,7 @@
     "eslint": "^9.39.1",
     "tsup": "^8.0.2",
     "typescript": "5.9.2",
-    "@photonix/ultimate": "^3.6.0"
+    "@photonix/ultimate": "^3.7.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",