@1024pix/pix-ui 57.0.0 → 57.0.1

package/addon/components/pix-label.gjs

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+
+export default class PixLabel extends Component {
+  get className() {
+    const classes = ['pix-label'];
+
+    if (this.args.screenReaderOnly) classes.push('screen-reader-only');
+    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
+    if (this.args.isDisabled) classes.push('pix-label--disabled');
+
+    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
+
+    classes.push(`pix-label--${size}`);
+
+    return classes.join(' ');
+  }
+
+  <template>
+    {{#if @useAsLegend}}
+      <legend class={{this.className}} ...attributes>
+        <ChoreLabel @requiredLabel={{@requiredLabel}} @subLabel={{@subLabel}}>{{yield}}</ChoreLabel>
+      </legend>
+    {{else}}
+      <label for={{@for}} class={{this.className}} ...attributes>
+        <ChoreLabel @requiredLabel={{@requiredLabel}} @subLabel={{@subLabel}}>{{yield}}</ChoreLabel>
+      </label>
+    {{/if}}
+  </template>
+}
+
+const ChoreLabel = <template>
+  {{yield}}
+  {{#if @requiredLabel}}
+    <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+  {{/if}}
+
+  {{#if @subLabel}}
+    <span class="pix-label__sub-label">{{@subLabel}}</span>
+  {{/if}}
+</template>;

package/addon/components/pix-segmented-control.gjs

@@ -63,9 +63,9 @@ export default class PixSegmentedControl extends Component {
   }
 
   <template>
-    <div class={{this.className}} role="radiogroup" aria-labelledby={{this.id}}>
+    <fieldset class={{this.className}} role="radiogroup">
       <PixLabel
-        @for={{this.id}}
+        @useAsLegend={{true}}
         @screenReaderOnly={{@screenReaderOnly}}
         @subLabel={{@subLabel}}
         @size={{@size}}
@@ -73,6 +73,7 @@ export default class PixSegmentedControl extends Component {
       >
         {{yield to="label"}}
       </PixLabel>
+
       <div class="pix-segmented-control__radio">
         <input
           {{on "change" this.onChange}}
@@ -103,6 +104,6 @@ export default class PixSegmentedControl extends Component {
           {{yield to="viewB"}}
         </label>
       </div>
-    </div>
+    </fieldset>
   </template>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "57.0.0",
+  "version": "57.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"

package/addon/components/pix-label.hbs

@@ -1,11 +0,0 @@
-<label for={{@for}} class={{this.className}} ...attributes>
-  {{yield}}
-
-  {{#if @requiredLabel}}
-    <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
-  {{/if}}
-
-  {{#if @subLabel}}
-    <span class="pix-label__sub-label">{{@subLabel}}</span>
-  {{/if}}
-</label>

package/addon/components/pix-label.js

@@ -1,17 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class PixLabel extends Component {
-  get className() {
-    const classes = ['pix-label'];
-
-    if (this.args.screenReaderOnly) classes.push('screen-reader-only');
-    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
-    if (this.args.isDisabled) classes.push('pix-label--disabled');
-
-    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
-
-    classes.push(`pix-label--${size}`);
-
-    return classes.join(' ');
-  }
-}