@cube-dev/ui-kit 0.202.0 → 0.204.0

package/dist/components/navigation/Tabs/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","boxSizing","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active","Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: {\n      '': 'column',\n      'placement=bottom': 'column-reverse',\n      'placement=left': 'row',\n      'placement=right': 'row-reverse',\n    },\n    // Participate in parent flex layouts; allow shrinking on both axes so we\n    // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n    // which makes the practical minimum of the wrapper along the main axis\n    // equal to the tablist's intrinsic size. When there are no panels the\n    // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n    // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n    flexShrink: { '': 0, 'has-panels': 1 },\n    flexGrow: { '': 0, 'has-panels': 1 },\n    width: 'min 0',\n    height: 'min 0',\n    overflow: 'visible',\n\n    // ============================================\n    // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n    // ============================================\n    Bar: {\n      $: '>',\n      display: 'flex',\n      flow: {\n        '': 'row',\n        'placement=left | placement=right': 'column',\n      },\n      placeItems: {\n        '': 'end stretch',\n        'placement=bottom': 'start stretch',\n        'placement=left': 'stretch end',\n        'placement=right': 'stretch start',\n        'type=radio | type=file': 'stretch',\n      },\n      overflow: 'visible',\n      border: {\n        '': 0,\n        '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n        '(type=default | type=file | type=narrow) & has-panels & placement=bottom':\n          'top',\n        '(type=default | type=file | type=narrow) & has-panels & placement=left':\n          'right',\n        '(type=default | type=file | type=narrow) & has-panels & placement=right':\n          'left',\n      },\n      // Bar sizing — always follow the outer wrapper along the main axis so\n      // `width` / `height` props on `<Tabs>` apply to the strip as they did\n      // before the wrapper was introduced.\n      // - horizontal placements: main-axis = wrapper width  (100%), cross-axis intrinsic (auto)\n      // - vertical   placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n      // `border-box` keeps the radio padding inside that 100%. Without a global\n      // border-box reset in the app, the pill would otherwise paint `1x` past\n      // the wrapper and into the gap before its sibling.\n      boxSizing: 'border-box',\n      width: {\n        '': '100%',\n        'placement=left | placement=right': 'auto',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': '100%',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      radius: {\n        '': 0,\n        'type=radio': '1cr',\n      },\n      fill: {\n        '': '#clear',\n        'type=radio': '#surface-4',\n      },\n      // Never let the Bar shrink/grow within the outer wrapper — this is what\n      // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n      flexShrink: 0,\n      flexGrow: 0,\n\n      $transition: '$tab-transition',\n      // The indicator line's thickness, in device pixels.\n      '$tab-indicator-size': {\n        '': '2px',\n        'size=large': '1ow',\n      },\n    },\n\n    // ============================================\n    // Prefix — slot before the scroll area.\n    // ============================================\n    Prefix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n        'type=default & (placement=left | placement=right)': '1x .5x 0 .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n        'type=file & (placement=left | placement=right)': 'bottom',\n      },\n    },\n\n    // ============================================\n    // Suffix — slot after the scroll area.\n    // ============================================\n    Suffix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n        'type=default & (placement=left | placement=right)': '0 .5x 1x .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n        'type=file & (placement=left | placement=right)': 'top',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '> Bar >',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: {\n        '': 'min 0',\n        'placement=left | placement=right': 'auto',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'min 0',\n      },\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'placement=left | placement=right': 'hidden auto',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Multi-group fade with axis-neutral color tokens for smooth transitions.\n      // Direction flips based on placement.\n      fade: {\n        '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n        'placement=left | placement=right':\n          '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n      },\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-start': {\n        '': '#black',\n        'fade-start': '#black.0',\n      },\n      '#tabs-fade-end': {\n        '': '#black',\n        'fade-end': '#black.0',\n      },\n    },\n\n    TabList: {\n      $: '> Bar > ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      // `border-box` is required because we set `width: 100%` for vertical\n      // placements AND apply padding. With the default `content-box`, the\n      // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n      // horizontally — and the side selection indicator (positioned at\n      // `right: 0` / `left: 0` of TabList) would land in that overflow region\n      // and get clipped by Scroll's `overflow-x: hidden`.\n      boxSizing: 'border-box',\n      flow: {\n        '': 'column',\n        'placement=left | placement=right': 'row',\n      },\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gridAutoRows: {\n        '': 'auto',\n        'type=radio & (placement=left | placement=right)': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n        // Tabs stack vertically — collapse the gap so the strip reads as a\n        // single column. `narrow` is coerced to `default` in vertical, but we\n        // keep the rule defensive in case the styled element is consumed\n        // directly with a `type=narrow` mod set.\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$item-gap',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n        'placement=left | placement=right': '100%',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'max-content',\n      },\n      // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n      // (instead of only the parallel axis) so the breathing room around the\n      // tabs and the selection indicator can be tuned via the `tabListPadding`\n      // prop — the same prop that controls horizontal start/end padding.\n      padding: {\n        '': '0 $tablist-padding',\n        'placement=left | placement=right': '$tablist-padding 0',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$tablist-padding',\n      },\n\n      // Default `$tablist-padding` per type. Vertical default/narrow gets the\n      // smaller `.5x` default since it applies to all four sides; the\n      // `tabListPadding` prop overrides this via inline CSS variable.\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '.5x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n    // edges and dimensions based on placement; the driving CSS custom\n    // properties come from `useTinyScrollbar.handleHTokens` / `handleVTokens`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      bottom: {\n        '': '$scrollbar-inset',\n        'placement=left | placement=right': 'auto',\n      },\n      top: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-v-top',\n      },\n      left: {\n        '': '$scrollbar-h-left',\n        'placement=left | placement=right': 'auto',\n      },\n      right: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-inset',\n      },\n      height: {\n        '': '1ow',\n        'placement=left | placement=right': '$scrollbar-v-height',\n      },\n      width: {\n        '': '$scrollbar-h-width',\n        'placement=left | placement=right': '1ow',\n      },\n      radius: 'round',\n      fill: '#dark.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n      'type=narrow & placement=bottom': 'bottom',\n      'type=narrow & placement=left': 'left',\n      'type=narrow & placement=right': 'right',\n    },\n    color: {\n      '': '#dark-02',\n      'type=narrow & (hovered & !selected)': '#primary-text',\n      '(type=default | type=narrow) & selected': '#primary-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#dark.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n      // Spring-load hint: a widget is hovering this tab and it is about to open.\n      'drop-pending': '#primary.10',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 $ring-width #primary-text, $selection-shadow',\n      editing: 'inset 0 0 0 $ring-width #primary-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 $ring-width #primary-text',\n    },\n    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      // Sized by content like a radio button, but the label column keeps a\n      // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n      // its title truncates it — and gets the auto tooltip — instead of\n      // spilling the title out of the tab.\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content',\n    },\n    // File-type selection indicator: an inset shadow on the edge that faces\n    // the panel area. Flips with placement so the highlight always sits on\n    // the edge adjacent to the content.\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary',\n      'type=file & selected': 'inset 0 (-1 * $tab-indicator-size) 0 0 #primary',\n      'type=file & selected & placement=bottom':\n        'inset 0 $tab-indicator-size 0 0 #primary',\n      'type=file & selected & placement=left':\n        'inset (-1 * $tab-indicator-size) 0 0 0 #primary',\n      'type=file & selected & placement=right':\n        'inset $tab-indicator-size 0 0 0 #primary',\n      '!type=file': 'inset 0 0 0 0 #primary.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      // Horizontal strip: .5x top/bottom creates space between the tab and the\n      // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n      'type=default': '.5x 0',\n      // Vertical strip: the breathing room around the tabs and the gap from\n      // the side indicator is provided by the TabList's own `.5x` padding —\n      // don't add per-tab horizontal margin on top of it.\n      'type=default & (placement=left | placement=right)': 0,\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n      'type=file & (placement=left | placement=right)': 'bottom',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary',\n    width: {\n      '': '.5x',\n      'placement=left | placement=right': 'auto',\n    },\n    height: {\n      '': 'auto',\n      'placement=left | placement=right': '.5x',\n    },\n    top: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & before': '-.25x',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-.25x',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the measured offset and length along the tab\n// axis arrive as `$indicator-start` / `$indicator-size` tokens from\n// `useTabIndicator` in `Tabs.tsx` (left/width for horizontal, top/height for\n// vertical).\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: {\n      '': '0',\n      'placement=bottom | placement=left | placement=right': 'auto',\n    },\n    top: {\n      '': 'auto',\n      'placement=bottom': '0',\n      'placement=left | placement=right': '$indicator-start',\n    },\n    left: {\n      '': '$indicator-start',\n      'placement=left': 'auto',\n      'placement=right': '0',\n    },\n    right: {\n      '': 'auto',\n      'placement=left': '0',\n    },\n    height: {\n      '': '$tab-indicator-size',\n      'placement=left | placement=right': '$indicator-size',\n    },\n    width: {\n      '': '$indicator-size',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary',\n    // Transition all four properties unconditionally — only the two relevant\n    // ones change per render, the others stay constant.\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"styled.js","names":["tasty","Item","TabsElement","styles","display","flow","flexShrink","flexGrow","width","height","overflow","Bar","$","placeItems","border","boxSizing","padding","radius","fill","$transition","Prefix","placeContent","placeSelf","gap","Suffix","ScrollWrapper","position","Scroll","scrollbar","margin","fade","transition","TabList","gridAutoColumns","gridAutoRows","$size","Scrollbar","bottom","top","left","right","opacity","pointerEvents","TabElement","as","color","disabled","preset","shadow","editing","outline","gridTemplate","Label","Actions","TabContainer","cursor","draggable","dragging","DropIndicatorElement","zIndex","TabIndicatorElement","TabPanelElement","hide","active","Item"],"sources":["../../../../src/components/navigation/Tabs/styled.ts"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Item } from '../../content/Item';\n\n// =============================================================================\n// Main Tabs Container — flex wrapper holding the tab Bar and the panels.\n// `placement` mod drives `flex-direction` so DOM order stays \"bar then panels\"\n// and visual order is controlled with `column / column-reverse / row / row-reverse`.\n// =============================================================================\n\nexport const TabsElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: {\n      '': 'column',\n      'placement=bottom': 'column-reverse',\n      'placement=left': 'row',\n      'placement=right': 'row-reverse',\n    },\n    // Participate in parent flex layouts; allow shrinking on both axes so we\n    // never force the parent into overflow. The Bar keeps `flex-shrink: 0`,\n    // which makes the practical minimum of the wrapper along the main axis\n    // equal to the tablist's intrinsic size. When there are no panels the\n    // wrapper has only the Bar inside it, so we lock its sizing to the Bar's\n    // intrinsic size — matching the pre-wrapper behavior of a panel-less Tabs.\n    flexShrink: { '': 0, 'has-panels': 1 },\n    flexGrow: { '': 0, 'has-panels': 1 },\n    width: 'min 0',\n    height: 'min 0',\n    overflow: 'visible',\n\n    // ============================================\n    // Bar — the tab strip (Prefix + ScrollWrapper + Suffix).\n    // ============================================\n    Bar: {\n      $: '>',\n      display: 'flex',\n      flow: {\n        '': 'row',\n        'placement=left | placement=right': 'column',\n      },\n      placeItems: {\n        '': 'end stretch',\n        'placement=bottom': 'start stretch',\n        'placement=left': 'stretch end',\n        'placement=right': 'stretch start',\n        'type=radio | type=file': 'stretch',\n      },\n      overflow: 'visible',\n      border: {\n        '': 0,\n        '(type=default | type=file | type=narrow) & has-panels': 'bottom',\n        '(type=default | type=file | type=narrow) & has-panels & placement=bottom':\n          'top',\n        '(type=default | type=file | type=narrow) & has-panels & placement=left':\n          'right',\n        '(type=default | type=file | type=narrow) & has-panels & placement=right':\n          'left',\n      },\n      // Bar sizing — always follow the outer wrapper along the main axis so\n      // `width` / `height` props on `<Tabs>` apply to the strip as they did\n      // before the wrapper was introduced.\n      // - horizontal placements: main-axis = wrapper width  (100%), cross-axis intrinsic (auto)\n      // - vertical   placements: main-axis = wrapper height (100%), cross-axis intrinsic (auto / max-content for radio)\n      // `border-box` keeps the radio padding inside that 100%. Without a global\n      // border-box reset in the app, the pill would otherwise paint `1x` past\n      // the wrapper and into the gap before its sibling.\n      boxSizing: 'border-box',\n      width: {\n        '': '100%',\n        'placement=left | placement=right': 'auto',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': '100%',\n        'type=radio & (placement=left | placement=right)': 'max-content',\n      },\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      radius: {\n        '': 0,\n        'type=radio': '1cr',\n      },\n      fill: {\n        '': '#clear',\n        'type=radio': '#surface-4',\n      },\n      // Never let the Bar shrink/grow within the outer wrapper — this is what\n      // gives the wrapper its effective \"tablist-size minimum\" on the main axis.\n      flexShrink: 0,\n      flexGrow: 0,\n\n      $transition: '$tab-transition',\n      // The indicator line's thickness, in device pixels.\n      '$tab-indicator-size': {\n        '': '2px',\n        'size=large': '1ow',\n      },\n    },\n\n    // ============================================\n    // Prefix — slot before the scroll area.\n    // ============================================\n    Prefix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 0 .5x 1x',\n        'type=default & (placement=left | placement=right)': '1x .5x 0 .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'right',\n        'type=file & (placement=left | placement=right)': 'bottom',\n      },\n    },\n\n    // ============================================\n    // Suffix — slot after the scroll area.\n    // ============================================\n    Suffix: {\n      $: '> Bar >',\n      display: 'flex',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      placeSelf: 'stretch',\n      padding: {\n        '': 0,\n        'type=default': '.5x 1x .5x 0',\n        'type=default & (placement=left | placement=right)': '0 .5x 1x .5x',\n      },\n      gap: {\n        '': 0,\n        'type=default': '.5x',\n      },\n      border: {\n        '': 0,\n        'type=file': 'left',\n        'type=file & (placement=left | placement=right)': 'top',\n      },\n    },\n\n    // Wrapper for scroll area and scrollbar (scrollbar is positioned relative to this)\n    ScrollWrapper: {\n      $: '> Bar >',\n      position: 'relative',\n      display: 'flex',\n      flexGrow: 1,\n      flexShrink: 1,\n      width: {\n        '': 'min 0',\n        'placement=left | placement=right': 'auto',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'min 0',\n      },\n      overflow: {\n        '': 'hidden',\n        'type=radio': 'visible',\n      },\n    },\n\n    Scroll: {\n      $: '> Bar > ScrollWrapper >',\n      position: 'relative',\n      display: 'block',\n      overflow: {\n        '': 'auto hidden',\n        'placement=left | placement=right': 'hidden auto',\n        'type=radio': 'visible',\n      },\n      scrollbar: 'none',\n      flexGrow: 1,\n      width: '100%',\n      // Add padding/margin for radio type to allow shadow to render outside\n      padding: {\n        '': 0,\n        'type=radio': '.5x',\n      },\n      margin: {\n        '': 0,\n        'type=radio': '-.5x',\n      },\n      // Multi-group fade with axis-neutral color tokens for smooth transitions.\n      // Direction flips based on placement.\n      fade: {\n        '': '2x left #tabs-fade-start #black, 2x right #tabs-fade-end #black',\n        'placement=left | placement=right':\n          '2x top #tabs-fade-start #black, 2x bottom #tabs-fade-end #black',\n      },\n      // ##name outputs --name-color (literal CSS property name)\n      transition:\n        '##tabs-fade-start $tab-transition ease-in, ##tabs-fade-end $tab-transition ease-in',\n\n      // Transition transparent color: opaque (no fade) -> transparent (fade visible)\n      '#tabs-fade-start': {\n        '': '#black',\n        'fade-start': '#black.0',\n      },\n      '#tabs-fade-end': {\n        '': '#black',\n        'fade-end': '#black.0',\n      },\n    },\n\n    TabList: {\n      $: '> Bar > ScrollWrapper > Scroll >',\n      position: 'relative',\n      display: 'grid',\n      // `border-box` is required because we set `width: 100%` for vertical\n      // placements AND apply padding. With the default `content-box`, the\n      // TabList's outer box would be `100% + padding × 2` and overflow Scroll\n      // horizontally — and the side selection indicator (positioned at\n      // `right: 0` / `left: 0` of TabList) would land in that overflow region\n      // and get clipped by Scroll's `overflow-x: hidden`.\n      boxSizing: 'border-box',\n      flow: {\n        '': 'column',\n        'placement=left | placement=right': 'row',\n      },\n      gridAutoColumns: {\n        '': 'auto',\n        'type=radio': '1fr',\n      },\n      gridAutoRows: {\n        '': 'auto',\n        'type=radio & (placement=left | placement=right)': '1fr',\n      },\n      gap: {\n        '': 0,\n        'type=default': '1x',\n        'type=narrow': '2x',\n        'type=radio': '.5x',\n        // Tabs stack vertically — collapse the gap so the strip reads as a\n        // single column. `narrow` is coerced to `default` in vertical, but we\n        // keep the rule defensive in case the styled element is consumed\n        // directly with a `type=narrow` mod set.\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$item-gap',\n      },\n      placeContent: 'start',\n      overflow: 'visible',\n      width: {\n        '': 'max-content',\n        'type=radio': '100%',\n        'placement=left | placement=right': '100%',\n      },\n      height: {\n        '': 'auto',\n        'placement=left | placement=right': 'max-content',\n      },\n      // For vertical default/narrow we apply `$tablist-padding` on ALL sides\n      // (instead of only the parallel axis) so the breathing room around the\n      // tabs and the selection indicator can be tuned via the `tabListPadding`\n      // prop — the same prop that controls horizontal start/end padding.\n      padding: {\n        '': '0 $tablist-padding',\n        'placement=left | placement=right': '$tablist-padding 0',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '$tablist-padding',\n      },\n\n      // Default `$tablist-padding` per type. Vertical default/narrow gets the\n      // smaller `.5x` default since it applies to all four sides; the\n      // `tabListPadding` prop overrides this via inline CSS variable.\n      '$tablist-padding': {\n        '': '0',\n        'type=default | type=narrow': '1x',\n        '(type=default | type=narrow) & (placement=left | placement=right)':\n          '.5x',\n      },\n    },\n\n    // Size variable for actions (if ItemAction is used instead of TabsAction)\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    // Custom tiny scrollbar — positioned relative to ScrollWrapper. Switches\n    // edges and dimensions based on placement; the driving CSS custom\n    // properties come from `useTinyScrollbar.handleHTokens` / `handleVTokens`.\n    Scrollbar: {\n      $: '> Bar > ScrollWrapper >',\n      // It sits a device pixel in from the edge.\n      '$scrollbar-inset': '1px',\n      position: 'absolute',\n      bottom: {\n        '': '$scrollbar-inset',\n        'placement=left | placement=right': 'auto',\n      },\n      top: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-v-top',\n      },\n      left: {\n        '': '$scrollbar-h-left',\n        'placement=left | placement=right': 'auto',\n      },\n      right: {\n        '': 'auto',\n        'placement=left | placement=right': '$scrollbar-inset',\n      },\n      height: {\n        '': '1ow',\n        'placement=left | placement=right': '$scrollbar-v-height',\n      },\n      width: {\n        '': '$scrollbar-h-width',\n        'placement=left | placement=right': '1ow',\n      },\n      radius: 'round',\n      fill: '#surface-text.35',\n      opacity: {\n        '': 0,\n        'focused | scrolling': 1,\n      },\n      transition: 'opacity $scrollbar-transition',\n      pointerEvents: 'none',\n    },\n  },\n});\n\n// =============================================================================\n// Tab Button (extends Item)\n// =============================================================================\n\nexport const TabElement = tasty(Item, {\n  as: 'button',\n  styles: {\n    radius: {\n      '': false,\n      'type=radio | type=default': true,\n      'type=narrow': 'top',\n      'type=narrow & placement=bottom': 'bottom',\n      'type=narrow & placement=left': 'left',\n      'type=narrow & placement=right': 'right',\n    },\n    // Tab colors read current tokens, not the legacy aliases that point at them\n    // (`#dark-02`, `#primary-text`, `#primary`). Root resolves an alias once, on\n    // the page root, so a caller re-declaring the current token on `Tabs` would\n    // never reach it. The contract is under \"Theming\" in `Tabs.docs.mdx`.\n    color: {\n      '': '#surface-text-soft',\n      'type=narrow & (hovered & !selected)': '#primary-accent-text',\n      '(type=default | type=narrow) & selected': '#primary-accent-text',\n      disabled: '#disabled-surface-text',\n    },\n    fill: {\n      '': '#clear',\n      'hovered & !type=narrow': '#surface-text.03',\n      'type=file': '#surface-3',\n      'type=file & hovered': '#surface-3.5',\n      'type=radio & hovered': '#surface.5',\n      '(type=file | type=radio) & selected': '#surface',\n      // Spring-load hint: a widget is hovering this tab and it is about to open.\n      'drop-pending': '#primary-accent-surface.10',\n    },\n    border: {\n      '': '#clear',\n      'type=file': '0 #clear',\n    },\n    preset: {\n      '': 't3m',\n      'size=xsmall': 't4',\n    },\n    shadow: {\n      '': '$selection-shadow',\n      'focused & focus-visible':\n        'inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow',\n      editing:\n        'inset 0 0 0 $ring-width #primary-accent-text, $selection-shadow',\n      'type=radio & selected': '$item-shadow',\n      'type=radio & selected & focused & focus-visible':\n        '$item-shadow, inset 0 0 0 $ring-width #primary-accent-text',\n    },\n    outline: 'none',\n    placeContent: {\n      // extend\n      'type=radio': 'center',\n    },\n    gridTemplate: {\n      // extend\n      // Sized by content like a radio button, but the label column keeps a\n      // zero minimum (as `Item`'s `1sf` does), so a tab given less room than\n      // its title truncates it — and gets the auto tooltip — instead of\n      // spilling the title out of the tab.\n      'type=radio':\n        '\"icon prefix label suffix rightIcon actions\" auto / max-content max-content minmax(0, max-content) max-content max-content max-content',\n    },\n    // File-type selection indicator: an inset shadow on the edge that faces\n    // the panel area. Flips with placement so the highlight always sits on\n    // the edge adjacent to the content.\n    '$selection-shadow': {\n      '': 'inset 0 0 0 0 #primary-accent-surface',\n      'type=file & selected':\n        'inset 0 (-1 * $tab-indicator-size) 0 0 #primary-accent-surface',\n      'type=file & selected & placement=bottom':\n        'inset 0 $tab-indicator-size 0 0 #primary-accent-surface',\n      'type=file & selected & placement=left':\n        'inset (-1 * $tab-indicator-size) 0 0 0 #primary-accent-surface',\n      'type=file & selected & placement=right':\n        'inset $tab-indicator-size 0 0 0 #primary-accent-surface',\n      '!type=file': 'inset 0 0 0 0 #primary-accent-surface.0',\n    },\n    // Collapse horizontal padding for narrow type\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'type=narrow': 0,\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'type=narrow': 0,\n    },\n    Label: {\n      placeSelf: {\n        '': 'center start',\n        'type=radio': 'center start',\n        'type=radio & !has-prefix & !has-suffix & !has-icon & !has-right-icon':\n          'center',\n      },\n    },\n    Actions: {\n      transition: false,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Container (wrapper for tab + actions)\n// =============================================================================\n\nexport const TabContainer = tasty({\n  styles: {\n    position: 'relative',\n    display: 'grid',\n    margin: {\n      '': 0,\n      // Horizontal strip: .5x top/bottom creates space between the tab and the\n      // bottom-edge indicator (which sits at `bottom: 0` of TabList).\n      'type=default': '.5x 0',\n      // Vertical strip: the breathing room around the tabs and the gap from\n      // the side indicator is provided by the TabList's own `.5x` padding —\n      // don't add per-tab horizontal margin on top of it.\n      'type=default & (placement=left | placement=right)': 0,\n    },\n    border: {\n      '': 0,\n      'type=file': 'right',\n      'type=file & (placement=left | placement=right)': 'bottom',\n    },\n    cursor: {\n      '': 'default',\n      draggable: 'grab',\n      dragging: 'grabbing',\n    },\n  },\n});\n\n// =============================================================================\n// Drop Indicator for Drag-and-Drop\n// Geometry flips based on placement: a vertical bar between horizontal tabs,\n// a horizontal bar between vertical tabs. `before`/`after` mods come from\n// `TabDropIndicator` and decide which edge inset is applied.\n// =============================================================================\n\nexport const DropIndicatorElement = tasty({\n  styles: {\n    zIndex: 10,\n    position: 'absolute',\n    pointerEvents: 'none',\n    opacity: {\n      '': 0,\n      'drop-target': 1,\n    },\n    fill: '#primary-accent-surface',\n    width: {\n      '': '.5x',\n      'placement=left | placement=right': 'auto',\n    },\n    height: {\n      '': 'auto',\n      'placement=left | placement=right': '.5x',\n    },\n    top: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & before': '-.25x',\n    },\n    bottom: {\n      '': 0,\n      'placement=left | placement=right': 'auto',\n      '(placement=left | placement=right) & after': '-.25x',\n    },\n    left: {\n      '': 'auto',\n      'before & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n    right: {\n      '': 'auto',\n      'after & !(placement=left | placement=right)': '-.25x',\n      'placement=left | placement=right': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Tab Selection Indicator (for default/narrow type)\n// Position flips with placement; the measured offset and length along the tab\n// axis arrive as `$indicator-start` / `$indicator-size` tokens from\n// `useTabIndicator` in `Tabs.tsx` (left/width for horizontal, top/height for\n// vertical).\n// =============================================================================\n\nexport const TabIndicatorElement = tasty({\n  styles: {\n    position: 'absolute',\n    bottom: {\n      '': '0',\n      'placement=bottom | placement=left | placement=right': 'auto',\n    },\n    top: {\n      '': 'auto',\n      'placement=bottom': '0',\n      'placement=left | placement=right': '$indicator-start',\n    },\n    left: {\n      '': '$indicator-start',\n      'placement=left': 'auto',\n      'placement=right': '0',\n    },\n    right: {\n      '': 'auto',\n      'placement=left': '0',\n    },\n    height: {\n      '': '$tab-indicator-size',\n      'placement=left | placement=right': '$indicator-size',\n    },\n    width: {\n      '': '$indicator-size',\n      'placement=left | placement=right': '$tab-indicator-size',\n    },\n    fill: '#primary-accent-surface',\n    // Transition all four properties unconditionally — only the two relevant\n    // ones change per render, the others stay constant.\n    transition:\n      'left $tab-transition ease-in-out, width $tab-transition ease-in-out, top $tab-transition ease-in-out, height $tab-transition ease-in-out',\n    pointerEvents: 'none',\n  },\n});\n\n// =============================================================================\n// Tab Panel\n// =============================================================================\n\nexport const TabPanelElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'contents',\n    hide: {\n      '': true,\n      active: false,\n    },\n  },\n});\n"],"mappings":"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"}

