@1024pix/pix-ui 57.0.0 → 57.0.2

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,36 +73,39 @@ export default class PixSegmentedControl extends Component {
       >
         {{yield to="label"}}
       </PixLabel>
+
       <div class="pix-segmented-control__radio">
-        <input
-          {{on "change" this.onChange}}
-          id={{this.idViewA}}
-          type="radio"
-          name={{this.toggleName}}
-          value="viewA"
-          checked={{this.stateViewA}}
-        />
-        <label for={{this.idViewA}}>
+        <label class="pix-segmented-control__radio-label" for={{this.idViewA}}>
           {{#if @iconA}}
             <PixIcon @name={{@iconA}} @plainIcon={{this.stateViewA}} @ariaHidden={{true}} />
           {{/if}}
           {{yield to="viewA"}}
+          <input
+            class="screen-reader-only"
+            {{on "change" this.onChange}}
+            id={{this.idViewA}}
+            type="radio"
+            name={{this.toggleName}}
+            value="viewA"
+            checked={{this.stateViewA}}
+          />
         </label>
-        <input
-          {{on "change" this.onChange}}
-          id={{this.idViewB}}
-          type="radio"
-          name={{this.toggleName}}
-          value="viewB"
-          checked={{this.stateViewB}}
-        />
-        <label for={{this.idViewB}}>
+        <label class="pix-segmented-control__radio-label" for={{this.idViewB}}>
           {{#if @iconB}}
             <PixIcon @name={{@iconB}} @plainIcon={{this.stateViewB}} @ariaHidden={{true}} />
           {{/if}}
           {{yield to="viewB"}}
+          <input
+            class="screen-reader-only"
+            {{on "change" this.onChange}}
+            id={{this.idViewB}}
+            type="radio"
+            name={{this.toggleName}}
+            value="viewB"
+            checked={{this.stateViewB}}
+          />
         </label>
       </div>
-    </div>
+    </fieldset>
   </template>
 }

package/addon/styles/_pix-segmented-control.scss

@@ -7,6 +7,12 @@
   color: var(--pix-neutral-900);
   font-size: 1rem;
 
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
+
   &--primary .pix-segmented-control__radio {
     background-color: rgb(var(--pix-primary-100-inline), 0.50);
   }
@@ -26,40 +32,29 @@
       align-items: flex-start;
       padding: var(--pix-spacing-1x, 4px);
       border-radius: 8px;
+  }
 
-      :hover {
-        cursor: pointer;
-      }
-
-      input[type="radio"], input[type="radio"]:checked, input[type="radio"]:focus-visible {
-        position: absolute;
-        outline: none;
-        appearance: none;
-      }
-
-      label {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-        justify-content: center;
-        padding: var(--pix-spacing-1x, 4px) 8px;
-        border: 1px solid transparent;
-        border-radius: 8px;
-      }
+  &__radio-label {
+    display: flex;
+    flex-grow: 1;
+    gap: var(--pix-spacing-3x);
+    align-items: center;
+    justify-content: center;
+    padding: var(--pix-spacing-1x, 4px) 8px;
+    border: 1px solid transparent;
+    border-radius: 8px;
 
-      input[type="radio"]:checked + label {
-        font-weight: var(--pix-font-bold);
-        background: var(--pix-neutral-0);
-      }
+    &:hover {
+      cursor: pointer;
+    }
 
-      input[type="radio"]:focus + label {
-        border-color: var(--pix-neutral-900);
-      }
+    &:has(input[type="radio"]:checked) {
+      font-weight: var(--pix-font-bold);
+      background: var(--pix-neutral-0);
     }
 
-  &--inline {
-    flex-direction: row;
-    gap: var(--pix-spacing-2x);
-    align-items: center;
+    &:has(input[type="radio"]:focus) {
+      border-color: var(--pix-neutral-900);
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "57.0.0",
+  "version": "57.0.2",
   "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(' ');
-  }
-}