kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/layout/app/components/Layout/Grid/Item.vue

@@ -1,232 +1,240 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-/**
- * BaseGridItem - Positions content on the Swiss Grid
- *
- * Places content on the parent section's grid using grid-column and grid-row.
- * Supports responsive values, alignment, layering, bleed, and aspect ratios.
- *
- * @prop {string} as - HTML element to render (default: 'div')
- * @prop {number | ResponsiveValue} colStart - Starting column (1-18)
- * @prop {ColSpanValue | ResponsiveValue} colSpan - Columns to span (default: 'full')
- * @prop {number | ResponsiveValue} rowStart - Starting row (1-12)
- * @prop {number | ResponsiveValue} rowSpan - Number of rows to span (default: 1)
- * @prop {Alignment} align - Vertical alignment (align-self): start, center, end, stretch
- * @prop {Alignment} justify - Horizontal alignment (justify-self): start, center, end, stretch
- * @prop {string} container - Content width constraint: content (65ch), wide (90rem), fluid, full
- * @prop {string} gap - Override --grid-gap for nested content (e.g. '1rem', '2rem')
- * @prop {string} density - Vertical rhythm: compact (2px), normal (4px), relaxed (8px)
- * @prop {number} z - Explicit z-index value
- * @prop {LayerName} layer - Semantic layer: back, mid, front, top
- * @prop {BleedDirection} bleed - Edge bleed: left, right, both
- * @prop {AspectRatio} aspect - Aspect ratio: 1/1, 4/3, 3/4, 16/9, 9/16, 2/1, 1/2
- *
- * @example
- * <BaseGridItem
- *   :col-start="{ default: 1, md: 2, lg: 3 }"
- *   :col-span="{ default: 6, md: 8, lg: 10 }"
- *   align="center"
- *   justify="start"
- *   layer="front"
- * >
- *   <h1>Content</h1>
- * </BaseGridItem>
- */
-
-type ColSpanValue = number | 'full'
-type Alignment = 'start' | 'center' | 'end' | 'stretch'
-type LayerName = 'back' | 'mid' | 'front' | 'top'
-type BleedDirection = 'left' | 'right' | 'both'
-type AspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16' | '2/1' | '1/2'
-
-interface ResponsiveValue<T> {
-  default: T
-  md?: T
-  lg?: T
-}
-
-type ContainerSize = 'content' | 'wide' | 'fluid' | 'full'
-type Density = 'compact' | 'normal' | 'relaxed'
-
-interface Props {
-  preset?: string
-  as?: string
-  colStart?: number | ResponsiveValue<number>
-  colSpan?: ColSpanValue | ResponsiveValue<number>
-  rowStart?: number | ResponsiveValue<number>
-  rowSpan?: number | ResponsiveValue<number>
-  align?: Alignment
-  justify?: Alignment
-  container?: ContainerSize
-  gap?: string
-  density?: Density
-  z?: number
-  layer?: LayerName
-  bleed?: BleedDirection
-  aspect?: AspectRatio
-}
-
-const props = defineProps<Props>()
-
-const { as = 'div' } = props
-
-// Get preset configuration if preset prop is provided
-const { getPreset } = useGridConfig()
-const presetConfig = computed(() => (props.preset ? getPreset(props.preset) : undefined))
-
-// Merge preset values with explicit props (explicit props take precedence)
-const colStart = computed(() => props.colStart ?? presetConfig.value?.colStart)
-const colSpan = computed(() => props.colSpan ?? presetConfig.value?.colSpan ?? 'full')
-const rowStart = computed(() => props.rowStart ?? presetConfig.value?.rowStart)
-const rowSpan = computed(() => props.rowSpan ?? presetConfig.value?.rowSpan ?? 1)
-
-// Preset-aware alignment computed refs
-const align = computed(() => props.align ?? presetConfig.value?.align)
-const justify = computed(() => props.justify ?? presetConfig.value?.justify)
-const container = computed(() => props.container ?? presetConfig.value?.container)
-const gap = computed(() => props.gap ?? presetConfig.value?.gap)
-const density = computed(() => props.density ?? presetConfig.value?.density)
-
-const layerZIndex: Record<LayerName, number> = {
-  back: 0,
-  mid: 10,
-  front: 20,
-  top: 30,
-}
-
-const aspectClasses: Record<AspectRatio, string> = {
-  '1/1': 'aspect-square',
-  '4/3': 'aspect-[4/3]',
-  '3/4': 'aspect-[3/4]',
-  '16/9': 'aspect-video',
-  '9/16': 'aspect-[9/16]',
-  '2/1': 'aspect-[2/1]',
-  '1/2': 'aspect-[1/2]',
-}
-
-const getDefaultValue = <T,>(value: T | ResponsiveValue<T> | undefined, defaultVal: T): T => {
-  if (value === undefined) return defaultVal
-  if (typeof value === 'object' && value !== null && 'default' in value) {
-    return value.default
+  // @ts-nocheck
+  /**
+   * BaseGridItem - Positions content on the Swiss Grid
+   *
+   * Places content on the parent section's grid using grid-column and grid-row.
+   * Supports responsive values, alignment, layering, bleed, and aspect ratios.
+   *
+   * @prop {string} as - HTML element to render (default: 'div')
+   * @prop {number | ResponsiveValue} colStart - Starting column (1-18)
+   * @prop {ColSpanValue | ResponsiveValue} colSpan - Columns to span (default: 'full')
+   * @prop {number | ResponsiveValue} rowStart - Starting row (1-12)
+   * @prop {number | ResponsiveValue} rowSpan - Number of rows to span (default: 1)
+   * @prop {Alignment} align - Vertical alignment (align-self): start, center, end, stretch
+   * @prop {Alignment} justify - Horizontal alignment (justify-self): start, center, end, stretch
+   * @prop {string} container - Content width constraint: content (65ch), wide (90rem), fluid, full
+   * @prop {string} gap - Override --grid-gap for nested content (e.g. '1rem', '2rem')
+   * @prop {string} density - Vertical rhythm: compact (2px), normal (4px), relaxed (8px)
+   * @prop {number} z - Explicit z-index value
+   * @prop {LayerName} layer - Semantic layer: back, mid, front, top
+   * @prop {BleedDirection} bleed - Edge bleed: left, right, both
+   * @prop {AspectRatio} aspect - Aspect ratio: 1/1, 4/3, 3/4, 16/9, 9/16, 2/1, 1/2
+   *
+   * @example
+   * <BaseGridItem
+   *   :col-start="{ default: 1, md: 2, lg: 3 }"
+   *   :col-span="{ default: 6, md: 8, lg: 10 }"
+   *   align="center"
+   *   justify="start"
+   *   layer="front"
+   * >
+   *   <h1>Content</h1>
+   * </BaseGridItem>
+   */
+
+  type ColSpanValue = number | 'full'
+  type Alignment = 'start' | 'center' | 'end' | 'stretch'
+  type LayerName = 'back' | 'mid' | 'front' | 'top'
+  type BleedDirection = 'left' | 'right' | 'both'
+  type AspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16' | '2/1' | '1/2'
+
+  interface ResponsiveValue<T> {
+    default: T
+    md?: T
+    lg?: T
   }
-  return value as T
-}
-
-const getResponsiveValue = <T,>(
-  value: T | ResponsiveValue<T> | undefined,
-  breakpoint: 'md' | 'lg'
-): T | undefined => {
-  if (value === undefined) return undefined
-  if (typeof value === 'object' && value !== null && 'default' in value) {
-    return value[breakpoint]
+
+  type ContainerSize = 'content' | 'wide' | 'fluid' | 'full'
+  type Density = 'compact' | 'normal' | 'relaxed'
+
+  interface Props {
+    preset?: string
+    as?: string
+    colStart?: number | ResponsiveValue<number>
+    colSpan?: ColSpanValue | ResponsiveValue<number>
+    rowStart?: number | ResponsiveValue<number>
+    rowSpan?: number | ResponsiveValue<number>
+    align?: Alignment
+    justify?: Alignment
+    container?: ContainerSize
+    gap?: string
+    density?: Density
+    z?: number
+    layer?: LayerName
+    bleed?: BleedDirection
+    aspect?: AspectRatio
   }
-  return undefined
-}
-
-const style = computed(() => {
-  const styles: Record<string, string> = {}
-
-  const colStartVal = getDefaultValue(colStart.value, undefined)
-  const colSpanVal = getDefaultValue(
-    colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined,
-    'full' as ColSpanValue
-  )
-  const rowStartVal = getDefaultValue(rowStart.value, undefined)
-  const rowSpanVal = getDefaultValue(rowSpan.value, 1)
-
-  if (props.bleed) {
-    if (props.bleed === 'both') {
-      styles.gridColumn = '1 / -1'
-      styles.marginInline = 'calc(-1 * var(--grid-padding))'
-    } else if (props.bleed === 'left') {
-      const spanNum = typeof colSpanVal === 'number' ? colSpanVal : undefined
-      styles.gridColumn = spanNum ? `1 / span ${spanNum}` : '1 / -1'
-      styles.marginInlineStart = 'calc(-1 * var(--grid-padding))'
-    } else if (props.bleed === 'right') {
-      styles.gridColumn = `${colStartVal ?? 'auto'} / -1`
-      styles.marginInlineEnd = 'calc(-1 * var(--grid-padding))'
-    }
-    styles.gridRow = `${rowStartVal ?? 'auto'} / span ${rowSpanVal}`
-  } else if (colSpanVal === 'full') {
-    // 'full' span: use inline gridColumn directly (no CSS var approach needed)
-    styles.gridColumn = `${colStartVal ?? 1} / -1`
-    // Still set row vars for responsive row support
-    styles['--_rs'] = String(rowStartVal ?? 'auto')
-    styles['--_re'] = String(rowSpanVal)
-
-    const mdRowStart = getResponsiveValue(rowStart.value, 'md')
-    const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
-    const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
-    const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
-
-    if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
-    if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
-    if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
-    if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
-  } else {
-    // Set CSS custom properties instead of grid-column/grid-row directly.
-    // The <style> block below reads these vars and applies them at each breakpoint,
-    // which correctly cascades without inline-style specificity conflicts.
-    styles['--_cs'] = String(colStartVal ?? 'auto')
-    styles['--_ce'] = String(colSpanVal)
-    styles['--_rs'] = String(rowStartVal ?? 'auto')
-    styles['--_re'] = String(rowSpanVal)
-
-    const mdColStart = getResponsiveValue(colStart.value, 'md')
-    const lgColStart = getResponsiveValue(colStart.value, 'lg')
-    const mdColSpan = getResponsiveValue(colSpan.value as ResponsiveValue<number> | undefined, 'md')
-    const lgColSpan = getResponsiveValue(colSpan.value as ResponsiveValue<number> | undefined, 'lg')
-    const mdRowStart = getResponsiveValue(rowStart.value, 'md')
-    const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
-    const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
-    const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
-
-    if (mdColStart !== undefined) styles['--_md-cs'] = String(mdColStart)
-    if (lgColStart !== undefined) styles['--_lg-cs'] = String(lgColStart)
-    if (mdColSpan !== undefined) styles['--_md-ce'] = String(mdColSpan)
-    if (lgColSpan !== undefined) styles['--_lg-ce'] = String(lgColSpan)
-    if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
-    if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
-    if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
-    if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
+
+  const props = defineProps<Props>()
+
+  const { as = 'div' } = props
+
+  // Get preset configuration if preset prop is provided
+  const { getPreset } = useGridConfig()
+  const presetConfig = computed(() => (props.preset ? getPreset(props.preset) : undefined))
+
+  // Merge preset values with explicit props (explicit props take precedence)
+  const colStart = computed(() => props.colStart ?? presetConfig.value?.colStart)
+  const colSpan = computed(() => props.colSpan ?? presetConfig.value?.colSpan ?? 'full')
+  const rowStart = computed(() => props.rowStart ?? presetConfig.value?.rowStart)
+  const rowSpan = computed(() => props.rowSpan ?? presetConfig.value?.rowSpan ?? 1)
+
+  // Preset-aware alignment computed refs
+  const align = computed(() => props.align ?? presetConfig.value?.align)
+  const justify = computed(() => props.justify ?? presetConfig.value?.justify)
+  const container = computed(() => props.container ?? presetConfig.value?.container)
+  const gap = computed(() => props.gap ?? presetConfig.value?.gap)
+  const density = computed(() => props.density ?? presetConfig.value?.density)
+
+  const layerZIndex: Record<LayerName, number> = {
+    back: 0,
+    mid: 10,
+    front: 20,
+    top: 30,
   }
 
-  // Content alignment
-  if (align.value || justify.value) {
-    styles.display = 'grid'
-    styles.width = '100%'
-    styles.height = '100%'
-    styles.placeItems = `${align.value ?? 'stretch'} ${justify.value ?? 'stretch'}`
+  const aspectClasses: Record<AspectRatio, string> = {
+    '1/1': 'aspect-square',
+    '4/3': 'aspect-[4/3]',
+    '3/4': 'aspect-[3/4]',
+    '16/9': 'aspect-video',
+    '9/16': 'aspect-[9/16]',
+    '2/1': 'aspect-[2/1]',
+    '1/2': 'aspect-[1/2]',
   }
 
-  // Gap override — cascades to nested content via --grid-gap
-  if (gap.value) styles['--grid-gap'] = gap.value
+  const getDefaultValue = <T,>(value: T | ResponsiveValue<T> | undefined, defaultVal: T): T => {
+    if (value === undefined) return defaultVal
+    if (typeof value === 'object' && value !== null && 'default' in value) {
+      return value.default
+    }
+    return value as T
+  }
 
-  // Density — sets --rhythm base unit for child spacing utilities
-  if (density.value) {
-    const rhythmMap: Record<Density, string> = {
-      compact: '0.125rem',
-      normal: '0.25rem',
-      relaxed: '0.5rem',
+  const getResponsiveValue = <T,>(
+    value: T | ResponsiveValue<T> | undefined,
+    breakpoint: 'md' | 'lg'
+  ): T | undefined => {
+    if (value === undefined) return undefined
+    if (typeof value === 'object' && value !== null && 'default' in value) {
+      return value[breakpoint]
     }
-    styles['--rhythm'] = rhythmMap[density.value]
+    return undefined
   }
 
-  // Z-index
-  const zIndex = props.z ?? (props.layer ? layerZIndex[props.layer] : undefined)
-  if (zIndex !== undefined) styles.zIndex = String(zIndex)
+  const style = computed(() => {
+    const styles: Record<string, string> = {}
+
+    const colStartVal = getDefaultValue(colStart.value, undefined)
+    const colSpanVal = getDefaultValue(
+      colSpan.value as ColSpanValue | ResponsiveValue<number> | undefined,
+      'full' as ColSpanValue
+    )
+    const rowStartVal = getDefaultValue(rowStart.value, undefined)
+    const rowSpanVal = getDefaultValue(rowSpan.value, 1)
+
+    if (props.bleed) {
+      if (props.bleed === 'both') {
+        styles.gridColumn = '1 / -1'
+        styles.marginInline = 'calc(-1 * var(--grid-padding))'
+      } else if (props.bleed === 'left') {
+        const spanNum = typeof colSpanVal === 'number' ? colSpanVal : undefined
+        styles.gridColumn = spanNum ? `1 / span ${spanNum}` : '1 / -1'
+        styles.marginInlineStart = 'calc(-1 * var(--grid-padding))'
+      } else if (props.bleed === 'right') {
+        styles.gridColumn = `${colStartVal ?? 'auto'} / -1`
+        styles.marginInlineEnd = 'calc(-1 * var(--grid-padding))'
+      }
+      styles.gridRow = `${rowStartVal ?? 'auto'} / span ${rowSpanVal}`
+    } else if (colSpanVal === 'full') {
+      // 'full' span: use inline gridColumn directly (no CSS var approach needed)
+      styles.gridColumn = `${colStartVal ?? 1} / -1`
+      // Still set row vars for responsive row support
+      styles['--_rs'] = String(rowStartVal ?? 'auto')
+      styles['--_re'] = String(rowSpanVal)
+
+      const mdRowStart = getResponsiveValue(rowStart.value, 'md')
+      const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
+      const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
+      const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
+
+      if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
+      if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
+      if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
+      if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
+    } else {
+      // Set CSS custom properties instead of grid-column/grid-row directly.
+      // The <style> block below reads these vars and applies them at each breakpoint,
+      // which correctly cascades without inline-style specificity conflicts.
+      styles['--_cs'] = String(colStartVal ?? 'auto')
+      styles['--_ce'] = String(colSpanVal)
+      styles['--_rs'] = String(rowStartVal ?? 'auto')
+      styles['--_re'] = String(rowSpanVal)
+
+      const mdColStart = getResponsiveValue(colStart.value, 'md')
+      const lgColStart = getResponsiveValue(colStart.value, 'lg')
+      const mdColSpan = getResponsiveValue(
+        colSpan.value as ResponsiveValue<number> | undefined,
+        'md'
+      )
+      const lgColSpan = getResponsiveValue(
+        colSpan.value as ResponsiveValue<number> | undefined,
+        'lg'
+      )
+      const mdRowStart = getResponsiveValue(rowStart.value, 'md')
+      const lgRowStart = getResponsiveValue(rowStart.value, 'lg')
+      const mdRowSpan = getResponsiveValue(rowSpan.value, 'md')
+      const lgRowSpan = getResponsiveValue(rowSpan.value, 'lg')
+
+      if (mdColStart !== undefined) styles['--_md-cs'] = String(mdColStart)
+      if (lgColStart !== undefined) styles['--_lg-cs'] = String(lgColStart)
+      if (mdColSpan !== undefined) styles['--_md-ce'] = String(mdColSpan)
+      if (lgColSpan !== undefined) styles['--_lg-ce'] = String(lgColSpan)
+      if (mdRowStart !== undefined) styles['--_md-rs'] = String(mdRowStart)
+      if (lgRowStart !== undefined) styles['--_lg-rs'] = String(lgRowStart)
+      if (mdRowSpan !== undefined) styles['--_md-re'] = String(mdRowSpan)
+      if (lgRowSpan !== undefined) styles['--_lg-re'] = String(lgRowSpan)
+    }
+
+    // Content alignment
+    if (align.value || justify.value) {
+      styles.display = 'grid'
+      styles.width = '100%'
+      styles.height = '100%'
+      styles.placeItems = `${align.value ?? 'stretch'} ${justify.value ?? 'stretch'}`
+    }
+
+    // Gap override — cascades to nested content via --grid-gap
+    if (gap.value) styles['--grid-gap'] = gap.value
+
+    // Density — sets --rhythm base unit for child spacing utilities
+    if (density.value) {
+      const rhythmMap: Record<Density, string> = {
+        compact: '0.125rem',
+        normal: '0.25rem',
+        relaxed: '0.5rem',
+      }
+      styles['--rhythm'] = rhythmMap[density.value]
+    }
+
+    // Z-index
+    const zIndex = props.z ?? (props.layer ? layerZIndex[props.layer] : undefined)
+    if (zIndex !== undefined) styles.zIndex = String(zIndex)
 
-  return styles
-})
+    return styles
+  })
 
-const classes = computed(() => {
-  const classList: string[] = ['gi-placed', '@container', '@container/item']
+  const classes = computed(() => {
+    const classList: string[] = ['gi-placed', '@container', '@container/item']
 
-  if (props.aspect) classList.push(aspectClasses[props.aspect])
-  if (container.value) classList.push(`layout-container-${container.value}`)
+    if (props.aspect) classList.push(aspectClasses[props.aspect])
+    if (container.value) classList.push(`layout-container-${container.value}`)
 
-  return classList.join(' ')
-})
+    return classList.join(' ')
+  })
 </script>
 
 <template>
@@ -236,25 +244,25 @@ const classes = computed(() => {
 </template>
 
 <style>
-/* stylelint-disable custom-property-pattern */
-.gi-placed {
-  grid-row: var(--_rs, auto) / span var(--_re, 1);
-  grid-column: var(--_cs, auto) / span var(--_ce, 1);
-}
-
-@media (width >= 48rem) {
+  /* stylelint-disable custom-property-pattern */
   .gi-placed {
-    grid-row: var(--_md-rs, var(--_rs, auto)) / span var(--_md-re, var(--_re, 1));
-    grid-column: var(--_md-cs, var(--_cs, auto)) / span var(--_md-ce, var(--_ce, 1));
+    grid-row: var(--_rs, auto) / span var(--_re, 1);
+    grid-column: var(--_cs, auto) / span var(--_ce, 1);
   }
-}
 
-@media (width >= 80rem) {
-  .gi-placed {
-    grid-row: var(--_lg-rs, var(--_md-rs, var(--_rs, auto))) / span
-      var(--_lg-re, var(--_md-re, var(--_re, 1)));
-    grid-column: var(--_lg-cs, var(--_md-cs, var(--_cs, auto))) / span
-      var(--_lg-ce, var(--_md-ce, var(--_ce, 1)));
+  @media (width >= 48rem) {
+    .gi-placed {
+      grid-row: var(--_md-rs, var(--_rs, auto)) / span var(--_md-re, var(--_re, 1));
+      grid-column: var(--_md-cs, var(--_cs, auto)) / span var(--_md-ce, var(--_ce, 1));
+    }
+  }
+
+  @media (width >= 80rem) {
+    .gi-placed {
+      grid-row: var(--_lg-rs, var(--_md-rs, var(--_rs, auto))) / span
+        var(--_lg-re, var(--_md-re, var(--_re, 1)));
+      grid-column: var(--_lg-cs, var(--_md-cs, var(--_cs, auto))) / span
+        var(--_lg-ce, var(--_md-ce, var(--_ce, 1)));
+    }
   }
-}
 </style>

package/layers/layout/app/components/Layout/Main.vue

@@ -1,36 +1,40 @@
 <script setup lang="ts">
-/**
- * LayoutMain — grid root container applying the `mastmain` utility.
- *
- * Use this component when you need an explicit wrapper element that owns the
- * Swiss Grid stacking context. The default layout can use it in place of a
- * raw `<main class="mastmain">`.
- *
- * When `mode` is `'disabled'`, falls back to a plain semantic `<main>` so the
- * page renders correctly without grid dependencies.
- *
- * @prop {string} tag — HTML element to render (default: 'main')
- *
- * @example
- * <LayoutMain>
- *   <LayoutSection>…</LayoutSection>
- * </LayoutMain>
- */
+  /**
+   * LayoutMain — grid root container applying the `mastmain` utility.
+   *
+   * Use this component when you need an explicit wrapper element that owns the
+   * Swiss Grid stacking context. The default layout can use it in place of a
+   * raw `<main class="mastmain">`.
+   *
+   * When `mode` is `'disabled'`, falls back to a plain semantic `<main>` so the
+   * page renders correctly without grid dependencies.
+   *
+   * @prop {string} tag — HTML element to render (default: 'main')
+   *
+   * @example
+   * <LayoutMain>
+   *   <LayoutSection>…</LayoutSection>
+   * </LayoutMain>
+   */
 
-interface Props {
-  tag?: string
-}
+  interface Props {
+    tag?: string
+  }
 
-const { tag = 'main' } = defineProps<Props>()
+  const { tag = 'main' } = defineProps<Props>()
 
-const { mode } = useGridConfig()
+  const { mode } = useGridConfig()
 </script>
 
 <template>
   <component
     :is="tag"
     :class="mode !== 'disabled' ? 'mastmain' : undefined"
-    :style="mode !== 'disabled' ? { paddingInline: 'var(--grid-padding, clamp(1rem, 2.5vw, 2rem))' } : undefined"
+    :style="
+      mode !== 'disabled'
+        ? { paddingInline: 'var(--grid-padding, clamp(1rem, 2.5vw, 2rem))' }
+        : undefined
+    "
   >
     <slot />
   </component>