Core v2.7.0

htwoo-core/helpers/hbs/test.js

@@ -41,9 +41,9 @@ module.exports = function (Handlebars) {
   });
 
   Handlebars.registerHelper('getLastNumericId', function (value) {
-    return lastId;
+    return lastIdClean;
   });
-  
+
   Handlebars.registerHelper('seoTitle', function (value) {
 
     if (value) {
@@ -129,4 +129,20 @@ module.exports = function (Handlebars) {
     }
   });
 
+  Handlebars.registerHelper('dynamicPartial', function(partialName, context) {
+
+    // console.debug('🤟🤟', partialName, context);
+    // console.debug('🤟', Handlebars.partials[partialName]);
+
+    const partial = Handlebars.partials[partialName];
+
+    if (!partial) {
+      return `Partial "${partialName}" not found.`;
+    }
+
+    // If the partial is a string, compile it first
+    const template = typeof partial === "function" ? partial : Handlebars.compile(partial);
+    return new Handlebars.SafeString(template(context));
+  });
+
 };

htwoo-core/package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "release": "standard-version",
     "cl:update": "standard-version --changelog --skip.bump --skip.tag",
     "test": "echo \"Error: no test specified\" && exit 1",
     "pl:build": "patternlab build --config ./patternlab-config.json",
@@ -46,7 +47,8 @@
     "@pattern-lab/core": "^6.1.0",
     "@pattern-lab/engine-handlebars": "^6.1.0",
     "@pattern-lab/uikit-workshop": "^6.1.0",
-    "caniuse-lite": "^1.0.30001677"
+    "caniuse-lite": "^1.0.30001680",
+    "standard-version": "^9.5.0"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",
@@ -61,9 +63,9 @@
     "gulp-sourcemaps": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "plugin-design": "file:helpers/node/plugin-design",
-    "postcss": "^8.4.47",
-    "rollup": "^4.24.3",
-    "sass": "^1.80.6",
+    "postcss": "^8.4.49",
+    "rollup": "^4.27.3",
+    "sass": "^1.81.0",
     "sitemap": "^8.0.0",
     "yargs": "^17.7.2"
   }

htwoo-core/src/_data/htwoo-field.json

