@limetech/lime-elements 38.7.1 → 38.7.2

package/dist/collection/components/notched-outline/notched-outline.css

@@ -0,0 +1,297 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+/*
+ * 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))
+  );
+}
+
+/**
+ * @prop --limel-notched-outline-z-index: Defines the `z-index` of the outlines & the label, since they are absolutely positioned. Useful if there are other elements with z-indexes in the consumer.
+ */
+limel-notched-outline {
+  --limel-notched-outline-border-color: rgba(var(--contrast-700), 0.65);
+  --limel-notched-outline-background-color: rgba(var(--contrast-200), 0.5);
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+limel-notched-outline *,
+limel-notched-outline *:before,
+limel-notched-outline *:after {
+  box-sizing: border-box;
+}
+
+.limel-notched-outline {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.limel-notched-outline [slot=content] {
+  background-color: var(--limel-notched-outline-background-color);
+  border-radius: var(--limel-notched-outline-border-radius, 0.25rem);
+}
+.limel-notched-outline--outlines {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  z-index: var(--limel-notched-outline-z-index, 0);
+  display: flex;
+}
+.limel-notched-outline--leading-outline, .limel-notched-outline--notch, .limel-notched-outline--trailing-outline {
+  transition: border-color 0.2s ease;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--limel-notched-outline-border-color);
+}
+.limel-notched-outline--leading-outline {
+  flex-shrink: 0;
+  width: 0.75rem;
+  border-right-width: 0;
+  border-top-left-radius: var(--limel-notched-outline-border-radius, 0.25rem);
+  border-bottom-left-radius: var(--limel-notched-outline-border-radius, 0.25rem);
+}
+.limel-notched-outline--notch {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+  border-top-color: var(--limel-notched-outline-notch-border-top-color, var(--limel-notched-outline-border-color));
+  border-right-width: 0;
+  border-left-width: 0;
+  max-width: calc(100% - 1.5rem);
+}
+.limel-notched-outline--notch label {
+  all: unset;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+  transition: color 0.2s ease, font-size 0.2s ease, transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translate3d(var(--limel-notched-outline-label-transform-x, 0), var(--limel-notched-outline-label-transform-y, 0.62rem), 0);
+  display: block;
+  padding: 0 0.25rem;
+  color: var(--limel-notched-outline-label-color, rgba(var(--contrast-1200), 1));
+  font-size: var(--limel-notched-outline-label-font-size, 0.875rem);
+  letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
+}
+.limel-notched-outline--notch label:after {
+  position: absolute;
+  right: 0;
+  padding: 0 0.25rem;
+}
+.limel-notched-outline--trailing-outline {
+  flex-grow: 1;
+  border-left-width: 0;
+  border-top-right-radius: var(--limel-notched-outline-border-radius, 0.25rem);
+  border-bottom-right-radius: var(--limel-notched-outline-border-radius, 0.25rem);
+}
+.limel-notched-outline--empty-readonly-value {
+  position: absolute;
+  top: 0.62rem;
+  left: 1rem;
+}
+.limel-notched-outline--empty-readonly-value .lime-looks-like-input-value {
+  line-height: 1.75rem;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  color: rgba(var(--contrast-1400), 1);
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.009375em;
+}
+.mdc-text-field--disabled .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+limel-notched-outline:not([disabled]:not([disabled=false])):hover {
+  --limel-notched-outline-border-color: rgba(var(--contrast-700), 1);
+  --limel-notched-outline-background-color: rgba(var(--contrast-200), 1);
+}
+limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible), limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within) {
+  --limel-notched-outline-border-color: var(--mdc-theme-primary);
+  --limel-notched-outline-background-color: rgba(var(--contrast-100), 0.8);
+}
+limel-notched-outline[disabled]:not([disabled=false]) {
+  --limel-notched-outline-label-color: rgba(var(--contrast-1200), 0.5);
+}
+limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label {
+  padding-right: 0.75rem;
+}
+limel-notched-outline[required]:not([required=false]) .limel-notched-outline--notch label:after {
+  content: "*";
+  scale: 1.3;
+}
+limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])) {
+  --limel-notched-outline-border-color: var(--lime-error-text-color);
+}
+limel-notched-outline[invalid]:not([invalid=false]):not([disabled]:not([disabled=false])):hover {
+  --limel-notched-outline-border-color: var(
+      --lime-error-text-color
+  );
+}
+limel-notched-outline[invalid]:not([invalid=false]) .limel-notched-outline--notch label:after {
+  color: var(--lime-error-text-color);
+}
+limel-notched-outline[readonly]:not([readonly=false]) {
+  --limel-notched-outline-border-color: transparent !important;
+  --limel-notched-outline-background-color: transparent !important;
+}
+limel-notched-outline[readonly]:not([readonly=false]) .limel-notched-outline--notch label {
+  transition-duration: 0s;
+}
+limel-notched-outline[has-leading-icon]:not([has-leading-icon=false]):not([has-floating-label]):not([has-value]) {
+  --limel-notched-outline-label-transform-x: 1.25rem;
+}
+limel-notched-outline[has-leading-icon] .limel-notched-outline--empty-readonly-value {
+  left: 2.25rem;
+}
+
+limel-notched-outline:not([disabled]:not([disabled=false])):hover label, limel-notched-outline:not([disabled]:not([disabled=false])):focus label, limel-notched-outline:not([disabled]:not([disabled=false])):focus-within label {
+  will-change: color, transform, font-size;
+}
+limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-visible), limel-notched-outline:not([disabled]:not([disabled=false])):has([slot=content]:focus-within) {
+  --limel-notched-outline-label-font-size: 0.65rem;
+  --limel-notched-outline-label-transform-x: 0;
+  --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+  --limel-notched-outline-notch-border-top-color: transparent;
+}
+limel-notched-outline[has-floating-label], limel-notched-outline[has-value]:not([has-value=false]), limel-notched-outline[readonly]:not([has-value]:not([has-value=true])) {
+  --limel-notched-outline-label-font-size: 0.65rem;
+  --limel-notched-outline-label-transform-x: 0;
+  --limel-notched-outline-label-transform-y: calc(-50% - 0.09375rem);
+  --limel-notched-outline-notch-border-top-color: transparent;
+}

