@erkamyaman/capacitor-foldable 7.0.0

package/dist/docs.json

@@ -0,0 +1,584 @@
+{
+  "api": {
+    "name": "FoldablePlugin",
+    "slug": "foldableplugin",
+    "docs": "",
+    "tags": [],
+    "methods": [
+      {
+        "name": "isDeviceFoldable",
+        "signature": "() => Promise<{ foldable: boolean; supportsTabletop: boolean; }>",
+        "parameters": [],
+        "returns": "Promise<{ foldable: boolean; supportsTabletop: boolean; }>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Whether the device has a fold at all, and whether it can be propped half\nopen like a laptop. Both `false` on web, and on iOS except on iPhone Duo\n(iOS 27.1 or later).",
+        "complexTypes": [],
+        "slug": "isdevicefoldable"
+      },
+      {
+        "name": "getFoldState",
+        "signature": "() => Promise<FoldState>",
+        "parameters": [],
+        "returns": "Promise<FoldState>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Read the current fold state. Resolves to\n`{ state: 'flat', isSeparating: false, posture: 'flat' }` when there is no\nfold information.",
+        "complexTypes": [
+          "FoldState"
+        ],
+        "slug": "getfoldstate"
+      },
+      {
+        "name": "getHingeAngle",
+        "signature": "() => Promise<{ angle: number | null; }>",
+        "parameters": [],
+        "returns": "Promise<{ angle: number | null; }>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Read the angle between the two halves of the device, in degrees: `0` when\nclosed, `180` when flat. Resolves to `{ angle: null }` on devices without a\nhinge angle sensor, on web, and on iOS before 27.1.",
+        "complexTypes": [],
+        "slug": "gethingeangle"
+      },
+      {
+        "name": "getSizeClass",
+        "signature": "() => Promise<SizeClass>",
+        "parameters": [],
+        "returns": "Promise<SizeClass>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Read the window's size classes: Apple's compact and regular, the signal its\niPhone Duo guidelines recommend for telling the outer display from the inner\none, and Material's width and height classes. On iOS `horizontal` and\n`vertical` are UIKit's size classes; everything else comes from the window\nsize.",
+        "complexTypes": [
+          "SizeClass"
+        ],
+        "slug": "getsizeclass"
+      },
+      {
+        "name": "getDisplayModes",
+        "signature": "() => Promise<DisplayModes>",
+        "parameters": [],
+        "returns": "Promise<DisplayModes>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Read which of the foldable display modes the device offers right now. Both\nare `'unsupported'` on iOS and web.",
+        "complexTypes": [
+          "DisplayModes"
+        ],
+        "slug": "getdisplaymodes"
+      },
+      {
+        "name": "getBarPlacement",
+        "signature": "() => Promise<BarPlacement>",
+        "parameters": [],
+        "returns": "Promise<BarPlacement>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Read where native bars go. Native tab bars and toolbars move to the side of\nthe display on iPhone Duo, but HTML ones stay put, so use this to move your\nown tab bar too.",
+        "complexTypes": [
+          "BarPlacement"
+        ],
+        "slug": "getbarplacement"
+      },
+      {
+        "name": "startRearDisplay",
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Move the app to the outer display. Android asks the user to confirm first,\nand the promise resolves once the app has moved. Rejects when rear display\nmode is not `'available'`. Only on Android.",
+        "complexTypes": [],
+        "slug": "startreardisplay"
+      },
+      {
+        "name": "stopRearDisplay",
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Move the app back to the inner display.",
+        "complexTypes": [],
+        "slug": "stopreardisplay"
+      },
+      {
+        "name": "startDualScreen",
+        "signature": "(options: { url: string; }) => Promise<void>",
+        "parameters": [
+          {
+            "name": "options",
+            "docs": "",
+            "type": "{ url: string; }"
+          }
+        ],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Show a page on the outer display while the app stays on the inner one. A\nrelative `url` resolves against the app's own URL, so `'cover.html'` loads a\npage bundled with the app. The page runs in its own web view without access\nto Capacitor plugins. Calling this again while dual-screen mode is active\nreplaces the page. Only on Android.",
+        "complexTypes": [],
+        "slug": "startdualscreen"
+      },
+      {
+        "name": "stopDualScreen",
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Close the page on the outer display.",
+        "complexTypes": [],
+        "slug": "stopdualscreen"
+      },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'foldStateChange', listenerFunc: (state: FoldState) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'foldStateChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(state: FoldState) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Listen for fold state changes. On a foldable this also fires when the\ndevice rotates, because `hingeOrientation` and `hingeBounds` rotate with\nthe window.",
+        "complexTypes": [
+          "PluginListenerHandle",
+          "FoldState"
+        ],
+        "slug": "addlistenerfoldstatechange-"
+      },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'hingeAngleChange', listenerFunc: (event: { angle: number; }) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'hingeAngleChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(event: { angle: number; }) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Listen for hinge angle changes. On Android the hinge sensor only runs while\nat least one of these listeners is registered. On iOS it fires on iPhone\nDuo (iOS 27.1 or later). Never fires on web.",
+        "complexTypes": [
+          "PluginListenerHandle"
+        ],
+        "slug": "addlistenerhingeanglechange-"
+      },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'sizeClassChange', listenerFunc: (sizeClass: SizeClass) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'sizeClassChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(sizeClass: SizeClass) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Listen for size class changes, such as unfolding the device, rotating it or\nresizing the window. On iOS this fires when UIKit's size classes change\n(iOS 17 or later) or the device rotates, so a resize that keeps the same\nsize classes may not update `widthClass` and `heightClass` until then.",
+        "complexTypes": [
+          "PluginListenerHandle",
+          "SizeClass"
+        ],
+        "slug": "addlistenersizeclasschange-"
+      },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'displayModeChange', listenerFunc: (modes: DisplayModes) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'displayModeChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(modes: DisplayModes) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Listen for changes to the display modes, including a mode ending because\nthe user folded or unfolded the device. Never fires on iOS and web.",
+        "complexTypes": [
+          "PluginListenerHandle",
+          "DisplayModes"
+        ],
+        "slug": "addlistenerdisplaymodechange-"
+      },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'barPlacementChange', listenerFunc: (placement: BarPlacement) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'barPlacementChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(placement: BarPlacement) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.0.0"
+          }
+        ],
+        "docs": "Listen for bar placement changes, such as opening or rotating iPhone Duo.\nOnly fires on iOS 27.1 or later.",
+        "complexTypes": [
+          "PluginListenerHandle",
+          "BarPlacement"
+        ],
+        "slug": "addlistenerbarplacementchange-"
+      }
+    ],
+    "properties": []
+  },
+  "interfaces": [
+    {
+      "name": "FoldState",
+      "slug": "foldstate",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "state",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Posture of the fold. `'closed'` is never reported today: a device shut on\nits cover display reports `'flat'`.",
+          "complexTypes": [],
+          "type": "'flat' | 'half-opened' | 'closed'"
+        },
+        {
+          "name": "isSeparating",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Whether the fold splits the web view into two areas: `true` when\nhalf-opened, or when the hinge has a physical gap.",
+          "complexTypes": [],
+          "type": "boolean"
+        },
+        {
+          "name": "posture",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "How the device is held: `'tabletop'` when half-opened with a horizontal\nhinge, like a laptop, `'book'` when half-opened with a vertical hinge, and\n`'flat'` otherwise.",
+          "complexTypes": [],
+          "type": "'flat' | 'tabletop' | 'book'"
+        },
+        {
+          "name": "hingeOrientation",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Direction of the hinge relative to the window, so it flips when the device\nrotates. Omitted when there is no fold.",
+          "complexTypes": [],
+          "type": "'horizontal' | 'vertical' | undefined"
+        },
+        {
+          "name": "hingeBounds",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Position of the fold in CSS pixels, relative to the web view. Zero wide (or\nzero tall) on a seamless fold. Omitted when there is no fold.",
+          "complexTypes": [],
+          "type": "{ x: number; y: number; width: number; height: number; } | undefined"
+        },
+        {
+          "name": "occludedBounds",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Area of the web view the hinge covers, in CSS pixels. Only present on\ndevices with a physical gap.",
+          "complexTypes": [],
+          "type": "{ x: number; y: number; width: number; height: number; } | undefined"
+        },
+        {
+          "name": "activeDisplay",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Which display is showing the app, on a device with an inner and an outer\ndisplay such as iPhone Duo. Reported on iPhone Duo (iOS 27.1 or later) and\nomitted elsewhere.",
+          "complexTypes": [],
+          "type": "'inner' | 'outer' | undefined"
+        },
+        {
+          "name": "cameraBounds",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Areas of the web view covered by a front-facing camera, in CSS pixels. On\nAndroid these are the display cutouts. On iPhone Duo they are the outer\ncamera and the under-display inner camera while it is in use. Omitted when\nthere are none.",
+          "complexTypes": [],
+          "type": "{ x: number; y: number; width: number; height: number; }[] | undefined"
+        }
+      ]
+    },
+    {
+      "name": "SizeClass",
+      "slug": "sizeclass",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "horizontal",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Width size class of the window: `'compact'` on a phone and on the outer\ndisplay of a foldable, `'regular'` on the inner display, tablets and wide\nwindows. On Android and web `'regular'` starts at 600 CSS pixels.",
+          "complexTypes": [],
+          "type": "'compact' | 'regular'"
+        },
+        {
+          "name": "vertical",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Height size class of the window: `'compact'` on a phone in landscape. On\nAndroid and web `'regular'` starts at 480 CSS pixels.",
+          "complexTypes": [],
+          "type": "'compact' | 'regular'"
+        },
+        {
+          "name": "widthClass",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Material window width class, from the window width in CSS pixels:\n`'compact'` below 600, `'medium'` below 840, `'expanded'` below 1200,\n`'large'` below 1600 and `'extraLarge'` from 1600.",
+          "complexTypes": [],
+          "type": "'compact' | 'medium' | 'expanded' | 'large' | 'extraLarge'"
+        },
+        {
+          "name": "heightClass",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Material window height class, from the window height in CSS pixels:\n`'compact'` below 480, `'medium'` below 900 and `'expanded'` from 900.",
+          "complexTypes": [],
+          "type": "'compact' | 'medium' | 'expanded'"
+        }
+      ]
+    },
+    {
+      "name": "DisplayModes",
+      "slug": "displaymodes",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "rearDisplay",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Rear display mode moves the app to the outer display, so people can frame a\nphoto with the rear cameras. Only on Android foldables that offer it.",
+          "complexTypes": [
+            "DisplayModeStatus"
+          ],
+          "type": "DisplayModeStatus"
+        },
+        {
+          "name": "dualScreen",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Dual-screen mode shows a second page on the outer display while the app\nstays on the inner one. Only on Android foldables that offer it.",
+          "complexTypes": [
+            "DisplayModeStatus"
+          ],
+          "type": "DisplayModeStatus"
+        }
+      ]
+    },
+    {
+      "name": "BarPlacement",
+      "slug": "barplacement",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "verticalBarEdge",
+          "tags": [
+            {
+              "text": "7.0.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The edge iPhone Duo moves tab bars and toolbars to when it lays them out\nvertically: `'leading'` or `'trailing'` in the reading direction, so\n`'leading'` is the left edge in left-to-right languages. `null` when bars\nstay horizontal, and always on Android, web and iOS before 27.1.",
+          "complexTypes": [],
+          "type": "'leading' | 'trailing' | null"
+        }
+      ]
+    },
+    {
+      "name": "PluginListenerHandle",
+      "slug": "pluginlistenerhandle",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "remove",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "() => Promise<void>"
+        }
+      ]
+    }
+  ],
+  "enums": [],
+  "typeAliases": [
+    {
+      "name": "DisplayModeStatus",
+      "slug": "displaymodestatus",
+      "docs": "",
+      "types": [
+        {
+          "text": "'unsupported'",
+          "complexTypes": []
+        },
+        {
+          "text": "'unavailable'",
+          "complexTypes": []
+        },
+        {
+          "text": "'available'",
+          "complexTypes": []
+        },
+        {
+          "text": "'active'",
+          "complexTypes": []
+        }
+      ]
+    }
+  ],
+  "pluginConfigs": []
+}