@@ -1,4 +1,78 @@
 {
+    "legend": {
+        "text": "Personal Information",
+        "aria-tags": "",
+        "html-props": "",
+        "modified": ""
+    },
+    "fieldset": {
+        "legend": {
+            "text": "Personal Information",
+            "aria-tags": "",
+            "html-props": "",
+            "modified": ""
+        },
+        "fields": [
+            {
+                "type": "molecules-field",
+                "field": {
+                    "input": {
+                        "label": {
+                            "label": "First Name",
+                            "stateStyle": null,
+                            "aria-tags": "",
+                            "for": "firstname"
+                        },
+                        "text": {
+                            "inputPrefix": "https://",
+                            "inputSuffix": ".com",
+                            "placeholder": "A placeholder text",
+                            "aria-tags": "",
+                            "descRef": "firstname-desc",
+                            "errorRef": "firstname-error"
+                        },
+                        "description": {
+                            "descRef": "firstname-desc",
+                            "text": "Please enter your first name with only alphabetic characters"
+                        },
+                        "error": {
+                            "errorRef": "firstname-error",
+                            "text": "This is an error message"
+                        }
+                    }
+                }
+            },{
+                "type": "molecules-field",
+                "field": {
+
+                    "input": {
+                        "label": {
+                            "label": "Last Name",
+                            "stateStyle": null,
+                            "aria-tags": "",
+                            "for": "lastname"
+                        },
+                        "text": {
+                            "inputPrefix": "https://",
+                            "inputSuffix": ".com",
+                            "placeholder": "A placeholder text",
+                            "aria-tags": "",
+                            "descRef": "lastname-desc",
+                            "errorRef": "lastname-error"
+                        },
+                        "description": {
+                            "descRef": "lastname-desc",
+                            "text": "Please enter your last name with only alphabetic characters"
+                        },
+                        "error": {
+                            "errorRef": "lastname-error",
+                            "text": "This is an error message"
+                        }
+                    }
+                }
+            }
+        ]
+    },
     "field": {
         "input": {
             "label": {
@@ -19,7 +93,7 @@
                 "descRef": "firstname-desc",
                 "text": "Please enter your first name with only alphabetic characters"
             },
-            "error":{
+            "error": {
                 "errorRef": "firstname-error",
                 "text": "This is an error message"
             }

htwoo-core/src/_data/htwoo-input.json

@@ -104,6 +104,12 @@
         "error": {
             "errorRef": "field-x-error",
             "text": "lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        },
+        "file-upload": {
+            "label": "Click or drag and drop files here to upload filed",
+            "description": "Max file size: 10MB, Types: jpg, png, pdf",
+            "iconname": "icon-arrow-upload-filled",
+            "title": "Upload"
         }
     },
     "checkbox-group": {

htwoo-core/src/_patterns/atoms/input/checkbox.hbs

@@ -1,4 +1,4 @@
 {{#checkbox}}
 <input type="checkbox" name="{{ id }}" id="{{ id }}" value="" class="hoo-checkbox" {{#if disabled }} disabled="{{ disabled }}" 
-    aria-disabled="{{ disabled }}"  {{/if}}><label for="{{ id }}">{{ label }}</label>
+    aria-disabled="{{ disabled }}"  {{/if}}><label for="{{ id }}">{{{ label }}}</label>
 {{/checkbox}}

htwoo-core/src/_patterns/atoms/input/input-color.hbs

@@ -1 +1 @@
-<input class="hoo-input-color" type="color" value="#000" hsla>
+<input class="hoo-input-color" type="color" value="#000" hsla {{{ html-props }}}>

htwoo-core/src/_patterns/atoms/input/input-date-month.hbs

@@ -1,3 +1,3 @@
 {{#input.date}}
-<input type="month" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input type="month" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.date}}

htwoo-core/src/_patterns/atoms/input/input-date-week.hbs

@@ -1,3 +1,3 @@
 {{#input.date}}
-<input type="week" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input type="week" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.date}}

htwoo-core/src/_patterns/atoms/input/input-date.hbs

@@ -1,3 +1,3 @@
 {{#input.date}}
-<input type="date" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input type="date" class="hoo-input-date" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.date}}

htwoo-core/src/_patterns/atoms/input/input-datetime-local.hbs

@@ -1,3 +1,3 @@
 {{#input.date}}
-<input type="datetime-local" class="hoo-input-date" name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input type="datetime-local" class="hoo-input-date" name="{{ name }}" value="{{ value }}" min="2018-01-01" max="2030-12-31" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.date}}

htwoo-core/src/_patterns/atoms/input/input-description.hbs

@@ -1,5 +1,5 @@
 {{#input.description}}
 <p class="hoo-input-description" {{#if descRef}}id="{{ descRef }}-{{ getLastNumericId }}"{{/if}}>
-    {{ text }}
+    {{{ text }}}
 </p>
 {{/input.description}}

htwoo-core/src/_patterns/atoms/input/input-file.hbs

@@ -0,0 +1,18 @@
+{{#input.file-upload}}
+<section class="hoo-input-file">
+    <label class="hoo-infile-label" name="file-upload" tabIndex="-1" for="{{ getId "file-upload" }}" draggable="true">
+        <div class="hoo-infile-icon">
+            {{> atoms-icon }}
+        </div>
+        <div>
+            {{label}}
+            {{#description }}
+            <p class="hoo-infile-description">{{ this }}
+            </p>
+            {{/description }}
+        </div>
+    </label>
+    <input type="file" id="{{ getLastId }}" name="{{name}}" class="hoo-infile-context" multiple aria-describedby="{{ getLastId }}-content" />
+    <output class="hoo-infile-output" id="{{ getLastNumericId }}-content" aria-live="polite" title="Current selection"></output>
+{{/input.file-upload}}
+</section>

htwoo-core/src/_patterns/atoms/input/input-number.hbs

@@ -1,3 +1,7 @@
 {{#input.number}}
-<input class="hoo-input-text" type="number" min="{{ min }}" max="{{ max }}" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input class="hoo-input-text" type="number" min="{{ min }}" max="{{ max }}" {{#if disabled}} disabled="{{ disabled }}"
+    aria-disabled="{{ disabled }}" {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||'
+    errorRef}}
+    aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"
+    {{/ifCond}} {{{ html-props }}}>
 {{/input.number}}

htwoo-core/src/_patterns/atoms/input/input-text-email.hbs

@@ -1,3 +1,3 @@
 {{#input.email}}
-<input class="hoo-input-text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} type="email" {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input class="hoo-input-text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} type="email" {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#if disabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}"  {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.email}}

htwoo-core/src/_patterns/atoms/input/input-text-password.hbs

@@ -1,3 +1,3 @@
 {{#input.url}}
-<input class="hoo-input-text" type="password" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input class="hoo-input-text" type="password" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.url}}

htwoo-core/src/_patterns/atoms/input/input-text-phone.hbs

@@ -1,3 +1,3 @@
 {{#input.phone}}
-<input class="hoo-input-text" type="phone" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input class="hoo-input-text" type="phone" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.phone}}

htwoo-core/src/_patterns/atoms/input/input-text-prefixed.hbs

@@ -1,7 +1,9 @@
 {{#input.text}}
 <div class="hoo-input-group">
-    <div class="hoo-input-prefix">{{ inputPrefix }}</div>
-    <input class="hoo-input-text" type="text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} data-prefix="https://"
-        placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+    <div id="suffix-label-{{ getLastId }}" class="hoo-input-prefix">{{ inputPrefix }}</div>
+    <input class="hoo-input-text" {{#type}}type="{{this}}" {{/type}} {{#if (getLastId)}}id="{{ getLastId }}" {{/if}}
+        placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-labelledby="suffix-label-{{ getLastId }}"
+        aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} 
+        {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}" {{/ifCond}} {{{ html-props }}}>
 </div>
 {{/input.text}}

htwoo-core/src/_patterns/atoms/input/input-text-suffixed.hbs

@@ -1,6 +1,9 @@
 {{#input.text}}
 <div class="hoo-input-group">
-    <input class="hoo-input-text" type="text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} placeholder="{{ placeholder }}" data-suffix="{{inputSuffix}}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
-    <div class="hoo-input-suffix">{{inputSuffix}}</div>
+    <input class="hoo-input-text" {{#type}}type="{{this}}" {{/type}} {{#if (getLastId)}}id="{{ getLastId }}" {{/if}}
+        placeholder="{{ placeholder }}" data-suffix="{{inputSuffix}}" {{#ifCond descRef '||' errorRef}}
+        aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"
+        {{/ifCond}} aria-labelledby="suffix-label-{{getLastId}}" {{{ html-props }}}>
+    <div id="suffix-label-{{getLastId}}" class="hoo-input-suffix">{{inputSuffix}}</div>
 </div>
 {{/input.text}}

htwoo-core/src/_patterns/atoms/input/input-text-url.hbs

@@ -1,3 +1,3 @@
 {{#input.url}}
-<input class="hoo-input-text" type="url" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input class="hoo-input-text" type="url" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#if diabled}} disabled="{{ disabled }}"  aria-disabled="{{ disabled }}" {{/if}} placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>
 {{/input.url}}

htwoo-core/src/_patterns/atoms/input/input-text.hbs

@@ -3,5 +3,5 @@
     disabled="{{ disabled }}" aria-disabled="{{ disabled }}" {{/if}} {{#if readonly}} readonly="{{ readonly }}" {{/if}}
     placeholder="{{ placeholder }}" {{#ifCond descRef '||' errorRef}}
     aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"
-    {{/ifCond}}>
+    {{/ifCond}} {{{ html-props }}}>
 {{/input.text}}

htwoo-core/src/_patterns/atoms/input/input-textarea.hbs

@@ -1 +1 @@
-<textarea class="hoo-input-text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}></textarea>
+<textarea class="hoo-input-text" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}></textarea>

htwoo-core/src/_patterns/atoms/input/input-time.hbs

@@ -1 +1 @@
-<input type="time" class="hoo-input-time" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="{{ min-value }}" max="{{ max-value }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}}>
+<input type="time" class="hoo-input-time" {{#if (getLastId)}}id="{{ getLastId }}" {{/if}} name="{{ name }}" value="{{ value }}" min="{{ min-value }}" max="{{ max-value }}" {{#ifCond descRef '||' errorRef}} aria-describedby="{{#if descRef}}{{descRef}}-{{getLastId}}{{/if}} {{#if errorRef}}{{errorRef}}-{{ getLastId }}{{/if}}"{{/ifCond}} {{{ html-props }}}>

htwoo-core/src/_patterns/atoms/input/label.hbs

@@ -1,3 +1,3 @@
 {{#input.label}}
-<label class="hoo-label {{stateStyle}}" for="{{ getId for }}">{{ label }}</label>
+<label class="hoo-label {{stateStyle}}" for="{{ getLastId }}">{{ label }}</label>
 {{/input.label}}

htwoo-core/src/_patterns/atoms/input/legend.hbs

@@ -0,0 +1,5 @@
+{{#legend }}
+<legend class="hoo-legend {{ modifier}}" {{{ html-props }}} {{ aria-tags}}>
+    {{ text }}
+</legend>
+{{/legend}}