@openpen/module-api 1.3.0 → 1.5.0

package/dist/uikit/components/AppSegmented.vue.d.ts

@@ -2,13 +2,18 @@ interface Option {
     value: string;
     label: string;
     icon?: string;
+    /** Show only the icon; `label` becomes the accessible name and the tooltip. */
+    iconOnly?: boolean;
+    /** Tooltip text; defaults to `label` for icon-only options. */
+    tooltip?: string;
     testid?: string;
 }
 type __VLS_Props = {
     modelValue: string;
     options: Option[];
-    /** When true, all options are non-interactive and visually dimmed. */
     disabled?: boolean;
+    /** Accessible name of the whole group (e.g. "Head style"). */
+    ariaLabel?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/uikit/components/AppSelect.vue.d.ts

@@ -14,6 +14,12 @@ export interface AppSelectProps {
     placeholder: string;
     /** Whether the select is disabled. */
     disabled?: boolean;
+    /**
+     * Accessible name of the trigger button. Pass it whenever the select has no
+     * visible label of its own; otherwise a screen reader announces only the
+     * current value.
+     */
+    ariaLabel?: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<AppSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -21,6 +27,7 @@ declare const __VLS_export: import("vue").DefineComponent<AppSelectProps, {}, {}
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     disabled: boolean;
+    ariaLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/uikit/components/AppSlider.vue.d.ts

@@ -5,6 +5,11 @@ type __VLS_Props = {
     step?: number;
     /** Container width (e.g. '100%', '72px'). In vertical mode this sets the height. */
     width?: string;
+    /**
+     * Accessible name announced by screen readers when the thumb is focused.
+     * Pass it whenever the slider has no visible label of its own.
+     */
+    ariaLabel?: string;
     orientation?: 'horizontal' | 'vertical';
     trackHeight?: string;
     trackRadius?: string;
@@ -21,6 +26,13 @@ type __VLS_Props = {
      * startEdge/endEdge on SliderRange — no manual value transformation needed.
      */
     inverted?: boolean;
+    /**
+     * Text for the value bubble (e.g. "4px"). When set, a small bubble with this
+     * text appears above the thumb while the slider is being dragged and hides on
+     * release; it is also exposed to assistive technology as `aria-valuetext`.
+     * Horizontal sliders only. Leave unset for no bubble.
+     */
+    valueLabel?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
@@ -31,6 +43,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     min: number;
     max: number;
     step: number;
+    ariaLabel: string;
     orientation: "horizontal" | "vertical";
     trackHeight: string;
     trackRadius: string;
@@ -38,6 +51,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     thumbHeight: string;
     thumbRadius: string;
     inverted: boolean;
+    valueLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/uikit/components/AppSwatchPicker.vue.d.ts

@@ -0,0 +1,37 @@
+export interface SwatchColor {
+    /** CSS colour value, e.g. `#818CF8`. Compared case-insensitively with `modelValue`. */
+    value: string;
+    /** Accessible name announced for the swatch (for example `Indigo`). */
+    label: string;
+    /** Optional `data-testid` for the swatch button. */
+    testid?: string;
+}
+type __VLS_Props = {
+    /** Currently selected colour value (use `v-model`). */
+    modelValue: string;
+    colors: SwatchColor[];
+    /** Accessible name of the whole group. */
+    ariaLabel: string;
+    shape?: 'circular' | 'rounded' | 'square';
+    size?: 'small' | 'medium' | 'large';
+    /** Gap between swatches: `small` 6px, `medium` 8px. */
+    spacing?: 'small' | 'medium';
+    /** Swatch background override, for example a gradient. Defaults to the colour value. */
+    background?: (color: SwatchColor) => string;
+    disabled?: boolean;
+    testid?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    testid: string;
+    shape: "square" | "rounded" | "circular";
+    size: "small" | "medium" | "large";
+    spacing: "small" | "medium";
+    background: (color: SwatchColor) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uikit/components/AppToggleButton.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    /** Pressed state (use `v-model`). */
+    modelValue: boolean;
+    /** Accessible name. Required because the content is often a single glyph or icon. */
+    ariaLabel: string;
+    disabled?: boolean;
+    testid?: string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    testid: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/uikit/index.d.ts

@@ -12,17 +12,23 @@
  *   Note: you must manually handle modal-manager, animating guard,
  *   passthrough, and teleport target when walking this layer.
  *
- * Layer 3 — Escape Hatch (5% fully custom)
- *   Plugin installs reka-ui (or any library) directly in its own package.json.
- *   UIKit MUST NOT block this. Not handled here — plugin author's choice.
+ * Layer 3 — Custom Components (5% fully custom)
+ *   Plugin builds its own components on top of the Layer 2 primitives and the
+ *   --openpen-* design tokens. Plugins MUST NOT install or import reka-ui
+ *   directly; headless primitives come only from this entry point.
  *
  * See docs/uikit/index.md for the full trade-off description.
  */
 export { default as AppPopover } from './components/AppPopover.vue';
 export type { AppPopoverProps, Placement } from './components/AppPopover.vue';
+export { default as AppPopoverPanel } from './components/AppPopoverPanel.vue';
+export { default as AppPopoverRow } from './components/AppPopoverRow.vue';
 export { default as AppSlider } from './components/AppSlider.vue';
 export { default as AppToggle } from './components/AppToggle.vue';
 export { default as AppSegmented } from './components/AppSegmented.vue';
+export { default as AppSwatchPicker } from './components/AppSwatchPicker.vue';
+export type { SwatchColor } from './components/AppSwatchPicker.vue';
+export { default as AppToggleButton } from './components/AppToggleButton.vue';
 export { default as AppDialog } from './components/AppDialog.vue';
 export type { AppDialogProps } from './components/AppDialog.vue';
 export { useDialog } from './composables/useDialog';