jouw-stem__design-system 0.1.0

package/src/components/ButtonBase/ButtonBase.vue

@@ -0,0 +1,96 @@
+<template>
+  <button
+    class="button"
+    :class="additionalClasses"
+    :disabled="isDisabled || isLoading"
+    :aria-disabled="isDisabled || isLoading"
+    :aria-busy="isLoading"
+    type="button"
+  >
+    <span v-if="isLoading" class="button__spinner" aria-hidden="true">
+      <svg class="button__spinner-icon" viewBox="0 0 24 24" fill="none">
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-dasharray="31.4 31.4"
+        />
+      </svg>
+    </span>
+    <i
+      v-else-if="icon && iconPosition === 'left'"
+      :class="icon"
+      class="button__icon button__icon--left"
+      aria-hidden="true"
+    ></i>
+    <span v-if="label" class="button__label">{{ label }}</span>
+    <i
+      v-if="icon && iconPosition === 'right' && !isLoading"
+      :class="icon"
+      class="button__icon button__icon--right"
+      aria-hidden="true"
+    ></i>
+  </button>
+</template>
+
+<style src="./ButtonBase.scss"></style>
+
+<script setup lang="ts">
+// Internal — wrapped by ButtonPrimary / ButtonSecondary / ButtonOutlined /
+// ButtonText. Carries no variant identity itself; consumers pick a
+// variant by importing one of the four wrapper components.
+import { computed } from "vue";
+
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonIconPosition = "left" | "right";
+export type ButtonShape =
+  | "rectangle" // default — radius.default (~5px)
+  | "rounded"   // softer corners
+  | "pill"      // fully rounded ends (9999px)
+  | "square"    // sharp 0px corners
+  | "circle";   // icon-only, 1:1 aspect
+
+interface Props {
+  label?: string;
+  icon?: string;
+  iconPosition?: ButtonIconPosition;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+}
+
+export type ButtonBaseProps = Props;
+
+// Native <button> click is what consumers wire up. The native event
+// bubbles regardless, but declaring it makes `click` a first-class
+// entry in the manifest so docs + usage-snippets pick it up.
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  icon: undefined,
+  iconPosition: "left",
+  size: "md",
+  shape: "rectangle",
+  isDisabled: false,
+  isLoading: false,
+});
+
+const additionalClasses = computed(() =>
+  [
+    `button--size-${props.size}`,
+    // `rectangle` is the resting state — no modifier, default radius applies.
+    props.shape !== "rectangle" && `button--shape-${props.shape}`,
+    props.isDisabled && "button--state-disabled",
+    props.isLoading && "button--state-loading",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/ButtonOutlined/ButtonOutlined.matrix.ts

@@ -0,0 +1,42 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.button-outlined',
+  baseQuery: { label: 'Click' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { label: 'Small',  size: 'sm' }, focusable: true },
+        { name: 'md', query: { label: 'Medium', size: 'md' }, focusable: true },
+        { name: 'lg', query: { label: 'Large',  size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Icon',
+      subvariants: [
+        { name: 'none',       query: { label: 'Click' },                                                    focusable: true },
+        { name: 'icon-only',  query: { label: '',      icon: 'pi pi-search',     'aria-label': 'Search' }, focusable: true },
+        { name: 'icon-left',  query: { label: 'Back',  icon: 'pi pi-arrow-left' },                          focusable: true },
+        { name: 'icon-right', query: { label: 'Next',  icon: 'pi pi-arrow-right', iconPosition: 'right' },       focusable: true }
+      ]
+    },
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'rectangle', query: { label: 'Click', shape: 'rectangle' }, focusable: true },
+        { name: 'rounded',   query: { label: 'Click', shape: 'rounded'   }, focusable: true },
+        { name: 'pill',      query: { label: 'Click', shape: 'pill'      }, focusable: true },
+        { name: 'square',    query: { label: 'Click', shape: 'square'    }, focusable: true },
+        { name: 'circle',    query: { label: '',      shape: 'circle', icon: 'pi pi-search', 'aria-label': 'Search' }, focusable: true }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',         attr: 'hover' },
+    { name: 'focus-visible', attr: 'focus-visible' },
+    { name: 'active',        attr: 'active' },
+    { name: 'disabled',      props: { isDisabled: 'true' } },
+    { name: 'loading',       props: { isLoading: 'true' } }
+  ]
+}

