@brightspot/ui 6.3.5-rc.1 → 6.4.0

package/dist/tailwind-plugin-button.ts

@@ -166,15 +166,26 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
   }
 
   // background & text colors for buttons in different states
+  // -600 doesn't clear WCAG AA (4.5:1) against white for these hues, either as a solid
+  // fill under white text or as fill-none (the color used as text on the page).
+  // Measured against white: warning 3.49:1, teal 3.80:1 — vs primary 5.44:1 and error
+  // 4.85:1, which pass. At -700 warning is 5.43:1 and teal 5.57:1. success was already
+  // stepped down for the same reason; it just predates the other two being noticed.
+  const needsDarkerStep = new Set(['success', 'warning', 'teal'])
+  const solidStep = (k: string) => (k === 'gray' ? '100' : needsDarkerStep.has(k) ? '700' : '600')
+  const hoverStep = (k: string) => (k === 'gray' ? '200' : needsDarkerStep.has(k) ? '800' : '700')
+  // success keeps -600 here: only the two measured failures move.
+  const onSurfaceStep = (k: string) => (k === 'gray' || k === 'warning' || k === 'teal' ? '700' : '600')
+
   for (const key in colors) {
     if (key === 'currentColor' || key === 'transparent' || key === 'white' || key === 'black' || key === 'ai') continue
     const ringColorKey = key === 'success' || key === 'error' ? key : 'primary'
     // Gray buttons borrow primary for their pressed/selected tint.
     const tintKey = key === 'gray' ? 'primary' : key
     const focusStyle: CSSRuleObject = {
-      '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+      '--button-color': `oklch(var(--btu-theme-${key}-${solidStep(key)}))`,
       '--button-fill-none-color': `transparent`,
-      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${onSurfaceStep(key)}))`,
       '--tw-ring-opacity': '1',
       '--tw-ring-color': `oklch(var(--btu-theme-${ringColorKey}-100))`,
       '--tw-ring-offset-width': '1px',
@@ -184,10 +195,10 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
       '--tw-ring-color': `oklch(var(--btu-theme-${ringColorKey}-400))`,
     }
     components[prefix + '-' + key] = {
-      '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'success' ? '700' : '600'}))`,
+      '--button-color': `oklch(var(--btu-theme-${key}-${solidStep(key)}))`,
       '--button-text-color': `${key === 'gray' ? 'oklch(var(--btu-theme-gray-700))' : 'var(--btu-theme-white)'}`,
       '--button-fill-none-color': 'transparent',
-      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '700' : '600'}))`,
+      '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${onSurfaceStep(key)}))`,
       '--button-outline-color': `oklch(var(--btu-theme-${key}-300))`,
       '--button-disabled-color-fill': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '100' : key === 'primary' ? '300' : '200'}))`,
       '--button-disabled-color-fill-none': `var(--button-fill-none) oklch(var(--btu-theme-white))`,
@@ -199,7 +210,7 @@ module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
       '--button-tint-strong': `oklch(var(--btu-theme-${tintKey}-800))`,
       '--button-tint-highlight': `oklch(var(--btu-theme-${tintKey}-200))`,
       '&:hover': {
-        '--button-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : key === 'success' ? '800' : '700'}))`,
+        '--button-color': `oklch(var(--btu-theme-${key}-${hoverStep(key)}))`,
         '--button-fill-none-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '200' : '50'}))`,
         '--button-fill-none-text-color': `oklch(var(--btu-theme-${key}-${key === 'gray' ? '900' : '800'}))`,
       },

package/dist/tailwind-plugin-pagination.js