package/dist/esm/css.d.ts

@@ -0,0 +1,8 @@
+import type { SegmentRect } from './segments';
+export declare const CSS_CLASSES: string[];
+export declare const BAR_CLASSES: string[];
+export declare function barClassFor(edge: 'leading' | 'trailing' | null): string | null;
+export declare function cssFor(segments: SegmentRect[], posture: 'continuous' | 'folded'): {
+    variables: Record<string, string>;
+    classes: string[];
+};

package/dist/esm/css.js

@@ -0,0 +1,29 @@
+export const CSS_CLASSES = [
+    'horizontal-viewport-segments-2',
+    'vertical-viewport-segments-2',
+    'device-posture-continuous',
+    'device-posture-folded',
+];
+export const BAR_CLASSES = ['vertical-bars-leading', 'vertical-bars-trailing'];
+export function barClassFor(edge) {
+    return edge ? `vertical-bars-${edge}` : null;
+}
+export function cssFor(segments, posture) {
+    const stacked = segments.length > 1 && segments[1].y > segments[0].y;
+    const variables = {};
+    segments.forEach((segment, index) => {
+        const suffix = stacked ? `0-${index}` : `${index}-0`;
+        variables[`--viewport-segment-top-${suffix}`] = `${segment.y}px`;
+        variables[`--viewport-segment-left-${suffix}`] = `${segment.x}px`;
+        variables[`--viewport-segment-bottom-${suffix}`] = `${segment.y + segment.height}px`;
+        variables[`--viewport-segment-right-${suffix}`] = `${segment.x + segment.width}px`;
+        variables[`--viewport-segment-width-${suffix}`] = `${segment.width}px`;
+        variables[`--viewport-segment-height-${suffix}`] = `${segment.height}px`;
+    });
+    const classes = [`device-posture-${posture}`];
+    if (segments.length > 1) {
+        classes.push(stacked ? 'vertical-viewport-segments-2' : 'horizontal-viewport-segments-2');
+    }
+    return { variables, classes };
+}
+//# sourceMappingURL=css.js.map

