@limetech/lime-elements 37.3.0 → 37.4.0

package/dist/collection/components/chip/chip.css

@@ -61,6 +61,7 @@
   isolation: isolate;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
 }
 
 * {
@@ -70,6 +71,7 @@
 .chip {
   all: unset;
   position: relative;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -195,6 +197,7 @@ limel-badge {
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   z-index: 1;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/chip-set/chip-set.css

@@ -1885,6 +1885,13 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
 
+.mdc-floating-label--float-above {
+  transform: translateY(-1.6875rem) scale(0.75) !important;
+}
+.mdc-text-field--with-leading-icon .mdc-floating-label--float-above {
+  transform: translateY(-1.5625rem) translateX(-1.25rem) scale(0.75) !important;
+}
+
 .mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
 .mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
 .mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
@@ -1936,7 +1943,7 @@
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon {
   width: 1.5rem;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover {
   box-shadow: var(--button-shadow-hovered);
@@ -1978,16 +1985,17 @@
 
 .mdc-chip-set {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   position: relative;
 }
 .mdc-chip-set.chip-set--with-label .lime-floating-label--float-above {
   padding-left: 0.25rem;
 }
 .mdc-chip-set.mdc-chip-set--input {
-  padding: 0.5rem;
+  padding: 0.4rem 0.5rem;
   width: 100%;
 }
 .mdc-chip-set.has-clear-all-button.mdc-chip-set--input {
@@ -2037,7 +2045,7 @@
 }
 .lime-notched-outline--notched .mdc-notched-outline__notch .lime-floating-label--float-above {
   top: 1.6875rem;
-  transform: translateY(-34.75px) scale(0.75);
+  transform: translateY(-34.75px) scale(0.75) !important;
   font-size: 0.875rem;
 }
 
@@ -2056,7 +2064,7 @@
   background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
   position: absolute;
   right: 0.5rem;
-  top: 1.125rem;
+  top: calc(2.5rem / 4);
   opacity: 0;
 }
 .clear-all-button:hover {
@@ -2084,22 +2092,22 @@
 }
 
 .has-leading-icon:not(.has-chips) .mdc-text-field__input {
-  padding-left: 2.5rem;
+  padding-left: 1.5rem;
 }
 .has-leading-icon:not(.has-chips) .mdc-floating-label:not(.lime-floating-label--float-above) {
-  left: 2.5rem;
+  left: 1.5rem;
 }
 .has-leading-icon:not(.has-chips) .mdc-floating-label.mdc-floating-label--float-above {
   left: 0.25rem;
 }
 .has-leading-icon limel-chip:first-of-type {
-  margin-left: 40px;
+  margin-left: 1.5rem;
 }
 .has-leading-icon .search-icon {
   transition: transform 0.2s ease;
   position: absolute;
-  top: 1rem;
-  left: 1rem;
+  top: 0.5625rem;
+  left: 0.25rem;
 }
 .has-leading-icon limel-icon {
   background-color: transparent;
@@ -2123,7 +2131,7 @@ limel-chip.can-be-removed {
 }
 
 :host {
-  --dropzone-margin: 0.25rem;
+  --dropzone-margin: 0.125rem;
   --dropzone-color: rgb(var(--contrast-600));
 }
 
@@ -2242,4 +2250,8 @@ limel-chip.can-be-removed {
 :host(limel-chip-set:focus-within) limel-helper-line,
 :host(limel-chip-set:hover) limel-helper-line {
   will-change: grid-template-rows;
+}
+
+.mdc-text-field.mdc-text-field--outlined {
+  min-height: 2.5rem;
 }

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -176,8 +176,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  height: 3rem;
+  height: 2.5rem;
 }
 
 .title {

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -689,6 +689,72 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      rgb(var(--contrast-1500))
+  );
+}
+
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
   background-color: var(--lime-magenta);
@@ -727,13 +793,14 @@
 }
 
 :host {
+  position: relative;
   --popover-surface-width: 50rem;
   --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 
 .color-picker {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.25rem;
   grid-template-columns: auto 1fr;
 }
 
@@ -771,8 +838,8 @@
   box-sizing: border-box;
   position: relative;
   isolation: isolate;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 .chosen-color-preview:before, .chosen-color-preview:after,
 .picker-trigger:before,
@@ -801,7 +868,7 @@
 }
 
 .chosen-color-input[readonly] {
-  transform: translateY(1rem);
+  transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4));
 }
 
 :host {

package/dist/collection/components/color-picker/color-picker.css

@@ -52,6 +52,72 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      rgb(var(--contrast-1500))
+  );
+}
+
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
   background-color: var(--lime-magenta);