package/src/components/ButtonOutlined/ButtonOutlined.scss

@@ -0,0 +1,29 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: button-outlined;
+
+.#{$c} {
+  background-color: var(--button-outlined-background-default, $button-outlined-background-default);
+  border-color: var(--button-outlined-border-default, $button-outlined-border-default);
+  color: var(--button-outlined-text-default, $button-outlined-text-default);
+
+  &:hover:not(:disabled),
+  &[data-state~="hover"]:not(:disabled) {
+    background-color: var(--button-outlined-background-hover, $button-outlined-background-hover);
+    border-color: var(--button-outlined-border-hover, $button-outlined-border-hover);
+  }
+
+  &:active:not(:disabled),
+  &[data-state~="active"]:not(:disabled) {
+    background-color: var(--button-outlined-background-active, $button-outlined-background-active);
+    border-color: var(--button-outlined-border-active, $button-outlined-border-active);
+  }
+
+  &:disabled,
+  &.button--state-disabled {
+    background-color: var(--button-outlined-background-disabled, $button-outlined-background-disabled);
+    border-color: var(--button-outlined-border-disabled, $button-outlined-border-disabled);
+    color: var(--button-outlined-text-disabled, $button-outlined-text-disabled);
+    cursor: not-allowed;
+  }
+}

package/src/components/ButtonOutlined/ButtonOutlined.tokens.theme-dark.json

@@ -0,0 +1,60 @@
+{
+  "button-outlined": {
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button background"
+      },
+      "hover": {
+        "value": "{intent.secondary.hover}",
+        "type": "color",
+        "description": "Outlined button hover background"
+      },
+      "active": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Outlined button active/pressed background"
+      },
+      "disabled": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button disabled background"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Outlined button text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Outlined button disabled text color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button border"
+      },
+      "hover": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button hover border"
+      },
+      "active": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button active border"
+      },
+      "disabled": {
+        "value": "{neutral.300}",
+        "type": "color",
+        "description": "Outlined button disabled border"
+      }
+    }
+  }
+}

package/src/components/ButtonOutlined/ButtonOutlined.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,60 @@
+{
+  "button-outlined": {
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button background"
+      },
+      "hover": {
+        "value": "{intent.secondary.hover}",
+        "type": "color",
+        "description": "Outlined button hover background"
+      },
+      "active": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Outlined button active/pressed background"
+      },
+      "disabled": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button disabled background"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Outlined button text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Outlined button disabled text color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button border"
+      },
+      "hover": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button hover border"
+      },
+      "active": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button active border"
+      },
+      "disabled": {
+        "value": "#586e75",
+        "type": "color",
+        "description": "Outlined button disabled border"
+      }
+    }
+  }
+}

package/src/components/ButtonOutlined/ButtonOutlined.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,60 @@
+{
+  "button-outlined": {
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button background"
+      },
+      "hover": {
+        "value": "{intent.secondary.hover}",
+        "type": "color",
+        "description": "Outlined button hover background"
+      },
+      "active": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Outlined button active/pressed background"
+      },
+      "disabled": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button disabled background"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Outlined button text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Outlined button disabled text color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button border"
+      },
+      "hover": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button hover border"
+      },
+      "active": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button active border"
+      },
+      "disabled": {
+        "value": "#586e75",
+        "type": "color",
+        "description": "Outlined button disabled border"
+      }
+    }
+  }
+}

package/src/components/ButtonOutlined/ButtonOutlined.tokens.theme-light.json

