feat: First commit

.gitignore

@@ -0,0 +1 @@
+node_modules

assets/styles/BoxL.module.styl

@@ -0,0 +1,24 @@
+.box-l
+  padding: var(--gap, 1.5rem)
+  border: var(--border-thin, .0625rem) solid var(--color-grey-light, #F0F0F0)
+  border-radius: var(--border-radius, .5rem)
+  color: var(--color-default, #595959)
+  background-color: #FFF
+  & *
+    color: inherit
+
+  &[compact]
+    overflow: hidden
+    padding: 0
+
+  &[transparent]
+    background-color: transparent
+
+  &[sharp]
+    border-radius: 0
+
+  &[borderless]
+    border-width: 0
+    border-color: transparent
+
+

assets/styles/CenterL.module.styl

@@ -0,0 +1,14 @@
+.center-l
+  box-sizing: content-box
+  margin-inline: auto
+  max-inline-size: var(--max-width, 65ch)
+  padding-inline-start: var(--gap, 1.5rem)
+  padding-inline-end: var(--gap, 1.5rem)
+
+  &[center-text]
+    text-align: center
+
+  &[intrinsic]
+    display:flex
+    flex-direction: column
+    align-items: center

assets/styles/ClusterL.module.styl

@@ -0,0 +1,21 @@
+.cluster-l
+  display: flex
+  flex-wrap: wrap
+  gap: var(--gap, 1.5rem)
+  justify-content: flex-start
+  align-items: center
+
+  &[center]
+    justify-content: center
+
+  &[end]
+    justify-content: flex-end
+
+  &[between]
+    justify-content: space-between
+
+  &[around]
+    justify-content: space-around
+
+  &[narrow]
+    gap: var(--s0, 1rem)

assets/styles/ModalL.module.styl

@@ -0,0 +1,10 @@
+.modal
+  position: fixed
+  inset-block-start: 50%
+  inset-inline-start: 50%
+  transform: translate(-50%, -50%)
+
+// .modal.contain
+//   overflow: auto
+//   max-inline-size: calc(100% - (var(--gap, 1.5rem) * 2))
+//   max-block-size: calc(100% - (var(--gap, 1.5rem) * 2))

assets/styles/RowL.module.styl

@@ -0,0 +1,6 @@
+.row-l:not(:last-child)
+  padding-block-end: var(--gap, 1.5rem)
+  border-bottom: var(--border-thin, .0625rem) solid var(--color-grey-light, #F0F0F0)
+
+  &[dashed]
+    border-bottom-style: dashed

assets/styles/StackL.module.styl

@@ -0,0 +1,20 @@
+.stack-l
+  display: flex
+  flex-direction: column
+  justify-content: flex-start
+
+  &[recursive] > *
+    margin-block: 0
+
+  & > * + *,
+  &[recursive] * + *
+    margin-block-start: var(--gap, 1.5rem)
+
+  &[squeezed] > * + *
+    margin-block-start: 0
+
+  &[compact] > * + *
+    margin-block-start: calc(var(--gap, 1.5rem) / 2)
+
+  &[wide] > * + *
+    margin-block-start: calc(var(--gap, 1.5rem) * 3)

components/BoxL.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+/**
+ * A simple box component
+ * @name 'BoxL'
+ * @version 1.0.0
+ */
+
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/BoxL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

components/CenterL.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+/**
+   * A component that can create a
+   * horizontally centered column
+   * @name 'CenterL'
+   * @version 1.0.0
+   */
+
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/CenterL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

components/ClusterL.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+/**
+   * A component that can create a
+   * horizontally centered column
+   * @name 'ClusterL'
+   * @version 1.0.0
+   */
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/ClusterL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

components/ModalL.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+/**
+   * A modal positioner
+   * @name 'ModalL'
+   * @version 1.0.0
+   */
+
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/ModalL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

components/RowL.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+/**
+   * A simple separator.
+   * @name 'RowL'
+   * @version 1.0.0
+   */
+
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/RowL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

components/StackL.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+/**
+ * The Stack layout primitive injects
+ * margin between elements via their
+ * common parent.
+ * @name 'StackL'
+ * @version 1.0.0
+ */
+
+import { defineComponent, h } from 'vue'
+import Styles from '../assets/styles/StackL.module.styl'
+
+export default defineComponent({
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup (props, { slots }) {
+    return () => h(props.tag, { class: Object.values(Styles) }, slots)
+  }
+})
+</script>

declarations.d.ts

@@ -0,0 +1 @@
+declare module '*.module.styl';

nuxt.config.ts

@@ -0,0 +1,3 @@
+export default defineNuxtConfig({
+  components: true
+})