@justeattakeaway/pie-divider 1.4.2 → 1.4.3

package/custom-elements.json

@@ -83,7 +83,8 @@
               "kind": "field",
               "name": "orientation",
               "privacy": "public",
-              "attribute": "orientation"
+              "attribute": "orientation",
+              "reflects": true
             },
             {
               "kind": "field",

package/dist/index.js

@@ -7,9 +7,9 @@ const v = class v extends u {
     this.getAttribute("v") || this.setAttribute("v", v.v);
   }
 };
-v.v = "1.4.2";
+v.v = "1.4.3";
 let p = v;
-const x = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", y = ["default", "inverse"], $ = ["horizontal", "vertical"], l = {
+const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host([orientation=vertical]){height:100%}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", y = ["default", "inverse"], $ = ["horizontal", "vertical"], l = {
   variant: "default",
   orientation: "horizontal",
   label: ""
@@ -55,7 +55,7 @@ n([
   f(e, y, l.variant)
 ], a.prototype, "variant", 2);
 n([
-  b({ type: String }),
+  b({ type: String, reflect: !0 }),
   f(e, $, l.orientation)
 ], a.prototype, "orientation", 2);
 n([

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",

package/src/divider.scss

@@ -1,5 +1,13 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
+:host {
+    display: block;
+}
+
+:host([orientation="vertical"]) {
+   height: 100%;
+}
+
 .c-divider {
     --divider-bg-color: var(--dt-color-divider-default);
     --divider-width: 100%;

package/src/index.ts

@@ -24,7 +24,7 @@ export class PieDivider extends PieElement implements DividerProps {
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
-    @property({ type: String })
+    @property({ type: String, reflect: true })
     @validPropertyValues(componentSelector, orientations, defaultProps.orientation)
     public orientation = defaultProps.orientation;