@@ -0,0 +1,60 @@
+{
+  "button-outlined": {
+    "background": {
+      "default": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button background"
+      },
+      "hover": {
+        "value": "{intent.secondary.hover}",
+        "type": "color",
+        "description": "Outlined button hover background"
+      },
+      "active": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Outlined button active/pressed background"
+      },
+      "disabled": {
+        "value": "transparent",
+        "type": "color",
+        "description": "Outlined button disabled background"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Outlined button text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Outlined button disabled text color"
+      }
+    },
+    "border": {
+      "default": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button border"
+      },
+      "hover": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button hover border"
+      },
+      "active": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Outlined button active border"
+      },
+      "disabled": {
+        "value": "{neutral.300}",
+        "type": "color",
+        "description": "Outlined button disabled border"
+      }
+    }
+  }
+}

package/src/components/ButtonOutlined/ButtonOutlined.vue

@@ -0,0 +1,15 @@
+<template>
+  <ButtonBase v-bind="props" class="button-outlined" />
+</template>
+
+<style src="./ButtonOutlined.scss"></style>
+
+<script setup lang="ts">
+import ButtonBase, { type ButtonBaseProps } from "../ButtonBase/ButtonBase.vue";
+
+const props = defineProps<ButtonBaseProps>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>

package/src/components/ButtonPrimary/ButtonPrimary.matrix.ts

@@ -0,0 +1,42 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.button-primary',
+  baseQuery: { label: 'Click' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { label: 'Small',  size: 'sm' }, focusable: true },
+        { name: 'md', query: { label: 'Medium', size: 'md' }, focusable: true },
+        { name: 'lg', query: { label: 'Large',  size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Icon',
+      subvariants: [
+        { name: 'none',       query: { label: 'Click' },                                                    focusable: true },
+        { name: 'icon-only',  query: { label: '',      icon: 'pi pi-search',     'aria-label': 'Search' }, focusable: true },
+        { name: 'icon-left',  query: { label: 'Back',  icon: 'pi pi-arrow-left' },                          focusable: true },
+        { name: 'icon-right', query: { label: 'Next',  icon: 'pi pi-arrow-right', iconPosition: 'right' },       focusable: true }
+      ]
+    },
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'rectangle', query: { label: 'Click', shape: 'rectangle' }, focusable: true },
+        { name: 'rounded',   query: { label: 'Click', shape: 'rounded'   }, focusable: true },
+        { name: 'pill',      query: { label: 'Click', shape: 'pill'      }, focusable: true },
+        { name: 'square',    query: { label: 'Click', shape: 'square'    }, focusable: true },
+        { name: 'circle',    query: { label: '',      shape: 'circle', icon: 'pi pi-search', 'aria-label': 'Search' }, focusable: true }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',         attr: 'hover' },
+    { name: 'focus-visible', attr: 'focus-visible' },
+    { name: 'active',        attr: 'active' },
+    { name: 'disabled',      props: { isDisabled: 'true' } },
+    { name: 'loading',       props: { isLoading: 'true' } }
+  ]
+}

package/src/components/ButtonPrimary/ButtonPrimary.scss

@@ -0,0 +1,33 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: button-primary;
+
+// Polaris/M3 inverse pattern: monochrome solid fill that contrasts
+// with the surface (`surface.inverse`), label in `text.inverse`. No
+// gradient — the primary action reads as the most prominent shape on
+// the canvas in every theme.
+.#{$c} {
+  background: var(--button-primary-background-default, $button-primary-background-default);
+  border-color: var(--button-primary-border-default, $button-primary-border-default);
+  color: var(--button-primary-text-default, $button-primary-text-default);
+
+  &:hover:not(:disabled),
+  &[data-state~="hover"]:not(:disabled) {
+    background: var(--button-primary-background-hover, $button-primary-background-hover);
+    border-color: var(--button-primary-border-hover, $button-primary-border-hover);
+  }
+
+  &:active:not(:disabled),
+  &[data-state~="active"]:not(:disabled) {
+    background: var(--button-primary-background-active, $button-primary-background-active);
+    border-color: var(--button-primary-border-active, $button-primary-border-active);
+  }
+
+  &:disabled,
+  &.button--state-disabled {
+    background: var(--button-primary-background-disabled, $button-primary-background-disabled);
+    border-color: var(--button-primary-border-disabled, $button-primary-border-disabled);
+    color: var(--button-primary-text-disabled, $button-primary-text-disabled);
+    cursor: not-allowed;
+  }
+}