package/dist/collection/components/notched-outline/notched-outline.js

@@ -0,0 +1,221 @@
+import { h } from '@stencil/core';
+/**
+ * This is a private component, used to render a notched outline
+ * around all input elements that can have a floating label.
+ * Inspired by Material Design's styles for input fields.
+ * We use it in various components to unify styles and avoid
+ * repeating code.
+ *
+ * :::note
+ * The component has `shadow: false`. This is to improve performance,
+ * and ensure that its internal elements are considered as internal parts
+ * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
+ * would be correctly associated with the input element's `id`, in the consumer component.
+ * :::
+ * @exampleComponent limel-example-notched-outline-basic
+ * @private
+ */
+export class NotchedOutline {
+  constructor() {
+    this.required = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.disabled = false;
+    this.label = undefined;
+    this.labelId = undefined;
+    this.hasValue = false;
+    this.hasLeadingIcon = false;
+    this.hasFloatingLabel = false;
+  }
+  render() {
+    return (h("div", { class: "limel-notched-outline" }, h("slot", { name: "content" }), h("span", { class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+  }
+  renderLabel() {
+    if (!this.label) {
+      return;
+    }
+    return (h("span", { class: "limel-notched-outline--notch" }, h("label", { htmlFor: this.labelId }, this.label)));
+  }
+  renderEmptyReadonlyValue() {
+    if (!this.readonly || this.hasValue) {
+      return;
+    }
+    return (h("span", { class: "limel-notched-outline--empty-readonly-value", "aria-hidden": "true" }, "\u2013"));
+  }
+  static get is() { return "limel-notched-outline"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["notched-outline.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["notched-outline.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` when the input element is required.\nThis applies proper visual styles, such as inclusion of an asterisk\nbeside the label."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` when the input element is readonly.\nThis applies proper visual styles, such as making the outline transparent."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the input element is\ninvalid. This applies proper visual styles, such as making the outlines red."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the input element is\ndisabled. This applies proper visual styles, such as making the outlines\nand the label transparent."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Label to display for the input element.\n:::important\nNote that the input element of the consumer component will be\nlabeled by this label, using the `labelId` prop.\n:::"
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "labelId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The `id` of the input element which should be\nlabeled by the provided label."
+        },
+        "attribute": "label-id",
+        "reflect": true
+      },
+      "hasValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` when the user has entered a value for the input element,\nshrinking the label in size, and visually rendering it above the entered value."
+        },
+        "attribute": "has-value",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hasLeadingIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` when the consumer element displays a leading icon.\nThis applies proper visual styles, such as rendering the label\ncorrectly placed beside the leading icon."
+        },
+        "attribute": "has-leading-icon",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "hasFloatingLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` when the consumer element needs to render the\nlabel above the input element, despite existence of a `value`.\nFor example in the `text-editor` or `limel-select`,\nwhere the default layout requires a floating label."
+        },
+        "attribute": "has-floating-label",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=notched-outline.js.map

package/dist/collection/components/notched-outline/notched-outline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notched-outline.js","sourceRoot":"","sources":["../../../src/components/notched-outline/notched-outline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,cAAc;;oBAOL,KAAK;oBAOL,KAAK;mBAON,KAAK;oBAQJ,KAAK;;;oBAwBL,KAAK;0BAQC,KAAK;4BASH,KAAK;;EAExB,MAAM;IACT,OAAO,CACH,WAAK,KAAK,EAAC,uBAAuB;MAC9B,YAAM,IAAI,EAAC,SAAS,GAAG;MACvB,YACI,KAAK,EAAC,iCAAiC,iBAC3B,MAAM;QAElB,YAAM,KAAK,EAAC,wCAAwC,GAAG;QACtD,IAAI,CAAC,WAAW,EAAE;QACnB,YAAM,KAAK,EAAC,yCAAyC,GAAG;QACvD,IAAI,CAAC,wBAAwB,EAAE,CAC7B,CACL,CACT,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,8BAA8B;MACtC,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAS,CAC/C,CACV,CAAC;EACN,CAAC;EAEO,wBAAwB;IAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjC,OAAO;KACV;IAED,OAAO,CACH,YACI,KAAK,EAAC,6CAA6C,iBACvC,MAAM,aAGf,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * This is a private component, used to render a notched outline\n * around all input elements that can have a floating label.\n * Inspired by Material Design's styles for input fields.\n * We use it in various components to unify styles and avoid\n * repeating code.\n *\n * :::note\n * The component has `shadow: false`. This is to improve performance,\n * and ensure that its internal elements are considered as internal parts\n * of the consumer's DOM. This way, the value `for` in `<label for=\"id-of-input-element\">`\n * would be correctly associated with the input element's `id`, in the consumer component.\n * :::\n * @exampleComponent limel-example-notched-outline-basic\n * @private\n */\n@Component({\n    tag: 'limel-notched-outline',\n    styleUrl: 'notched-outline.scss',\n    shadow: false,\n})\nexport class NotchedOutline {\n    /**\n     * Set to `true` when the input element is required.\n     * This applies proper visual styles, such as inclusion of an asterisk\n     * beside the label.\n     */\n    @Prop({ reflect: true })\n    public required = false;\n\n    /**\n     * Set to `true` when the input element is readonly.\n     * This applies proper visual styles, such as making the outline transparent.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input element is\n     * invalid. This applies proper visual styles, such as making the outlines red.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to indicate that the input element is\n     * disabled. This applies proper visual styles, such as making the outlines\n     * and the label transparent.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Label to display for the input element.\n     * :::important\n     * Note that the input element of the consumer component will be\n     * labeled by this label, using the `labelId` prop.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * The `id` of the input element which should be\n     * labeled by the provided label.\n     */\n    @Prop({ reflect: true })\n    public labelId?: string;\n\n    /**\n     * Set to `true` when the user has entered a value for the input element,\n     * shrinking the label in size, and visually rendering it above the entered value.\n     */\n    @Prop({ reflect: true })\n    public hasValue = false;\n\n    /**\n     * Set to `true` when the consumer element displays a leading icon.\n     * This applies proper visual styles, such as rendering the label\n     * correctly placed beside the leading icon.\n     */\n    @Prop({ reflect: true })\n    public hasLeadingIcon = false;\n\n    /**\n     * Set to `true` when the consumer element needs to render the\n     * label above the input element, despite existence of a `value`.\n     * For example in the `text-editor` or `limel-select`,\n     * where the default layout requires a floating label.\n     */\n    @Prop({ reflect: true })\n    public hasFloatingLabel = false;\n\n    public render() {\n        return (\n            <div class=\"limel-notched-outline\">\n                <slot name=\"content\" />\n                <span\n                    class=\"limel-notched-outline--outlines\"\n                    aria-hidden=\"true\"\n                >\n                    <span class=\"limel-notched-outline--leading-outline\" />\n                    {this.renderLabel()}\n                    <span class=\"limel-notched-outline--trailing-outline\" />\n                    {this.renderEmptyReadonlyValue()}\n                </span>\n            </div>\n        );\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"limel-notched-outline--notch\">\n                <label htmlFor={this.labelId}>{this.label}</label>\n            </span>\n        );\n    }\n\n    private renderEmptyReadonlyValue() {\n        if (!this.readonly || this.hasValue) {\n            return;\n        }\n\n        return (\n            <span\n                class=\"limel-notched-outline--empty-readonly-value\"\n                aria-hidden=\"true\"\n            >\n                –\n            </span>\n        );\n    }\n}\n"]}

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

@@ -1634,7 +1634,8 @@
 /**
  * @prop --dropdown-z-index: z-index of the dropdown menu.
  */
-:host {
+:host(limel-select) {
+  --limel-notched-outline-border-radius: 0.375rem;
   display: block;
   position: relative;
 }
@@ -1643,12 +1644,11 @@
   display: none;
 }
 
-.mdc-select--outlined .mdc-floating-label {
-  left: 1rem;
+limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline--outlines {
+  --limel-notched-outline-border-color: transparent;
 }
 
 .mdc-select__anchor,
-.mdc-floating-label,
 .mdc-select__selected-text {
   font-family: inherit;
 }
@@ -1692,9 +1692,6 @@
   flex-wrap: wrap;
   width: 100%;
 }
-.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;
@@ -1704,17 +1701,7 @@
   height: 2.5rem;
   display: inline-flex;
   align-items: center;
-  border-radius: 0.3125rem;
-}
-.limel-select .limel-select-trigger .mdc-floating-label {
-  color: rgba(var(--contrast-1200), 1);
-  width: calc(
-                100% - 1rem
-            );
-}
-.limel-select .limel-select-trigger .mdc-floating-label.mdc-floating-label--float-above {
-  font-size: 0.875rem;
-  transform: translateY(-1.6875rem) scale(0.75);
+  border-radius: 0.375rem;
 }
 .limel-select .limel-select-trigger,
 .limel-select .limel-select__selected-option {
@@ -1775,9 +1762,6 @@
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused {
   background-color: rgba(var(--contrast-100), 0.8);
 }
-.limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-floating-label {
-  color: var(--mdc-theme-primary);
-}
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused .mdc-select__dropdown-icon svg {
   fill: var(--mdc-theme-primary);
 }
@@ -1787,22 +1771,10 @@
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger[aria-expanded]:not([aria-expanded=false]), .limel-select:not(.mdc-select--disabled) .limel-select-trigger[aria-expanded=true] {
   box-shadow: var(--button-shadow-inset-pressed);
 }
-.limel-select .readonly-option {
-  position: absolute;
-  top: 1.145rem;
-}
-.limel-select.limel-select--required .mdc-floating-label::after {
-  content: "*";
-}
 .limel-select.limel-select--invalid .limel-select__selected-option__text,
 .limel-select.limel-select--invalid .invalid-icon {
   color: var(--lime-error-text-color);
 }
-.limel-select.limel-select--invalid .mdc-floating-label:not(.mdc-floating-label--float-above) {
-  max-width: calc(
-                100% - 4rem
-            );
-}
 
 .invalid-icon {
   flex-shrink: 0;

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

@@ -19,15 +19,16 @@ export const SelectTemplate = (props) => {
   const classList = {
     'limel-select': true,
     'mdc-select': true,
-    'mdc-select--outlined': true,
     'mdc-select--disabled': props.disabled,
     'limel-select--readonly': props.readonly,
-    'limel-select--required': props.required,
     'limel-select--invalid': !isValid,
-    'limel-select--empty': !hasValue,
     'limel-select--with-helper-text': typeof props.helperText === 'string',
   };
-  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText })), h(HelperText, { text: props.helperText, isValid: !props.invalid }), h(SelectDropdown, Object.assign({}, props))));
+  return [
+    h("limel-notched-outline", { class: classList, labelId: "s-label", label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: props.isOpen }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))),
+    h(HelperText, { text: props.helperText, isValid: !props.invalid }),
+    h(SelectDropdown, Object.assign({}, props)),
+  ];
 };
 const SelectValue = (props) => {
   const anchorClassList = {
@@ -35,15 +36,7 @@ const SelectValue = (props) => {
     'limel-select-trigger': true,
     'limel-select--focused': props.isOpen,
   };
-  const labelClassList = {
-    'mdc-floating-label': true,
-    'mdc-floating-label--float-above': !props.hasEmptyText ||
-      props.isOpen ||
-      props.readonly ||
-      props.hasValue,
-    'mdc-floating-label--active': props.isOpen,
-  };
-  return (h("button", { class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { id: "s-label", class: labelClassList }, props.label), h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value, props.readonly))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+  return (h("button", { slot: "content", class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
   if (props.isValid) {
@@ -149,18 +142,14 @@ function getMenuOptionFilter(selectIsRequired) {
     }
   };
 }
-function getSelectedText(value, readonly) {
-  const emptyReadOnlyOption = h("span", { class: "readonly-option" }, "\u2013");
+function getSelectedText(value) {
   const isEmptyValue = !value || (isMultiple(value) && !value.length);
   if (isEmptyValue) {
-    return readonly ? emptyReadOnlyOption : '';
+    return '';
   }
   if (isMultiple(value)) {
     return value.map((option) => option.text).join(', ');
   }
-  if (readonly && (value.value === 'empty' || value.text === '')) {
-    return emptyReadOnlyOption;
-  }
   return value.text;
 }
 function getSelectedIcon(value) {