@@ -28,7 +28,10 @@ module.exports = plugin(function ({ addComponents, config }) {
     const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
     addComponents({
         '.btu-pagination': {
-            display: 'inline-flex',
+            // Block-level, not inline-flex: the nav sets width:100% and the controls use
+            // margin-left:auto to sit flush right. Against a shrink-to-fit root neither
+            // resolves, so the controls tracked the content width instead of the container.
+            display: 'flex',
             alignItems: 'center',
             gap: '0.75rem',
             fontSize: fontSize_sm,

package/dist/tailwind-plugin-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-pagination.ts

@@ -32,7 +32,10 @@ module.exports = plugin(function ({ addComponents, config }) {
 
   addComponents({
     '.btu-pagination': {
-      display: 'inline-flex',
+      // Block-level, not inline-flex: the nav sets width:100% and the controls use
+      // margin-left:auto to sit flush right. Against a shrink-to-fit root neither
+      // resolves, so the controls tracked the content width instead of the container.
+      display: 'flex',
       alignItems: 'center',
       gap: '0.75rem',
       fontSize: fontSize_sm,

package/dist/tailwind-plugin-popover.js

@@ -14,6 +14,10 @@ import plugin from 'tailwindcss/plugin';
  *  btu-popover-left       - Position left of trigger
  *  btu-popover-right      - Position right of trigger
  *  btu-popover-no-arrow   - Hide the arrow pseudo-element
+ *  btu-popover-tail-*     - up/down/left/right; overrides the direction implied by
+ *                           the position class. Set by <btu-popover> when a flip
+ *                           fallback moved the panel — CSS can't detect that, since
+ *                           anchor() won't resolve inside the anchored panel.
  *  btu-popover-inverted   - Inverted surface (dark panel on light pages, light
  *                           panel on dark pages) via the mode-flipping black/
  *                           white tokens (requires --btu-theme-black/-white to
@@ -34,7 +38,22 @@ import plugin from 'tailwindcss/plugin';
  *  --popover-color-title       - Title text color (consumer-applied on title elements; not set by plugin)
  *  --popover-color-content     - Base text color (default: oklch(var(--btu-theme-gray-900)))
  *  --popover-border-radius     - Border radius (default: theme borderRadius.lg)
+ *  --popover-border-width      - Edge width, panel and arrow (default: 1px; 0 removes it)
+ *  --popover-border-color      - Edge color, panel and arrow (default: gray-200)
  */
+// Build-time constants, not custom properties: the angle is derived from the
+// authored width and offset, and overriding it alone would desync the gradient
+// from the clip path.
+const TAIL_WIDTH = 'var(--popover-border-width, 1px)';
+const TAIL_FILL = 'var(--popover-color-background, var(--btu-theme-white, #fff))';
+const TAIL_EDGE = 'var(--popover-border-color, oklch(var(--btu-theme-gray-200)))';
+// Half-angle at the tip, so the authored base width holds at any offset.
+const TAIL_ANGLE = 'atan2(var(--popover-arrow-size), calc(2 * var(--popover-offset)))';
+// Edge offset (measured along the normals) as a distance down the axis.
+const TAIL_APEX = `calc(${TAIL_WIDTH} / sin(${TAIL_ANGLE}))`;
+const TAIL_DEPTH = `calc(var(--popover-offset) + ${TAIL_WIDTH})`;
+/** Fill wedge over the edge colour, opening from `apex` toward `toward` (degrees). */
+const tailPaint = (apex, toward) => `conic-gradient(at ${apex}, #0000 0 calc(${toward}deg - ${TAIL_ANGLE}), ${TAIL_FILL} 0 calc(${toward}deg + ${TAIL_ANGLE}), #0000 0 360deg), ${TAIL_EDGE}`;
 module.exports = plugin(function ({ addComponents, theme, config }) {
     addComponents({
         // Base popover styles — exit state (applied when closing, before display:none)
@@ -60,7 +79,16 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
             isolation: 'isolate',
             margin: '0',
             inset: 'unset',
-            border: 'none',
+            // The surface follows the page background, so in dark mode it resolves to the
+            // same colour as the page behind it and boxShadow.lg is a near-black lift that
+            // vanishes against it — leaving the panel with no edge. The hairline is what
+            // separates it. gray-200 mirrors to a mid grey in dark mode, so one value reads
+            // in both. Set --popover-border-width to 0 to opt out.
+            // Declared as parts rather than the shorthand because the tail can't take a
+            // border (it's a clip-path) and rebuilds the same edge from these — see ::before.
+            borderWidth: 'var(--popover-border-width, 1px)',
+            borderStyle: 'solid',
+            borderColor: 'var(--popover-border-color, oklch(var(--btu-theme-gray-200)))',
             opacity: '0',
             translate: '0 0',
             transition: 'opacity 150ms ease, translate 150ms ease, display 150ms ease allow-discrete, overlay 150ms ease allow-discrete',
@@ -76,7 +104,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
         '.btu-popover-top': {
             'position-area': 'top',
             bottom: 'var(--popover-offset)',
-            marginTop: 'var(--popover-offset)',
             'position-try-fallbacks': 'flip-block',
             translate: '0 4px',
             '&:popover-open': {
@@ -87,7 +114,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
         '.btu-popover-bottom': {
             'position-area': 'bottom',
             top: 'var(--popover-offset)',
-            marginBottom: 'var(--popover-offset)',
             'position-try-fallbacks': 'flip-block',
             translate: '0 -4px',
             '&:popover-open': {
@@ -98,7 +124,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
         '.btu-popover-left': {
             'position-area': 'left',
             right: 'var(--popover-offset)',
-            marginLeft: 'var(--popover-offset)',
             'position-try-fallbacks': 'flip-inline',
             translate: '4px 0',
             '&:popover-open': {
@@ -109,7 +134,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
         '.btu-popover-right': {
             'position-area': 'right',
             left: 'var(--popover-offset)',
-            marginRight: 'var(--popover-offset)',
             'position-try-fallbacks': 'flip-inline',
             translate: '-4px 0',
             '&:popover-open': {
@@ -122,13 +146,15 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
         '.btu-popover-offset-lg': { '--popover-offset': '12px' },
         '.btu-popover-offset-xl': { '--popover-offset': '16px' },
         // Inverted surface — overrides the panel's own custom properties, so the base
-        // rule and the arrow (background: inherit) both pick it up. black/white flip
+        // rule and the tail's gradient both pick it up. black/white flip
         // per color scheme, so this is the page's inverse in both modes. No shadow:
         // the inverted fill separates itself from the page (the light-surface shadow
         // does little on it).
         '.btu-popover-inverted': {
             '--popover-color-background': 'var(--btu-theme-black)',
             '--popover-color-content': 'var(--btu-theme-white)',
+            // The inverted fill separates itself from the page, same reason the shadow goes.
+            '--popover-border-width': '0px',
             boxShadow: 'none',
         },
         // @starting-style for entry animations
@@ -149,35 +175,76 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
                 translate: '-4px 0',
             },
         },
-        // Arrow for vertical popovers (top/bottom)
-        // Centered at 50% of the popover panel. This aligns with the trigger center
-        // because position-area centers the popover on the anchor element.
-        '.btu-popover-top::before, .btu-popover-bottom::before': {
+        // One pseudo carries fill and outline: the box is painted the edge colour and a
+        // conic wedge paints the fill back over it. The wedge's apex is pushed down the
+        // axis by borderWidth/sin(halfAngle), which offsets its edges along the normals
+        // — a larger copy of the shape offsets along the axes instead and leaves a rim
+        // that varies in width.
+        //
+        // Insets resolve against the padding box, so the depth carries an extra
+        // borderWidth and the clip is a triangle on a borderWidth-tall rectangle. That
+        // rectangle lets the fill erase the panel's border across the mouth; without it
+        // the two strokes overlap into a thickened corner instead of mitring.
+        //
+        // :where() gives the position-class default zero specificity so tail-* wins.
+        // Both can match on a flipped panel, hence every block restates all four insets.
+        ':where(.btu-popover-bottom)::before, .btu-popover-tail-up::before': {
             content: '""',
             position: 'absolute',
             zIndex: '-1',
+            top: 'auto',
+            right: 'auto',
+            bottom: '100%',
+            left: 'calc(50% - var(--popover-arrow-size) / 2)',
             width: 'var(--popover-arrow-size)',
-            top: 'calc(-1 * var(--popover-offset))',
-            bottom: 'calc(-1 * var(--popover-offset))',
+            height: TAIL_DEPTH,
+            clipPath: `polygon(50% 0, 100% calc(100% - ${TAIL_WIDTH}), 100% 100%, 0 100%, 0 calc(100% - ${TAIL_WIDTH}))`,
+            background: tailPaint(`50% ${TAIL_APEX}`, 180),
+        },
+        ':where(.btu-popover-top)::before, .btu-popover-tail-down::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            top: '100%',
+            right: 'auto',
+            bottom: 'auto',
             left: 'calc(50% - var(--popover-arrow-size) / 2)',
-            clipPath: 'polygon(50% calc(var(--popover-offset) - var(--popover-arrow-size)), 100% var(--popover-offset), 100% calc(100% - var(--popover-offset)), 50% calc(100% - var(--popover-offset) + var(--popover-arrow-size)), 0 calc(100% - var(--popover-offset)), 0 var(--popover-offset))',
-            background: 'inherit',
-            margin: 'inherit',
+            width: 'var(--popover-arrow-size)',
+            height: TAIL_DEPTH,
+            clipPath: `polygon(50% 100%, 100% ${TAIL_WIDTH}, 100% 0, 0 0, 0 ${TAIL_WIDTH})`,
+            // Straddles 0deg, so both halves of the wedge are spelled out.
+            background: `conic-gradient(at 50% calc(100% - ${TAIL_APEX}), ${TAIL_FILL} 0 ${TAIL_ANGLE}, #0000 0 calc(360deg - ${TAIL_ANGLE}), ${TAIL_FILL} 0 360deg), ${TAIL_EDGE}`,
         },
-        // Arrow for horizontal popovers (left/right)
-        '.btu-popover-left::before, .btu-popover-right::before': {
+        ':where(.btu-popover-right)::before, .btu-popover-tail-left::before': {
             content: '""',
             position: 'absolute',
             zIndex: '-1',
+            top: 'calc(50% - var(--popover-arrow-size) / 2)',
+            // position-area is physical and doesn't flip, so neither may the tail. Without
+            // this postcss-rtlcss swaps the insets and the tail lands on the far edge,
+            // still pointing the original way — the old symmetric shape hid this.
+            right: '100% /*rtl:ignore*/',
+            bottom: 'auto',
+            left: 'auto /*rtl:ignore*/',
+            width: TAIL_DEPTH,
             height: 'var(--popover-arrow-size)',
-            left: 'calc(-1 * var(--popover-offset))',
-            right: 'calc(-1 * var(--popover-offset))',
+            clipPath: `polygon(0 50%, calc(100% - ${TAIL_WIDTH}) 100%, 100% 100%, 100% 0, calc(100% - ${TAIL_WIDTH}) 0)`,
+            background: tailPaint(`${TAIL_APEX} 50%`, 90),
+        },
+        ':where(.btu-popover-left)::before, .btu-popover-tail-right::before': {
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
             top: 'calc(50% - var(--popover-arrow-size) / 2)',
-            clipPath: 'polygon(calc(var(--popover-offset) - var(--popover-arrow-size)) 50%, var(--popover-offset) 0, calc(100% - var(--popover-offset)) 0, calc(100% - var(--popover-offset) + var(--popover-arrow-size)) 50%, calc(100% - var(--popover-offset)) 100%, var(--popover-offset) 100%)',
-            background: 'inherit',
-            margin: 'inherit',
+            right: 'auto /*rtl:ignore*/',
+            bottom: 'auto',
+            left: '100% /*rtl:ignore*/',
+            width: TAIL_DEPTH,
+            height: 'var(--popover-arrow-size)',
+            clipPath: `polygon(100% 50%, ${TAIL_WIDTH} 0, 0 0, 0 100%, ${TAIL_WIDTH} 100%)`,
+            background: tailPaint(`calc(100% - ${TAIL_APEX}) 50%`, 270),
         },
-        // Hide arrow when opted out
+        // After the tail blocks so it wins the specificity tie against tail-*.
         '.btu-popover-no-arrow::before': {
             content: 'none',
         },

package/dist/tailwind-plugin-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-popover.js","sourceRoot":"","sources":["../src/tailwind-plugin-popover.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-popover.js","sourceRoot":"","sources":["../src/tailwind-plugin-popover.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-popover.ts

@@ -16,6 +16,10 @@ declare let module: any
  *  btu-popover-left       - Position left of trigger
  *  btu-popover-right      - Position right of trigger
  *  btu-popover-no-arrow   - Hide the arrow pseudo-element
+ *  btu-popover-tail-*     - up/down/left/right; overrides the direction implied by
+ *                           the position class. Set by <btu-popover> when a flip
+ *                           fallback moved the panel — CSS can't detect that, since
+ *                           anchor() won't resolve inside the anchored panel.
  *  btu-popover-inverted   - Inverted surface (dark panel on light pages, light
  *                           panel on dark pages) via the mode-flipping black/
  *                           white tokens (requires --btu-theme-black/-white to
@@ -36,8 +40,26 @@ declare let module: any
  *  --popover-color-title       - Title text color (consumer-applied on title elements; not set by plugin)
  *  --popover-color-content     - Base text color (default: oklch(var(--btu-theme-gray-900)))
  *  --popover-border-radius     - Border radius (default: theme borderRadius.lg)
+ *  --popover-border-width      - Edge width, panel and arrow (default: 1px; 0 removes it)
+ *  --popover-border-color      - Edge color, panel and arrow (default: gray-200)
  */
 
+// Build-time constants, not custom properties: the angle is derived from the
+// authored width and offset, and overriding it alone would desync the gradient
+// from the clip path.
+const TAIL_WIDTH = 'var(--popover-border-width, 1px)'
+const TAIL_FILL = 'var(--popover-color-background, var(--btu-theme-white, #fff))'
+const TAIL_EDGE = 'var(--popover-border-color, oklch(var(--btu-theme-gray-200)))'
+// Half-angle at the tip, so the authored base width holds at any offset.
+const TAIL_ANGLE = 'atan2(var(--popover-arrow-size), calc(2 * var(--popover-offset)))'
+// Edge offset (measured along the normals) as a distance down the axis.
+const TAIL_APEX = `calc(${TAIL_WIDTH} / sin(${TAIL_ANGLE}))`
+const TAIL_DEPTH = `calc(var(--popover-offset) + ${TAIL_WIDTH})`
+
+/** Fill wedge over the edge colour, opening from `apex` toward `toward` (degrees). */
+const tailPaint = (apex: string, toward: number) =>
+  `conic-gradient(at ${apex}, #0000 0 calc(${toward}deg - ${TAIL_ANGLE}), ${TAIL_FILL} 0 calc(${toward}deg + ${TAIL_ANGLE}), #0000 0 360deg), ${TAIL_EDGE}`
+
 module.exports = plugin(function ({ addComponents, theme, config }) {
   addComponents({
     // Base popover styles — exit state (applied when closing, before display:none)
@@ -67,7 +89,16 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
       isolation: 'isolate',
       margin: '0',
       inset: 'unset',
-      border: 'none',
+      // The surface follows the page background, so in dark mode it resolves to the
+      // same colour as the page behind it and boxShadow.lg is a near-black lift that
+      // vanishes against it — leaving the panel with no edge. The hairline is what
+      // separates it. gray-200 mirrors to a mid grey in dark mode, so one value reads
+      // in both. Set --popover-border-width to 0 to opt out.
+      // Declared as parts rather than the shorthand because the tail can't take a
+      // border (it's a clip-path) and rebuilds the same edge from these — see ::before.
+      borderWidth: 'var(--popover-border-width, 1px)',
+      borderStyle: 'solid',
+      borderColor: 'var(--popover-border-color, oklch(var(--btu-theme-gray-200)))',
       opacity: '0',
       translate: '0 0',
       transition:
@@ -87,7 +118,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
     '.btu-popover-top': {
       'position-area': 'top',
       bottom: 'var(--popover-offset)',
-      marginTop: 'var(--popover-offset)',
       'position-try-fallbacks': 'flip-block',
       translate: '0 4px',
 
@@ -100,7 +130,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
     '.btu-popover-bottom': {
       'position-area': 'bottom',
       top: 'var(--popover-offset)',
-      marginBottom: 'var(--popover-offset)',
       'position-try-fallbacks': 'flip-block',
       translate: '0 -4px',
 
@@ -113,7 +142,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
     '.btu-popover-left': {
       'position-area': 'left',
       right: 'var(--popover-offset)',
-      marginLeft: 'var(--popover-offset)',
       'position-try-fallbacks': 'flip-inline',
       translate: '4px 0',
 
@@ -126,7 +154,6 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
     '.btu-popover-right': {
       'position-area': 'right',
       left: 'var(--popover-offset)',
-      marginRight: 'var(--popover-offset)',
       'position-try-fallbacks': 'flip-inline',
       translate: '-4px 0',
 
@@ -142,13 +169,15 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
     '.btu-popover-offset-xl': { '--popover-offset': '16px' },
 
     // Inverted surface — overrides the panel's own custom properties, so the base
-    // rule and the arrow (background: inherit) both pick it up. black/white flip
+    // rule and the tail's gradient both pick it up. black/white flip
     // per color scheme, so this is the page's inverse in both modes. No shadow:
     // the inverted fill separates itself from the page (the light-surface shadow
     // does little on it).
     '.btu-popover-inverted': {
       '--popover-color-background': 'var(--btu-theme-black)',
       '--popover-color-content': 'var(--btu-theme-white)',
+      // The inverted fill separates itself from the page, same reason the shadow goes.
+      '--popover-border-width': '0px',
       boxShadow: 'none',
     },
 
@@ -171,39 +200,80 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
       },
     },
 
-    // Arrow for vertical popovers (top/bottom)
-    // Centered at 50% of the popover panel. This aligns with the trigger center
-    // because position-area centers the popover on the anchor element.
-    '.btu-popover-top::before, .btu-popover-bottom::before': {
+    // One pseudo carries fill and outline: the box is painted the edge colour and a
+    // conic wedge paints the fill back over it. The wedge's apex is pushed down the
+    // axis by borderWidth/sin(halfAngle), which offsets its edges along the normals
+    // — a larger copy of the shape offsets along the axes instead and leaves a rim
+    // that varies in width.
+    //
+    // Insets resolve against the padding box, so the depth carries an extra
+    // borderWidth and the clip is a triangle on a borderWidth-tall rectangle. That
+    // rectangle lets the fill erase the panel's border across the mouth; without it
+    // the two strokes overlap into a thickened corner instead of mitring.
+    //
+    // :where() gives the position-class default zero specificity so tail-* wins.
+    // Both can match on a flipped panel, hence every block restates all four insets.
+    ':where(.btu-popover-bottom)::before, .btu-popover-tail-up::before': {
       content: '""',
       position: 'absolute',
       zIndex: '-1',
+      top: 'auto',
+      right: 'auto',
+      bottom: '100%',
+      left: 'calc(50% - var(--popover-arrow-size) / 2)',
       width: 'var(--popover-arrow-size)',
-      top: 'calc(-1 * var(--popover-offset))',
-      bottom: 'calc(-1 * var(--popover-offset))',
+      height: TAIL_DEPTH,
+      clipPath: `polygon(50% 0, 100% calc(100% - ${TAIL_WIDTH}), 100% 100%, 0 100%, 0 calc(100% - ${TAIL_WIDTH}))`,
+      background: tailPaint(`50% ${TAIL_APEX}`, 180),
+    },
+
+    ':where(.btu-popover-top)::before, .btu-popover-tail-down::before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: '-1',
+      top: '100%',
+      right: 'auto',
+      bottom: 'auto',
       left: 'calc(50% - var(--popover-arrow-size) / 2)',
-      clipPath:
-        'polygon(50% calc(var(--popover-offset) - var(--popover-arrow-size)), 100% var(--popover-offset), 100% calc(100% - var(--popover-offset)), 50% calc(100% - var(--popover-offset) + var(--popover-arrow-size)), 0 calc(100% - var(--popover-offset)), 0 var(--popover-offset))',
-      background: 'inherit',
-      margin: 'inherit',
+      width: 'var(--popover-arrow-size)',
+      height: TAIL_DEPTH,
+      clipPath: `polygon(50% 100%, 100% ${TAIL_WIDTH}, 100% 0, 0 0, 0 ${TAIL_WIDTH})`,
+      // Straddles 0deg, so both halves of the wedge are spelled out.
+      background: `conic-gradient(at 50% calc(100% - ${TAIL_APEX}), ${TAIL_FILL} 0 ${TAIL_ANGLE}, #0000 0 calc(360deg - ${TAIL_ANGLE}), ${TAIL_FILL} 0 360deg), ${TAIL_EDGE}`,
     },
 
-    // Arrow for horizontal popovers (left/right)
-    '.btu-popover-left::before, .btu-popover-right::before': {
+    ':where(.btu-popover-right)::before, .btu-popover-tail-left::before': {
       content: '""',
       position: 'absolute',
       zIndex: '-1',
+      top: 'calc(50% - var(--popover-arrow-size) / 2)',
+      // position-area is physical and doesn't flip, so neither may the tail. Without
+      // this postcss-rtlcss swaps the insets and the tail lands on the far edge,
+      // still pointing the original way — the old symmetric shape hid this.
+      right: '100% /*rtl:ignore*/',
+      bottom: 'auto',
+      left: 'auto /*rtl:ignore*/',
+      width: TAIL_DEPTH,
       height: 'var(--popover-arrow-size)',
-      left: 'calc(-1 * var(--popover-offset))',
-      right: 'calc(-1 * var(--popover-offset))',
+      clipPath: `polygon(0 50%, calc(100% - ${TAIL_WIDTH}) 100%, 100% 100%, 100% 0, calc(100% - ${TAIL_WIDTH}) 0)`,
+      background: tailPaint(`${TAIL_APEX} 50%`, 90),
+    },
+
+    ':where(.btu-popover-left)::before, .btu-popover-tail-right::before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: '-1',
       top: 'calc(50% - var(--popover-arrow-size) / 2)',
-      clipPath:
-        'polygon(calc(var(--popover-offset) - var(--popover-arrow-size)) 50%, var(--popover-offset) 0, calc(100% - var(--popover-offset)) 0, calc(100% - var(--popover-offset) + var(--popover-arrow-size)) 50%, calc(100% - var(--popover-offset)) 100%, var(--popover-offset) 100%)',
-      background: 'inherit',
-      margin: 'inherit',
+      right: 'auto /*rtl:ignore*/',
+      bottom: 'auto',
+      left: '100% /*rtl:ignore*/',
+      width: TAIL_DEPTH,
+      height: 'var(--popover-arrow-size)',
+      clipPath: `polygon(100% 50%, ${TAIL_WIDTH} 0, 0 0, 0 100%, ${TAIL_WIDTH} 100%)`,
+      background: tailPaint(`calc(100% - ${TAIL_APEX}) 50%`, 270),
     },
 
-    // Hide arrow when opted out
+    // After the tail blocks so it wins the specificity tie against tail-*.
     '.btu-popover-no-arrow::before': {
       content: 'none',
     },

package/dist/tailwind-plugin-tooltip.js

@@ -56,6 +56,9 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
             fontWeight: '500',
             whiteSpace: 'nowrap',
             textAlign: 'left',
+            // A tooltip sits inside its trigger, so it inherits the trigger's casing —
+            // btu-avatar uppercases its initials and that reached the tooltip text.
+            textTransform: 'none',
             pointerEvents: 'none',
             overflow: 'visible',
             isolation: 'isolate',

package/dist/tailwind-plugin-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-tooltip.js","sourceRoot":"","sources":["../src/tailwind-plugin-tooltip.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-tooltip.js","sourceRoot":"","sources":["../src/tailwind-plugin-tooltip.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-tooltip.ts

@@ -62,6 +62,9 @@ module.exports = plugin(function ({ addComponents, theme, config }) {
       fontWeight: '500',
       whiteSpace: 'nowrap',
       textAlign: 'left',
+      // A tooltip sits inside its trigger, so it inherits the trigger's casing —
+      // btu-avatar uppercases its initials and that reached the tooltip text.
+      textTransform: 'none',
 
       pointerEvents: 'none',
       overflow: 'visible',

package/docs/components/ActionBar.md

@@ -18,14 +18,15 @@
 
 ### Fields
 
-| Name        | Privacy | Type        | Default     | Description                                                                                                                                                                                                     | Inherited From |
-| ----------- | ------- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `position`  |         | `Position`  | `'bottom'`  | Bar position: 'top' or 'bottom' (default).                                                                                                                                                                      |                |
-| `sticky`    |         | `boolean`   | `false`     | Enables CSS sticky positioning. When combined with position='top',
the bar sticks to the top of the scroll container. With position='bottom'
(default), it sticks to the bottom.                        |                |
-| `alignment` |         | `Alignment` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'.
Non-default alignments disable two-zone layout.                                                                                          |                |
-| `shadow`    |         | `boolean`   | `false`     | Adds a box-shadow to the bar.                                                                                                                                                                                   |                |
-| `label`     |         | `string`    | `''`        | Accessible label for the toolbar region.                                                                                                                                                                        |                |
-| `compact`   |         | `boolean`   | `false`     | Enables progressive label compacting. When space shrinks, items marked
\`compactable\` (with icons) have their labels hidden one-by-one
from least to most important before items overflow into "More". |                |
+| Name                      | Privacy | Type        | Default     | Description                                                                                                                                                                                                     | Inherited From |
+| ------------------------- | ------- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `position`                |         | `Position`  | `'bottom'`  | Bar position: 'top' or 'bottom' (default).                                                                                                                                                                      |                |
+| `sticky`                  |         | `boolean`   | `false`     | Enables CSS sticky positioning. When combined with position='top',
the bar sticks to the top of the scroll container. With position='bottom'
(default), it sticks to the bottom.                        |                |
+| `alignment`               |         | `Alignment` | `'default'` | Content alignment: 'default' (two-zone), 'start', 'center', 'end'.
Non-default alignments disable two-zone layout.                                                                                          |                |
+| `shadow`                  |         | `boolean`   | `false`     | Adds a box-shadow to the bar.                                                                                                                                                                                   |                |
+| `label`                   |         | `string`    | `''`        | Accessible label for the toolbar region.                                                                                                                                                                        |                |
+| `compact`                 |         | `boolean`   | `false`     | Enables progressive label compacting. When space shrinks, items marked
\`compactable\` (with icons) have their labels hidden one-by-one
from least to most important before items overflow into "More". |                |
+| `_initialClassesCaptured` | private | `boolean`   | `false`     |                                                                                                                                                                                                                 |                |
 
 ### Methods