@skedulo/breeze-ui 1.0.0 → 1.1.0

package/dist/custom-elements.json

@@ -6367,6 +6367,7 @@
               "default": "false",
               "description": "Uses fixed positioning",
               "attribute": "is-fixed",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Tooltip",
                 "module": "src/components/tooltip.ts"
@@ -6805,9 +6806,8 @@
             {
               "name": "vertical-align",
               "type": {
-                "text": "'top' | 'middle' | 'bottom'"
+                "text": "'top' | 'middle' | 'bottom' | undefined"
               },
-              "default": "'top'",
               "fieldName": "verticalAlign",
               "inheritedFrom": {
                 "name": "Row",
@@ -6820,9 +6820,8 @@
               "kind": "field",
               "name": "verticalAlign",
               "type": {
-                "text": "'top' | 'middle' | 'bottom'"
+                "text": "'top' | 'middle' | 'bottom' | undefined"
               },
-              "default": "'top'",
               "attribute": "vertical-align",
               "reflects": true,
               "inheritedFrom": {
@@ -6846,9 +6845,8 @@
             {
               "name": "align",
               "type": {
-                "text": "'left' | 'center' | 'right'"
+                "text": "'left' | 'center' | 'right' | undefined"
               },
-              "default": "'left'",
               "fieldName": "align",
               "inheritedFrom": {
                 "name": "Column",
@@ -6861,10 +6859,10 @@
               "kind": "field",
               "name": "align",
               "type": {
-                "text": "'left' | 'center' | 'right'"
+                "text": "'left' | 'center' | 'right' | undefined"
               },
-              "default": "'left'",
               "attribute": "align",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Column",
                 "module": "src/layout/flex.ts"
@@ -18395,7 +18393,8 @@
               },
               "default": "false",
               "description": "Uses fixed positioning",
-              "attribute": "is-fixed"
+              "attribute": "is-fixed",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -18764,6 +18763,97 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/css-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getFocusStyles",
+          "parameters": [
+            {
+              "name": "selector",
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS selector targeting an interactive element."
+            },
+            {
+              "name": "extraRules",
+              "default": "css``",
+              "description": "Optional rules to append. Useful for overrides."
+            }
+          ],
+          "description": "Returns a CSSResult applying focus outline styles to a given interactive\nelement. Reduces repetition throughout multiple components.\n\nTargets modern `:focus-visible` by default and includes a `:focus` fallback\nfor older browsers."
+        },
+        {
+          "kind": "variable",
+          "name": "invisibleButtonRules",
+          "default": "css`\n  background: none;\n  border: 0;\n  border-radius: var(--brz-border-radius-default);\n  color: var(--brz-color-neutral-750);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n`",
+          "description": "CSS rules to apply invisible styles to buttons. Use within a CSS declaration\nblock."
+        },
+        {
+          "kind": "function",
+          "name": "getInvisibleButtonStyles",
+          "parameters": [
+            {
+              "name": "selector",
+              "type": {
+                "text": "string"
+              },
+              "description": "A CSS selector targeting a button"
+            },
+            {
+              "name": "extraRules",
+              "default": "css``",
+              "description": "Optional rules to append. Useful for overrides."
+            }
+          ],
+          "description": "Returns a CSSResult applying invisible styles to a button matching the given\nselector. Invisible buttons are a common pattern for icon-only close buttons.\n\nSince this applies to buttons, default focus styles are also automatically\nincluded for the selector. If you don't need them, or need to customise them,\nuse `invisibleButtonStyles` and `getFocusStyles()` separately instead."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getFocusStyles",
+          "declaration": {
+            "name": "getFocusStyles",
+            "module": "src/helpers/css-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "invisibleButtonRules",
+          "declaration": {
+            "name": "invisibleButtonRules",
+            "module": "src/helpers/css-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getInvisibleButtonStyles",
+          "declaration": {
+            "name": "getInvisibleButtonStyles",
+            "module": "src/helpers/css-helpers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/helpers/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./css-helpers"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/layout/flex.ts",
@@ -18785,9 +18875,8 @@
               "kind": "field",
               "name": "verticalAlign",
               "type": {
-                "text": "'top' | 'middle' | 'bottom'"
+                "text": "'top' | 'middle' | 'bottom' | undefined"
               },
-              "default": "'top'",
               "attribute": "vertical-align",
               "reflects": true
             }
@@ -18796,9 +18885,8 @@
             {
               "name": "vertical-align",
               "type": {
-                "text": "'top' | 'middle' | 'bottom'"
+                "text": "'top' | 'middle' | 'bottom' | undefined"
               },
-              "default": "'top'",
               "fieldName": "verticalAlign"
             }
           ],
@@ -18818,19 +18906,18 @@
               "kind": "field",
               "name": "align",
               "type": {
-                "text": "'left' | 'center' | 'right'"
+                "text": "'left' | 'center' | 'right' | undefined"
               },
-              "default": "'left'",
-              "attribute": "align"
+              "attribute": "align",
+              "reflects": true
             }
           ],
           "attributes": [
             {
               "name": "align",
               "type": {
-                "text": "'left' | 'center' | 'right'"
+                "text": "'left' | 'center' | 'right' | undefined"
               },
-              "default": "'left'",
               "fieldName": "align"
             }
           ],
@@ -19258,7 +19345,7 @@
         },
         {
           "kind": "class",
-          "description": "Split row layout.",
+          "description": "Split flex row layout.",
           "name": "SplitRow",
           "slots": [
             {
@@ -19515,97 +19602,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/helpers/css-helpers.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getFocusStyles",
-          "parameters": [
-            {
-              "name": "selector",
-              "type": {
-                "text": "string"
-              },
-              "description": "A CSS selector targeting an interactive element."
-            },
-            {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
-            }
-          ],
-          "description": "Returns a CSSResult applying focus outline styles to a given interactive\nelement. Reduces repetition throughout multiple components.\n\nTargets modern `:focus-visible` by default and includes a `:focus` fallback\nfor older browsers."
-        },
-        {
-          "kind": "variable",
-          "name": "invisibleButtonRules",
-          "default": "css`\n  background: none;\n  border: 0;\n  border-radius: var(--brz-border-radius-default);\n  color: var(--brz-color-neutral-750);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n`",
-          "description": "CSS rules to apply invisible styles to buttons. Use within a CSS declaration\nblock."
-        },
-        {
-          "kind": "function",
-          "name": "getInvisibleButtonStyles",
-          "parameters": [
-            {
-              "name": "selector",
-              "type": {
-                "text": "string"
-              },
-              "description": "A CSS selector targeting a button"
-            },
-            {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
-            }
-          ],
-          "description": "Returns a CSSResult applying invisible styles to a button matching the given\nselector. Invisible buttons are a common pattern for icon-only close buttons.\n\nSince this applies to buttons, default focus styles are also automatically\nincluded for the selector. If you don't need them, or need to customise them,\nuse `invisibleButtonStyles` and `getFocusStyles()` separately instead."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getFocusStyles",
-          "declaration": {
-            "name": "getFocusStyles",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "invisibleButtonRules",
-          "declaration": {
-            "name": "invisibleButtonRules",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getInvisibleButtonStyles",
-          "declaration": {
-            "name": "getInvisibleButtonStyles",
-            "module": "src/helpers/css-helpers.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/helpers/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./css-helpers"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/mixins/component-utils.ts",

package/dist/lib/cjs/breeze-ui.js

@@ -177,7 +177,7 @@
       background-color: var(--brz-color-white);
       color: var(--brz-color-text);
     }
-  `;Ao([R({type:Number,attribute:"delay-on-close"})],exports.Tooltip.prototype,"delayOnClose",2);Ao([R({type:Number,attribute:"delay-on-open"})],exports.Tooltip.prototype,"delayOnOpen",2);Ao([R({type:Boolean,attribute:"is-fixed"})],exports.Tooltip.prototype,"isFixed",2);Ao([R({type:String})],exports.Tooltip.prototype,"placement",2);Ao([R({type:String})],exports.Tooltip.prototype,"trigger",2);Ao([R({type:Boolean})],exports.Tooltip.prototype,"disabled",2);Ao([R({type:String})],exports.Tooltip.prototype,"content",2);Ao([R({type:String,reflect:!0})],exports.Tooltip.prototype,"theme",2);exports.Tooltip=Ao([X(Vh)],exports.Tooltip);var z3=Object.defineProperty,L3=Object.getOwnPropertyDescriptor,yi=(s,i,l,d)=>{for(var c=d>1?void 0:d?L3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&z3(i,l,c),c};const jh=Le("avatar"),Kh=Le("avatar-group");var E0=(s=>(s[s.tiny=0]="tiny",s[s.small=1]="small",s[s.medium=2]="medium",s[s.large=3]="large",s))(E0||{}),Yh=(s=>(s[s.solid=0]="solid",s[s.subtle=1]="subtle",s[s.border=2]="border",s))(Yh||{});exports.Avatar=class extends Be{constructor(){super(...arguments),this.hasOuterBorder=!1,this.isPlaceholderHidden=!1,this.label="",this.noTooltip=!1,this.size="medium",this.theme="solid",this.slottedElementsCount=0}handleSlotChange({target:s}){const i=s==null?void 0:s.assignedElements({flatten:!0});this.slottedElementsCount=i.length}get abbreviatedLabel(){if(!this.label||this.isPlaceholderHidden)return"";const i=E0[this.size]<2?1:2;return this.label.split(" ").slice(0,i).map(l=>l.charAt(0)).join("").toUpperCase()}get iconTemplate(){const s=E0[this.size],i=()=>{switch(s){case 3:return 20;case 2:case 1:return 10;case 0:return 6.5}};return j`
+  `;Ao([R({type:Number,attribute:"delay-on-close"})],exports.Tooltip.prototype,"delayOnClose",2);Ao([R({type:Number,attribute:"delay-on-open"})],exports.Tooltip.prototype,"delayOnOpen",2);Ao([R({type:Boolean,attribute:"is-fixed",reflect:!0})],exports.Tooltip.prototype,"isFixed",2);Ao([R({type:String})],exports.Tooltip.prototype,"placement",2);Ao([R({type:String})],exports.Tooltip.prototype,"trigger",2);Ao([R({type:Boolean})],exports.Tooltip.prototype,"disabled",2);Ao([R({type:String})],exports.Tooltip.prototype,"content",2);Ao([R({type:String,reflect:!0})],exports.Tooltip.prototype,"theme",2);exports.Tooltip=Ao([X(Vh)],exports.Tooltip);var z3=Object.defineProperty,L3=Object.getOwnPropertyDescriptor,yi=(s,i,l,d)=>{for(var c=d>1?void 0:d?L3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&z3(i,l,c),c};const jh=Le("avatar"),Kh=Le("avatar-group");var E0=(s=>(s[s.tiny=0]="tiny",s[s.small=1]="small",s[s.medium=2]="medium",s[s.large=3]="large",s))(E0||{}),Yh=(s=>(s[s.solid=0]="solid",s[s.subtle=1]="subtle",s[s.border=2]="border",s))(Yh||{});exports.Avatar=class extends Be{constructor(){super(...arguments),this.hasOuterBorder=!1,this.isPlaceholderHidden=!1,this.label="",this.noTooltip=!1,this.size="medium",this.theme="solid",this.slottedElementsCount=0}handleSlotChange({target:s}){const i=s==null?void 0:s.assignedElements({flatten:!0});this.slottedElementsCount=i.length}get abbreviatedLabel(){if(!this.label||this.isPlaceholderHidden)return"";const i=E0[this.size]<2?1:2;return this.label.split(" ").slice(0,i).map(l=>l.charAt(0)).join("").toUpperCase()}get iconTemplate(){const s=E0[this.size],i=()=>{switch(s){case 3:return 20;case 2:case 1:return 10;case 0:return 6.5}};return j`
       <span class="icon" aria-label=${this.label}>
         <brz-icon size=${i()} icon=${zt(this.icon)}></brz-icon>
       </span>
@@ -1230,11 +1230,10 @@
       </button>
 
       ${this.externalIcon}
-    `}render(){switch(this.element){case"button":return this.buttonTemplate;case"a":default:return this.anchorTemplate}}};exports.Link.styles=[Fd,Z3,U3];$o([R()],exports.Link.prototype,"element",2);$o([R({type:Boolean,reflect:!0})],exports.Link.prototype,"virtual",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"href",2);$o([R({type:String,attribute:"link-type",reflect:!0})],exports.Link.prototype,"linkType",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"target",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"rel",2);$o([R({type:Boolean,attribute:"is-external",reflect:!0})],exports.Link.prototype,"isExternal",2);exports.Link=$o([X(ep)],exports.Link);exports.LinkButton=class extends exports.Link{connectedCallback(){super.connectedCallback(),this.element="button"}};exports.LinkButton=$o([X(tp)],exports.LinkButton);var V3=Object.defineProperty,q3=Object.getOwnPropertyDescriptor,Z0=(s,i,l,d)=>{for(var c=d>1?void 0:d?q3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&V3(i,l,c),c};const rp=Le("row"),np=Le("column");exports.Row=class extends Be{constructor(){super(...arguments),this.verticalAlign="top"}render(){return j`<slot></slot>`}};exports.Row.styles=ue`
+    `}render(){switch(this.element){case"button":return this.buttonTemplate;case"a":default:return this.anchorTemplate}}};exports.Link.styles=[Fd,Z3,U3];$o([R()],exports.Link.prototype,"element",2);$o([R({type:Boolean,reflect:!0})],exports.Link.prototype,"virtual",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"href",2);$o([R({type:String,attribute:"link-type",reflect:!0})],exports.Link.prototype,"linkType",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"target",2);$o([R({type:String,reflect:!0})],exports.Link.prototype,"rel",2);$o([R({type:Boolean,attribute:"is-external",reflect:!0})],exports.Link.prototype,"isExternal",2);exports.Link=$o([X(ep)],exports.Link);exports.LinkButton=class extends exports.Link{connectedCallback(){super.connectedCallback(),this.element="button"}};exports.LinkButton=$o([X(tp)],exports.LinkButton);var V3=Object.defineProperty,q3=Object.getOwnPropertyDescriptor,Z0=(s,i,l,d)=>{for(var c=d>1?void 0:d?q3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&V3(i,l,c),c};const rp=Le("row"),np=Le("column");exports.Row=class extends Be{render(){return j`<slot></slot>`}};exports.Row.styles=ue`
     :host {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
       --sp-row-spacing: var(--brz-spacing-4);
       column-gap: var(--brz-row-spacing, var(--sp-row-spacing));
     }
@@ -1250,11 +1249,10 @@
     :host([vertical-align='bottom']) {
       align-items: flex-end;
     }
-  `;Z0([R({type:String,attribute:"vertical-align",reflect:!0})],exports.Row.prototype,"verticalAlign",2);exports.Row=Z0([X(rp)],exports.Row);exports.Column=class extends Be{constructor(){super(...arguments),this.align="left"}render(){return j`<slot></slot>`}};exports.Column.styles=ue`
+  `;Z0([R({attribute:"vertical-align",reflect:!0})],exports.Row.prototype,"verticalAlign",2);exports.Row=Z0([X(rp)],exports.Row);exports.Column=class extends Be{render(){return j`<slot></slot>`}};exports.Column.styles=ue`
     :host {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       --sp-column-spacing: var(--brz-spacing-4);
       row-gap: var(--brz-column-spacing, var(--sp-column-spacing));
     }
@@ -1270,7 +1268,7 @@
     :host([align='right']) {
       align-items: flex-end;
     }
-  `;Z0([R({type:String})],exports.Column.prototype,"align",2);exports.Column=Z0([X(np)],exports.Column);var j3=Object.defineProperty,K3=Object.getOwnPropertyDescriptor,ip=(s,i,l,d)=>{for(var c=d>1?void 0:d?K3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&j3(i,l,c),c};const op=Le("loading-spinner");exports.LoadingSpinner=class extends Be{constructor(){super(...arguments),this.size=24}render(){return j`
+  `;Z0([R({reflect:!0})],exports.Column.prototype,"align",2);exports.Column=Z0([X(np)],exports.Column);var j3=Object.defineProperty,K3=Object.getOwnPropertyDescriptor,ip=(s,i,l,d)=>{for(var c=d>1?void 0:d?K3(i,l):i,g=s.length-1,b;g>=0;g--)(b=s[g])&&(c=(d?b(i,l,c):b(c))||c);return d&&c&&j3(i,l,c),c};const op=Le("loading-spinner");exports.LoadingSpinner=class extends Be{constructor(){super(...arguments),this.size=24}render(){return j`
       <div class="loading-spinner">
         <svg
           class="loading-spinner--circular"
@@ -2301,11 +2299,13 @@ function print() { __p += __j.call(arguments, '') }
       </brz-row>
     `}};exports.SplitRow.styles=ue`
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
     }
 
     brz-row {
       justify-content: space-between;
+      flex: 1;
     }
 
     :host([expand-y]) {
@@ -2314,7 +2314,6 @@ function print() { __p += __j.call(arguments, '') }
 
     :host([expand-y]) brz-row {
       height: 100%;
-      align-items: stretch;
     }
 
     :host([no-gap]) {
@@ -2341,6 +2340,7 @@ function print() { __p += __j.call(arguments, '') }
     brz-split-row {
       padding: var(--brz-spacing-2) var(--brz-spacing-5);
       box-shadow: inset 0 -1px 0 var(--brz-color-neutral-300);
+      min-height: var(--brz-spacing-9);
     }
 
     :host([no-border]) brz-split-row {

package/dist/lib/es/breeze-ui.js

@@ -2136,7 +2136,7 @@ ra([
   N({ type: Number, attribute: "delay-on-open" })
 ], ci.prototype, "delayOnOpen", 2);
 ra([
-  N({ type: Boolean, attribute: "is-fixed" })
+  N({ type: Boolean, attribute: "is-fixed", reflect: !0 })
 ], ci.prototype, "isFixed", 2);
 ra([
   N({ type: String })
@@ -3708,9 +3708,6 @@ var H7 = Object.defineProperty, B7 = Object.getOwnPropertyDescriptor, Q1 = (s, i
 };
 const F7 = Le("row"), W7 = Le("column");
 let $c = class extends Be {
-  constructor() {
-    super(...arguments), this.verticalAlign = "top";
-  }
   render() {
     return j`<slot></slot>`;
   }
@@ -3719,7 +3716,6 @@ $c.styles = ue`
     :host {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;
       --sp-row-spacing: var(--brz-spacing-4);
       column-gap: var(--brz-row-spacing, var(--sp-row-spacing));
     }
@@ -3737,15 +3733,12 @@ $c.styles = ue`
     }
   `;
 Q1([
-  N({ type: String, attribute: "vertical-align", reflect: !0 })
+  N({ attribute: "vertical-align", reflect: !0 })
 ], $c.prototype, "verticalAlign", 2);
 $c = Q1([
   X(F7)
 ], $c);
 let Ac = class extends Be {
-  constructor() {
-    super(...arguments), this.align = "left";
-  }
   render() {
     return j`<slot></slot>`;
   }
@@ -3754,7 +3747,6 @@ Ac.styles = ue`
     :host {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       --sp-column-spacing: var(--brz-spacing-4);
       row-gap: var(--brz-column-spacing, var(--sp-column-spacing));
     }
@@ -3772,7 +3764,7 @@ Ac.styles = ue`
     }
   `;
 Q1([
-  N({ type: String })
+  N({ reflect: !0 })
 ], Ac.prototype, "align", 2);
 Ac = Q1([
   X(W7)
@@ -9795,11 +9787,13 @@ let Qo = class extends Be {
 };
 Qo.styles = ue`
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
     }
 
     brz-row {
       justify-content: space-between;
+      flex: 1;
     }
 
     :host([expand-y]) {
@@ -9808,7 +9802,6 @@ Qo.styles = ue`
 
     :host([expand-y]) brz-row {
       height: 100%;
-      align-items: stretch;
     }
 
     :host([no-gap]) {
@@ -9862,6 +9855,7 @@ Zl.styles = ue`
     brz-split-row {
       padding: var(--brz-spacing-2) var(--brz-spacing-5);
       box-shadow: inset 0 -1px 0 var(--brz-color-neutral-300);
+      min-height: var(--brz-spacing-9);
     }
 
     :host([no-border]) brz-split-row {