package/dist/esm/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/css.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,gCAAgC;IAChC,8BAA8B;IAC9B,2BAA2B;IAC3B,uBAAuB;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAC;AAE/E,MAAM,UAAU,WAAW,CAAC,IAAmC;IAC7D,OAAO,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,MAAM,CACpB,QAAuB,EACvB,OAAgC;IAEhC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,SAAS,GAA2B,EAAE,CAAC;IAE7C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAClC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC;QACrD,SAAS,CAAC,0BAA0B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC;QACjE,SAAS,CAAC,2BAA2B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC;QAClE,SAAS,CAAC,6BAA6B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC;QACrF,SAAS,CAAC,4BAA4B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;QACnF,SAAS,CAAC,4BAA4B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;QACvE,SAAS,CAAC,6BAA6B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CAAC,kBAAkB,OAAO,EAAE,CAAC,CAAC;IAC9C,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAChC,CAAC","sourcesContent":["import type { SegmentRect } from './segments';\n\nexport const CSS_CLASSES = [\n  'horizontal-viewport-segments-2',\n  'vertical-viewport-segments-2',\n  'device-posture-continuous',\n  'device-posture-folded',\n];\n\nexport const BAR_CLASSES = ['vertical-bars-leading', 'vertical-bars-trailing'];\n\nexport function barClassFor(edge: 'leading' | 'trailing' | null): string | null {\n  return edge ? `vertical-bars-${edge}` : null;\n}\n\nexport function cssFor(\n  segments: SegmentRect[],\n  posture: 'continuous' | 'folded',\n): { variables: Record<string, string>; classes: string[] } {\n  const stacked = segments.length > 1 && segments[1].y > segments[0].y;\n  const variables: Record<string, string> = {};\n\n  segments.forEach((segment, index) => {\n    const suffix = stacked ? `0-${index}` : `${index}-0`;\n    variables[`--viewport-segment-top-${suffix}`] = `${segment.y}px`;\n    variables[`--viewport-segment-left-${suffix}`] = `${segment.x}px`;\n    variables[`--viewport-segment-bottom-${suffix}`] = `${segment.y + segment.height}px`;\n    variables[`--viewport-segment-right-${suffix}`] = `${segment.x + segment.width}px`;\n    variables[`--viewport-segment-width-${suffix}`] = `${segment.width}px`;\n    variables[`--viewport-segment-height-${suffix}`] = `${segment.height}px`;\n  });\n\n  const classes = [`device-posture-${posture}`];\n  if (segments.length > 1) {\n    classes.push(stacked ? 'vertical-viewport-segments-2' : 'horizontal-viewport-segments-2');\n  }\n\n  return { variables, classes };\n}\n"]}