package/dist/components/navigation/Tabs/types.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 //#region src/components/navigation/Tabs/use-tab-editing.ts

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";

package/dist/components/organisms/StatsCard/StatsCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { Text as _Text } from "../../content/Text.js";
 import { Title as _Title } from "../../content/Title.js";
 import { Card } from "../../content/Card/Card.js";

package/dist/components/other/Calendar/Calendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react/compiler-runtime";

package/dist/components/other/Calendar/CalendarCell.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { c } from "react/compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

package/dist/components/other/Calendar/CalendarGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { c } from "react/compiler-runtime";

package/dist/components/other/Calendar/CalendarHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { Title as _Title } from "../../content/Title.js";
 import { Space } from "../../layout/Space.js";
 import { RightIcon } from "../../../icons/RightIcon.js";

package/dist/components/other/Calendar/CalendarPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { CalendarElement } from "./styled.js";

package/dist/components/other/Calendar/PeriodCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { getQuarter } from "../../fields/DatePicker/period.js";

package/dist/components/other/Calendar/PeriodGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { mergeStyles, tasty } from "@tenphi/tasty";
 import { useLayoutEffect, useRef } from "react";

package/dist/components/other/Calendar/RangeCalendar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { CalendarPanel } from "./CalendarPanel.js";
 import { c } from "react/compiler-runtime";

