origam 2.3.0 → 2.5.0

package/dist/src/components/EmptyState/OrigamEmptyState.vue

@@ -0,0 +1,231 @@
+<template>
+	<component
+			:is="tag"
+			:class="emptyStateClasses"
+			:style="emptyStateStyles"
+			role="status"
+			aria-live="polite"
+	>
+		<slot v-if="hasDefaultSlot"/>
+
+		<template v-else>
+			<div
+					class="origam-empty-state__icon"
+					aria-hidden="true"
+			>
+				<slot name="icon">
+					<origam-icon
+							:icon="resolvedIcon"
+							class="origam-empty-state__icon-glyph"
+					/>
+				</slot>
+			</div>
+
+			<div
+					v-if="hasTitle"
+					class="origam-empty-state__title"
+			>
+				<slot name="title">{{ title }}</slot>
+			</div>
+
+			<div
+					v-if="hasDescription"
+					class="origam-empty-state__description"
+			>
+				<slot name="description">{{ description }}</slot>
+			</div>
+
+			<div
+					v-if="hasActions"
+					class="origam-empty-state__actions"
+			>
+				<slot name="actions"/>
+			</div>
+		</template>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  StyleValue,
+  useSlots
+} from "vue";
+import { OrigamIcon } from "../Icon";
+import { EMPTY_STATE_PRESET_CONFIG } from "../../consts/EmptyState/empty-state.const";
+const props = defineProps({
+  preset: { type: String, required: false, default: "no-data" },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: null, required: false },
+  iconColor: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  align: { type: String, required: false, default: "center" },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" }
+});
+const slots = useSlots();
+const presetConfig = computed(() => EMPTY_STATE_PRESET_CONFIG[props.preset]);
+const resolvedIcon = computed(() => props.icon ?? presetConfig.value.icon);
+const resolvedIntent = computed(() => props.iconColor ?? presetConfig.value.intent);
+const hasDefaultSlot = computed(() => Boolean(slots.default));
+const hasTitle = computed(() => Boolean(slots.title) || (props.title?.length ?? 0) > 0);
+const hasDescription = computed(() => Boolean(slots.description) || (props.description?.length ?? 0) > 0);
+const hasActions = computed(() => Boolean(slots.actions));
+const emptyStateClasses = computed(() => {
+  return [
+    "origam-empty-state",
+    `origam-empty-state--size-${props.size}`,
+    `origam-empty-state--align-${props.align}`,
+    `origam-empty-state--preset-${props.preset}`,
+    `origam-empty-state--intent-${resolvedIntent.value}`,
+    props.class
+  ];
+});
+const emptyStateStyles = computed(() => {
+  return [props.style];
+});
+defineExpose({
+  resolvedIcon,
+  resolvedIntent,
+  hasDefaultSlot,
+  hasTitle,
+  hasDescription,
+  hasActions
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-empty-state {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-md, var(--origam-empty-state---padding-block, 40px));
+		--origam-empty-state---resolved-padding-inline: var(--origam-empty-state---padding-inline, 24px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-md, var(--origam-empty-state---gap, 16px));
+		--origam-empty-state---resolved-max-width: var(--origam-empty-state---max-width, 480px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-md, var(--origam-empty-state__icon---size, 64px));
+		--origam-empty-state---resolved-icon-color: var(--origam-empty-state__icon---color, var(--origam-color__text---secondary, #525252));
+		--origam-empty-state---resolved-title-color: var(--origam-empty-state__title---color, var(--origam-color__text---primary, #171717));
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-md, var(--origam-empty-state__title---font-size, 1.25rem));
+		--origam-empty-state---resolved-description-color: var(--origam-empty-state__description---color, var(--origam-color__text---secondary, #525252));
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-md, var(--origam-empty-state__description---font-size, 1rem));
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--origam-empty-state---resolved-gap);
+		padding-block: var(--origam-empty-state---resolved-padding-block);
+		padding-inline: var(--origam-empty-state---resolved-padding-inline);
+		box-sizing: border-box;
+		width: 100%;
+	}
+
+	.origam-empty-state__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--origam-empty-state---resolved-icon-color);
+		font-size: var(--origam-empty-state---resolved-icon-size);
+		line-height: 1;
+	}
+
+	.origam-empty-state__icon-glyph {
+		font-size: inherit;
+		color: inherit;
+	}
+
+	.origam-empty-state__title {
+		color: var(--origam-empty-state---resolved-title-color);
+		font-family: var(--origam-empty-state__title---font-family, Inter, system-ui, sans-serif);
+		font-weight: var(--origam-empty-state__title---font-weight, 600);
+		font-size: var(--origam-empty-state---resolved-title-font-size);
+		line-height: var(--origam-empty-state__title---line-height, 1.375);
+		margin: 0;
+	}
+
+	.origam-empty-state__description {
+		color: var(--origam-empty-state---resolved-description-color);
+		font-family: var(--origam-empty-state__description---font-family, Inter, system-ui, sans-serif);
+		font-weight: var(--origam-empty-state__description---font-weight, 400);
+		font-size: var(--origam-empty-state---resolved-description-font-size);
+		line-height: var(--origam-empty-state__description---line-height, 1.625);
+		max-width: var(--origam-empty-state---resolved-max-width);
+		margin: 0;
+	}
+
+	.origam-empty-state__actions {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: var(--origam-empty-state__actions---gap, 12px);
+		margin-top: var(--origam-empty-state__actions---margin-top, 8px);
+	}
+
+	.origam-empty-state--align-center {
+		align-items: center;
+		text-align: center;
+	}
+
+	.origam-empty-state--align-center .origam-empty-state__description {
+		margin-inline: auto;
+	}
+
+	.origam-empty-state--align-left {
+		align-items: flex-start;
+		text-align: left;
+	}
+
+	.origam-empty-state--size-sm {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-sm, 24px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-sm, 12px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-sm, 48px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-sm, 1.125rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-sm, 0.875rem);
+	}
+
+	.origam-empty-state--size-md {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-md, 40px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-md, 16px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-md, 64px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-md, 1.25rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-md, 1rem);
+	}
+
+	.origam-empty-state--size-lg {
+		--origam-empty-state---resolved-padding-block: var(--origam-empty-state---padding-block-lg, 64px);
+		--origam-empty-state---resolved-gap: var(--origam-empty-state---gap-lg, 24px);
+		--origam-empty-state---resolved-icon-size: var(--origam-empty-state__icon---size-lg, 96px);
+		--origam-empty-state---resolved-title-font-size: var(--origam-empty-state__title---font-size-lg, 1.5rem);
+		--origam-empty-state---resolved-description-font-size: var(--origam-empty-state__description---font-size-lg, 1.125rem);
+	}
+
+	.origam-empty-state--intent-neutral {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-empty-state--intent-primary {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__action--primary---bg);
+	}
+
+	.origam-empty-state--intent-secondary {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__action--secondary---bg);
+	}
+
+	.origam-empty-state--intent-ghost {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__text---secondary);
+	}
+
+	.origam-empty-state--intent-success {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--success---bg);
+	}
+
+	.origam-empty-state--intent-warning {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--warning---bg);
+	}
+
+	.origam-empty-state--intent-danger {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--danger---bg);
+	}
+
+	.origam-empty-state--intent-info {
+		--origam-empty-state---resolved-icon-color: var(--origam-color__feedback--info---bg);
+	}
+</style>

