@skedulo/breeze-ui 0.9.0 → 0.9.1

package/dist/custom-elements.json

@@ -18496,6 +18496,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",
@@ -19213,91 +19304,181 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/helpers/css-helpers.ts",
+      "path": "src/storybook/colors.stories.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "getFocusStyles",
-          "parameters": [
+          "kind": "class",
+          "description": "Story component to render a colour swatch.\nWill extract the hex code from a supplied color var and use it as the background.",
+          "name": "ColorSwatch",
+          "members": [
             {
-              "name": "selector",
+              "kind": "field",
+              "name": "colorVar",
               "type": {
                 "text": "string"
               },
-              "description": "A CSS selector targeting an interactive element."
+              "default": "''",
+              "attribute": "colorVar"
             },
             {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
+              "kind": "field",
+              "name": "lightText",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "light-text"
             }
           ],
-          "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": [
+          "attributes": [
             {
-              "name": "selector",
+              "name": "colorVar",
               "type": {
                 "text": "string"
               },
-              "description": "A CSS selector targeting a button"
+              "default": "''",
+              "fieldName": "colorVar"
             },
             {
-              "name": "extraRules",
-              "default": "css``",
-              "description": "Optional rules to append. Useful for overrides."
+              "name": "light-text",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "lightText"
             }
           ],
-          "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."
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-sb-color-swatch",
+          "customElement": true
+        },
+        {
+          "kind": "class",
+          "description": "Story component for laying out a group of swatches",
+          "name": "ColorSwatchGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "stacked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "stacked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "stacked"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-sb-color-swatch-group",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "getFocusStyles",
+          "name": "ColorSwatch",
           "declaration": {
-            "name": "getFocusStyles",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
           }
         },
         {
-          "kind": "js",
-          "name": "invisibleButtonRules",
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch",
           "declaration": {
-            "name": "invisibleButtonRules",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "ColorSwatch",
+            "module": "src/storybook/colors.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "getInvisibleButtonStyles",
+          "name": "ColorSwatchGroup",
           "declaration": {
-            "name": "getInvisibleButtonStyles",
-            "module": "src/helpers/css-helpers.ts"
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "brz-sb-color-swatch-group",
+          "declaration": {
+            "name": "ColorSwatchGroup",
+            "module": "src/storybook/colors.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/helpers/index.ts",
-      "declarations": [],
+      "path": "src/storybook/fade-in-out.stories.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FadeInOutStory",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "shown"
+            },
+            {
+              "kind": "method",
+              "name": "handleToggle"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "shown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "shown"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "brz-sb-fade-in-out",
+          "customElement": true
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "FadeInOutStory",
           "declaration": {
-            "name": "*",
-            "package": "./css-helpers"
+            "name": "FadeInOutStory",
+            "module": "src/storybook/fade-in-out.stories.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "brz-sb-fade-in-out",
+          "declaration": {
+            "name": "FadeInOutStory",
+            "module": "src/storybook/fade-in-out.stories.ts"
           }
         }
       ]
@@ -19439,187 +19620,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/storybook/colors.stories.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Story component to render a colour swatch.\nWill extract the hex code from a supplied color var and use it as the background.",
-          "name": "ColorSwatch",
-          "members": [
-            {
-              "kind": "field",
-              "name": "colorVar",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "colorVar"
-            },
-            {
-              "kind": "field",
-              "name": "lightText",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "light-text"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "colorVar",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "colorVar"
-            },
-            {
-              "name": "light-text",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "lightText"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-sb-color-swatch",
-          "customElement": true
-        },
-        {
-          "kind": "class",
-          "description": "Story component for laying out a group of swatches",
-          "name": "ColorSwatchGroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "stacked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "stacked"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "stacked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "stacked"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-sb-color-swatch-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColorSwatch",
-          "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-color-swatch",
-          "declaration": {
-            "name": "ColorSwatch",
-            "module": "src/storybook/colors.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ColorSwatchGroup",
-          "declaration": {
-            "name": "ColorSwatchGroup",
-            "module": "src/storybook/colors.stories.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-color-swatch-group",
-          "declaration": {
-            "name": "ColorSwatchGroup",
-            "module": "src/storybook/colors.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/storybook/fade-in-out.stories.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FadeInOutStory",
-          "members": [
-            {
-              "kind": "field",
-              "name": "shown",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "shown"
-            },
-            {
-              "kind": "method",
-              "name": "handleToggle"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "shown",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "shown"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "brz-sb-fade-in-out",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FadeInOutStory",
-          "declaration": {
-            "name": "FadeInOutStory",
-            "module": "src/storybook/fade-in-out.stories.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "brz-sb-fade-in-out",
-          "declaration": {
-            "name": "FadeInOutStory",
-            "module": "src/storybook/fade-in-out.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/styles/borders.ts",
@@ -28963,10 +28963,6 @@
             {
               "description": "Apply custom styles to the value button in read-mode",
               "name": "read-mode-value-button"
-            },
-            {
-              "description": "Apply custom styles to the saved state Lozenge",
-              "name": "saved-lozenge"
             }
           ],
           "slots": [
@@ -29016,6 +29012,20 @@
               "privacy": "private",
               "description": "To avoid repetition, we extract the values of common properties from the\nwrapped Breeze Input and store them in state."
             },
+            {
+              "kind": "method",
+              "name": "setOptionsFromChildren",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "InputEl"
+                  }
+                }
+              ],
+              "description": "Sets the options state from the children of supporting input elements."
+            },
             {
               "kind": "method",
               "name": "handleValueClick",
@@ -29028,6 +29038,35 @@
               "privacy": "private",
               "description": "Handles cases where a RecordField is used to wrap inputs that are usually\nself-labelling, such as InputCheckbox. To avoid wonky layouts we grab the\nlabel from its default slot then slot it into the RecordField's label slot."
             },
+            {
+              "kind": "method",
+              "name": "getSelectValueTemplate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "ValueType | string"
+                  }
+                }
+              ],
+              "description": "Renders a Select/Multiselect value into a Lozenge"
+            },
+            {
+              "kind": "method",
+              "name": "getCheckboxValueTemplate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "checkbox",
+                  "type": {
+                    "text": "InputCheckbox"
+                  }
+                }
+              ],
+              "description": "Renders a Checkbox value into a Lozenge"
+            },
             {
               "kind": "method",
               "name": "handleSave",
@@ -29058,6 +29097,7 @@
               "default": "false",
               "description": "When a field or group is locked it cannot enter edit mode.",
               "attribute": "locked",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InlineEditBase",
                 "module": "src/components/inline-edit/inline-edit.base.ts"
@@ -29302,6 +29342,7 @@
               "default": "false",
               "description": "When a field or group is locked it cannot enter edit mode.",
               "attribute": "locked",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "InlineEditBase",
                 "module": "src/components/inline-edit/inline-edit.base.ts"
@@ -29476,7 +29517,8 @@
               },
               "default": "false",
               "description": "When a field or group is locked it cannot enter edit mode.",
-              "attribute": "locked"
+              "attribute": "locked",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -29749,12 +29791,12 @@
         {
           "kind": "variable",
           "name": "inlineEditFieldStyles",
-          "default": "css`\n  :host {\n    display: flex;\n  }\n\n  :host(:nth-of-type(n + 2)) {\n    margin-top: var(--brz-spacing-4);\n  }\n\n  .button {\n    --brz-button-color: var(--brz-color-neutral-850);\n    --brz-button-icon-color: var(--brz-color-neutral-600);\n    --brz-button-font-weight: var(--brz-font-weight-normal);\n  }\n\n  .button.offset {\n    margin-left: calc(0px - var(--brz-spacing-2));\n    margin-top: calc(0px - var(--brz-spacing-1));\n  }\n\n  :host(:not([locked])) .button {\n    width: 100%;\n  }\n\n  .button[disabled]::part(button) {\n    --brz-button-color: inherit !important;\n  }\n\n  .button::part(button) {\n    height: auto;\n    min-height: var(--brz-button-height);\n    width: 100%;\n  }\n\n  .button:hover:not([disabled])::part(button) {\n    --brz-button-background-color: var(--brz-color-neutral-250);\n  }\n\n  .button::part(contents) {\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .button::part(icon-right) {\n    display: none;\n  }\n\n  .button:hover::part(button) {\n    transition: background-color 100ms ease-in-out;\n  }\n\n  .button:hover::part(icon-right),\n  .button:focus::part(icon-right) {\n    display: block;\n  }\n\n  .button.overflowing:hover::part(icon-right),\n  .button.overflowing:focus::part(icon-right) {\n    align-self: flex-start;\n    margin-top: var(--brz-spacing-2);\n  }\n\n  .value {\n    max-width: calc(100% - var(--brz-spacing-5));\n    text-align: left;\n  }\n\n  .value.overflowing {\n    padding: calc(var(--brz-spacing-2) - var(--brz-spacing-px)) 0;\n  }\n\n  :host([locked]) .button:not(:hover) .value {\n    padding-right: var(--brz-spacing-5);\n  }\n\n  .value.truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  brz-inline-edit-controls {\n    display: block;\n    margin-top: var(--brz-spacing-2);\n  }\n`"
+          "default": "css`\n  :host {\n    display: block;\n  }\n\n  :host(:nth-of-type(n + 2)) {\n    margin-top: var(--brz-spacing-4);\n  }\n\n  .button {\n    --brz-button-color: var(--brz-color-neutral-850);\n    --brz-button-icon-color: var(--brz-color-neutral-600);\n    --brz-button-font-weight: var(--brz-font-weight-normal);\n  }\n\n  .button.offset {\n    margin-left: calc(0px - var(--brz-spacing-2));\n    margin-top: calc(0px - var(--brz-spacing-1));\n  }\n\n  :host(:not([locked])) .button {\n    width: 100%;\n  }\n\n  .button[disabled]::part(button) {\n    --brz-button-color: inherit !important;\n  }\n\n  .button::part(button) {\n    height: auto;\n    min-height: var(--brz-button-height);\n    width: 100%;\n  }\n\n  .button:hover:not([disabled])::part(button) {\n    --brz-button-background-color: var(--brz-color-neutral-250);\n  }\n\n  .button::part(contents) {\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .button::part(icon-right) {\n    display: none;\n  }\n\n  .button:hover::part(button) {\n    transition: background-color 100ms ease-in-out;\n  }\n\n  .button:hover::part(icon-right),\n  .button:focus::part(icon-right) {\n    display: block;\n  }\n\n  .button.overflowing:hover::part(icon-right),\n  .button.overflowing:focus::part(icon-right) {\n    align-self: flex-start;\n    margin-top: var(--brz-spacing-2);\n  }\n\n  .edit-mode {\n    display: inline-block;\n  }\n\n  .edit-mode.block {\n    display: block;\n  }\n\n  .value {\n    max-width: calc(100% - var(--brz-spacing-5));\n    text-align: left;\n  }\n\n  .value.overflowing {\n    padding: calc(var(--brz-spacing-2) - var(--brz-spacing-px)) 0;\n  }\n\n  :host([locked]) .button:not(:hover) .value {\n    padding-right: var(--brz-spacing-5);\n  }\n\n  .value.truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  brz-inline-edit-controls {\n    display: block;\n    margin-top: var(--brz-spacing-2);\n  }\n`"
         },
         {
           "kind": "variable",
           "name": "inlineEditGroupStyles",
-          "default": "css`\n  .inline-edit-group {\n    margin: 0;\n  }\n\n  brz-inline-edit-controls {\n    display: block;\n    margin-top: var(--brz-spacing-4);\n  }\n`"
+          "default": "css`\n  .inline-edit-group {\n    display: inline-block;\n    margin: 0;\n  }\n\n  brz-inline-edit-controls {\n    display: block;\n    margin-top: var(--brz-spacing-4);\n  }\n`"
         }
       ],
       "exports": [
@@ -31334,7 +31376,7 @@
         {
           "kind": "variable",
           "name": "recordFieldStyles",
-          "default": "css`\n  :host {\n    display: block;\n  }\n\n  :host(:nth-of-type(n + 2)) {\n    margin-top: var(--brz-spacing-4);\n  }\n\n  :host([label-position='top']) .container {\n    flex-direction: column;\n  }\n\n  :host([label-position='top']) .label {\n    margin-bottom: var(--brz-spacing-1);\n  }\n\n  :host([label-position='side']) .label {\n    align-items: flex-start;\n  }\n\n  ::slotted([slot='label']) {\n    font-weight: var(--brz-font-weight-medium);\n  }\n\n  :host([label-position='side']) ::slotted([slot='label']) {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--brz-spacing-9);\n    width: 10.25rem;\n  }\n\n  :host([label-position='side']) ::slotted([slot='label'][hidden]) {\n    display: block !important;\n  }\n\n  .label.hidden {\n    display: none;\n  }\n\n  .label-right-row {\n    margin-bottom: var(--brz-spacing-1);\n  }\n\n  .label-right-row:not(.size-full) {\n    margin-left: 11.25rem;\n  }\n\n  .container {\n    display: flex;\n    min-height: var(--brz-spacing-9);\n  }\n\n  .value {\n    align-items: center;\n    display: flex;\n  }\n\n  :host([label-position='side']) .value.multiline {\n    margin: var(--brz-spacing-2) 0;\n  }\n\n  .value ::slotted(*) {\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .value ::slotted(dd) {\n    margin: 0;\n  }\n\n  :host([label-position='side']) .value {\n    min-height: var(--brz-spacing-9);\n  }\n`"
+          "default": "css`\n  :host {\n    display: block;\n  }\n\n  :host(:nth-of-type(n + 2)) {\n    margin-top: var(--brz-spacing-4);\n  }\n\n  :host([label-position='top']) .container {\n    flex-direction: column;\n  }\n\n  :host([label-position='top']) .label {\n    margin-bottom: var(--brz-spacing-1);\n  }\n\n  :host([label-position='side']) .label {\n    align-items: flex-start;\n  }\n\n  ::slotted([slot='label']) {\n    font-weight: var(--brz-font-weight-medium);\n  }\n\n  :host([label-position='side']) ::slotted([slot='label']) {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--brz-spacing-9);\n    width: 10.25rem;\n  }\n\n  :host([label-position='side']) ::slotted([slot='label'][hidden]) {\n    display: block !important;\n  }\n\n  .label.hidden {\n    display: none;\n  }\n\n  .label-right-row {\n    margin-bottom: var(--brz-spacing-1);\n  }\n\n  .label-right-row:not(.size-full) {\n    margin-left: 11.25rem;\n  }\n\n  .container {\n    display: flex;\n    min-height: var(--brz-spacing-9);\n  }\n\n  .value {\n    align-items: center;\n    display: flex;\n  }\n\n  :host([label-position='side']) .value.multiline {\n    margin: var(--brz-spacing-2) 0;\n  }\n\n  .value ::slotted(*) {\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .value ::slotted(dd) {\n    margin: 0;\n  }\n\n  :host([label-position='side']) .value {\n    min-height: var(--brz-spacing-9);\n  }\n\n  :host([label-position='side']) .value.size-auto {\n    flex-grow: 1;\n  }\n`"
         },
         {
           "kind": "variable",