@justeattakeaway/pie-form-label 0.10.0 → 0.11.0

package/dist/index.js

@@ -1,15 +1,16 @@
 import { LitElement as m, html as f, nothing as a, unsafeCSS as b } from "lit";
-import { RtlMixin as d, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { RtlMixin as g, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
 import { property as p } from "lit/decorators.js";
-const h = `.c-formLabel{--form-label-font-size: calc(var(--dt-font-size-14) * 1px);--form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--form-label-font-weight: var(--dt-font-weight-bold);--form-label-color: var(--dt-color-content-default);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--dt-spacing-d);color:var(--form-label-color);font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight);margin-block-end:var(--dt-spacing-a)}.c-formLabel-optional,.c-formLabel-trailing{color:var(--dt-color-content-subdued);font-weight:var(--dt-font-weight-regular)}.c-formLabel-leading{margin-inline-end:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}
+const v = `.c-formLabel{--form-label-font-size: calc(var(--dt-font-size-14) * 1px);--form-label-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--form-label-font-weight: var(--dt-font-weight-bold);--form-label-color: var(--dt-color-content-default);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--dt-spacing-d);color:var(--form-label-color);font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight);margin-block-end:var(--dt-spacing-a)}.c-formLabel-optional,.c-formLabel-trailing{color:var(--dt-color-content-subdued);font-weight:var(--dt-font-weight-regular)}.c-formLabel-leading{margin-inline-end:var(--dt-spacing-b)}.c-formLabel-trailing{flex-shrink:0;white-space:var(--dt-spacing-d)}
 `;
-var v = Object.defineProperty, L = Object.getOwnPropertyDescriptor, c = (n, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? L(e, r) : e, i = n.length - 1, s; i >= 0; i--)
+var L = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (n, e, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? u(e, r) : e, i = n.length - 1, s; i >= 0; i--)
     (s = n[i]) && (t = (o ? s(e, r, t) : s(t)) || t);
-  return o && t && v(e, r, t), t;
+  return o && t && L(e, r, t), t;
 };
-const u = "pie-form-label";
-class l extends d(m) {
+const y = "pie-form-label";
+class l extends g(m) {
   _renderOptionalLabel() {
     const { optional: e } = this;
     return e ? f`<span class="c-formLabel-optional">${e}</span>` : a;
@@ -23,7 +24,7 @@ class l extends d(m) {
             <label
                 data-test-id="pie-form-label"
                 class="c-formLabel"
-                for=${this.for}>
+                for=${d(this.for)}>
                     <div>
                         ${r ? this._renderOptionalLabel() : a}
                         <span class="c-formLabel-leading"><slot></slot></span>
@@ -33,7 +34,7 @@ class l extends d(m) {
             </label>`;
   }
 }
-l.styles = b(h);
+l.styles = b(v);
 c([
   p({ type: String, reflect: !0 })
 ], l.prototype, "for", 2);
@@ -43,7 +44,7 @@ c([
 c([
   p({ type: String })
 ], l.prototype, "trailing", 2);
-g(u, l);
+h(y, l);
 export {
   l as PieFormLabel
 };

package/dist/react.js

@@ -2,6 +2,7 @@ import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieFormLabel as m } from "./index.js";
 import "lit";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-webc-core";
 import "lit/decorators.js";
 const r = o({
@@ -10,7 +11,7 @@ const r = o({
   react: e,
   tagName: "pie-form-label",
   events: {}
-}), s = r;
+}), b = r;
 export {
-  s as PieFormLabel
+  b as PieFormLabel
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-form-label",
   "description": "PIE Design System Form Label built using Web Components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,11 +33,11 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.9.0",
-    "@justeattakeaway/pie-wrapper-react": "0.13.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.17.0"
+    "@justeattakeaway/pie-webc-core": "0.17.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,7 @@
 import {
     LitElement, TemplateResult, html, nothing, unsafeCSS,
 } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import { property } from 'lit/decorators.js';
 import styles from './form-label.scss?inline';
@@ -40,7 +41,7 @@ export class PieFormLabel extends RtlMixin(LitElement) implements FormLabelProps
             <label
                 data-test-id="pie-form-label"
                 class="c-formLabel"
-                for=${this.for}>
+                for=${ifDefined(this.for)}>
                     <div>
                         ${isRTL ? this._renderOptionalLabel() : nothing}
                         <span class="c-formLabel-leading"><slot></slot></span>

package/src/react.ts

@@ -15,6 +15,5 @@ const PieFormLabelReact = createComponent({
 
 type ReactBaseType = React.LabelHTMLAttributes<HTMLLabelElement>
 
-
-
-export const PieFormLabel = PieFormLabelReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<FormLabelProps> & React.RefAttributes<PieFormLabelLit> & ReactBaseType>;
+export const PieFormLabel = PieFormLabelReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<FormLabelProps>
+    & React.RefAttributes<PieFormLabelLit> & ReactBaseType>;