@@ -90,13 +156,14 @@
 }
 
 :host {
+  position: relative;
   --popover-surface-width: 50rem;
   --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 
 .color-picker {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.25rem;
   grid-template-columns: auto 1fr;
 }
 
@@ -134,8 +201,8 @@
   box-sizing: border-box;
   position: relative;
   isolation: isolate;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 .chosen-color-preview:before, .chosen-color-preview:after,
 .picker-trigger:before,
@@ -164,5 +231,5 @@
 }
 
 .chosen-color-input[readonly] {
-  transform: translateY(1rem);
+  transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4));
 }

package/dist/collection/components/form/form.css

@@ -448,7 +448,7 @@ limel-code-editor {
 }
 
 .limel-form-layout--grid {
-  --min-height-of-one-row: 3.5rem;
+  --min-height-of-one-row: 2.5rem;
   display: grid;
   column-gap: var(--form-column-gap, 1rem);
   row-gap: var(--form-row-gap, 1rem);
@@ -522,7 +522,6 @@ limel-code-editor {
   min-height: var(--min-height-of-one-row);
 }
 .limel-form-layout--grid limel-checkbox {
-  margin-top: 0.5rem;
   display: block;
 }
 .limel-form-layout--grid limel-switch {

package/dist/collection/components/header/header.js

@@ -41,6 +41,7 @@ import { getIconName } from '../icon/get-icon-props';
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-slot-actions
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow

package/dist/collection/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return [\n            <div class=\"information\">\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    <h1 class=\"heading\" title={this.heading}>\n                        {this.heading}\n                    </h1>\n                    <h2 class=\"subheading\" title={this.subheading}>\n                        {this.subheading}\n                        {this.renderSupportingText()}\n                    </h2>\n                </div>\n            </div>,\n            <slot name=\"actions\">\n                <slot />\n            </slot>,\n        ];\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" badge={true} name={icon} />;\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-slot-actions\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return [\n            <div class=\"information\">\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    <h1 class=\"heading\" title={this.heading}>\n                        {this.heading}\n                    </h1>\n                    <h2 class=\"subheading\" title={this.subheading}>\n                        {this.subheading}\n                        {this.renderSupportingText()}\n                    </h2>\n                </div>\n            </div>,\n            <slot name=\"actions\">\n                <slot />\n            </slot>,\n        ];\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" badge={true} name={icon} />;\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"]}

package/dist/collection/components/helper-line/helper-line.css

@@ -6,6 +6,7 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-size: 0.6875rem;
+  line-height: normal;
   color: rgb(var(--contrast-1200));
 }
 

package/dist/collection/components/input-field/input-field.css

@@ -1936,7 +1936,7 @@
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
   width: 1.5rem;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover, .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:hover {
   box-shadow: var(--button-shadow-hovered);
@@ -2019,6 +2019,13 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
 
+.mdc-floating-label--float-above {
+  transform: translateY(-1.6875rem) scale(0.75) !important;
+}
+.mdc-text-field--with-leading-icon .mdc-floating-label--float-above {
+  transform: translateY(-1.5625rem) translateX(-1.25rem) scale(0.75) !important;
+}
+
 .lime-empty-value-for-readonly {
   z-index: 1;
   position: absolute;
@@ -2040,10 +2047,6 @@
   opacity: 0.4;
 }
 
-.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
-  margin-right: 0.5rem;
-}
-
 .lime-text-field--empty .mdc-text-field__icon--trailing, .lime-text-field--empty a.lime-trailing-icon-for-link {
   cursor: not-allowed;
   opacity: 0.4;
@@ -2199,4 +2202,20 @@ input.mdc-text-field__input::-webkit-search-cancel-button:active {
 
 :host([type=textarea]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__resizer {
   pointer-events: all;
+}
+
+.mdc-text-field.mdc-text-field--outlined {
+  height: 2.5rem;
+}
+
+.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing, .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link {
+  padding: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-text-field__icon--leading {
+  margin-left: 0.25rem;
+}
+.mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-floating-label {
+  left: 1.5rem;
 }

package/dist/collection/components/list/list.css

@@ -4426,6 +4426,7 @@ a.mdc-list-item {
   transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
+  min-height: 2.5rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
   background-color: rgb(var(--contrast-300));
@@ -4494,9 +4495,6 @@ a.mdc-list-item {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__primary-text {
-  margin-bottom: 0.25rem;
-}
 .mdc-deprecated-list .mdc-deprecated-list-item__secondary-text,
 .mdc-deprecated-list .mdc-deprecated-list-item__primary-text,
 .mdc-deprecated-list .mdc-deprecated-list-item__command-text {
@@ -5970,12 +5968,11 @@ a.mdc-list-item {
 }
 
 :host {
-  --line-height-of-secondary-text: 1.2rem;
+  --line-height-of-secondary-text: 1rem;
 }
 
 .mdc-deprecated-list-item {
   height: auto !important;
-  min-height: 3rem;
 }
 .mdc-deprecated-list-item .mdc-deprecated-list-item__secondary-text {
   line-height: var(--line-height-of-secondary-text);

package/dist/collection/components/menu-list/menu-list.css

@@ -4500,6 +4500,7 @@ a.mdc-list-item {
   transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
+  min-height: 2.5rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
   background-color: rgb(var(--contrast-300));
@@ -4568,9 +4569,6 @@ a.mdc-list-item {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__primary-text {
-  margin-bottom: 0.25rem;
-}
 .mdc-deprecated-list .mdc-deprecated-list-item__secondary-text,
 .mdc-deprecated-list .mdc-deprecated-list-item__primary-text,
 .mdc-deprecated-list .mdc-deprecated-list-item__command-text {
@@ -6044,12 +6042,11 @@ a.mdc-list-item {
 }
 
 :host {
-  --line-height-of-secondary-text: 1.2rem;
+  --line-height-of-secondary-text: 1rem;
 }
 
 .mdc-deprecated-list-item {
   height: auto !important;
-  min-height: 3rem;
 }
 .mdc-deprecated-list-item .mdc-deprecated-list-item__secondary-text {
   line-height: var(--line-height-of-secondary-text);

package/dist/collection/components/progress-flow/progress-flow.css

@@ -21,7 +21,7 @@
 * @prop --progress-flow-icon-color--inactive: Color of the optional icons used in each step. Only affects inactive steps, defaults to text colors for inactive, active, or passed step.
 */
 :host {
-  --step-height: 2.5rem;
+  --step-height: 2rem;
   --selected-indicator-right: -0.5rem;
   --max-text-width: 10rem;
   isolation: isolate;

package/dist/collection/components/select/select.css

@@ -1643,10 +1643,12 @@
   outline: none;
   align-self: center;
   min-width: 0;
+  padding: 0 0.25rem 0 1rem;
 }
 
 .limel-select__selected-option__icon {
   margin-right: 0.5rem;
+  margin-left: -0.5rem;
   flex-shrink: 0;
 }
 
@@ -1672,9 +1674,13 @@
 .limel-select:not(.limel-select--readonly) .limel-select-trigger {
   background-color: rgba(var(--contrast-100), 0.8);
 }
+.limel-select .mdc-select__anchor {
+  height: 2.25rem;
+  padding-left: 0rem;
+}
 .limel-select .limel-select-trigger {
   border: none;
-  height: 3.5rem;
+  height: 2.5rem;
   display: inline-flex;
   align-items: center;
   border-radius: 0.3125rem;
@@ -1687,13 +1693,14 @@
 }
 .limel-select .limel-select-trigger .mdc-floating-label.mdc-floating-label--float-above {
   font-size: 0.875rem;
-  transform: translateY(-2.171875rem) scale(0.75);
+  transform: translateY(-1.6875rem) scale(0.75);
 }
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
   width: 100%;
 }
 .limel-select .mdc-select__dropdown-icon {
+  margin-right: 0.25rem;
   margin-left: 0.25rem;
 }
 .limel-select.mdc-select--disabled .limel-select-trigger {
@@ -1772,23 +1779,6 @@ select.limel-select__native-control {
   border: 0;
 }
 
-:host(.is-narrow) .limel-select .mdc-select__anchor {
-  height: 2.25rem;
-  padding-left: 0rem;
-}
-:host(.is-narrow) .limel-select .mdc-select__dropdown-icon {
-  margin-right: 0.25rem;
-}
-:host(.is-narrow) .mdc-floating-label.mdc-floating-label--float-above {
-  top: 1.75rem;
-}
-:host(.is-narrow) .limel-select__selected-option {
-  padding: 0 0.25rem 0 1rem;
-}
-:host(.is-narrow) .limel-select__selected-option__icon {
-  margin-left: -0.5rem;
-}
-
 .limel-select.mdc-select.limel-select--readonly .limel-select-trigger {
   cursor: default;
   opacity: 1;

package/dist/collection/components/select/select.js

@@ -13,7 +13,6 @@ import { SelectTemplate, triggerIconColorWarning } from './select.template';
  * @exampleComponent limel-example-select-with-empty-option
  * @exampleComponent limel-example-select-preselected
  * @exampleComponent limel-example-select-change-options
- * @exampleComponent limel-example-select-narrow
  * @exampleComponent limel-example-select-dialog
  */
 export class Select {