package/dist/components/other/Calendar/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 //#region src/components/other/Calendar/styled.tsx
 /**

package/dist/components/other/CubeLogo/CubeLogo.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { Icon } from "../../../icons/Icon.js";
 import { c } from "react/compiler-runtime";
 import { mergeStyles, tasty } from "@tenphi/tasty";

package/dist/components/other/NoDataIcon/NoDataIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { wrapIcon } from "../../../icons/wrap-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/other/NoDataIcon/NoDataIcon.tsx

package/dist/components/overlays/AlertDialog/AlertDialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { Paragraph } from "../../content/Paragraph.js";
 import { Title as _Title } from "../../content/Title.js";

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { AlertDialogZone } from "./AlertDialogZone.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { Portal } from "../../portal/Portal.js";
-import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { AlertDialog as _AlertDialog } from "./AlertDialog.js";
+import { DialogContainer } from "../Dialog/DialogContainer.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/AlertDialog/AlertDialogZone.tsx

package/dist/components/overlays/AlertDialog/types.d.ts

@@ -20,7 +20,7 @@ export interface AlertDialogApiActions {
   secondary?: AlertDialogApiActionProps;
   cancel?: CubeButtonProps | boolean;
 }
-export interface DialogProps extends Omit<CubeDialogContainerProps, 'onDismiss' | 'children'>, Omit<CubeAlertDialogProps, 'type' | 'id' | 'content' | 'actions'> {
+export interface DialogProps extends Omit<CubeDialogContainerProps, 'onDismiss' | 'children' | 'confirmDismiss'>, Omit<CubeAlertDialogProps, 'type' | 'id' | 'content' | 'actions'> {
   content: ReactNode | (({ resolve, reject }: {
     resolve: any;
     reject: any;

package/dist/components/overlays/Dialog/Dialog.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { SlotProvider } from "../../../utils/react/Slots.js";
@@ -175,7 +175,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
 	return t3;
 });
 const DialogContent = forwardRef(function DialogContent(props, ref) {
-	let { type = "modal", ...contextProps } = useDialogContext();
+	let { type = "modal", requestDismiss, ...contextProps } = useDialogContext();
 	let { qa, children, size = "M", isDismissable = type === "popover" ? void 0 : contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, width, tokens, style, ...otherProps } = props;
 	size = sizeMap[size.toUpperCase()] || size;
 	const styles = extractStyles(otherProps, STYLES_LIST);
@@ -193,8 +193,13 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 		mountedAtRef.current = Date.now();
 	}, []);
 	let { dialogProps, titleProps, contentProps } = useDialog(mergeProps$1(contextProps, props), domRef);
+	const dismiss = () => {
+		if (!onDismiss) return;
+		if (requestDismiss) requestDismiss(() => onDismiss());
+		else onDismiss();
+	};
 	let dismissButton;
-	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss });
+	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss: dismiss });
 	useEffect(() => {
 		let timer;
 		let isClosed = false;
@@ -318,7 +323,7 @@ const DialogContent = forwardRef(function DialogContent(props, ref) {
 			children: [isDismissable && /* @__PURE__ */ jsx(CloseButton, {
 				icon: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { size: 20 }),
 				"aria-label": t("dialog.dismiss", "Dismiss"),
-				onPress: () => onDismiss && onDismiss()
+				onPress: dismiss
 			}), children]
 		})]
 	});

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["createFocusManager","getFocusableTreeWalker","focusSafely","getInteractionModality","focusWithoutScrolling","isFocusable","runAfterTransition","useObjectRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","FLOW_STYLES","Styles","tasty","FocusEvent","forwardRef","ReactElement","Ref","useEffect","useRef","AriaDialogProps","DismissButton","FocusScope","useDialog","useI18n","CloseIcon","mergeProps","SlotProvider","extractStyles","ItemButton","useOpenTransitionContext","trapsFocus","useDialogContext","useContentOverflow","useRetainedDialogFocus","STYLES_LIST","DialogElement","as","styles","display","flow","fill","pointerEvents","outline","position","width","height","gap","border","radius","shadow","top","CloseButton","qa","type","right","sizeMap","S","M","L","sizePxMap","small","medium","large","CubeDialogProps","Omit","size","isDismissable","onDismiss","arg","closeIcon","closeButtonStyles","role","findPriorityFocusElement","dialog","HTMLElement","marked","querySelectorAll","element","Array","from","reverse","target","tabbable","nextNode","button","getAttribute","querySelector","Dialog","props","ref","$","_c","transitionState","isShown","context","t0","content","t1","isOpen","shouldContainFocus","t2","shouldRestoreFocus","t3","DialogContent","HTMLDivElement","contextProps","children","undefined","onClose","tokens","style","otherProps","toUpperCase","t","domRef","isFocusInTreeRef","isRetained","isTrapping","isRefocusingRef","mountedAtRef","current","Date","now","dialogProps","titleProps","contentProps","dismissButton","timer","ReturnType","setTimeout","isClosed","contains","document","activeElement","body","blur","isFocusOutsideDialog","isFocusOnDialogShell","priorityElement","focus","focused","focusManager","focusFirst","clearTimeout","contentOverflows","slots","title","level","preset","id","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","mods","buttonGroup","onFocus","onBlur","event","stopPropagation","dismissable","ItemButton","_c","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager, getFocusableTreeWalker } from '@react-aria/focus';\nimport { focusSafely, getInteractionModality } from '@react-aria/interactions';\nimport {\n  focusWithoutScrolling,\n  isFocusable,\n  runAfterTransition,\n  useObjectRef,\n} from '@react-aria/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  forwardRef,\n  ReactElement,\n  Ref,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { trapsFocus, useDialogContext } from './context';\nimport { useContentOverflow } from './use-content-overflow';\nimport { useRetainedDialogFocus } from './use-retained-dialog-focus';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    // The widest the dialog gets, also under a `width`. A tray is held by its\n    // shell, whose own `styles` widen it; a takeover and a panel may span the\n    // viewport.\n    '$dialog-width-limit': {\n      '': '$dialog-max-size',\n      'type=tray': '100%',\n      'type=fullscreenTakeover | type=panel': '100dvw',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size $dialog-width-limit',\n      'type=fullscreen': '$dialog-max-size $dialog-max-size',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n      // A `width` is the preferred width in `$dialog-size`: it keeps the\n      // limit, and replaces the floor.\n      'custom-width': 'initial $dialog-size $dialog-width-limit',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n\n    // A `Form` placed directly here (`Dialog > Form > Content + Footer`) lays\n    // itself out as this flex column — see `FormElement`. It is the form's own\n    // state rather than a rule here, so the form's `styles` still win.\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nexport interface CubeDialogProps\n  extends\n    Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    Omit<DimensionStyleProps, 'width'> {\n  /**\n   * The dialog's preferred width, one value (`520px`, `65x`, `600`). It keeps\n   * the type's maximum, so the dialog still fits a phone, and replaces\n   * `$min-dialog-size`. To clamp the width yourself, set `styles.width`.\n   */\n  width?: string | number;\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /**\n   * Whether the dialog shows its close button. Defaults to its DialogTrigger's\n   * or DialogContainer's `isDismissable`, except in a popover.\n   */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * The control a dialog focuses when it opens: the last one marked\n * `data-autofocus` that can take focus, as kit controls mark themselves for\n * `autoFocus` (the last of several takes focus as they mount), or the first\n * control of a marked field (a date field's first segment). Otherwise a\n * submit or primary button, which in an alert dialog is never a destructive\n * (`danger`) one: a reflexive Enter would run it.\n */\nfunction findPriorityFocusElement(dialog: HTMLElement) {\n  const marked = dialog.querySelectorAll<HTMLElement>('[data-autofocus]');\n\n  for (const element of Array.from(marked).reverse()) {\n    const target = isFocusable(element)\n      ? element\n      : getFocusableTreeWalker(element, { tabbable: true }).nextNode();\n\n    if (target) return target as HTMLElement;\n  }\n\n  const button =\n    dialog.getAttribute('role') === 'alertdialog'\n      ? 'button:not([data-theme=\"danger\"])'\n      : 'button';\n\n  return dialog.querySelector<HTMLElement>(\n    `${button}[type=\"submit\"], ${button}[data-type=\"primary\"]`,\n  );\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const transitionState = useOpenTransitionContext()?.transitionState;\n\n  // From the first frame of the enter transition, not only once it has\n  // ended: a Tab pressed while the dialog animates in would otherwise land on\n  // the page behind it, and nothing would pull it back. Released as soon as\n  // the dialog closes, so focus can return to the trigger during the exit.\n  const isShown = transitionState === 'enter' || transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = <DialogContent key=\"content\" {...props} ref={ref} />;\n\n  const shouldContainFocus = isShown && !!context.isOpen && trapsFocus(context);\n\n  return (\n    // This component traps the focus inside the dialog and restores it when\n    // it unmounts (a retained dialog never does, so `DialogContent` moves\n    // focus for that one). The restore is the one that matters for popover-type dialogs\n    // — `DialogTrigger`'s own restore is a no-op there — so\n    // `shouldRestoreFocus` has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    // A popover shows a close button only when its `Dialog` asks for one: its\n    // trigger's `isDismissable` decides whether an outside press closes it.\n    isDismissable = type === 'popover' ? undefined : contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    width,\n    tokens,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  const { t } = useI18n();\n\n  let domRef = useObjectRef(ref);\n\n  // Whether focus is in the dialog or in anything opened from it, portals\n  // included: React focus events bubble through the component tree.\n  const isFocusInTreeRef = useRef(false);\n  const isRetained = useRetainedDialogFocus(domRef, isFocusInTreeRef);\n  const isTrapping = trapsFocus({ ...contextProps, type });\n\n  // Set while the dialog refocuses itself, so the blur in between does not\n  // reach overlays that close when focus leaves them.\n  const isRefocusingRef = useRef(false);\n\n  // When the dialog mounted: `useDialog` refocuses it half a second later.\n  const mountedAtRef = useRef(0);\n\n  useEffect(() => {\n    mountedAtRef.current = Date.now();\n  }, []);\n\n  // `contentProps` carries an id only for `role=\"alertdialog\"` without an\n  // explicit `aria-describedby`: an alert is described by its message, while a\n  // plain dialog links nothing, so opening a form does not read it aloud.\n  let { dialogProps, titleProps, contentProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    // The pending timer: this one, then the refocus it may start.\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let isClosed = false;\n\n    if (contextProps.isOpen) {\n      timer = setTimeout(() => {\n        if (!domRef.current) return;\n\n        // `useDialog` focuses the dialog itself when it mounts, without\n        // scrolling, unless focus is already inside. A retained dialog opens\n        // without remounting, so do the same here: the rules below then run as\n        // for a fresh dialog, and kept content keeps its scroll.\n        if (isRetained && !domRef.current.contains(document.activeElement)) {\n          focusSafely(domRef.current);\n\n          // As `useDialog` does next: VoiceOver on iOS announces a dialog only\n          // once it has rendered, so blur and refocus it half a second later\n          // if focus is still on it or lost to `<body>`. Unless the refocus\n          // `useDialog` set up when the dialog mounted is still to come.\n          if (Date.now() - mountedAtRef.current >= 500) {\n            timer = setTimeout(() => {\n              const dialog = domRef.current;\n              const activeElement = document.activeElement;\n\n              if (\n                !dialog ||\n                (activeElement !== dialog && activeElement !== document.body)\n              ) {\n                return;\n              }\n\n              isRefocusingRef.current = true;\n              dialog.blur();\n              focusSafely(dialog);\n              isRefocusingRef.current = false;\n            }, 500);\n          }\n        }\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: an autofocused control, or a submit or primary button\n        const priorityElement = findPriorityFocusElement(domRef.current);\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog && getInteractionModality() === 'virtual') {\n          // A screen reader's cursor: the dialog itself takes focus once the\n          // open transition ends, as `focusSafely` does it. Then also when\n          // something moved focus meanwhile, as a closing menu returns it to\n          // its trigger, unless a dialog that leaves the page usable lost it\n          // to a control there.\n          runAfterTransition(() => {\n            const dialog = domRef.current;\n            const focused = document.activeElement;\n\n            if (\n              isClosed ||\n              !dialog ||\n              dialog.contains(focused) ||\n              (!isTrapping &&\n                focused !== document.body &&\n                focused !== activeElement)\n            ) {\n              return;\n            }\n\n            focusWithoutScrolling(dialog);\n          });\n        } else if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n\n    return () => {\n      isClosed = true;\n      clearTimeout(timer);\n    };\n  }, [contextProps.isOpen, isRetained, isTrapping]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  const contentOverflows = useContentOverflow(domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      // `null` rather than `undefined` when there is none: slots reach nested\n      // slot providers, and `undefined` does not override, so a dialog opened\n      // inside an alert dialog would repeat the alert's message id.\n      id: contentProps.id ?? null,\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      mods: { 'content-overflow': contentOverflows },\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n        // A line only while the body scrolls: the footer then sits over\n        // content that carries on beneath it, and the line is what says so.\n        // Under a body that fits, the actions simply end it and a rule there\n        // reads as clutter.\n        border: {\n          '': false,\n          'content-overflow': 'top',\n        },\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...mergeProps(dialogProps, {\n        onFocus() {\n          isFocusInTreeRef.current = true;\n        },\n        onBlur(event: FocusEvent) {\n          isFocusInTreeRef.current = false;\n\n          if (isRefocusingRef.current) event.stopPropagation();\n        },\n      })}\n      mods={{ dismissable: isDismissable, 'custom-width': width != null }}\n      tokens={{\n        '$dialog-size':\n          width == null\n            ? `${sizePxMap[size] || sizePxMap.small}px`\n            : typeof width === 'number'\n              ? `${width}px`\n              : width,\n        ...tokens,\n      }}\n      // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\n      style={style}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            aria-label={t('dialog.dismiss', 'Dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":["createFocusManager","getFocusableTreeWalker","focusSafely","getInteractionModality","focusWithoutScrolling","isFocusable","runAfterTransition","useObjectRef","BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","DIMENSION_STYLES","DimensionStyleProps","FLOW_STYLES","Styles","tasty","FocusEvent","forwardRef","ReactElement","Ref","useEffect","useRef","AriaDialogProps","DismissButton","FocusScope","useDialog","useI18n","CloseIcon","mergeProps","SlotProvider","extractStyles","ItemButton","useOpenTransitionContext","trapsFocus","useDialogContext","useContentOverflow","useRetainedDialogFocus","STYLES_LIST","DialogElement","as","styles","display","flow","fill","pointerEvents","outline","position","width","height","gap","border","radius","shadow","top","CloseButton","qa","type","right","sizeMap","S","M","L","sizePxMap","small","medium","large","CubeDialogProps","Omit","size","isDismissable","onDismiss","arg","closeIcon","closeButtonStyles","role","findPriorityFocusElement","dialog","HTMLElement","marked","querySelectorAll","element","Array","from","reverse","target","tabbable","nextNode","button","getAttribute","querySelector","Dialog","props","ref","$","_c","transitionState","isShown","context","t0","content","t1","isOpen","shouldContainFocus","t2","shouldRestoreFocus","t3","DialogContent","HTMLDivElement","requestDismiss","contextProps","children","undefined","onClose","tokens","style","otherProps","toUpperCase","t","domRef","isFocusInTreeRef","isRetained","isTrapping","isRefocusingRef","mountedAtRef","current","Date","now","dialogProps","titleProps","contentProps","dismiss","dismissButton","timer","ReturnType","setTimeout","isClosed","contains","document","activeElement","body","blur","isFocusOutsideDialog","isFocusOnDialogShell","priorityElement","focus","focused","focusManager","focusFirst","clearTimeout","contentOverflows","slots","title","level","preset","id","flexGrow","padding","header","ellipsis","placeItems","placeContent","footer","mods","buttonGroup","onFocus","onBlur","event","stopPropagation","dismissable","ItemButton","_c","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager, getFocusableTreeWalker } from '@react-aria/focus';\nimport { focusSafely, getInteractionModality } from '@react-aria/interactions';\nimport {\n  focusWithoutScrolling,\n  isFocusable,\n  runAfterTransition,\n  useObjectRef,\n} from '@react-aria/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  forwardRef,\n  ReactElement,\n  Ref,\n  useEffect,\n  useRef,\n} from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n} from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions/ItemButton/ItemButton';\nimport { useOpenTransitionContext } from '../Modal/OpenTransitionContext';\n\nimport { trapsFocus, useDialogContext } from './context';\nimport { useContentOverflow } from './use-content-overflow';\nimport { useRetainedDialogFocus } from './use-retained-dialog-focus';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#surface',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    // The widest the dialog gets, also under a `width`. A tray is held by its\n    // shell, whose own `styles` widen it; a takeover and a panel may span the\n    // viewport.\n    '$dialog-width-limit': {\n      '': '$dialog-max-size',\n      'type=tray': '100%',\n      'type=fullscreenTakeover | type=panel': '100dvw',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size $dialog-width-limit',\n      'type=fullscreen': '$dialog-max-size $dialog-max-size',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n      // A `width` is the preferred width in `$dialog-size`: it keeps the\n      // limit, and replaces the floor.\n      'custom-width': 'initial $dialog-size $dialog-width-limit',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n\n    // A `Form` placed directly here (`Dialog > Form > Content + Footer`) lays\n    // itself out as this flex column — see `FormElement`. It is the form's own\n    // state rather than a rule here, so the form's `styles` still win.\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'clear',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nexport interface CubeDialogProps\n  extends\n    Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    Omit<DimensionStyleProps, 'width'> {\n  /**\n   * The dialog's preferred width, one value (`520px`, `65x`, `600`). It keeps\n   * the type's maximum, so the dialog still fits a phone, and replaces\n   * `$min-dialog-size`. To clamp the width yourself, set `styles.width`.\n   */\n  width?: string | number;\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /**\n   * Whether the dialog shows its close button. Defaults to its DialogTrigger's\n   * or DialogContainer's `isDismissable`, except in a popover.\n   */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * The control a dialog focuses when it opens: the last one marked\n * `data-autofocus` that can take focus, as kit controls mark themselves for\n * `autoFocus` (the last of several takes focus as they mount), or the first\n * control of a marked field (a date field's first segment). Otherwise a\n * submit or primary button, which in an alert dialog is never a destructive\n * (`danger`) one: a reflexive Enter would run it.\n */\nfunction findPriorityFocusElement(dialog: HTMLElement) {\n  const marked = dialog.querySelectorAll<HTMLElement>('[data-autofocus]');\n\n  for (const element of Array.from(marked).reverse()) {\n    const target = isFocusable(element)\n      ? element\n      : getFocusableTreeWalker(element, { tabbable: true }).nextNode();\n\n    if (target) return target as HTMLElement;\n  }\n\n  const button =\n    dialog.getAttribute('role') === 'alertdialog'\n      ? 'button:not([data-theme=\"danger\"])'\n      : 'button';\n\n  return dialog.querySelector<HTMLElement>(\n    `${button}[type=\"submit\"], ${button}[data-type=\"primary\"]`,\n  );\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const transitionState = useOpenTransitionContext()?.transitionState;\n\n  // From the first frame of the enter transition, not only once it has\n  // ended: a Tab pressed while the dialog animates in would otherwise land on\n  // the page behind it, and nothing would pull it back. Released as soon as\n  // the dialog closes, so focus can return to the trigger during the exit.\n  const isShown = transitionState === 'enter' || transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = <DialogContent key=\"content\" {...props} ref={ref} />;\n\n  const shouldContainFocus = isShown && !!context.isOpen && trapsFocus(context);\n\n  return (\n    // This component traps the focus inside the dialog and restores it when\n    // it unmounts (a retained dialog never does, so `DialogContent` moves\n    // focus for that one). The restore is the one that matters for popover-type dialogs\n    // — `DialogTrigger`'s own restore is a no-op there — so\n    // `shouldRestoreFocus` has to reach it. Containment is unaffected either way.\n    <FocusScope\n      restoreFocus={context.shouldRestoreFocus ?? true}\n      contain={shouldContainFocus}\n    >\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  let { type = 'modal', requestDismiss, ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    // A popover shows a close button only when its `Dialog` asks for one: its\n    // trigger's `isDismissable` decides whether an outside press closes it.\n    isDismissable = type === 'popover' ? undefined : contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    width,\n    tokens,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  const { t } = useI18n();\n\n  let domRef = useObjectRef(ref);\n\n  // Whether focus is in the dialog or in anything opened from it, portals\n  // included: React focus events bubble through the component tree.\n  const isFocusInTreeRef = useRef(false);\n  const isRetained = useRetainedDialogFocus(domRef, isFocusInTreeRef);\n  const isTrapping = trapsFocus({ ...contextProps, type });\n\n  // Set while the dialog refocuses itself, so the blur in between does not\n  // reach overlays that close when focus leaves them.\n  const isRefocusingRef = useRef(false);\n\n  // When the dialog mounted: `useDialog` refocuses it half a second later.\n  const mountedAtRef = useRef(0);\n\n  useEffect(() => {\n    mountedAtRef.current = Date.now();\n  }, []);\n\n  // `contentProps` carries an id only for `role=\"alertdialog\"` without an\n  // explicit `aria-describedby`: an alert is described by its message, while a\n  // plain dialog links nothing, so opening a form does not read it aloud.\n  let { dialogProps, titleProps, contentProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // The close button and the hidden dismiss button dismiss passively, like\n  // Escape: while the dialog holds unsaved edits, its owner asks first.\n  const dismiss = () => {\n    if (!onDismiss) return;\n\n    if (requestDismiss) requestDismiss(() => onDismiss());\n    else onDismiss();\n  };\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={dismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens.\n  //\n  // We also re-run the priority focus logic when the dialog <section>\n  // itself is the active element. This recovers from a race that occurs\n  // when a popover-based component (FilterPicker, Picker, Select, …) opens\n  // inside another contained Dialog: React's native `autoFocus` on the\n  // inner control fires during the mutation phase, before the popover's\n  // FocusScope registers in react-aria's focus-scope tree, so the outer\n  // FocusScope yanks focus back. useDialog then defaults focus to the\n  // dialog <section>; without re-promoting it here, the priority element\n  // (e.g. the search input) is never focused.\n  useEffect(() => {\n    // The pending timer: this one, then the refocus it may start.\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let isClosed = false;\n\n    if (contextProps.isOpen) {\n      timer = setTimeout(() => {\n        if (!domRef.current) return;\n\n        // `useDialog` focuses the dialog itself when it mounts, without\n        // scrolling, unless focus is already inside. A retained dialog opens\n        // without remounting, so do the same here: the rules below then run as\n        // for a fresh dialog, and kept content keeps its scroll.\n        if (isRetained && !domRef.current.contains(document.activeElement)) {\n          focusSafely(domRef.current);\n\n          // As `useDialog` does next: VoiceOver on iOS announces a dialog only\n          // once it has rendered, so blur and refocus it half a second later\n          // if focus is still on it or lost to `<body>`. Unless the refocus\n          // `useDialog` set up when the dialog mounted is still to come.\n          if (Date.now() - mountedAtRef.current >= 500) {\n            timer = setTimeout(() => {\n              const dialog = domRef.current;\n              const activeElement = document.activeElement;\n\n              if (\n                !dialog ||\n                (activeElement !== dialog && activeElement !== document.body)\n              ) {\n                return;\n              }\n\n              isRefocusingRef.current = true;\n              dialog.blur();\n              focusSafely(dialog);\n              isRefocusingRef.current = false;\n            }, 500);\n          }\n        }\n\n        const activeElement = document.activeElement;\n        const isFocusOutsideDialog = !domRef.current.contains(activeElement);\n        const isFocusOnDialogShell = activeElement === domRef.current;\n\n        // Priority 1: an autofocused control, or a submit or primary button\n        const priorityElement = findPriorityFocusElement(domRef.current);\n\n        if (priorityElement && (isFocusOutsideDialog || isFocusOnDialogShell)) {\n          priorityElement.focus();\n          return;\n        }\n\n        if (isFocusOutsideDialog && getInteractionModality() === 'virtual') {\n          // A screen reader's cursor: the dialog itself takes focus once the\n          // open transition ends, as `focusSafely` does it. Then also when\n          // something moved focus meanwhile, as a closing menu returns it to\n          // its trigger, unless a dialog that leaves the page usable lost it\n          // to a control there.\n          runAfterTransition(() => {\n            const dialog = domRef.current;\n            const focused = document.activeElement;\n\n            if (\n              isClosed ||\n              !dialog ||\n              dialog.contains(focused) ||\n              (!isTrapping &&\n                focused !== document.body &&\n                focused !== activeElement)\n            ) {\n              return;\n            }\n\n            focusWithoutScrolling(dialog);\n          });\n        } else if (isFocusOutsideDialog) {\n          // Fallback: focus first tabbable element, or dialog itself\n          const focusManager = createFocusManager(domRef);\n\n          if (!focusManager.focusFirst({ tabbable: true })) {\n            domRef.current.focus();\n          }\n        }\n      });\n    }\n\n    return () => {\n      isClosed = true;\n      clearTimeout(timer);\n    };\n  }, [contextProps.isOpen, isRetained, isTrapping]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  const contentOverflows = useContentOverflow(domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      // `null` rather than `undefined` when there is none: slots reach nested\n      // slot providers, and `undefined` does not override, so a dialog opened\n      // inside an alert dialog would repeat the alert's message id.\n      id: contentProps.id ?? null,\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      mods: { 'content-overflow': contentOverflows },\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n        // A line only while the body scrolls: the footer then sits over\n        // content that carries on beneath it, and the line is what says so.\n        // Under a body that fits, the actions simply end it and a rule there\n        // reads as clutter.\n        border: {\n          '': false,\n          'content-overflow': 'top',\n        },\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...mergeProps(dialogProps, {\n        onFocus() {\n          isFocusInTreeRef.current = true;\n        },\n        onBlur(event: FocusEvent) {\n          isFocusInTreeRef.current = false;\n\n          if (isRefocusingRef.current) event.stopPropagation();\n        },\n      })}\n      mods={{ dismissable: isDismissable, 'custom-width': width != null }}\n      tokens={{\n        '$dialog-size':\n          width == null\n            ? `${sizePxMap[size] || sizePxMap.small}px`\n            : typeof width === 'number'\n              ? `${width}px`\n              : width,\n        ...tokens,\n      }}\n      // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\n      style={style}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            aria-label={t('dialog.dismiss', 'Dismiss')}\n            onPress={dismiss}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/DialogContainer.d.ts

@@ -23,6 +23,13 @@ export interface CubeDialogContainerProps extends WithCloseBehavior {
   isOpen?: boolean;
   /** Whether pressing the escape key to close the dialog should be disabled. */
   isKeyboardDismissDisabled?: boolean;
+  /**
+   * Whether Escape, an outside click and the close button ask "Discard
+   * changes?" before they close the dialog. Unset, they ask while a
+   * `DialogForm` inside has unsaved edits. Explicit actions (submit, Cancel,
+   * closing it from code) never ask.
+   */
+  confirmDismiss?: boolean;
 }
 /**
  * A DialogContainer accepts a single Dialog as a child, and manages to show and hide