@redseed/redseed-ui-vue3 8.53.0 → 8.55.0

package/index.js

@@ -36,6 +36,7 @@ export * from './src/components/MessageBox'
 export * from './src/components/MetaInfo'
 export * from './src/components/Modal'
 export * from './src/components/Pagination'
+export * from './src/components/Pill'
 export * from './src/components/Progress'
 export * from './src/components/Section'
 export * from './src/components/Skeleton'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.53.0",
+    "version": "8.55.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Pill/Pill.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { ref, computed, onMounted, watchEffect } from 'vue'
+
+const props = defineProps({
+    selected: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    // The name of a RUNTIME CSS custom property to use as the accent — applied as
+    // `var(--<color>, <neutral>)`, driving the icon-badge fill and the selected
+    // ring/tint. Pass a real runtime theme variable, e.g. the consuming app's
+    // palette (`color7` → `var(--color7)`). NOTE: RSUI's own Tailwind `@theme`
+    // color tokens (e.g. `--color-brand-500`) are inlined into utilities, not
+    // exposed as runtime vars, so they will NOT resolve here. An UNRESOLVABLE
+    // (undefined) token degrades to a neutral grey rather than an invisible pill;
+    // a token that *resolves* to `transparent`/empty is not caught — passing a
+    // real colour is the consumer's responsibility. Optional — falls back to a
+    // neutral accent when omitted, so RSUI stays theme-agnostic.
+    color: {
+        type: String,
+        default: '',
+    },
+    // Size ramp (dimensions from the RDS Refresh Figma). Booleans, only one
+    // applies at a time — matches the RSUI size-prop convention. Defaults to md.
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    xl: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['click'])
+
+// Resolve the single active size. Largest flag wins so a consumer passing more
+// than one still gets a defined result, and an unsized pill defaults to md.
+const activeSize = computed(() => {
+    if (props.xl) return 'xl'
+    if (props.lg) return 'lg'
+    if (props.md) return 'md'
+    if (props.sm) return 'sm'
+    if (props.xs) return 'xs'
+    return 'md'
+})
+
+// The single accent token colours both the icon badge and the selected
+// treatment. When no color is supplied we leave the property unset so the CSS
+// neutral fallback applies. When a color IS supplied it carries an inline
+// fallback to the neutral grey, so an UNRESOLVABLE (undefined) token degrades to
+// grey rather than an invisible badge/selection. Note: var()'s fallback does not
+// fire for a token that *resolves* to transparent/empty — passing a real colour
+// is the consumer's responsibility.
+const accentStyle = computed(() =>
+    props.color
+        ? { '--rsui-pill-accent': `var(--${props.color}, var(--Colors-Grey-500))` }
+        : {},
+)
+
+const pillClass = computed(() => [
+    'rsui-pill',
+    `rsui-pill--${activeSize.value}`,
+    {
+        'rsui-pill--selected': props.selected && !props.disabled,
+        'rsui-pill--disabled': props.disabled,
+    },
+])
+
+function handleClick(event) {
+    // Guarded — a disabled pill emits nothing even if a click reaches it.
+    if (props.disabled) return
+
+    emit('click', event)
+}
+
+// button element ref, used for the icon-only accessibility check
+const pillElementRef = ref(null)
+
+// an icon-only pill has no visible label text
+const iconOnly = computed(
+    () => pillElementRef.value && !pillElementRef.value.textContent.trim(),
+)
+
+// warn in development when an icon-only pill lacks an accessible name
+onMounted(() => {
+    watchEffect(() => {
+        if (
+            process.env.NODE_ENV !== 'production' &&
+            iconOnly.value &&
+            !pillElementRef.value.getAttribute('aria-label') &&
+            !pillElementRef.value.getAttribute('aria-labelledby')
+        ) {
+            console.warn(
+                '[RSUI] Icon-only Pill detected without aria-label. Add aria-label for accessibility.',
+            )
+        }
+    })
+})
+
+defineExpose({
+    pillElementRef,
+})
+</script>
+<template>
+<button
+    ref="pillElementRef"
+    :class="pillClass"
+    :style="accentStyle"
+    :disabled="props.disabled"
+    :aria-pressed="props.selected && !props.disabled"
+    type="button"
+    @click="handleClick"
+>
+    <span v-if="$slots.icon" class="rsui-pill__icon" aria-hidden="true">
+        <slot name="icon"></slot>
+    </span>
+
+    <slot></slot>
+</button>
+</template>

package/src/components/Pill/index.js

@@ -0,0 +1,5 @@
+import Pill from './Pill.vue'
+
+export {
+    Pill,
+}