@astronox/core 0.1.0

package/src/composition/Grid/Grid.css

@@ -0,0 +1,314 @@
+.grid-container {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.grid {
+  display: grid;
+  min-width: 0;
+  align-items: var(--grid-align-items);
+  gap: var(--grid-gap);
+  justify-items: var(--grid-justify-items);
+}
+
+.grid[data-gap='none'] {
+  --grid-gap: 0;
+}
+
+.grid[data-gap='xs'] {
+  --grid-gap: var(--nox-space-2);
+}
+
+.grid[data-gap='sm'] {
+  --grid-gap: var(--nox-space-3);
+}
+
+.grid[data-gap='md'] {
+  --grid-gap: var(--nox-space-4);
+}
+
+.grid[data-gap='lg'] {
+  --grid-gap: var(--nox-space-5);
+}
+
+.grid[data-gap='xl'] {
+  --grid-gap: var(--nox-space-6);
+}
+
+.grid[data-layout='auto'] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--grid-min-track-width)), 1fr)
+  );
+}
+
+.grid[data-layout='fixed'] {
+  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='2']
+  > :last-child:nth-child(2n + 1) {
+  grid-column: span 2;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='3'] {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='3'] > * {
+  grid-column: span 2;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='3']
+  > :last-child:nth-child(3n + 1) {
+  grid-column: span 6;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='3']:has(
+    > :last-child:nth-child(3n + 2)
+  )
+  > :nth-last-child(-n + 2) {
+  grid-column: span 3;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='4'] {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='4'] > * {
+  grid-column: span 3;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='4']
+  > :last-child:nth-child(4n + 1) {
+  grid-column: span 12;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='4']:has(
+    > :last-child:nth-child(4n + 2)
+  )
+  > :nth-last-child(-n + 2) {
+  grid-column: span 6;
+}
+
+.grid[data-layout='fixed'][data-last-row='fill'][data-columns='4']:has(
+    > :last-child:nth-child(4n + 3)
+  )
+  > :nth-last-child(-n + 3) {
+  grid-column: span 4;
+}
+
+.grid[data-layout='content-sidebar'] {
+  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
+}
+
+.grid[data-rows] {
+  grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
+}
+
+@container (width < 24rem) {
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='sm'] {
+    grid-template-columns: 1fr;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='sm']
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='sm']
+    > [data-composition='grid-item'][data-position='sticky'] {
+    position: static;
+    padding-block-end: 0;
+    max-block-size: none;
+    overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='sm']
+    > [data-composition='grid-item'][data-collapse-order='first'] {
+    order: -1;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='sm']
+    > [data-composition='grid-item'][data-collapse-order='last'] {
+    order: 1;
+  }
+}
+
+@container (width < 36rem) {
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='md'] {
+    grid-template-columns: 1fr;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='md']
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='md']
+    > [data-composition='grid-item'][data-position='sticky'] {
+    position: static;
+    padding-block-end: 0;
+    max-block-size: none;
+    overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='md']
+    > [data-composition='grid-item'][data-collapse-order='first'] {
+    order: -1;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='md']
+    > [data-composition='grid-item'][data-collapse-order='last'] {
+    order: 1;
+  }
+}
+
+@container (width < 44rem) {
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='lg'] {
+    grid-template-columns: 1fr;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='lg']
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='lg']
+    > [data-composition='grid-item'][data-position='sticky'] {
+    position: static;
+    padding-block-end: 0;
+    max-block-size: none;
+    overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='lg']
+    > [data-composition='grid-item'][data-collapse-order='first'] {
+    order: -1;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='lg']
+    > [data-composition='grid-item'][data-collapse-order='last'] {
+    order: 1;
+  }
+}
+
+@container (width < 54rem) {
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='xl'] {
+    grid-template-columns: 1fr;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='xl']
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='xl']
+    > [data-composition='grid-item'][data-position='sticky'] {
+    position: static;
+    padding-block-end: 0;
+    max-block-size: none;
+    overflow: visible;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='xl']
+    > [data-composition='grid-item'][data-collapse-order='first'] {
+    order: -1;
+  }
+
+  .grid:is(
+      [data-layout='fixed'],
+      [data-layout='content-sidebar']
+    )[data-collapse-at='xl']
+    > [data-composition='grid-item'][data-collapse-order='last'] {
+    order: 1;
+  }
+}
+
+@container (width < 24rem) {
+  .grid[data-compact-columns] {
+    grid-template-columns: repeat(var(--grid-compact-columns), minmax(0, 1fr));
+  }
+
+  .grid[data-last-row='fill'][data-compact-columns] > * {
+    grid-column: auto;
+  }
+
+  .grid[data-last-row='fill'][data-compact-columns='2']
+    > :last-child:nth-child(2n + 1) {
+    grid-column: span 2;
+  }
+}

