@spectral_labs/ui 1.2.1 → 1.3.0

package/dist/components/dialog/__tests__/DialogTest.svelte

@@ -12,18 +12,20 @@
     trapFocus = true,
     preventScroll = true,
     portalTo = undefined,
+    presentation = undefined,
   }: {
     open?: boolean
     trapFocus?: boolean
     preventScroll?: boolean
     portalTo?: HTMLElement | string
+    presentation?: 'dialog' | 'fullscreen-mobile' | 'fullscreen-tablet' | 'fullscreen'
   } = $props()
 </script>
 
 <DialogRoot bind:open>
   <DialogTrigger>Open Dialog</DialogTrigger>
   <DialogOverlay />
-  <DialogContent {trapFocus} {preventScroll} {portalTo}>
+  <DialogContent {trapFocus} {preventScroll} {portalTo} {presentation}>
     <DialogTitle>Test Title</DialogTitle>
     <DialogDescription>Test Description</DialogDescription>
     <button data-testid="inside-button">Inside</button>

package/dist/components/dialog/__tests__/dialog.test.svelte.js

@@ -170,4 +170,15 @@ describe('dialog', () => {
             t.remove();
         }
     });
+    // --- Presentation prop ---
+    it('sets data-presentation attribute matching prop', () => {
+        setup({ open: true, presentation: 'fullscreen-mobile' });
+        const content = target.querySelector('[role="dialog"]');
+        expect(content?.getAttribute('data-presentation')).toBe('fullscreen-mobile');
+    });
+    it('defaults data-presentation to "dialog"', () => {
+        setup({ open: true });
+        const content = target.querySelector('[role="dialog"]');
+        expect(content?.getAttribute('data-presentation')).toBe('dialog');
+    });
 });

package/dist/components/dialog/components/dialog-content.svelte

@@ -16,6 +16,7 @@
     onEscapeKeydown,
     onInteractOutside,
     portalTo,
+    presentation = 'dialog',
     class: className,
     children,
   }: DialogContentProps = $props()
@@ -91,6 +92,7 @@
       aria-labelledby={ctx.titleId}
       aria-describedby={ctx.descriptionId}
       data-state={ctx.open ? 'open' : 'closed'}
+      data-presentation={presentation}
     >
       {#if children}{@render children()}{/if}
     </div>
@@ -130,4 +132,59 @@
     outline: 2px solid var(--sp-sys-color-primary);
     outline-offset: 2px;
   }
+
+  /* --- Responsive fullscreen presentation --- */
+  /* Fills the viewport with inset:0 and neutralizes the centered-modal
+     geometry. Padding/background/shadow are inherited from the base rule.
+     Closed state is opacity-only (transform stays none), which also reads
+     correctly under prefers-reduced-motion. */
+
+  /* fullscreen at every breakpoint */
+  .sp-dialog-content[data-presentation='fullscreen'] {
+    inset: 0;
+    transform: none;
+    width: auto;
+    max-width: none;
+    height: auto;
+    max-height: none;
+    border-radius: 0;
+  }
+  .sp-dialog-content[data-presentation='fullscreen'][data-state='closed'] {
+    transform: none;
+    opacity: 0;
+  }
+
+  /* fullscreen ≤ 1023px (mobile + tablet) */
+  @media (max-width: 1023px) {
+    .sp-dialog-content[data-presentation='fullscreen-tablet'] {
+      inset: 0;
+      transform: none;
+      width: auto;
+      max-width: none;
+      height: auto;
+      max-height: none;
+      border-radius: 0;
+    }
+    .sp-dialog-content[data-presentation='fullscreen-tablet'][data-state='closed'] {
+      transform: none;
+      opacity: 0;
+    }
+  }
+
+  /* fullscreen ≤ 639px (phones) */
+  @media (max-width: 639px) {
+    .sp-dialog-content[data-presentation='fullscreen-mobile'] {
+      inset: 0;
+      transform: none;
+      width: auto;
+      max-width: none;
+      height: auto;
+      max-height: none;
+      border-radius: 0;
+    }
+    .sp-dialog-content[data-presentation='fullscreen-mobile'][data-state='closed'] {
+      transform: none;
+      opacity: 0;
+    }
+  }
 </style>

package/dist/components/dialog/components/dialog-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dialog/components/dialog-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAwGrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"dialog-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dialog/components/dialog-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAyGrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/dialog/index.d.ts

@@ -5,5 +5,5 @@ export { default as Overlay } from './components/dialog-overlay.svelte';
 export { default as Root } from './components/dialog-root.svelte';
 export { default as Title } from './components/dialog-title.svelte';
 export { default as Trigger } from './components/dialog-trigger.svelte';