package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-dark.json

@@ -0,0 +1,20 @@
+{
+  "button-primary": {
+    "background": {
+      "default":  { "value": "{neutral.0}",   "type": "color", "description": "Primary button background — white, palette-step rest (Polaris/M3 inverse on dark canvas)" },
+      "hover":    { "value": "{neutral.100}", "type": "color", "description": "Primary button hover — neutral.100, one ramp step toward gray" },
+      "active":   { "value": "{neutral.200}", "type": "color", "description": "Primary button pressed — neutral.200, two steps" },
+      "disabled": { "value": "{neutral.700}", "type": "color", "description": "Primary button disabled background (state-exempt from rules)" }
+    },
+    "text": {
+      "default":  { "value": "{primary.900}", "type": "color", "description": "Primary button label — navy.900 on light fill" },
+      "disabled": { "value": "{neutral.400}", "type": "color", "description": "Primary button disabled label" }
+    },
+    "border": {
+      "default":  { "value": "{neutral.0}",   "type": "color", "description": "Primary button border — matches fill" },
+      "hover":    { "value": "{neutral.100}", "type": "color", "description": "Primary button hover border" },
+      "active":   { "value": "{neutral.200}", "type": "color", "description": "Primary button active border" },
+      "disabled": { "value": "{neutral.700}", "type": "color", "description": "Primary button disabled border" }
+    }
+  }
+}

package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,20 @@
+{
+  "button-primary": {
+    "background": {
+      "default":  { "value": "{intent.action.default}", "type": "color", "description": "Primary button — brightened Solarized blue #6cb0ee, ~7:1 vs base03 canvas (the previous neutral.950 pattern collapsed to invisible against base03 canvas; fixed 2026-05-12)" },
+      "hover":    { "value": "{intent.action.hover}",   "type": "color", "description": "Primary button hover — flip to cream for max contrast" },
+      "active":   { "value": "{intent.action.active}",  "type": "color", "description": "Primary button pressed" },
+      "disabled": { "value": "{intent.action.disabled}", "type": "color", "description": "Primary button disabled — state-exempt from 1.4.11" }
+    },
+    "text": {
+      "default":  { "value": "{text.inverse}", "type": "color", "description": "Primary button label — Solarized base03 dark text on the bright button fill" },
+      "disabled": { "value": "{text.inverse}", "type": "color", "description": "Primary button disabled label" }
+    },
+    "border": {
+      "default":  { "value": "{intent.action.default}", "type": "color", "description": "Primary button border — matches fill" },
+      "hover":    { "value": "{intent.action.hover}",   "type": "color", "description": "Primary button hover border" },
+      "active":   { "value": "{intent.action.active}",  "type": "color", "description": "Primary button active border" },
+      "disabled": { "value": "{intent.action.disabled}", "type": "color", "description": "Primary button disabled border" }
+    }
+  }
+}

package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,20 @@
+{
+  "button-primary": {
+    "background": {
+      "default":  { "value": "{neutral.950}", "type": "color", "description": "Primary button background — neutral.950 (HC inverse pattern)" },
+      "hover":    { "value": "{neutral.800}", "type": "color", "description": "Primary button hover — one ramp step lighter" },
+      "active":   { "value": "{neutral.700}", "type": "color", "description": "Primary button pressed — two steps lighter" },
+      "disabled": { "value": "{neutral.400}", "type": "color", "description": "Primary button disabled background (state-exempt from rules)" }
+    },
+    "text": {
+      "default":  { "value": "{neutral.0}", "type": "color", "description": "Primary button label — white" },
+      "disabled": { "value": "{neutral.0}", "type": "color", "description": "Primary button disabled label" }
+    },
+    "border": {
+      "default":  { "value": "{neutral.950}", "type": "color", "description": "Primary button border — matches fill" },
+      "hover":    { "value": "{neutral.800}", "type": "color", "description": "Primary button hover border" },
+      "active":   { "value": "{neutral.700}", "type": "color", "description": "Primary button active border" },
+      "disabled": { "value": "{neutral.400}", "type": "color", "description": "Primary button disabled border" }
+    }
+  }
+}

