@synopackageland/ui 0.12.4 → 0.12.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.12.5 (2026-10-20)
+
+- `DropdownMenu` label column: a plain action menu no longer reserves an empty check-mark slot before every label, so its labels start at the left edge. The slot is kept, for every entry of that level, when any entry can show a check mark, an indicator or an icon; an unchecked checkbox or radio now keeps its slot, so its label lines up with the rest. All entries share the same 10px side padding. The menu's 11rem minimum width now holds (it resolved against a content-sized popper and collapsed short menus to their labels), still capped by the viewport.
+- `DropdownMenuEntry.icon`: an optional leading icon component for an item or submenu entry (pencil, copy, trash). It sits in the label slot in secondary text, or the danger colour on a `danger` entry; a check mark takes precedence.
+- `SegmentControl variant="sheet"`: joined sheet tabs on a rule, for the views and forms over a table. Unselected tabs sit on the subtle surface in secondary text; the selected tab takes the content's surface over the rule, accent text and an accent line on top. Keyboard, `aria-selected` and the `segment` default are unchanged.
+- Fix DatePicker calendar clipping in app-local modal scope: mark the calendar as a popup so Dialog width constraints do not shrink it. Date and date-time popups stay within the app/viewport collision bounds, use the available width and height, and scroll when space is limited. Portals, calendar selection and Escape behavior are preserved.
+- Add `PageContent surface="none"` (also JSON `Page`): no page surface or horizontal gutters at any presentation width, for full-bleed editors and standalone app content. Width limits, fill height and child spacing still work; `auto`, `card` and `flat` retain their existing behavior.
+- Add a full-bleed Histoire example and `pnpm check:date-picker` browser regression coverage for popup geometry, clipped containers, viewport edges, nested Dialog Escape and page surfaces.
+
 ## 0.12.4 (2026-10-20)
 
 - Full-page (`web`) layout is flush and compact: the page content sits straight beside the sidebar and under the toolbar, with the same page padding as a DSM window (16px), the DSM window section and field gaps, and the page header's bottom space. The rounded page card around `PageContent` (its border, background, shadow, outer margin and inner padding) is gone for `surface="auto"` and `surface="card"`, and content starts at the left edge instead of centring when capped by `width`. An `AppToolbar` lines up with the page content. `surface="flat"` keeps the canvas behind its own cards. DSM-window and phone layouts are unchanged.

package/README.md

@@ -350,6 +350,23 @@ import { AppLayout, Button, PageHeader } from '@synopackageland/ui'
 
 `AppLayout` also accepts `sidebar`, `toolbar`, and `footer` slots.
 
+For standalone content that owns its layout, use `<PageContent surface="none" height="fill">`.
+It removes the page's horizontal gutters and adds no surface in web, DSM-window
+or phone layouts. The default `surface="auto"` remains unchanged; `flat` keeps
+the dashboard canvas. In 0.12.4+, `auto` already has no outer page card in web
+mode. Child components keep their own styling and spacing. The JSON `Page`
+component accepts the same `surface="none"` option. SDK `AppShell` is a separate
+package: if it creates `PageContent` internally, it must expose/forward this
+option before an application can select it through that shell.
+
+```vue
+<AppLayout wide-layout="web" height="fill" min-height="0">
+  <PageContent surface="none" height="fill">
+    <MyEditor />
+  </PageContent>
+</AppLayout>
+```
+
 `PageContent` stacks its direct children (a search row, a toolbar, cards) at
 `--ui-section-gap`, so a page needs no margins between them. Under a
 `PageHeader` the space is the header's own bottom padding (12px in a DSM
@@ -611,6 +628,7 @@ pnpm check       # production build, then lint, typecheck and tests in parallel,
 pnpm check:fast  # as check, but only the tests the changes since origin/master reach (vitest --changed)
 pnpm story:build # build the component workbench
 pnpm check:host  # after pnpm build: DSM host simulation screenshots (Chrome)
+pnpm check:date-picker # after pnpm build: app-local calendars, Dialog Escape and full-bleed pages (ego-browser)
 pnpm check:switch # after pnpm build: Switch knob geometry and click toggling (Chrome)
 pnpm check:topology # after pnpm build: ConnectionTopology motion, keyboard and narrow layout (Chrome)
 ```

package/dist/components/app/page-content/PageContent.vue.d.ts

@@ -4,8 +4,8 @@ type __VLS_Props = {
      * `--ui-page-readable-width`; any other value is a CSS maximum width.
      */
     width?: 'fill' | 'readable' | (string & {});
-    /** Web/portal mode puts the page flush on a white content area (`auto`, `card`). Set flat for card-based dashboards on the canvas. */
-    surface?: 'auto' | 'flat' | 'card';
+    /** Web/portal: auto/card use the white content area; flat uses the dashboard canvas. none adds no surface or horizontal gutters, for content that owns its layout at every width. */
+    surface?: 'auto' | 'flat' | 'card' | 'none';
     /**
      * `'fill'` takes the container's height and does not scroll: the header,
      * tabs and toolbar stay, and the last child (a DataGrid, or a flex column
@@ -20,7 +20,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     height: "auto" | "fill";
     width: "fill" | "readable" | (string & {});
-    surface: "auto" | "flat" | "card";
+    surface: "auto" | "flat" | "card" | "none";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/primitives/dropdown-menu/types.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'vue';
 export type DropdownMenuSubEntry = {
     type?: 'item';
     key: string;
@@ -6,6 +7,8 @@ export type DropdownMenuSubEntry = {
     /** Legacy visual check mark. Use `type: 'checkbox'` for a real, togglable item. */
     checked?: boolean;
     danger?: boolean;
+    /** A small leading icon, such as a pencil for "Rename". Takes the place of the check mark. */
+    icon?: Component;
     shortcut?: string;
     /** @deprecated A real submenu is rendered when `children` is present. */
     submenu?: boolean;

package/dist/components/primitives/segment-control/SegmentControl.vue.d.ts

@@ -1,3 +1,4 @@
+import { SegmentVariant } from './context';
 type __VLS_Props = {
     /** Selected item value. */
     modelValue?: string;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     ariaLabelledby?: string;
     /** Disables every item of the group. */
     disabled?: boolean;
+    /** `sheet` draws joined sheet tabs on a rule, as above a table, instead of a segmented control. */
+    variant?: SegmentVariant;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -19,6 +22,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    variant: SegmentVariant;
     disabled: boolean;
     modelValue: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/primitives/segment-control/context.d.ts

@@ -6,9 +6,12 @@ export type SegmentItemHandle = {
     element: () => HTMLElement | undefined;
 };
 export type SegmentMove = 'previous' | 'next' | 'first' | 'last';
+/** `segment`: a segmented control; `sheet`: joined sheet tabs on a rule, the selected one open to the content below. */
+export type SegmentVariant = 'segment' | 'sheet';
 export type SegmentControlContext = {
     selected: Ref<string>;
     groupDisabled: Ref<boolean>;
+    variant: Ref<SegmentVariant>;
     select: (value: string) => void;
     register: (handle: SegmentItemHandle) => void;
     unregister: (handle: SegmentItemHandle) => void;