origam 2.2.1 → 2.5.0

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

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamChart", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChart.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartAxis", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartAxis.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartBoxPlot", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartBoxPlot.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartBullet", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartBullet.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartCandlestick", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartCandlestick.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartCartesian", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartCartesian.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartGauge", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartGauge.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartHeatmap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartHeatmap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartHoneycomb", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartHoneycomb.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartLegend", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartLegend.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartMap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartMap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPareto", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPareto.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPictorial", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPictorial.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPolar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPolar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPolarBar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPolarBar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartPyramid", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartPyramid.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartRadar", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartRadar.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartRangeSelector", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartRangeSelector.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSankey", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSankey.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSparkline", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSparkline.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartStreamgraph", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartStreamgraph.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartSunburst", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartSunburst.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartTooltip", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartTooltip.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartTreemap", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartTreemap.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartVariwide", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartVariwide.default;
+  }
+});
+Object.defineProperty(exports, "OrigamChartWordCloud", {
+  enumerable: true,
+  get: function () {
+    return _OrigamChartWordCloud.default;
+  }
+});
+var _OrigamChart = _interopRequireDefault(require("./OrigamChart.vue"));
+var _OrigamChartCartesian = _interopRequireDefault(require("./OrigamChartCartesian.vue"));
+var _OrigamChartPolar = _interopRequireDefault(require("./OrigamChartPolar.vue"));
+var _OrigamChartRadar = _interopRequireDefault(require("./OrigamChartRadar.vue"));
+var _OrigamChartGauge = _interopRequireDefault(require("./OrigamChartGauge.vue"));
+var _OrigamChartPyramid = _interopRequireDefault(require("./OrigamChartPyramid.vue"));
+var _OrigamChartHoneycomb = _interopRequireDefault(require("./OrigamChartHoneycomb.vue"));
+var _OrigamChartTreemap = _interopRequireDefault(require("./OrigamChartTreemap.vue"));
+var _OrigamChartSankey = _interopRequireDefault(require("./OrigamChartSankey.vue"));
+var _OrigamChartWordCloud = _interopRequireDefault(require("./OrigamChartWordCloud.vue"));
+var _OrigamChartHeatmap = _interopRequireDefault(require("./OrigamChartHeatmap.vue"));
+var _OrigamChartSunburst = _interopRequireDefault(require("./OrigamChartSunburst.vue"));
+var _OrigamChartBoxPlot = _interopRequireDefault(require("./OrigamChartBoxPlot.vue"));
+var _OrigamChartPictorial = _interopRequireDefault(require("./OrigamChartPictorial.vue"));
+var _OrigamChartStreamgraph = _interopRequireDefault(require("./OrigamChartStreamgraph.vue"));
+var _OrigamChartCandlestick = _interopRequireDefault(require("./OrigamChartCandlestick.vue"));
+var _OrigamChartVariwide = _interopRequireDefault(require("./OrigamChartVariwide.vue"));
+var _OrigamChartPolarBar = _interopRequireDefault(require("./OrigamChartPolarBar.vue"));
+var _OrigamChartBullet = _interopRequireDefault(require("./OrigamChartBullet.vue"));
+var _OrigamChartPareto = _interopRequireDefault(require("./OrigamChartPareto.vue"));
+var _OrigamChartMap = _interopRequireDefault(require("./OrigamChartMap.vue"));
+var _OrigamChartSparkline = _interopRequireDefault(require("./OrigamChartSparkline.vue"));
+var _OrigamChartAxis = _interopRequireDefault(require("./OrigamChartAxis.vue"));
+var _OrigamChartLegend = _interopRequireDefault(require("./OrigamChartLegend.vue"));
+var _OrigamChartTooltip = _interopRequireDefault(require("./OrigamChartTooltip.vue"));
+var _OrigamChartRangeSelector = _interopRequireDefault(require("./OrigamChartRangeSelector.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -0,0 +1,26 @@
+export { default as OrigamChart } from './OrigamChart.vue';
+export { default as OrigamChartCartesian } from './OrigamChartCartesian.vue';
+export { default as OrigamChartPolar } from './OrigamChartPolar.vue';
+export { default as OrigamChartRadar } from './OrigamChartRadar.vue';
+export { default as OrigamChartGauge } from './OrigamChartGauge.vue';
+export { default as OrigamChartPyramid } from './OrigamChartPyramid.vue';
+export { default as OrigamChartHoneycomb } from './OrigamChartHoneycomb.vue';
+export { default as OrigamChartTreemap } from './OrigamChartTreemap.vue';
+export { default as OrigamChartSankey } from './OrigamChartSankey.vue';
+export { default as OrigamChartWordCloud } from './OrigamChartWordCloud.vue';
+export { default as OrigamChartHeatmap } from './OrigamChartHeatmap.vue';
+export { default as OrigamChartSunburst } from './OrigamChartSunburst.vue';
+export { default as OrigamChartBoxPlot } from './OrigamChartBoxPlot.vue';
+export { default as OrigamChartPictorial } from './OrigamChartPictorial.vue';
+export { default as OrigamChartStreamgraph } from './OrigamChartStreamgraph.vue';
+export { default as OrigamChartCandlestick } from './OrigamChartCandlestick.vue';
+export { default as OrigamChartVariwide } from './OrigamChartVariwide.vue';
+export { default as OrigamChartPolarBar } from './OrigamChartPolarBar.vue';
+export { default as OrigamChartBullet } from './OrigamChartBullet.vue';
+export { default as OrigamChartPareto } from './OrigamChartPareto.vue';
+export { default as OrigamChartMap } from './OrigamChartMap.vue';
+export { default as OrigamChartSparkline } from './OrigamChartSparkline.vue';
+export { default as OrigamChartAxis } from './OrigamChartAxis.vue';
+export { default as OrigamChartLegend } from './OrigamChartLegend.vue';
+export { default as OrigamChartTooltip } from './OrigamChartTooltip.vue';
+export { default as OrigamChartRangeSelector } from './OrigamChartRangeSelector.vue';

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

@@ -0,0 +1,26 @@
+export { default as OrigamChart } from "./OrigamChart.vue";
+export { default as OrigamChartCartesian } from "./OrigamChartCartesian.vue";
+export { default as OrigamChartPolar } from "./OrigamChartPolar.vue";
+export { default as OrigamChartRadar } from "./OrigamChartRadar.vue";
+export { default as OrigamChartGauge } from "./OrigamChartGauge.vue";
+export { default as OrigamChartPyramid } from "./OrigamChartPyramid.vue";
+export { default as OrigamChartHoneycomb } from "./OrigamChartHoneycomb.vue";
+export { default as OrigamChartTreemap } from "./OrigamChartTreemap.vue";
+export { default as OrigamChartSankey } from "./OrigamChartSankey.vue";
+export { default as OrigamChartWordCloud } from "./OrigamChartWordCloud.vue";
+export { default as OrigamChartHeatmap } from "./OrigamChartHeatmap.vue";
+export { default as OrigamChartSunburst } from "./OrigamChartSunburst.vue";
+export { default as OrigamChartBoxPlot } from "./OrigamChartBoxPlot.vue";
+export { default as OrigamChartPictorial } from "./OrigamChartPictorial.vue";
+export { default as OrigamChartStreamgraph } from "./OrigamChartStreamgraph.vue";
+export { default as OrigamChartCandlestick } from "./OrigamChartCandlestick.vue";
+export { default as OrigamChartVariwide } from "./OrigamChartVariwide.vue";
+export { default as OrigamChartPolarBar } from "./OrigamChartPolarBar.vue";
+export { default as OrigamChartBullet } from "./OrigamChartBullet.vue";
+export { default as OrigamChartPareto } from "./OrigamChartPareto.vue";
+export { default as OrigamChartMap } from "./OrigamChartMap.vue";
+export { default as OrigamChartSparkline } from "./OrigamChartSparkline.vue";
+export { default as OrigamChartAxis } from "./OrigamChartAxis.vue";
+export { default as OrigamChartLegend } from "./OrigamChartLegend.vue";
+export { default as OrigamChartTooltip } from "./OrigamChartTooltip.vue";
+export { default as OrigamChartRangeSelector } from "./OrigamChartRangeSelector.vue";

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -96,8 +96,8 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, 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 },
   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/Checkbox/OrigamCheckboxBtn.vue

@@ -69,10 +69,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  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 },
   ripple: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }

package/dist/src/components/Chip/OrigamChip.vue

@@ -93,11 +93,13 @@
 			</slot>
 		</div>
 
-		<div
+		<button
 				v-if="hasClose"
 				key="close"
+				:aria-label="t(closeLabel)"
 				class="origam-chip__close"
-				@click="handleClickClose"
+				type="button"
+				@click.stop="handleClickClose"
 		>
 			<slot
 					name="close"
@@ -106,13 +108,13 @@
 				<origam-icon
 						v-if="closeIcon"
 						key="close-icon"
-						:aria-label="t(closeLabel)"
 						:density="density"
 						:icon="closeIcon"
+						aria-hidden="true"
 						size="x-small"
 				/>
 			</slot>
-		</div>
+		</button>
 
 	</component>
 </template>
@@ -158,8 +160,8 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   tag: { type: String, required: false, default: "span" },
-  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 },
   ripple: { type: [Boolean, Object], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -204,7 +206,7 @@ const _props = defineProps({
   hover: { type: [Boolean, Object], required: false }
 });
 const props = useDefaults(_props);
-const emits = defineEmits(["click:close", "update:modelValue", "group:selected", "click", "click:prepend", "click:append"]);
+const emits = defineEmits(["update:modelValue", "click", "click:close", "click:append", "click:prepend", "group:selected"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();

package/dist/src/components/Chip/OrigamChipGroup.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 import { OrigamDefaultsProvider, OrigamSlideGroup } from "../../components";
-import { useGroup, useProps, useStyle } from "../../composables";
+import { useBorder, useGroup, useMargin, usePadding, useProps, useRounded, useStyle } from "../../composables";
 import { ORIGAM_CHIP_GROUP_KEY } from "../../consts";
 import { DIRECTION, MDI_ICONS } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
@@ -34,8 +34,8 @@ const props = defineProps({
   mandatory: { type: Boolean, required: false },
   max: { type: Number, required: false },
   selectedClass: { type: String, required: false, default: "origam-chip--selected" },
-  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 },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -75,6 +75,10 @@ defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
 const origamSlideGroupRef = ref();
 const { isSelected, select, next, prev, selected } = useGroup(props, ORIGAM_CHIP_GROUP_KEY);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const slotDefaults = computed(() => ({
   "origam-chip": {
     color: props.color,
@@ -90,6 +94,10 @@ const slideGroupProps = computed(() => {
 });
 const chipGroupStyles = computed(() => {
   return [
+    marginStyles.value,
+    paddingStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
     props.style
   ];
 });
@@ -99,6 +107,10 @@ const chipGroupClasses = computed(() => {
     {
       "origam-chip-group--column": props.column
     },
+    marginClasses.value,
+    paddingClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
     props.class
   ];
 });

package/dist/src/components/ClientOnly/OrigamClientOnly.vue

@@ -0,0 +1,28 @@
+<template>
+    <template v-if="isMounted">
+        <slot />
+    </template>
+    <template v-else>
+        <slot name="fallback">
+            <component
+                :is="placeholderTag"
+                v-if="placeholderTag"
+                :class="placeholderClass"
+                aria-hidden="true"
+            />
+        </slot>
+    </template>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+defineOptions({ name: "OrigamClientOnly" });
+defineProps({
+  placeholderTag: { type: String, required: false },
+  placeholderClass: { type: String, required: false }
+});
+const isMounted = ref(false);
+onMounted(() => {
+  isMounted.value = true;
+});
+</script>

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

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

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

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

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

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

package/dist/src/components/Clipboard/OrigamClipboard.vue

@@ -0,0 +1,195 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-clipboard"
+			:class="rootClasses"
+			:style="rootStyles"
+			data-cy="origam-clipboard"
+	>
+		<slot
+				:copy="handleCopy"
+				:copied="copied"
+				:error="error"
+		>
+			<button
+					type="button"
+					class="origam-clipboard__default-trigger"
+					:class="{ 'origam-clipboard__default-trigger--copied': copied }"
+					:disabled="disabled"
+					:aria-label="defaultAriaLabel"
+					data-cy="origam-clipboard-default-trigger"
+					@click="handleCopy"
+			>
+				<origam-icon
+						:icon="defaultIcon"
+						class="origam-clipboard__default-icon"
+						aria-hidden="true"
+				/>
+				<span
+						v-if="copied"
+						class="origam-clipboard__default-label"
+						aria-live="polite"
+				>{{ resolvedFeedbackText }}</span>
+			</button>
+		</slot>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed,
+  toRef
+} from "vue";
+import { OrigamIcon } from "../Icon";
+import { useBorder, useBothColor, useClipboard, useMargin, usePadding, useRounded } from "../../composables";
+import { MDI_ICONS } from "../../enums";
+const props = defineProps({
+  value: { type: String, required: true },
+  feedbackDuration: { type: Number, required: false, default: 2e3 },
+  feedbackText: { type: String, required: false, default: "Copied!" },
+  successText: { type: String, required: false, default: void 0 },
+  disabled: { 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: "span" },
+  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 },
+  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 },
+  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 },
+  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 }
+});
+const emit = defineEmits(["copy", "error"]);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { copy, copied, error } = useClipboard({
+  feedbackDuration: props.feedbackDuration
+});
+const resolvedFeedbackText = computed(() => props.successText ?? props.feedbackText ?? "Copied!");
+const defaultIcon = MDI_ICONS.CONTENT_COPY;
+const defaultAriaLabel = computed(
+  () => copied.value ? "Value copied to clipboard" : "Copy to clipboard"
+);
+async function handleCopy() {
+  if (props.disabled) return false;
+  const ok = await copy(props.value);
+  if (ok) {
+    emit("copy", props.value);
+  } else if (error.value) {
+    emit("error", error.value);
+  }
+  return ok;
+}
+const rootClasses = computed(() => [
+  {
+    "origam-clipboard--copied": copied.value,
+    "origam-clipboard--disabled": props.disabled
+  },
+  colorClasses.value,
+  borderClasses.value,
+  roundedClasses.value,
+  marginClasses.value,
+  paddingClasses.value,
+  props.class
+]);
+const rootStyles = computed(() => [
+  colorStyles.value,
+  borderStyles.value,
+  roundedStyles.value,
+  marginStyles.value,
+  paddingStyles.value,
+  props.style
+]);
+defineExpose({
+  copy: handleCopy,
+  copied,
+  error
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-clipboard {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--origam-clipboard__feedback---gap, 4px);
+	}
+
+	.origam-clipboard--disabled {
+		cursor: not-allowed;
+	}
+
+	.origam-clipboard__default-trigger {
+		all: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--origam-clipboard__feedback---gap, 4px);
+		padding: var(--origam-clipboard__feedback---padding-block, 4px)
+		         var(--origam-clipboard__feedback---padding-inline, 8px);
+		border-radius: var(--origam-clipboard__feedback---border-radius, 4px);
+		font-size: var(--origam-clipboard__feedback---font-size, 0.75rem);
+		font-weight: var(--origam-clipboard__feedback---font-weight, 500);
+		color: var(--origam-color__text---secondary);
+		transition: color var(--origam-clipboard__feedback---transition-duration, 160ms) ease,
+		            background-color var(--origam-clipboard__feedback---transition-duration, 160ms) ease;
+	}
+
+	.origam-clipboard__default-trigger:hover:not(:disabled) {
+		color: var(--origam-color__text---primary);
+		background-color: var(--origam-color__surface---raised);
+	}
+
+	.origam-clipboard__default-trigger:focus-visible {
+		outline: 2px solid var(--origam-color__action--primary---bg);
+		outline-offset: 2px;
+	}
+
+	.origam-clipboard__default-trigger:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.origam-clipboard__default-trigger--copied {
+		color: var(--origam-clipboard__feedback---color);
+		background-color: var(--origam-clipboard__feedback---bg-color);
+	}
+
+	.origam-clipboard__default-icon {
+		font-size: 1.125em;
+		line-height: 1;
+	}
+
+	.origam-clipboard__default-label {
+		font: inherit;
+	}
+</style>

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

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

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

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

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

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