package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-light.json

@@ -0,0 +1,20 @@
+{
+  "button-primary": {
+    "background": {
+      "default":  { "value": "{primary.700}",           "type": "color", "description": "Primary button background — navy.700, palette-step rest" },
+      "hover":    { "value": "{primary.800}",           "type": "color", "description": "Primary button hover — navy.800, one ramp step darker" },
+      "active":   { "value": "{primary.900}",           "type": "color", "description": "Primary button pressed — navy.900, two steps darker" },
+      "disabled": { "value": "{neutral.200}",           "type": "color", "description": "Primary button disabled background (state-exempt from rules)" }
+    },
+    "text": {
+      "default":  { "value": "{neutral.0}",   "type": "color", "description": "Primary button label — white on dark fill" },
+      "disabled": { "value": "{neutral.500}", "type": "color", "description": "Primary button disabled label" }
+    },
+    "border": {
+      "default":  { "value": "{primary.700}", "type": "color", "description": "Primary button border — matches fill" },
+      "hover":    { "value": "{primary.800}", "type": "color", "description": "Primary button hover border" },
+      "active":   { "value": "{primary.900}", "type": "color", "description": "Primary button active border" },
+      "disabled": { "value": "{neutral.200}", "type": "color", "description": "Primary button disabled border" }
+    }
+  }
+}

package/src/components/ButtonPrimary/ButtonPrimary.vue

@@ -0,0 +1,15 @@
+<template>
+  <ButtonBase v-bind="props" class="button-primary" />
+</template>
+
+<style src="./ButtonPrimary.scss"></style>
+
+<script setup lang="ts">
+import ButtonBase, { type ButtonBaseProps } from "../ButtonBase/ButtonBase.vue";
+
+const props = defineProps<ButtonBaseProps>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>

package/src/components/ButtonSecondary/ButtonSecondary.matrix.ts

@@ -0,0 +1,42 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.button-secondary',
+  baseQuery: { label: 'Click' },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { label: 'Small',  size: 'sm' }, focusable: true },
+        { name: 'md', query: { label: 'Medium', size: 'md' }, focusable: true },
+        { name: 'lg', query: { label: 'Large',  size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Icon',
+      subvariants: [
+        { name: 'none',       query: { label: 'Click' },                                                    focusable: true },
+        { name: 'icon-only',  query: { label: '',      icon: 'pi pi-search',     'aria-label': 'Search' }, focusable: true },
+        { name: 'icon-left',  query: { label: 'Back',  icon: 'pi pi-arrow-left' },                          focusable: true },
+        { name: 'icon-right', query: { label: 'Next',  icon: 'pi pi-arrow-right', iconPosition: 'right' },       focusable: true }
+      ]
+    },
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'rectangle', query: { label: 'Click', shape: 'rectangle' }, focusable: true },
+        { name: 'rounded',   query: { label: 'Click', shape: 'rounded'   }, focusable: true },
+        { name: 'pill',      query: { label: 'Click', shape: 'pill'      }, focusable: true },
+        { name: 'square',    query: { label: 'Click', shape: 'square'    }, focusable: true },
+        { name: 'circle',    query: { label: '',      shape: 'circle', icon: 'pi pi-search', 'aria-label': 'Search' }, focusable: true }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',         attr: 'hover' },
+    { name: 'focus-visible', attr: 'focus-visible' },
+    { name: 'active',        attr: 'active' },
+    { name: 'disabled',      props: { isDisabled: 'true' } },
+    { name: 'loading',       props: { isLoading: 'true' } }
+  ]
+}