origam 2.3.0 → 2.6.1

package/dist/src/components/Code/OrigamCode.vue

@@ -1,46 +1,47 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="codeClasses"
 			:style="codeStyles"
-			role="region"
-			:aria-label="ariaRegionLabel"
 	>
-		<div v-if="showHeader" class="origam-code__header">
+		<component :is="headerTag" v-if="showHeader" class="origam-code__header">
 			<slot
 					name="header"
 					:filename="filename"
 					:lang-name="lang"
 					:copy="handleCopy"
-					:copied="isCopied"
+					:copied="copied"
 			>
 				<span v-if="filename" class="origam-code__filename" data-cy="origam-code-filename">{{ filename }}</span>
 				<span v-else class="origam-code__lang-badge" data-cy="origam-code-lang">{{ lang }}</span>
-				<button
+				<origam-btn
 						v-if="copyable"
-						type="button"
+						variant="text"
 						class="origam-code__copy origam-code__copy--header"
+						:text="copyButtonLabel"
 						:aria-label="copyAriaLabel"
+						:style="copyBtnStyle"
 						aria-live="polite"
 						data-cy="origam-code-copy"
 						@click="handleCopy"
-				>
-					<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
-				</button>
+				/>
 			</slot>
-		</div>
+		</component>
 
-		<button
-				v-if="copyable && !showHeader"
-				type="button"
+		<origam-btn
+				v-if="copyable && !showHeader && !compact"
+				variant="text"
 				class="origam-code__copy origam-code__copy--floating"
+				:text="copyButtonLabel"
 				:aria-label="copyAriaLabel"
+				:style="copyBtnStyle"
 				aria-live="polite"
 				data-cy="origam-code-copy"
 				@click="handleCopy"
-		>
-			<span class="origam-code__copy-label">{{ copyButtonLabel }}</span>
-		</button>
+		/>
+
+		<span v-if="compact && prompt" class="origam-code__prompt" aria-hidden="true" data-cy="origam-code-prompt">{{ prompt }}</span>
 
 		<div class="origam-code__scroller" :style="scrollerStyles">
 			<pre class="origam-code__pre" :class="preClasses"><code
@@ -50,27 +51,45 @@
 			></code></pre>
 		</div>
 
-		<div v-if="$slots.footer" class="origam-code__footer">
+		<origam-btn
+				v-if="copyable && compact"
+				variant="text"
+				size="x-small"
+				class="origam-code__copy origam-code__copy--compact"
+				:icon="compactCopyIcon"
+				:aria-label="copyAriaLabel"
+				aria-live="polite"
+				data-cy="origam-code-copy"
+				@click="handleCopy"
+		/>
+
+		<footer v-if="$slots.footer" class="origam-code__footer">
 			<slot name="footer"/>
-		</div>
+		</footer>
 
 		<slot/>
 	</component>
 </template>
 