package/dist/src/components/EmptyState/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _OrigamEmptyState.default;
+  }
+});
+var _OrigamEmptyState = _interopRequireDefault(require("./OrigamEmptyState.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamEmptyState } from './OrigamEmptyState.vue';

package/dist/src/components/EmptyState/index.js

@@ -0,0 +1 @@
+export { default as OrigamEmptyState } from "./OrigamEmptyState.vue";

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -120,8 +120,8 @@ const _props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -3,8 +3,11 @@
 		<component
 				:is="tag"
 				v-show="isSelected"
+				:aria-labelledby="`expansion-panel-header-${expansionPanel.id}`"
 				:class="expansionPanelContentClasses"
+				:id="`expansion-panel-content-${expansionPanel.id}`"
 				:style="expansionPanelContentStyles"
+				role="region"
 		>
 			<div class="origam-expansion-panel-content__wrapper">
 				<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
@@ -66,8 +69,8 @@ import { PROGRESS_TYPE } from "../../enums";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 const props = defineProps({
   content: { type: null, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelHeader.vue

@@ -2,9 +2,11 @@
 	<component
 			:is="tag"
 			v-ripple="ripple"
+			:aria-controls="`expansion-panel-content-${expansionPanel.id}`"
 			:aria-expanded="isSelected"
 			:class="expansionPanelHeaderClasses"
 			:disabled="isDisabled"
+			:id="`expansion-panel-header-${expansionPanel.id}`"
 			:style="expansionPanelHeaderStyles"
 			:tabindex="isDisabled ? -1 : undefined"
 			type="button"
@@ -106,8 +108,8 @@ const props = defineProps({
   static: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
   title: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "button" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/ExpansionPanel/OrigamExpansionPanels.vue

@@ -135,8 +135,8 @@ const props = defineProps({
   expandIcon: { type: null, required: false },
   collapseIcon: { type: null, required: false },
   hideActions: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },

package/dist/src/components/Field/OrigamField.vue

@@ -205,8 +205,8 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/FileField/OrigamFileField.vue

@@ -425,7 +425,7 @@ const _props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -443,7 +443,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/FileField/OrigamFileFieldDragNDropItem.vue

@@ -55,11 +55,11 @@ const _props = defineProps({
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
   showSize: { type: [Boolean, Number], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -55,11 +55,11 @@ const _props = defineProps({
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
   showSize: { type: [Boolean, Number], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);

package/dist/src/components/Grid/OrigamGrid.vue

@@ -0,0 +1,197 @@
+<template>
+	<component
+			:is="tag"
+			:class="gridClasses"
+			:style="gridStyles"
+	>
+		<slot/>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded
+} from "../../composables";
+import { GRID_GAP_SIZE_VAR } from "../../consts";
+const props = defineProps({
+  columns: { type: [Number, String, Array], required: false, default: "auto" },
+  rows: { type: [Number, String, Array], required: false, default: "auto" },
+  gap: { type: [String, Number], required: false, default: "md" },
+  columnGap: { type: [String, Number], required: false, default: void 0 },
+  rowGap: { type: [String, Number], required: false, default: void 0 },
+  areas: { type: [String, Array], required: false, default: void 0 },
+  autoFlow: { type: String, required: false, default: "row" },
+  autoColumns: { type: String, required: false, default: void 0 },
+  autoRows: { type: String, required: false, default: void 0 },
+  alignItems: { type: String, required: false, default: "stretch" },
+  justifyItems: { type: String, required: false, default: "stretch" },
+  alignContent: { type: String, required: false, default: void 0 },
+  justifyContent: { type: String, required: false, default: void 0 },
+  inline: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
+});
+const { filterProps } = useProps(props);
+const serialiseTracks = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 1) return void 0;
+    return `repeat(${Math.floor(value)}, 1fr)`;
+  }
+  if (Array.isArray(value)) return value.join(" ");
+  return String(value);
+};
+const columnsCss = computed(() => serialiseTracks(props.columns));
+const rowsCss = computed(() => serialiseTracks(props.rows));
+const areasCss = computed(() => {
+  const v = props.areas;
+  if (v == null) return void 0;
+  if (Array.isArray(v)) {
+    if (v.length === 0) return void 0;
+    return v.map((line) => `"${line}"`).join(" ");
+  }
+  return String(v);
+});
+const serialiseGap = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) return void 0;
+    return `${value}px`;
+  }
+  if (typeof value === "string") {
+    if (value in GRID_GAP_SIZE_VAR) return GRID_GAP_SIZE_VAR[value];
+    return value;
+  }
+  return void 0;
+};
+const gapCss = computed(() => serialiseGap(props.gap));
+const columnGapCss = computed(() => serialiseGap(props.columnGap));
+const rowGapCss = computed(() => serialiseGap(props.rowGap));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { dimensionStyles } = useDimension(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const gridStyles = computed(() => {
+  const style = {};
+  if (columnsCss.value) style["--origam-grid---template-columns"] = columnsCss.value;
+  if (rowsCss.value) style["--origam-grid---template-rows"] = rowsCss.value;
+  if (areasCss.value) style["--origam-grid---template-areas"] = areasCss.value;
+  if (gapCss.value) style["--origam-grid---gap"] = gapCss.value;
+  if (columnGapCss.value) style["--origam-grid---column-gap"] = columnGapCss.value;
+  if (rowGapCss.value) style["--origam-grid---row-gap"] = rowGapCss.value;
+  if (props.autoFlow) style["--origam-grid---auto-flow"] = props.autoFlow;
+  if (props.autoColumns) style["--origam-grid---auto-columns"] = props.autoColumns;
+  if (props.autoRows) style["--origam-grid---auto-rows"] = props.autoRows;
+  if (props.alignItems) style["--origam-grid---align-items"] = props.alignItems;
+  if (props.justifyItems) style["--origam-grid---justify-items"] = props.justifyItems;
+  if (props.alignContent) style["--origam-grid---align-content"] = props.alignContent;
+  if (props.justifyContent) style["--origam-grid---justify-content"] = props.justifyContent;
+  return [
+    style,
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
+});
+const gridClasses = computed(() => {
+  return [
+    "origam-grid",
+    {
+      "origam-grid--inline": props.inline
+    },
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
+});
+defineExpose({
+  filterProps,
+  columnsCss,
+  rowsCss,
+  areasCss,
+  gapCss,
+  columnGapCss,
+  rowGapCss
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-grid {
+		display: grid;
+		grid-template-columns: var(--origam-grid---template-columns, none);
+		grid-template-rows: var(--origam-grid---template-rows, none);
+		grid-template-areas: var(--origam-grid---template-areas, none);
+		grid-auto-flow: var(--origam-grid---auto-flow, row);
+		grid-auto-columns: var(--origam-grid---auto-columns, auto);
+		grid-auto-rows: var(--origam-grid---auto-rows, auto);
+		gap: var(--origam-grid---gap, var(--origam-grid---gap-md));
+		column-gap: var(--origam-grid---column-gap, var(--origam-grid---gap));
+		row-gap: var(--origam-grid---row-gap, var(--origam-grid---gap));
+		align-items: var(--origam-grid---align-items, stretch);
+		justify-items: var(--origam-grid---justify-items, stretch);
+		align-content: var(--origam-grid---align-content, normal);
+		justify-content: var(--origam-grid---justify-content, normal);
+
+		&--inline {
+			display: inline-grid;
+		}
+	}
+</style>

package/dist/src/components/Grid/OrigamGridItem.vue

@@ -0,0 +1,69 @@
+<template>
+	<component
+			:is="tag"
+			:class="itemClasses"
+			:style="itemStyles"
+	>
+		<slot/>
+	</component>
+</template>
+
+<script setup>
+import { computed, StyleValue } from "vue";
+const props = defineProps({
+  column: { type: [Object, String, Number], required: false, default: void 0 },
+  row: { type: [Object, String, Number], required: false, default: void 0 },
+  area: { type: String, required: false, default: void 0 },
+  alignSelf: { type: String, required: false, default: void 0 },
+  justifySelf: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" }
+});
+const serialiseLineSpec = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") return String(value);
+  if (typeof value === "string") return value;
+  const { start, end, span } = value;
+  const startPart = start != null ? String(start) : null;
+  let endPart = null;
+  if (span != null) endPart = `span ${span}`;
+  else if (end != null) endPart = String(end);
+  if (startPart != null && endPart != null) return `${startPart} / ${endPart}`;
+  if (startPart != null) return startPart;
+  if (endPart != null) return endPart;
+  return void 0;
+};
+const columnCss = computed(() => serialiseLineSpec(props.column));
+const rowCss = computed(() => serialiseLineSpec(props.row));
+const itemStyles = computed(() => {
+  const style = {};
+  if (props.area) {
+    style.gridArea = props.area;
+  } else {
+    if (columnCss.value) style.gridColumn = columnCss.value;
+    if (rowCss.value) style.gridRow = rowCss.value;
+  }
+  if (props.alignSelf) style.alignSelf = props.alignSelf;
+  if (props.justifySelf) style.justifySelf = props.justifySelf;
+  return [style, props.style];
+});
+const itemClasses = computed(() => {
+  return [
+    "origam-grid-item",
+    props.class
+  ];
+});
+defineExpose({
+  columnCss,
+  rowCss
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-grid-item {
+		min-width: 0;
+		min-height: 0;
+	}
+</style>

package/dist/src/components/Grid/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamGrid", {
+  enumerable: true,
+  get: function () {
+    return _OrigamGrid.default;
+  }
+});
+Object.defineProperty(exports, "OrigamGridItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamGridItem.default;
+  }
+});
+var _OrigamGrid = _interopRequireDefault(require("./OrigamGrid.vue"));
+var _OrigamGridItem = _interopRequireDefault(require("./OrigamGridItem.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrigamGrid } from './OrigamGrid.vue';
+export { default as OrigamGridItem } from './OrigamGridItem.vue';