@limetech/lime-elements 37.2.8 → 37.4.0

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 {

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n    ENTER,\n    ENTER_KEY_CODE,\n    SPACE,\n    SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-narrow\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n    tag: 'limel-select',\n    shadow: true,\n    styleUrl: 'select.scss',\n})\nexport class Select {\n    /**\n     * Set to `true` to make the field disabled.\n     * and visually shows that the `select` component is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the component may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * This visualizes the component slightly differently.\n     * But shows no visual sign indicating that the component is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the select is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * True if the control requires a value.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Text to display next to the select.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Currently selected value or values.\n     * If `multiple` is `true`, this must be an array. Otherwise it must be a\n     * single value.\n     */\n    @Prop()\n    public value: Option | Option[];\n\n    /**\n     * List of options.\n     */\n    @Prop()\n    public options: Option[] = [];\n\n    /**\n     * Set to `true` to allow multiple values to be selected.\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when the value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Option | Option[]>;\n\n    @Element()\n    private host: HTMLLimelSelectElement;\n\n    @State()\n    private menuOpen: boolean = false;\n\n    private hasChanged: boolean = false;\n    private checkValid: boolean = false;\n    private mdcSelectHelperText: MDCSelectHelperText;\n    private mdcFloatingLabel: MDCFloatingLabel;\n    private isMobileDevice: boolean;\n    private portalId: string;\n\n    constructor() {\n        this.handleMenuChange = this.handleMenuChange.bind(this);\n        this.handleNativeChange = this.handleNativeChange.bind(this);\n        this.handleMenuTriggerKeyPress =\n            this.handleMenuTriggerKeyPress.bind(this);\n        this.openMenu = this.openMenu.bind(this);\n        this.closeMenu = this.closeMenu.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.isMobileDevice = isMobileDevice();\n\n        // It should not be possible to render the native select for consumers, but we still want to make it testable.\n        // We can set this attribute in tests to force rendering of the native select\n        if (this.host.hasAttribute('data-native')) {\n            this.isMobileDevice = true;\n        }\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n        triggerIconColorWarning(this.options);\n    }\n\n    private initialize() {\n        let element: HTMLElement;\n        element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n        if (!element) {\n            return;\n        }\n\n        this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n        element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n        if (element) {\n            this.mdcSelectHelperText = new MDCSelectHelperText(element);\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcFloatingLabel) {\n            this.mdcFloatingLabel.destroy();\n        }\n\n        if (this.mdcSelectHelperText) {\n            this.mdcSelectHelperText.destroy();\n        }\n    }\n\n    public componentDidUpdate() {\n        if (this.menuOpen) {\n            this.setMenuFocus();\n        }\n    }\n\n    public render() {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <SelectTemplate\n                id={this.portalId}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                required={this.required}\n                invalid={this.invalid}\n                label={this.label}\n                helperText={this.helperText}\n                value={this.value}\n                options={this.options}\n                onMenuChange={this.handleMenuChange}\n                onNativeChange={this.handleNativeChange}\n                onTriggerPress={this.handleMenuTriggerKeyPress}\n                multiple={this.multiple}\n                isOpen={this.menuOpen}\n                open={this.openMenu}\n                close={this.closeMenu}\n                checkValid={this.checkValid}\n                native={this.isMobileDevice}\n                dropdownZIndex={dropdownZIndex}\n            />\n        );\n    }\n\n    @Watch('menuOpen')\n    protected watchOpen(newValue: boolean, oldValue: boolean) {\n        if (this.checkValid) {\n            return;\n        }\n\n        // Menu was closed for the first time\n        if (!newValue && oldValue) {\n            this.checkValid = true;\n        }\n    }\n\n    private setMenuFocus() {\n        if (this.isMobileDevice) {\n            return;\n        }\n\n        setTimeout(() => {\n            const list: HTMLElement = document.querySelector(\n                `#${this.portalId} limel-menu-surface limel-list`,\n            );\n            const firstItem: HTMLElement =\n                list?.shadowRoot?.querySelector('[tabindex]');\n\n            if (firstItem) {\n                firstItem.focus();\n            }\n        });\n    }\n\n    private setTriggerFocus() {\n        const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n            '.limel-select-trigger',\n        );\n        trigger.focus();\n    }\n\n    private handleMenuChange(\n        event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>,\n    ) {\n        event.stopPropagation();\n\n        if (isMultiple(event.detail)) {\n            const listItems: ListItem[] = event.detail;\n            const options: Option[] = listItems.map((item) => item.value);\n            this.change.emit(options);\n\n            return;\n        }\n\n        if (!event.detail.selected) {\n            return;\n        }\n\n        const listItem: ListItem = event.detail;\n        const option: Option = listItem.value;\n        if (option.disabled) {\n            return;\n        }\n\n        this.change.emit(option);\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private openMenu() {\n        if (this.emitFirstChangeEvent()) {\n            this.hasChanged = true;\n            this.change.emit(this.options[0]);\n        }\n\n        this.menuOpen = true;\n    }\n\n    private emitFirstChangeEvent() {\n        return !this.hasChanged && this.isMobileDevice && !this.value;\n    }\n\n    private closeMenu() {\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n        const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n        const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n        if (!this.menuOpen && (isSpace || isEnter)) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.menuOpen = true;\n        }\n    }\n\n    private handleNativeChange(event: Event) {\n        event.stopPropagation();\n\n        const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n            'select.limel-select__native-control',\n        );\n        const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n            .filter((optionElement: HTMLOptionElement) => {\n                return !!optionElement.selected;\n            })\n            .map((optionElement: HTMLOptionElement) => {\n                return this.options.find(\n                    (o) => o.value === optionElement.value,\n                );\n            });\n\n        if (this.multiple) {\n            this.change.emit(options);\n\n            return;\n        }\n\n        this.change.emit(options[0]);\n        this.menuOpen = false;\n    }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n    ENTER,\n    ENTER_KEY_CODE,\n    SPACE,\n    SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n    tag: 'limel-select',\n    shadow: true,\n    styleUrl: 'select.scss',\n})\nexport class Select {\n    /**\n     * Set to `true` to make the field disabled.\n     * and visually shows that the `select` component is editable but disabled.\n     * This tells the users that if certain requirements are met,\n     * the component may become interactable.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to make the field read-only.\n     * This visualizes the component slightly differently.\n     * But shows no visual sign indicating that the component is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the select is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * True if the control requires a value.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Text to display next to the select.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Currently selected value or values.\n     * If `multiple` is `true`, this must be an array. Otherwise it must be a\n     * single value.\n     */\n    @Prop()\n    public value: Option | Option[];\n\n    /**\n     * List of options.\n     */\n    @Prop()\n    public options: Option[] = [];\n\n    /**\n     * Set to `true` to allow multiple values to be selected.\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when the value is changed.\n     */\n    @Event()\n    private change: EventEmitter<Option | Option[]>;\n\n    @Element()\n    private host: HTMLLimelSelectElement;\n\n    @State()\n    private menuOpen: boolean = false;\n\n    private hasChanged: boolean = false;\n    private checkValid: boolean = false;\n    private mdcSelectHelperText: MDCSelectHelperText;\n    private mdcFloatingLabel: MDCFloatingLabel;\n    private isMobileDevice: boolean;\n    private portalId: string;\n\n    constructor() {\n        this.handleMenuChange = this.handleMenuChange.bind(this);\n        this.handleNativeChange = this.handleNativeChange.bind(this);\n        this.handleMenuTriggerKeyPress =\n            this.handleMenuTriggerKeyPress.bind(this);\n        this.openMenu = this.openMenu.bind(this);\n        this.closeMenu = this.closeMenu.bind(this);\n\n        this.portalId = createRandomString();\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.isMobileDevice = isMobileDevice();\n\n        // It should not be possible to render the native select for consumers, but we still want to make it testable.\n        // We can set this attribute in tests to force rendering of the native select\n        if (this.host.hasAttribute('data-native')) {\n            this.isMobileDevice = true;\n        }\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n        triggerIconColorWarning(this.options);\n    }\n\n    private initialize() {\n        let element: HTMLElement;\n        element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n        if (!element) {\n            return;\n        }\n\n        this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n        element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n        if (element) {\n            this.mdcSelectHelperText = new MDCSelectHelperText(element);\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcFloatingLabel) {\n            this.mdcFloatingLabel.destroy();\n        }\n\n        if (this.mdcSelectHelperText) {\n            this.mdcSelectHelperText.destroy();\n        }\n    }\n\n    public componentDidUpdate() {\n        if (this.menuOpen) {\n            this.setMenuFocus();\n        }\n    }\n\n    public render() {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <SelectTemplate\n                id={this.portalId}\n                disabled={this.disabled || this.readonly}\n                readonly={this.readonly}\n                required={this.required}\n                invalid={this.invalid}\n                label={this.label}\n                helperText={this.helperText}\n                value={this.value}\n                options={this.options}\n                onMenuChange={this.handleMenuChange}\n                onNativeChange={this.handleNativeChange}\n                onTriggerPress={this.handleMenuTriggerKeyPress}\n                multiple={this.multiple}\n                isOpen={this.menuOpen}\n                open={this.openMenu}\n                close={this.closeMenu}\n                checkValid={this.checkValid}\n                native={this.isMobileDevice}\n                dropdownZIndex={dropdownZIndex}\n            />\n        );\n    }\n\n    @Watch('menuOpen')\n    protected watchOpen(newValue: boolean, oldValue: boolean) {\n        if (this.checkValid) {\n            return;\n        }\n\n        // Menu was closed for the first time\n        if (!newValue && oldValue) {\n            this.checkValid = true;\n        }\n    }\n\n    private setMenuFocus() {\n        if (this.isMobileDevice) {\n            return;\n        }\n\n        setTimeout(() => {\n            const list: HTMLElement = document.querySelector(\n                `#${this.portalId} limel-menu-surface limel-list`,\n            );\n            const firstItem: HTMLElement =\n                list?.shadowRoot?.querySelector('[tabindex]');\n\n            if (firstItem) {\n                firstItem.focus();\n            }\n        });\n    }\n\n    private setTriggerFocus() {\n        const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n            '.limel-select-trigger',\n        );\n        trigger.focus();\n    }\n\n    private handleMenuChange(\n        event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>,\n    ) {\n        event.stopPropagation();\n\n        if (isMultiple(event.detail)) {\n            const listItems: ListItem[] = event.detail;\n            const options: Option[] = listItems.map((item) => item.value);\n            this.change.emit(options);\n\n            return;\n        }\n\n        if (!event.detail.selected) {\n            return;\n        }\n\n        const listItem: ListItem = event.detail;\n        const option: Option = listItem.value;\n        if (option.disabled) {\n            return;\n        }\n\n        this.change.emit(option);\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private openMenu() {\n        if (this.emitFirstChangeEvent()) {\n            this.hasChanged = true;\n            this.change.emit(this.options[0]);\n        }\n\n        this.menuOpen = true;\n    }\n\n    private emitFirstChangeEvent() {\n        return !this.hasChanged && this.isMobileDevice && !this.value;\n    }\n\n    private closeMenu() {\n        this.menuOpen = false;\n        this.setTriggerFocus();\n    }\n\n    private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n        const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n        const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n        if (!this.menuOpen && (isSpace || isEnter)) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.menuOpen = true;\n        }\n    }\n\n    private handleNativeChange(event: Event) {\n        event.stopPropagation();\n\n        const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n            'select.limel-select__native-control',\n        );\n        const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n            .filter((optionElement: HTMLOptionElement) => {\n                return !!optionElement.selected;\n            })\n            .map((optionElement: HTMLOptionElement) => {\n                return this.options.find(\n                    (o) => o.value === optionElement.value,\n                );\n            });\n\n        if (this.multiple) {\n            this.change.emit(options);\n\n            return;\n        }\n\n        this.change.emit(options[0]);\n        this.menuOpen = false;\n    }\n}\n"]}

package/dist/collection/components/slider/slider.css

@@ -629,7 +629,11 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  margin-top: 0.25rem;
+}
+
+.mdc-slider {
+  height: 2.5rem;
+  margin: 0 0.75rem;
 }
 
 .mdc-floating-label,
@@ -639,7 +643,7 @@
 
 .slider__label {
   padding-left: 1.25rem;
-  top: 0.5625rem;
+  top: 0.75rem;
   color: rgba(var(--contrast-1200), 1);
 }
 :host(limel-slider.disabled:not(.readonly)) .slider__label {
@@ -650,23 +654,19 @@
   display: flex;
   order: 2;
   justify-content: space-between;
-  width: calc(100% - 1.5rem);
   margin: 0 auto;
-  margin-top: -1rem;
+  margin-top: -0.75rem;
+  width: 100%;
 }
 
 .slider__content-min-label,
 .slider__content-max-label {
+  line-height: 1;
   transition: opacity 0.2s ease;
   opacity: 0.7;
   font-size: 0.75rem;
-  top: 1.25rem;
   color: rgba(var(--contrast-1200), 1);
 }
-.slider:hover .slider__content-min-label,
-.slider:hover .slider__content-max-label {
-  opacity: 1;
-}
 
 .mdc-slider__track:before, .mdc-slider__track:after {
   content: "";
@@ -887,6 +887,9 @@
   right: -1.75rem;
 }
 
+.mdc-slider .mdc-slider__thumb {
+  top: -0.25rem;
+}
 .mdc-slider .mdc-slider__value-indicator-container {
   z-index: 1;
 }

package/dist/collection/style/internal/shared_input-select-picker.scss

@@ -25,7 +25,7 @@ $input-text-leading-icon-color: rgb(var(--contrast-900));
 $input-text-color-disabled: rgba(var(--contrast-1400), 0.5);
 $helper-text-color: $label-color;
 
-$height-of-mdc-text-field: 3.5rem; //This is written directly in rem, beucase the vaiable used to calculate things elsewhere
+$height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse the variable used to calculate things elsewhere
 $height-of-mdc-helper-text-block: 0.9375rem;
 
 $mdc-chip-background-color: rgb(var(--contrast-100));
@@ -119,6 +119,15 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             }
         }
     }
+
+    .mdc-floating-label--float-above {
+        transform: translateY(#{functions.pxToRem(-27)}) scale(0.75) !important;
+
+        .mdc-text-field--with-leading-icon & {
+            transform: translateY(#{functions.pxToRem(-25)})
+                translateX(#{functions.pxToRem(-20)}) scale(0.75) !important;
+        }
+    }
 }
 
 @mixin outlined-style-overrides {
@@ -325,7 +334,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
 
                 limel-icon {
                     width: 1.5rem;
-                    margin-right: 0.5rem;
+                    margin-right: 0.25rem;
                 }
             }