-<script setup>
-import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+<script lang="ts" setup>
+import { computed, onMounted, ref, toRef, useSlots, watch } from "vue";
+import { OrigamBtn } from "../../components";
 import {
   useBorder,
+  useBothColor,
+  useClipboard,
   useCode,
+  useDimension,
   useElevation,
+  useLocale,
   useMargin,
   usePadding,
   useRounded,
-  useTheme
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 import { CODE_DEFAULTS } from "../../consts";
-import { CODE_LANG, CODE_THEME } from "../../enums";
+import { CODE_LANG } from "../../enums";
 import { parseHighlightLines } from "../../utils";
 const props = defineProps({
   code: { type: String, required: false, default: void 0 },
@@ -78,15 +97,15 @@ const props = defineProps({
   lineNumbers: { type: Boolean, required: false, default: false },
   highlightLines: { type: [Array, String, null], required: false, default: null },
   copyable: { type: Boolean, required: false, default: true },
-  maxHeight: { type: [Number, String, null], required: false, default: null },
-  theme: { type: null, required: false, default: CODE_THEME.AUTO },
   format: { type: Boolean, required: false, default: false },
   wrap: { type: Boolean, required: false, default: false },
   filename: { type: String, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: false },
+  prompt: { 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" },
+  tag: { type: String, required: false, default: "figure" },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -115,7 +134,20 @@ const props = defineProps({
   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 }
+  marginInline: { type: [Boolean, Number, String], required: false },
+  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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emit = defineEmits(["copy"]);
 const slots = useSlots();
@@ -124,8 +156,11 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
-const { resolved: resolvedTheme } = useTheme();
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { dimensionStyles } = useDimension(props);
+const { typographyStyles } = useTypography(props, "code");
 const { highlight } = useCode();
+const { t } = useLocale();
 function extractSlotText() {
   const nodes = slots.default?.();
   if (!nodes || nodes.length === 0) return "";
@@ -170,11 +205,6 @@ const formattedCode = computed(() => {
 const codeRef = ref(null);
 const isHighlighting = ref(false);
 let _renderToken = 0;
-const themeName = computed(() => {
-  if (props.theme === CODE_THEME.LIGHT) return "light";
-  if (props.theme === CODE_THEME.DARK) return "dark";
-  return resolvedTheme.value === "dark" ? "dark" : "light";
-});
 const highlightedLines = computed(() => {
   const arr = parseHighlightLines(props.highlightLines);
   return new Set(arr);
@@ -183,7 +213,7 @@ async function rebuild() {
   const token = ++_renderToken;
   isHighlighting.value = true;
   try {
-    const html = await highlight(formattedCode.value, props.lang, themeName.value);
+    const html = await highlight(formattedCode.value, props.lang);
     if (token !== _renderToken) return;
     paintIntoDom(html);
   } finally {
@@ -201,11 +231,11 @@ function paintIntoDom(rawHtml) {
     const lineNo = i + 1;
     const isHl = highlightSet.has(lineNo) ? " origam-code__row--highlighted" : "";
     return `<span class="origam-code__row${isHl}" data-line="${lineNo}">${line || "&nbsp;"}</span>`;
-  }).join("\n");
+  }).join("");
   target.innerHTML = rows;
 }
 watch(
-  [formattedCode, () => props.lang, themeName],
+  [formattedCode, () => props.lang],
   () => {
     void rebuild();
   },
@@ -222,55 +252,29 @@ watch(highlightedLines, () => {
 onMounted(() => {
   void rebuild();
 });
-const isCopied = ref(false);
-let _copyTimeout = null;
-async function writeToClipboard(text) {
-  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-    }
-  }
-  try {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.setAttribute("readonly", "");
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(textarea);
-    return ok;
-  } catch {
-    return false;
-  }
-}
+const { copy, copied } = useClipboard({ feedbackDuration: CODE_DEFAULTS.copyFeedbackDurationMs });
 async function handleCopy() {
   const text = formattedCode.value;
-  const ok = await writeToClipboard(text);
-  if (!ok) return;
-  emit("copy", text);
-  isCopied.value = true;
-  if (_copyTimeout) clearTimeout(_copyTimeout);
-  _copyTimeout = setTimeout(() => {
-    isCopied.value = false;
-  }, CODE_DEFAULTS.copyFeedbackDurationMs);
+  if (await copy(text)) emit("copy", text);
 }
-onBeforeUnmount(() => {
-  if (_copyTimeout) clearTimeout(_copyTimeout);
-});
-const copyButtonLabel = computed(() => isCopied.value ? "Copied!" : "Copy");
-const copyAriaLabel = computed(() => isCopied.value ? "Code copied to clipboard" : "Copy code to clipboard");
-const ariaRegionLabel = computed(() => props.filename ? `Code block: ${props.filename}` : `Code block (${props.lang})`);
-const showHeader = computed(() => !!props.filename || !!slots.header);
+const copyButtonLabel = computed(
+  () => copied.value ? t("origam.code.copied", "Copied!") : t("origam.code.copy", "Copy")
+);
+const copyAriaLabel = computed(
+  () => copied.value ? t("origam.code.copiedAriaLabel", "Code copied to clipboard") : t("origam.code.copyAriaLabel", "Copy code to clipboard")
+);
+const copyBtnStyle = {
+  padding: "var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline)"
+};
+const showHeader = computed(() => !props.compact && (!!props.filename || !!slots.header || props.copyable));
+const compactCopyIcon = computed(() => copied.value ? "mdi-check" : "mdi-content-copy");
+const headerTag = computed(() => props.tag === "figure" ? "figcaption" : "div");
 const codeClasses = computed(() => [
   "origam-code",
-  `origam-code--theme-${themeName.value}`,
   `origam-code--lang-${props.lang}`,
   {
-    "origam-code--line-numbers": props.lineNumbers,
+    "origam-code--compact": props.compact,
+    "origam-code--line-numbers": props.lineNumbers && !props.compact,
     "origam-code--wrap": props.wrap,
     "origam-code--has-header": showHeader.value,
     "origam-code--copyable": props.copyable,
@@ -280,14 +284,17 @@ const codeClasses = computed(() => [
   roundedClasses.value,
   elevationClasses.value,
   paddingClasses.value,
-  marginClasses.value
+  marginClasses.value,
+  colorClasses.value
 ]);
 const codeStyles = computed(() => [
   borderStyles.value,
   roundedStyles.value,
   paddingStyles.value,
   marginStyles.value,
-  {}
+  colorStyles.value,
+  dimensionStyles.value,
+  typographyStyles.value
 ]);
 const preClasses = computed(() => ({
   "origam-code__pre--line-numbers": props.lineNumbers,
@@ -298,13 +305,14 @@ const scrollerStyles = computed(() => {
   const value = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
   return { "--origam-code---max-height": value, maxHeight: value };
 });
-defineExpose({ rebuild, isCopied, codeRef });
+defineExpose({ rebuild, copied, codeRef });
 </script>
 
 <style lang="scss">
 	.origam-code {
 		position: relative;
 		display: block;
+		margin: 0;
 		background-color: var(--origam-code---background-color);
 		color: var(--origam-code---color);
 		border: var(--origam-code---border-width) solid var(--origam-code---border-color);
@@ -314,6 +322,67 @@ defineExpose({ rebuild, isCopied, codeRef });
 		font-size: var(--origam-code---font-size);
 		line-height: var(--origam-code---line-height);
 		overflow: hidden;
+
+	}
+
+	/* Non-compact blocks lay their regions out as a vertical flex column so the
+	 * scroller fills the leftover height when the host CONSTRAINS the block
+	 * (grid cell, explicit height, max-height). With an auto height the column
+	 * collapses to content, so unconstrained consumers are unaffected. Scoped
+	 * to :not(.--compact) because the compact variant is an inline-flex ROW. */
+	.origam-code:not(.origam-code--compact) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.origam-code:not(.origam-code--compact) .origam-code__scroller {
+		flex: 1 1 auto;
+		min-height: 0;
+	}
+
+	.origam-code--compact {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--origam-code__compact---gap, 0.5rem);
+		padding: var(--origam-code__compact---padding-block) var(--origam-code__compact---padding-inline);
+		line-height: var(--origam-code__compact---line-height);
+		max-inline-size: 100%;
+	}
+
+	.origam-code--compact .origam-code__scroller {
+		overflow: hidden;
+		min-inline-size: 0;
+	}
+
+	.origam-code--compact .origam-code__pre,
+	.origam-code--compact .origam-code__code,
+	.origam-code--compact .origam-code__row {
+		min-height: 0;
+		white-space: nowrap;
+	}
+
+	.origam-code__prompt {
+		flex: none;
+		color: var(--origam-code__prompt---color);
+		user-select: none;
+	}
+
+	.origam-code__copy--compact {
+		flex: none;
+		--origam-btn---min-height: 0;
+		--origam-btn---min-width: 0;
+		--origam-btn---height: auto;
+		--origam-btn---padding-block: var(--origam-code__compact-copy---padding-block);
+		--origam-btn---padding-inline: var(--origam-code__compact-copy---padding-inline);
+		--origam-btn---border-radius: var(--origam-code__compact-copy---border-radius);
+		--origam-btn---font-size: var(--origam-code__compact-copy---font-size);
+		--origam-btn---color: var(--origam-code__copy---color);
+		--origam-btn---background-color: var(--origam-code__compact-copy---background-color);
+	}
+
+	.origam-code__copy--compact:hover {
+		--origam-btn---color: var(--origam-code__copy---color-hover);
+		background-color: var(--origam-code__copy---background-color-hover) !important;
 	}
 
 	.origam-code__header {
@@ -343,23 +412,18 @@ defineExpose({ rebuild, isCopied, codeRef });
 	}
 
 	.origam-code__copy {
-		all: unset;
-		box-sizing: border-box;
-		cursor: pointer;
-		display: inline-flex;
-		align-items: center;
+		--origam-btn---min-height: 0;
+		--origam-btn---min-width: 0;
+		--origam-btn---border-radius: var(--origam-code__copy---border-radius);
+		--origam-btn---font-size: var(--origam-code__copy---font-size);
+		--origam-btn---color: var(--origam-code__copy---color);
+		--origam-btn---background-color: var(--origam-code__copy---background-color);
 		gap: var(--origam-code__copy---gap);
-		padding: var(--origam-code__copy---padding-block) var(--origam-code__copy---padding-inline);
-		border-radius: var(--origam-code__copy---border-radius);
-		font-size: var(--origam-code__copy---font-size);
-		color: var(--origam-code__copy---color);
-		background-color: var(--origam-code__copy---background-color);
-		transition: color 120ms ease, background-color 120ms ease;
 	}
 
 	.origam-code__copy:hover {
-		color: var(--origam-code__copy---color-hover);
-		background-color: var(--origam-code__copy---background-color-hover);
+		--origam-btn---color: var(--origam-code__copy---color-hover);
+		background-color: var(--origam-code__copy---background-color-hover) !important;
 	}
 
 	.origam-code__copy--floating {
@@ -409,7 +473,7 @@ defineExpose({ rebuild, isCopied, codeRef });
 	.origam-code--line-numbers .origam-code__row {
 		counter-increment: line;
 		position: relative;
-		padding-inline-start: var(--origam-code__line-number---width);
+		padding-inline-start: var(--origam-code---line-number-width);
 	}
 
 	.origam-code--line-numbers .origam-code__row::before {
@@ -417,10 +481,11 @@ defineExpose({ rebuild, isCopied, codeRef });
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: var(--origam-code__line-number---width);
-		padding-right: var(--origam-code__line-number---padding-right);
+		box-sizing: border-box;
+		width: var(--origam-code---line-number-width);
+		padding-right: var(--origam-code---line-number-padding-right);
 		text-align: right;
-		color: var(--origam-code__line-number---color);
+		color: var(--origam-code---line-number-color);
 		user-select: none;
 		font-variant-numeric: tabular-nums;
 	}
@@ -447,3 +512,53 @@ defineExpose({ rebuild, isCopied, codeRef });
 		border-radius: 4px;
 	}
 </style>
+
+<style lang="scss">
+	/* Dual-theme shiki — UNSCOPED on purpose. shiki injects token spans
+	 * via v-html, so they don't carry the parent SFC's data-v scoping
+	 * attribute. A scoped selector (even :deep) doesn't reliably match
+	 * the deeply-nested untagged spans. An unscoped block keeps the
+	 * selector simple and reliable. We scope by the dedicated
+	 * `.origam-code__code` class instead — collisions are impossible.
+	 *
+	 * shiki output per token: `<span style="--shiki-light:#X;--shiki-dark:#Y">`.
+	 *
+	 * The DS theming is TWO-AXIS: `data-theme` carries the brand identity and
+	 * `data-mode` (always concrete: "light" | "dark") carries the light/dark
+	 * choice (see useTheme). The light/dark token swap MUST therefore key on
+	 * `data-mode`, NOT on `data-theme="dark"` — a brand theme like
+	 * `data-theme="brand"` is never named "dark", so the old selector silently
+	 * fell through to the `prefers-color-scheme` block and painted the dark
+	 * (near-white) github-dark foreground on a LIGHT surface whenever the OS
+	 * was in dark mode. We resolve `--shiki-light` by default, `--shiki-dark`
+	 * when `data-mode="dark"`. Legacy single-axis `data-theme="dark"` (no
+	 * `data-mode` present) is still honoured, and `prefers-color-scheme` is the
+	 * fallback ONLY when neither axis pins a choice (SSR / un-themed host). */
+	.origam-code__code span {
+		color: var(--shiki-light);
+	}
+
+	.origam-code .shiki {
+		background-color: var(--shiki-light-bg, transparent);
+	}
+
+	html[data-mode="dark"] .origam-code__code span,
+	html:not([data-mode])[data-theme="dark"] .origam-code__code span {
+		color: var(--shiki-dark);
+	}
+
+	html[data-mode="dark"] .origam-code .shiki,
+	html:not([data-mode])[data-theme="dark"] .origam-code .shiki {
+		background-color: var(--shiki-dark-bg, transparent);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		html:not([data-mode]):not([data-theme="light"]):not([data-theme="dark"]) .origam-code__code span {
+			color: var(--shiki-dark);
+		}
+
+		html:not([data-mode]):not([data-theme="light"]):not([data-theme="dark"]) .origam-code .shiki {
+			background-color: var(--shiki-dark-bg, transparent);
+		}
+	}
+</style>

package/dist/src/components/ColorPicker/OrigamColorPicker.vue

@@ -86,7 +86,7 @@
 	</origam-picker>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   OrigamColorPickerCanvas,
   OrigamColorPickerEdit,
@@ -141,8 +141,6 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
@@ -151,6 +149,8 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -167,8 +167,14 @@ const props = defineProps({
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   colorHsv: { type: [Object, null], required: false },
   dotSize: { type: [String, Number], required: false, default: 10 },
+  ariaLabel: { type: String, required: false },
   hideAlpha: { type: Boolean, required: false },
   mode: { type: null, required: false, default: COLOR_MODES_NAMES.RGBA },
   modes: { type: Array, required: false, default: () => [COLOR_MODES_NAMES.RGB, COLOR_MODES_NAMES.RGBA, COLOR_MODES_NAMES.HSL, COLOR_MODES_NAMES.HSLA, COLOR_MODES_NAMES.HEX, COLOR_MODES_NAMES.HEXA] },

package/dist/src/components/ColorPicker/OrigamColorPickerCanvas.vue

@@ -1,8 +1,13 @@
 <template>
 	<div
 			ref="resizeRef"
+			:aria-label="canvasAriaLabel"
+			:aria-valuetext="canvasAriaValueText"
 			:class="colorPickerCanvasClasses"
 			:style="colorPickerCanvasStyles"
+			role="application"
+			tabindex="0"
+			@keydown="handleKeyDown"
 			@mousedown="handleMouseDown"
 			@touchstart.passive="handleMouseDown"
 	>
@@ -10,6 +15,7 @@
 				ref="canvasRef"
 				:height="canvasHeight"
 				:width="canvasWidth"
+				aria-hidden="true"
 		/>
 		<template v-if="colorHsv">
 			<div
@@ -21,14 +27,16 @@
 	</div>
 </template>
 
-<script setup>
-import { useProps, useResizeObserver, useStyle } from "../../composables";
+<script lang="ts" setup>
+import { useLocale, useProps, useResizeObserver, useStyle } from "../../composables";
+import { KEYBOARD_VALUES } from "../../enums";
 import { clamp, convertToUnit, getEventCoordinates, int } from "../../utils";
 import { computed, onMounted, ref, shallowRef, StyleValue, watch } from "vue";
 const props = defineProps({
   colorHsv: { type: [Object, null], required: false },
   disabled: { type: Boolean, required: false },
   dotSize: { type: [String, Number], required: false },
+  ariaLabel: { type: String, 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 },
@@ -41,6 +49,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:colorHsv"]);
 const { filterProps } = useProps(props);
+const { t } = useLocale();
 const isInteracting = shallowRef(false);
 const canvasRef = ref();
 const { resizeRef } = useResizeObserver((entries) => {
@@ -118,6 +127,66 @@ const updateCanvas = () => {
   ctx.fillStyle = valueGradient;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 };
+const canvasAriaLabel = computed(() => {
+  return props.ariaLabel ?? t("origam.colorPicker.canvas.ariaLabel");
+});
+const canvasAriaValueText = computed(() => {
+  const s = Math.round((props.colorHsv?.s ?? 0) * 100);
+  const v = Math.round((props.colorHsv?.v ?? 0) * 100);
+  return t("origam.colorPicker.canvas.value", s, v);
+});
+const STEP_SMALL = 0.01;
+const STEP_LARGE = 0.05;
+const handleKeyDown = (e) => {
+  if (props.disabled) return;
+  const step = e.shiftKey ? STEP_LARGE : STEP_SMALL;
+  const hsv = props.colorHsv;
+  if (!hsv) return;
+  const { h, a } = hsv;
+  let { s, v } = hsv;
+  let handled = false;
+  switch (e.key) {
+    case KEYBOARD_VALUES.LEFT:
+      s = clamp(s - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.RIGHT:
+      s = clamp(s + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.UP:
+      v = clamp(v + step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.DOWN:
+      v = clamp(v - step, 0, 1);
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.HOME:
+      s = 0;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.END:
+      s = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEUP:
+      v = 1;
+      handled = true;
+      break;
+    case KEYBOARD_VALUES.PAGEDOWN:
+      v = 0;
+      handled = true;
+      break;
+  }
+  if (!handled) return;
+  e.preventDefault();
+  emits("update:colorHsv", { h, s, v, a });
+  _dotPosition.value = {
+    x: s * canvasWidth.value,
+    y: (1 - v) * canvasHeight.value
+  };
+};
 const handleMouseDown = (e) => {
   if (e.type === "mousedown") {
     e.preventDefault();
@@ -203,6 +272,12 @@ defineExpose({
 		overflow: hidden;
 		contain: content;
 		touch-action: none;
+		outline: none;
+
+		&:focus-visible {
+			outline: 2px solid var(--origam-color__border---focus);
+			outline-offset: 2px;
+		}
 
 		&__dot {
 			position: absolute;

package/dist/src/components/ColorPicker/OrigamColorPickerEdit.vue

@@ -28,7 +28,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn } from "../../components";
 import { useProps, useStyle } from "../../composables";
 import { COLOR_NULL, COLOR_PICKER_MODES } from "../../consts";
@@ -66,7 +66,7 @@ const inputsProps = computed(() => {
         emits("update:colorHsv", mode.from(getColor(color ?? mode.to(COLOR_NULL), target.value)));
       }
     };
-  });
+  }) ?? [];
 });
 const handleUpdateMode = () => {
   const mi = enabledModes.value.findIndex((m) => {

package/dist/src/components/ColorPicker/OrigamColorPickerPreview.vue

@@ -60,7 +60,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { OrigamBtn, OrigamSliderField } from "../../components";
 import { useProps, useVModel, useStyle } from "../../composables";
 import { COLOR_NULL, SUPPORTS_EYE_DROPPER } from "../../consts";