From b70d035792901bb78c7d0f250fa3602ab78dcb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isaque=20B=C3=B6ck?= <isaquebockdos@gmail.com>
Date: Wed, 1 Jul 2026 12:56:53 -0300
Subject: [PATCH 1/2] [NO-ISSUE] refactor: replace Label Required tag with
 inline *Required indicator

The Required tag (severity=warning size=small) is replaced by inline
text 'asterisk + Required', where the asterisk uses var(--primary)
(orange F3652B) and the word Required uses var(--text-muted). The
asterisk is decorative (aria-hidden=true) so screen readers announce
only 'Required' alongside the label text.

Applies uniformly across every consumer of Label with required=true:
field-text, field-password, field-input-group, field-checkbox,
field-radio, field-switch, field-textarea. Tag component is no longer
imported by label.vue.

Spec body updated (Purpose, Props JSDoc, Tokens, Accessibility);
checksum refreshed to e261b72f (also fixes a pre-existing checksum
drift on label.md that the enforce-spec-exists hook flagged when this
change tried to write).
---
 .specs/label.md                                | 10 ++++++----
 .../src/components/inputs/label/label.vue      | 18 ++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/.specs/label.md b/.specs/label.md
index ffdd08204..2bf11e46b 100644
--- a/.specs/label.md
+++ b/.specs/label.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=562-6660
   node_id: 562:6660
-checksum: ece9d2e9709b3d49abc00122991f5409b5e98e3dfe85fc8c1bfcbb0f1add5dfd
+checksum: e261b72fa4b697ec15057be72d4a470106dba9efcf1e3daef9da429ff8d6010e
 created: 2026-06-15
 last_updated: 2026-06-15
 ---
@@ -16,7 +16,7 @@ last_updated: 2026-06-15
 
 ## Purpose
 
-Form-field label that pairs descriptive text with an optional `Required` badge. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled.
+Form-field label that pairs descriptive text with an optional required indicator. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled. The required indicator is rendered inline as `*Required` — the `*` in the primary orange, the word "Required" in muted text — replacing the older `Tag` badge for a lighter typographic signal.
 
 ## Usage
 
@@ -37,7 +37,7 @@ import InputText from '@aziontech/webkit/input-text'
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `value` | `string` | `''` | no | Fallback text when the default slot is empty. |
-| `required` | `boolean` | `false` | no | Appends a `Required` tag next to the label text. |
+| `required` | `boolean` | `false` | no | Appends an inline required indicator (`<span aria-hidden>*</span>Required`) next to the label text. The `*` uses `var(--primary)`; "Required" inherits `var(--text-muted)`. |
 
 ## Events
 
@@ -64,6 +64,8 @@ _none_
 |---|---|
 | typography | `.text-label-sm` |
 | color (text) | `var(--text-default)` |
+| color (required indicator "Required") | `var(--text-muted)` |
+| color (required indicator "*") | `var(--primary)` |
 | gap (required variant) | `var(--spacing-xxs)` |
 
 ## Theme gaps
@@ -76,7 +78,7 @@ _none_
 
 - Root is a native `<label>` element; consumers pass `for="<input-id>"` via attrs to associate it with the corresponding control.
 - Keyboard map: not focusable (decorative wrapper for native `<label>` semantics); clicking the label focuses the associated input via native browser behavior.
-- ARIA: the `Required` indicator is the existing `Tag` component (`severity="warning"`, `size="small"`, content `"Required"`) and is visible text — no extra ARIA needed; consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
+- ARIA: the required indicator is inline text (`*Required`). The `*` character is decorative and marked `aria-hidden="true"` so screen readers announce only "Required" together with the label text. Consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
 - Contrast ≥4.5:1 between `var(--text-default)` and `var(--bg-canvas)`; the warning tag inherits its own contrast guarantees.
 - `motion-reduce:transition-none motion-reduce:transform-none` not applicable (no motion).
 - Touch target: label itself is non-interactive; the associated input owns the ≥40×40 px target.
diff --git a/packages/webkit/src/components/inputs/label/label.vue b/packages/webkit/src/components/inputs/label/label.vue
index 3f620fb51..57c6b68f6 100644
--- a/packages/webkit/src/components/inputs/label/label.vue
+++ b/packages/webkit/src/components/inputs/label/label.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
   import { computed, useAttrs } from 'vue'
 