-export type { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogOverlayProps, DialogProps, DialogTitleProps, DialogTriggerProps, } from './types.js';
+export type { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogOverlayProps, DialogPresentation, DialogProps, DialogTitleProps, DialogTriggerProps, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,iCAAiC,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kCAAkC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oCAAoC,CAAA;AACvE,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,YAAY,CAAA"}

package/dist/components/dialog/types.d.ts

@@ -1,4 +1,6 @@
 import type { Snippet } from 'svelte';
+/** How a Dialog surface is presented. See DialogContentProps.presentation. */
+export type DialogPresentation = 'dialog' | 'fullscreen-mobile' | 'fullscreen-tablet' | 'fullscreen';
 export interface DialogProps {
     /** Whether the dialog is open. */
     open?: boolean;
@@ -36,6 +38,16 @@ export interface DialogContentProps {
      * Pass an HTMLElement, CSS selector, or undefined to use document.body.
      */
     portalTo?: HTMLElement | string;
+    /**
+     * How the dialog surface is presented. Affects only the surface
+     * (position / size / border-radius); the standard dialog padding is
+     * preserved and no full-bleed content layout is imposed.
+     * - `'dialog'` (default): centered modal at every breakpoint.
+     * - `'fullscreen-mobile'`: fullscreen ≤ 639px, centered modal above.
+     * - `'fullscreen-tablet'`: fullscreen ≤ 1023px (mobile + tablet), centered modal above.
+     * - `'fullscreen'`: fullscreen at every breakpoint.
+     */
+    presentation?: DialogPresentation;
     class?: string;
     children?: Snippet;
 }

package/dist/components/dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6FAA6F;IAC7F,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kCAAkC;IAClC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,8EAA8E;AAC9E,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,YAAY,CAAA;AAEpG,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6FAA6F;IAC7F,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,kCAAkC;IAClC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/simple-dialog/__tests__/SimpleDialogTest.svelte

@@ -9,6 +9,7 @@
     cancelText = 'Cancel',
     onConfirm,
     onCancel,
+    presentation = undefined,
   }: {
     open?: boolean
     title?: string
@@ -17,13 +18,23 @@
     cancelText?: string
     onConfirm?: () => void
     onCancel?: () => void
+    presentation?: 'dialog' | 'fullscreen-mobile' | 'fullscreen-tablet' | 'fullscreen'
   } = $props()
 </script>
 
 <div data-testid="harness">
   <button type="button" data-testid="toggle" onclick={() => (open = !open)}>Toggle</button>
 
-  <SimpleDialog {open} {title} {description} {confirmText} {cancelText} {onConfirm} {onCancel}>
+  <SimpleDialog
+    {open}
+    {title}
+    {description}
+    {confirmText}
+    {cancelText}
+    {onConfirm}
+    {onCancel}
+    {presentation}
+  >
     <p data-testid="body">dialog body content</p>
   </SimpleDialog>
 </div>

package/dist/components/simple-dialog/__tests__/simple-dialog.test.svelte.js

@@ -42,4 +42,9 @@ describe('simpleDialog', () => {
         expect(body).toBeTruthy();
         expect(body?.textContent).toContain('dialog body content');
     });
+    it('forwards presentation to Dialog.Content', () => {
+        setup({ open: true, presentation: 'fullscreen' });
+        const dialog = document.body.querySelector('[role="dialog"]');
+        expect(dialog?.getAttribute('data-presentation')).toBe('fullscreen');
+    });
 });

package/dist/components/simple-dialog/simple-dialog.svelte

@@ -16,6 +16,7 @@
     onCancel,
     class: className,
     portalTo,
+    presentation,
     children,
   }: SimpleDialogProps = $props()
 
@@ -32,7 +33,7 @@
 
 <DialogRoot bind:open>
   <DialogOverlay />
-  <DialogContent class={className} {portalTo}>
+  <DialogContent class={className} {portalTo} {presentation}>
     <DialogTitle>{title}</DialogTitle>
     {#if description}
       <DialogDescription>{description}</DialogDescription>

package/dist/components/simple-dialog/simple-dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-dialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-dialog/simple-dialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AA4DnD,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"simple-dialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-dialog/simple-dialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AA6DnD,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/simple-dialog/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DialogPresentation } from '../dialog/types.js';
 export interface SimpleDialogProps {
     /** Whether the dialog is open. */
     open?: boolean;
@@ -18,6 +19,8 @@ export interface SimpleDialogProps {
     class?: string;
     /** Portal target for dialog content. */
     portalTo?: HTMLElement | string | undefined;
+    /** How the dialog surface is presented (forwarded to Dialog.Content). */
+    presentation?: DialogPresentation;
     children?: Snippet;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/simple-dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/simple-dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAAA;IAC3C,yEAAyE;IACzE,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"