package/src/composition/GridItem/GridItem.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type GridItemAlignment = 'auto' | 'start' | 'center' | 'end' | 'stretch';
+type GridItemCollapseOrder = 'first' | 'last' | 'preserve';
+type GridItemSpan = 1 | 2 | 3 | 4;
+type GridItemSizing = 'auto' | 'fill-track';
+type GridItemPosition = 'static' | 'sticky';
+type GridItemElement = 'div' | 'li';
+type GridItemAttributes = HTMLAttributes<'div'> & HTMLAttributes<'li'>;
+
+type Props = Omit<GridItemAttributes, 'class' | 'style'> & {
+  as?: GridItemElement;
+  alignSelf?: GridItemAlignment;
+  class?: string;
+  collapseOrder?: GridItemCollapseOrder;
+  justifySelf?: GridItemAlignment;
+  position?: GridItemPosition;
+  sizing?: GridItemSizing;
+  span?: GridItemSpan;
+};
+
+const {
+  as: Element = 'div',
+  alignSelf = 'auto',
+  class: className,
+  collapseOrder = 'preserve',
+  justifySelf = 'auto',
+  position = 'static',
+  sizing = 'auto',
+  span = 1,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<Element
+  {...attrs}
+  class:list={['grid-item', className]}
+  data-composition="grid-item"
+  data-align-self={alignSelf}
+  data-collapse-order={collapseOrder}
+  data-justify-self={justifySelf}
+  data-position={position}
+  data-sizing={sizing}
+  data-span={span}
+>
+  <div class="grid-item__content">
+    <slot />
+  </div>
+</Element>

package/src/composition/GridItem/GridItem.css

@@ -0,0 +1,95 @@
+.grid-item {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+.grid-item__content {
+  min-width: 0;
+  min-height: 0;
+}
+
+.grid-item[data-align-self='start'] {
+  align-self: start;
+}
+
+.grid-item[data-align-self='center'] {
+  align-self: center;
+}
+
+.grid-item[data-align-self='end'] {
+  align-self: end;
+}
+
+.grid-item[data-align-self='stretch'] {
+  align-self: stretch;
+}
+
+.grid-item[data-justify-self='start'] {
+  justify-self: start;
+}
+
+.grid-item[data-justify-self='center'] {
+  justify-self: center;
+}
+
+.grid-item[data-justify-self='end'] {
+  justify-self: end;
+}
+
+.grid-item[data-justify-self='stretch'] {
+  justify-self: stretch;
+}
+
+.grid-item[data-position='sticky'] {
+  position: sticky;
+  z-index: 1;
+  top: var(--nox-layout-gap);
+  padding-block-end: var(--nox-border-width);
+  max-block-size: calc(
+    100vh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  max-block-size: calc(
+    100dvh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  align-self: start;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.grid-item[data-span='2'] {
+  grid-column: span 2;
+}
+
+.grid-item[data-span='3'] {
+  grid-column: span 3;
+}
+
+.grid-item[data-span='4'] {
+  grid-column: span 4;
+}
+
+.grid-item[data-sizing='fill-track'] {
+  --grid-item-fill-track-contain: size layout;
+  --grid-item-fill-track-content-block-size: 100%;
+  --grid-item-fill-track-content-inset: 0;
+  --grid-item-fill-track-content-position: absolute;
+  --grid-item-fill-track-overflow: hidden;
+
+  position: relative;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: var(--grid-item-fill-track-overflow);
+  contain: var(--grid-item-fill-track-contain);
+}
+
+.grid-item[data-sizing='fill-track'] > .grid-item__content {
+  position: var(--grid-item-fill-track-content-position);
+  inset: var(--grid-item-fill-track-content-inset);
+  display: grid;
+  inline-size: 100%;
+  block-size: var(--grid-item-fill-track-content-block-size);
+  min-inline-size: 0;
+  min-block-size: 0;
+}

package/src/composition/Inline/Inline.astro

@@ -0,0 +1,48 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+
+type InlineElement = 'div' | 'span' | 'section' | 'nav';
+type InlineAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+type InlineJustify = 'start' | 'center' | 'end' | 'between';
+type InlineGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type InlineAttributes = HTMLAttributes<'div'> &
+  HTMLAttributes<'span'> &
+  HTMLAttributes<'section'> &
+  HTMLAttributes<'nav'>;
+
+type Props = InlineAttributes & {
+  as?: InlineElement;
+  align?: InlineAlign;
+  gap?: InlineGap;
+  justify?: InlineJustify;
+  tone?: Tone;
+  wrap?: boolean;
+};
+
+const {
+  align = 'stretch',
+  as: Element = 'div',
+  class: className,
+  'data-tone': dataTone,
+  gap = 'none',
+  justify = 'start',
+  tone,
+  wrap = false,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<Element
+  {...attrs}
+  class:list={['inline', className]}
+  data-align={align}
+  data-composition="inline"
+  data-gap={gap}
+  data-justify={justify}
+  data-tone={resolvedTone}
+  data-wrap={wrap ? true : undefined}
+>
+  <slot />
+</Element>

package/src/composition/Inline/Inline.css

@@ -0,0 +1,65 @@
+.inline {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  gap: var(--inline-gap);
+}
+
+.inline[data-align='start'] {
+  align-items: flex-start;
+}
+
+.inline[data-align='center'] {
+  align-items: center;
+}
+
+.inline[data-align='end'] {
+  align-items: flex-end;
+}
+
+.inline[data-align='baseline'] {
+  align-items: baseline;
+}
+
+.inline[data-justify='center'] {
+  justify-content: center;
+}
+
+.inline[data-justify='end'] {
+  justify-content: flex-end;
+}
+
+.inline[data-justify='between'] {
+  justify-content: space-between;
+}
+
+.inline[data-wrap] {
+  flex-wrap: wrap;
+}
+
+.inline[data-gap='none'] {
+  --inline-gap: 0;
+}
+
+.inline[data-gap='xs'] {
+  --inline-gap: var(--nox-space-2);
+}
+
+.inline[data-gap='sm'] {
+  --inline-gap: var(--nox-space-3);
+}
+
+.inline[data-gap='md'] {
+  --inline-gap: var(--nox-space-4);
+}
+
+.inline[data-gap='lg'] {
+  --inline-gap: var(--nox-space-5);
+}
+
+.inline[data-gap='xl'] {
+  --inline-gap: var(--nox-space-6);
+}

package/src/composition/Stack/Stack.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+
+type StackElement = 'div' | 'form' | 'section' | 'nav';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackAttributes = HTMLAttributes<'div'> &
+  HTMLAttributes<'form'> &
+  HTMLAttributes<'section'> &
+  HTMLAttributes<'nav'>;
+
+type Props = StackAttributes & {
+  as?: StackElement;
+  gap?: StackGap;
+  tone?: Tone;
+};
+
+const {
+  as: Element = 'div',
+  class: className,
+  'data-tone': dataTone,
+  gap = 'md',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<Element
+  {...attrs}
+  class:list={['stack', className]}
+  data-composition="stack"
+  data-gap={gap}
+  data-tone={resolvedTone}
+>
+  <slot />
+</Element>

package/src/composition/Stack/Stack.css

@@ -0,0 +1,31 @@
+.stack {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  align-content: start;
+  gap: var(--stack-gap);
+}
+
+.stack[data-gap='none'] {
+  --stack-gap: 0;
+}
+
+.stack[data-gap='xs'] {
+  --stack-gap: var(--nox-space-2);
+}
+
+.stack[data-gap='sm'] {
+  --stack-gap: var(--nox-space-3);
+}
+
+.stack[data-gap='md'] {
+  --stack-gap: var(--nox-space-4);
+}
+
+.stack[data-gap='lg'] {
+  --stack-gap: var(--nox-space-5);
+}
+
+.stack[data-gap='xl'] {
+  --stack-gap: var(--nox-space-6);
+}

package/src/composition/SurfaceGroup/SurfaceGroup.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+
+type SurfaceGroupElement = 'div' | 'section' | 'nav';
+type SurfaceGroupAttributes = HTMLAttributes<'div'> &
+  HTMLAttributes<'section'> &
+  HTMLAttributes<'nav'>;
+
+type Props = SurfaceGroupAttributes & {
+  as?: SurfaceGroupElement;
+  tone?: Tone;
+};
+
+const {
+  as: Element = 'div',
+  class: className,
+  'data-tone': dataTone,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<Element
+  {...attrs}
+  class:list={['surface-group', className]}
+  data-composition="surface-group"
+  data-tone={resolvedTone}
+>
+  <slot />
+</Element>
+
+<script>
+  import { initStickySurfaceGroup } from './stickySurfaceGroupController';
+
+  for (const root of document.querySelectorAll(
+    '.surface-group:has(> [data-sticky-surface]):not([data-sticky-initialized])',
+  )) {
+    if (root instanceof HTMLElement) {
+      initStickySurfaceGroup(root);
+    }
+  }
+</script>