@skewedaspect/sleekspace-ui 0.9.1 → 0.10.0

package/src/components/Input/SkInput.test.ts

@@ -0,0 +1,61 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkInput — input-group-size inject tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { mount } from '@vue/test-utils';
+import { computed, defineComponent, h, provide } from 'vue';
+import { describe, expect, it } from 'vitest';
+
+import { inputGroupSizeKey } from '@/composables/injectionKeys';
+
+import SkInput from './SkInput.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInput input-group-size inject', () =>
+{
+    it('uses injected size when no explicit size prop is set', () =>
+    {
+        const Provider = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inputGroupSizeKey, computed(() => 'lg'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(Provider, {
+            slots: { default: () => h(SkInput) },
+        });
+
+        const input = wrapper.find('input.sk-input');
+        expect(input.classes()).toContain('sk-lg');
+    });
+
+    it('explicit size prop overrides injected size', () =>
+    {
+        const Provider = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inputGroupSizeKey, computed(() => 'lg'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(Provider, {
+            slots: { default: () => h(SkInput, { size: 'sm' }) },
+        });
+
+        const input = wrapper.find('input.sk-input');
+        expect(input.classes()).toContain('sk-sm');
+        expect(input.classes()).not.toContain('sk-lg');
+    });
+
+    it('falls back to md when neither prop nor inject is set', () =>
+    {
+        const wrapper = mount(SkInput);
+        expect(wrapper.classes()).toContain('sk-md');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/Input/SkInput.vue

@@ -43,13 +43,20 @@
      * ```
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { computed, inject, toRef } from 'vue';
 
     // Types
     import type { ComponentCustomColors } from '@/types';
-    import type { SkInputKind, SkInputSize, SkInputType } from './types';
+    import type { SkInputCorner, SkInputKind, SkInputSize, SkInputType } from './types';
 
     // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
     import { useCustomColors } from '@/composables/useCustomColors';
 
     //------------------------------------------------------------------------------------------------------------------
@@ -79,6 +86,13 @@
          */
         size ?: SkInputSize;
 
+        /**
+         * Which corners receive the beveled cut. Pass an empty array for square corners.
+         * When omitted, defaults to the input's standalone visual (`top-right` only).
+         * @default undefined (renders as ['top-right'])
+         */
+        corners ?: SkInputCorner[];
+
         /**
          * Placeholder text displayed when the input is empty. Use to provide hints about expected
          * input format or example values. The placeholder disappears when the user begins typing.
@@ -131,7 +145,8 @@
     const props = withDefaults(defineProps<SkInputComponentProps>(), {
         type: 'text',
         kind: undefined,
-        size: 'md',
+        size: undefined,
+        corners: undefined,
         placeholder: undefined,
         disabled: false,
         readonly: false,
@@ -151,20 +166,40 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
-    // Inject kind from parent SkField if available
-    const fieldKind = inject<ComputedRef<SkInputKind | undefined>>('field-kind', computed(() => undefined));
+    // Validation override (SkField with `state` set) always wins. Inherited kind (an ambient
+    // provider like SkInputGroup) is the default when the dev didn't set `kind` themselves.
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
 
     //------------------------------------------------------------------------------------------------------------------
 
-    const effectiveKind = computed(() => fieldKind.value || props.kind || 'neutral');
+    const effectiveKind = computed<SkInputKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    const effectiveSize = computed<SkInputSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
 
     //------------------------------------------------------------------------------------------------------------------
 
     const classes = computed(() => ({
         'sk-input': true,
         [`sk-${ effectiveKind.value }`]: true,
-        [`sk-${ props.size }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
         'sk-readonly': props.readonly,
+        'sk-cut-top-left': props.corners?.includes('top-left') ?? false,
+        'sk-cut-top-right': props.corners?.includes('top-right') ?? false,
+        'sk-cut-bottom-right': props.corners?.includes('bottom-right') ?? false,
+        'sk-cut-bottom-left': props.corners?.includes('bottom-left') ?? false,
     }));
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Input/types.ts

@@ -3,9 +3,11 @@
 //----------------------------------------------------------------------------------------------------------------------
 
 import type { ComponentKind, ComponentSize } from '@/types';
+import type { SkCorner } from '@/types/corners';
 
 export type SkInputKind = ComponentKind;
 export type SkInputSize = ComponentSize;
 export type SkInputType = 'text' | 'email' | 'password' | 'url' | 'tel' | 'search' | 'number';
+export type SkInputCorner = SkCorner;
 
 //----------------------------------------------------------------------------------------------------------------------

package/src/components/InputGroup/SkInputGroup.test.ts

@@ -0,0 +1,171 @@
+//----------------------------------------------------------------------------------------------------------------------
+// SkInputGroup Tests
+//----------------------------------------------------------------------------------------------------------------------
+
+import { computed, defineComponent, h, inject, provide } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkInputGroup from './SkInputGroup.vue';
+import SkInputGroupAddon from './SkInputGroupAddon.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInputGroup', () =>
+{
+    it('renders a div with the group class and default classes', () =>
+    {
+        const wrapper = mount(SkInputGroup);
+        const div = wrapper.find('div.sk-input-group');
+        expect(div.exists()).toBe(true);
+        expect(div.classes()).toContain('sk-md');
+        expect(div.classes()).toContain('sk-neutral');
+    });
+
+    it('applies corner classes from corners prop', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { corners: [ 'top-left', 'bottom-right' ] },
+        });
+        const div = wrapper.find('div.sk-input-group');
+        expect(div.classes()).toContain('sk-cut-top-left');
+        expect(div.classes()).toContain('sk-cut-bottom-right');
+        expect(div.classes()).not.toContain('sk-cut-top-right');
+        expect(div.classes()).not.toContain('sk-cut-bottom-left');
+    });
+
+    it('provides input-group-size to children', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { size: 'lg' },
+            slots: { default: () => h(SkInputGroupAddon, null, { default: () => '$' }) },
+        });
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(addon.classes()).toContain('sk-lg');
+    });
+
+    it('provides inherited-kind to children', () =>
+    {
+        const wrapper = mount(SkInputGroup, {
+            props: { kind: 'primary' },
+            slots: { default: () => h(SkInputGroupAddon, null, { default: () => '$' }) },
+        });
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(addon.classes()).toContain('sk-primary');
+    });
+
+    it('inherits ambient kind from a parent inherited-kind provider', () =>
+    {
+        const AmbientStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inheritedKindKey, computed(() => 'accent'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(AmbientStub, {
+            slots: {
+                default: () => h(SkInputGroup, null, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-accent');
+        expect(addon.classes()).toContain('sk-accent');
+    });
+
+    it('explicit kind prop wins over ambient inherited-kind', () =>
+    {
+        const AmbientStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(inheritedKindKey, computed(() => 'accent'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(AmbientStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'success' }, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-success');
+        expect(addon.classes()).toContain('sk-success');
+        expect(addon.classes()).not.toContain('sk-accent');
+    });
+
+    it('parent validation-kind always wins over explicit kind', () =>
+    {
+        const FieldStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(validationKindKey, computed(() => 'danger'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(FieldStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'success' }, {
+                    default: () => h(SkInputGroupAddon, null, { default: () => '$' }),
+                }),
+            },
+        });
+
+        const group = wrapper.find('div.sk-input-group');
+        const addon = wrapper.find('span.sk-input-group-addon');
+        expect(group.classes()).toContain('sk-danger');
+        expect(addon.classes()).toContain('sk-danger');
+    });
+
+    it('re-provides inherited-kind from props.kind, not the validation-resolved kind', () =>
+    {
+        // The property under test: SkInputGroup's `inherited-kind` re-provide must use props.kind
+        // (or the parent's inherited-kind), NOT the validation-overridden effectiveKind. Otherwise
+        // a parent SkField's validation override would leak onto the inherited-kind channel and
+        // clobber descendants that consult only inherited-kind.
+        //
+        // To observe what the InputGroup actually puts on inherited-kind, we mount a synthetic
+        // probe inside the group that injects ONLY inherited-kind (no validation-kind) and
+        // surfaces the resolved value as a data attribute.
+        const Probe = defineComponent({
+            setup()
+            {
+                const seen = inject(inheritedKindKey, computed(() => 'NONE'));
+                return () => h('div', { 'data-seen': seen.value });
+            },
+        });
+
+        const FieldStub = defineComponent({
+            setup(_, { slots })
+            {
+                provide(validationKindKey, computed(() => 'danger'));
+                return () => h('div', slots.default ? slots.default() : []);
+            },
+        });
+
+        const wrapper = mount(FieldStub, {
+            slots: {
+                default: () => h(SkInputGroup, { kind: 'primary' }, {
+                    default: () => h(Probe),
+                }),
+            },
+        });
+
+        // The probe sees 'primary' (props.kind), not 'danger' (validation override).
+        expect(wrapper.find('[data-seen]').attributes('data-seen')).toBe('primary');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/InputGroup/SkInputGroup.vue

@@ -0,0 +1,131 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - InputGroup Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <div :class="classes" :style="customColorStyles">
+        <slot />
+    </div>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_input-group.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkInputGroup
+     * @description Wraps form inputs, buttons, selects, and SkInputGroupAddon children into a
+     * single visually unified control. Bevels appear only on the group's outer corners; interior
+     * joins are clean. Cascades kind and size to Vue children via provide/inject — size on the
+     * `input-group-size` channel, kind on the `inherited-kind` ambient-default channel. A
+     * parent SkField's validation override (the `validation-kind` channel) takes precedence over
+     * both the group's own kind and the descendants' kinds.
+     *
+     * @example
+     * ```vue
+     * <SkInputGroup :corners="['top-left', 'bottom-right']" size="md" kind="primary">
+     *     <SkInputGroupAddon>$</SkInputGroupAddon>
+     *     <SkInput v-model="amount" />
+     *     <SkButton>Submit</SkButton>
+     * </SkInputGroup>
+     * ```
+     *
+     * @slot default - Form components, SkButton, and SkInputGroupAddon children in left-to-right order.
+     */
+
+    import { computed, inject, provide, toRef } from 'vue';
+
+    // Types
+    import type {
+        SkInputGroupBaseProps,
+        SkInputGroupCorner,
+        SkInputGroupKind,
+        SkInputGroupSize,
+    } from './types';
+
+    export type { SkInputGroupComponentProps } from './types';
+
+    // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkInputGroupBaseProps>(), {
+        kind: undefined,
+        size: 'md',
+        corners: () => [ 'top-left', 'bottom-right' ],
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Same resolution rule as the leaf form components: validation override (from a parent
+    // SkField with `state` set) wins, then explicit prop, then ambient inherited-kind, then
+    // 'neutral'. Validation-kind passes through to descendants on its own channel — we never
+    // re-provide it.
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+
+    const effectiveKind = computed<SkInputGroupKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Re-provide on the inherited-kind channel so descendants pick up the group's prop-driven
+    // kind as their default. Use the prop directly (not the resolved value) so a parent SkField's
+    // validation override doesn't propagate as the group's "ambient default" and clobber children
+    // that have their own explicit kind.
+    const ambientKind = computed<SkInputGroupKind | undefined>(() =>
+    {
+        if(props.kind !== undefined) { return props.kind; }
+        return inheritedKind.value;
+    });
+    provide(inheritedKindKey, ambientKind);
+
+    // Size passes straight through to the input-group-size channel — no resolution to do.
+    const sizeRef = toRef(props, 'size');
+    provide(inputGroupSizeKey, sizeRef);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    function hasCorner(corner : SkInputGroupCorner) : boolean
+    {
+        return props.corners.includes(corner);
+    }
+
+    const classes = computed<Record<string, boolean>>(() => ({
+        'sk-input-group': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ sizeRef.value }`]: true,
+        'sk-cut-top-left': hasCorner('top-left'),
+        'sk-cut-top-right': hasCorner('top-right'),
+        'sk-cut-bottom-right': hasCorner('bottom-right'),
+        'sk-cut-bottom-left': hasCorner('bottom-left'),
+    }));
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'input-group',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/InputGroup/SkInputGroupAddon.test.ts

@@ -0,0 +1,104 @@
+import { type InjectionKey, computed, defineComponent, h, provide } from 'vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { inheritedKindKey, inputGroupSizeKey, validationKindKey } from '@/composables/injectionKeys';
+
+import SkInputGroupAddon from './SkInputGroupAddon.vue';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+function withProvides(
+    children : () => ReturnType<typeof h>,
+    provides : Map<InjectionKey<unknown>, unknown> = new Map<InjectionKey<unknown>, unknown>()
+) : ReturnType<typeof defineComponent>
+{
+    return defineComponent({
+        setup()
+        {
+            for(const [ key, value ] of provides)
+            {
+                provide(key, value);
+            }
+            return () => h('div', children());
+        },
+    });
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('SkInputGroupAddon', () =>
+{
+    it('renders a span with the addon class', () =>
+    {
+        const wrapper = mount(SkInputGroupAddon, { slots: { default: '$' } });
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.exists()).toBe(true);
+        expect(span.text()).toBe('$');
+    });
+
+    it('uses injected input-group-size when no explicit size is set', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, null, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([ [ inputGroupSizeKey, computed(() => 'lg') ] ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-lg');
+    });
+
+    it('uses injected inherited-kind when no explicit kind is set', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, null, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([ [ inheritedKindKey, computed(() => 'primary') ] ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-primary');
+    });
+
+    it('validation-kind always wins over explicit kind and inherited-kind', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, { kind: 'success' }, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([
+                [ validationKindKey, computed(() => 'danger') ],
+                [ inheritedKindKey, computed(() => 'primary') ],
+            ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-danger');
+        expect(span.classes()).not.toContain('sk-success');
+        expect(span.classes()).not.toContain('sk-primary');
+    });
+
+    it('explicit props override inherited-kind and input-group-size', () =>
+    {
+        const Provider = withProvides(
+            () => h(SkInputGroupAddon, { size: 'sm', kind: 'danger' }, { default: () => '$' }),
+            new Map<InjectionKey<unknown>, unknown>([
+                [ inputGroupSizeKey, computed(() => 'lg') ],
+                [ inheritedKindKey, computed(() => 'primary') ],
+            ])
+        );
+        const wrapper = mount(Provider);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-sm');
+        expect(span.classes()).toContain('sk-danger');
+        expect(span.classes()).not.toContain('sk-lg');
+        expect(span.classes()).not.toContain('sk-primary');
+    });
+
+    it('defaults to md/neutral when nothing is provided', () =>
+    {
+        const wrapper = mount(SkInputGroupAddon);
+        const span = wrapper.find('span.sk-input-group-addon');
+        expect(span.classes()).toContain('sk-md');
+        expect(span.classes()).toContain('sk-neutral');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------

package/src/components/InputGroup/SkInputGroupAddon.vue

@@ -0,0 +1,107 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - InputGroup Addon Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <span :class="classes">
+        <slot />
+    </span>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Component styles are implemented in /src/styles/components/_input-group.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component SkInputGroupAddon
+     * @description Styled wrapper for non-component content (text, icons, plain HTML) inside an
+     * SkInputGroup. Renders as a span with the addon background, border, and font sizing matching
+     * the surrounding group. Inherits size and kind from the parent SkInputGroup via inject.
+     *
+     * @example
+     * ```vue
+     * <SkInputGroup>
+     *     <SkInputGroupAddon>$</SkInputGroupAddon>
+     *     <SkInput v-model="amount" />
+     * </SkInputGroup>
+     * ```
+     *
+     * @slot default - Addon content. Text, icons, or any inline element.
+     */
+
+    import { computed, inject } from 'vue';
+
+    // Types
+    import type { SkInputGroupAddonKind, SkInputGroupAddonSize } from './types';
+
+    // Composables
+    import {
+        NO_KIND,
+        NO_SIZE,
+        inheritedKindKey,
+        inputGroupSizeKey,
+        validationKindKey,
+    } from '@/composables/injectionKeys';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    export interface SkInputGroupAddonComponentProps
+    {
+        /**
+         * Semantic color kind. Inherits from a parent SkInputGroup or SkField when not set.
+         * @default inherited or 'neutral'
+         */
+        kind ?: SkInputGroupAddonKind;
+
+        /**
+         * Size of the addon. Inherits from a parent SkInputGroup when not set.
+         * @default inherited or 'md'
+         */
+        size ?: SkInputGroupAddonSize;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkInputGroupAddonComponentProps>(), {
+        kind: undefined,
+        size: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const validationKind = inject(validationKindKey, NO_KIND);
+    const inheritedKind = inject(inheritedKindKey, NO_KIND);
+    const inputGroupSize = inject(inputGroupSizeKey, NO_SIZE);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const effectiveKind = computed<SkInputGroupAddonKind>(() =>
+    {
+        if(validationKind.value !== undefined) { return validationKind.value; }
+        if(props.kind !== undefined) { return props.kind; }
+        if(inheritedKind.value !== undefined) { return inheritedKind.value; }
+        return 'neutral';
+    });
+
+    const effectiveSize = computed<SkInputGroupAddonSize>(() =>
+    {
+        if(props.size !== undefined) { return props.size; }
+        if(inputGroupSize.value !== undefined) { return inputGroupSize.value; }
+        return 'md';
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed<Record<string, boolean>>(() => ({
+        'sk-input-group-addon': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        [`sk-${ effectiveSize.value }`]: true,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->