-  import Tag from '../../tag/tag.vue'
-
   defineOptions({
     name: 'Label',
     inheritAttrs: false
@@ -11,7 +9,7 @@
   interface Props {
     /** Fallback text when the default slot is empty. */
     value?: string
-    /** Appends a `Required` tag next to the label text. */
+    /** Appends a required indicator (an orange asterisk followed by the word "Required") next to the label text. */
     required?: boolean
   }
 
@@ -41,12 +39,16 @@
       <slot v-if="$slots['default']" />
       <template v-else-if="value">{{ value }}</template>
     </span>
-    <Tag
+    <span
       v-if="required"
-      value="Required"
-      severity="warning"
-      size="small"
       :data-testid="`${testId}__required`"
-    />
+      class="text-label-sm text-[var(--text-muted)]"
+    >
+      <span
+        aria-hidden="true"
+        class="text-[var(--primary)]"
+        >*</span
+      >Required
+    </span>
   </label>
 </template>

From 22a2c087cc03adf0ce58cad4b8473e4a3a9a3c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isaque=20B=C3=B6ck?= <isaquebockdos@gmail.com>
Date: Wed, 1 Jul 2026 13:03:28 -0300
Subject: [PATCH 2/2] [NO-ISSUE] fix: format Label required indicator as *
 (Required) with parentheses

Wrap the required word in parentheses and add a space between the
asterisk and the parenthesized text, producing '* (Required)' instead
of the previous '*Required'. The asterisk stays orange (var(--primary))
and (Required) stays muted (var(--text-muted)); the * remains
aria-hidden so screen readers still announce only '(Required)'.

Spec Purpose, Props JSDoc, Tokens, and Accessibility sections updated
to match; checksum refreshed.
---
 .specs/label.md                                       | 10 +++++-----
 packages/webkit/src/components/inputs/label/label.vue |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/.specs/label.md b/.specs/label.md
index 2bf11e46b..e5163f661 100644
--- a/.specs/label.md
+++ b/.specs/label.md
@@ -7,7 +7,7 @@ spec_version: 1
 figma:
   url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=562-6660
   node_id: 562:6660
-checksum: e261b72fa4b697ec15057be72d4a470106dba9efcf1e3daef9da429ff8d6010e
+checksum: 744bbcf186cef0f22e6259417644544988325d4d720b62a0ab2acd7ea2e6b6b7
 created: 2026-06-15
 last_updated: 2026-06-15
 ---
@@ -16,7 +16,7 @@ last_updated: 2026-06-15
 
 ## Purpose
 
-Form-field label that pairs descriptive text with an optional required indicator. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled. The required indicator is rendered inline as `*Required` — the `*` in the primary orange, the word "Required" in muted text — replacing the older `Tag` badge for a lighter typographic signal.
+Form-field label that pairs descriptive text with an optional required indicator. Renders a native `<label>` element so consumers can associate it with any input via the standard `for` attribute. Use it above (or beside) any input control in the `inputs` category to communicate the field name and whether it must be filled. The required indicator is rendered inline as `* (Required)` — the `*` in the primary orange followed by the parenthesized word "(Required)" in muted text — replacing the older `Tag` badge for a lighter typographic signal.
 
 ## Usage
 
@@ -37,7 +37,7 @@ import InputText from '@aziontech/webkit/input-text'
 | Prop | Type | Default | Required | JSDoc |
 |---|---|---|---|---|
 | `value` | `string` | `''` | no | Fallback text when the default slot is empty. |
-| `required` | `boolean` | `false` | no | Appends an inline required indicator (`<span aria-hidden>*</span>Required`) next to the label text. The `*` uses `var(--primary)`; "Required" inherits `var(--text-muted)`. |
+| `required` | `boolean` | `false` | no | Appends an inline required indicator (`<span aria-hidden>*</span> (Required)`) next to the label text. The `*` uses `var(--primary)`; "(Required)" inherits `var(--text-muted)`. |
 
 ## Events
 
@@ -64,7 +64,7 @@ _none_
 |---|---|
 | typography | `.text-label-sm` |
 | color (text) | `var(--text-default)` |
-| color (required indicator "Required") | `var(--text-muted)` |
+| color (required indicator "(Required)") | `var(--text-muted)` |
 | color (required indicator "*") | `var(--primary)` |
 | gap (required variant) | `var(--spacing-xxs)` |
 
@@ -78,7 +78,7 @@ _none_
 
 - Root is a native `<label>` element; consumers pass `for="<input-id>"` via attrs to associate it with the corresponding control.
 - Keyboard map: not focusable (decorative wrapper for native `<label>` semantics); clicking the label focuses the associated input via native browser behavior.
-- ARIA: the required indicator is inline text (`*Required`). The `*` character is decorative and marked `aria-hidden="true"` so screen readers announce only "Required" together with the label text. Consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
+- ARIA: the required indicator is inline text (`* (Required)`). The `*` character is decorative and marked `aria-hidden="true"` so screen readers announce only "(Required)" together with the label text. Consumers that wire the input with `aria-required="true"` keep the programmatic state in sync.
 - Contrast ≥4.5:1 between `var(--text-default)` and `var(--bg-canvas)`; the warning tag inherits its own contrast guarantees.
 - `motion-reduce:transition-none motion-reduce:transform-none` not applicable (no motion).
 - Touch target: label itself is non-interactive; the associated input owns the ≥40×40 px target.
diff --git a/packages/webkit/src/components/inputs/label/label.vue b/packages/webkit/src/components/inputs/label/label.vue
index 57c6b68f6..77e3e97ce 100644
--- a/packages/webkit/src/components/inputs/label/label.vue
+++ b/packages/webkit/src/components/inputs/label/label.vue
@@ -48,7 +48,8 @@
         aria-hidden="true"
         class="text-[var(--primary)]"
         >*</span
-      >Required
+      >
+      (Required)
     </span>
   </label>
 </template>