@lmvz-ds/components 0.28.0 → 0.28.1

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-15T08:54:54",
+  "timestamp": "2026-06-15T10:54:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -6597,7 +6597,7 @@
       "filePath": "src/components/lmvz-select/lmvz-select.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-select",
-      "readme": "# lmvz-select\n\n\n",
+      "readme": "# lmvz-select\n\n## Props\n\n### `size`\n\n- Type: `'small' | 'default' | 'large'`\n- Default: `'default'`\n\nControls the visual height variant of the select field. Use `small` for compact layouts, `default` for standard use, and `large` for emphasis.\n\n### `highlighted`\n\n- Type: `boolean`\n- Default: `false`\n\nIndicates that an active filter or selection applies (e.g., a filter chip is active). When `true`:\n- The host attribute `[highlighted]` is present for CSS styling (`:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology consumers.\n\nWhen `false`, `data-highlighted=\"false\"` is set. Note that `aria-pressed` and `aria-selected` are not used here; they conflict with native `<select>` semantics. The `data-highlighted` attribute provides the accessible contract.\n",
       "docs": "Select component with floating label and pill-shaped trigger.\nWraps a native `<select>` element for full keyboard and form support.",
       "docsTags": [
         {
@@ -6670,6 +6670,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "highlighted",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "highlighted",
+          "reflectToAttr": true,
+          "docs": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` and `aria-selected` are intentionally not used here.\n`aria-pressed` is reserved for toggle-button roles; `aria-selected` is\nreserved for option/listbox roles. The `data-highlighted` attribute provides\nthe accessible contract without conflicting with native `<select>` semantics.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -6748,6 +6777,51 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "size",
+          "type": "\"default\" | \"large\" | \"small\"",
+          "complexType": {
+            "original": "Select.Size",
+            "resolved": "\"default\" | \"large\" | \"small\"",
+            "references": {
+              "Select": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Select",
+                "referenceLocation": "Select"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Visual size variant of the select field.\n- `small` — compact height\n- `default` — standard height (default)\n- `large` — increased height",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string | undefined",
@@ -7939,6 +8013,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/index.d.ts::Select": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.d.ts"
+    },
     "src/api/index.d.ts::Snackbar": {
       "declaration": "any",
       "docstring": "",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.28.0",
+  "version": "0.28.1",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",

package/types/api/ds.constants.d.ts

@@ -4,6 +4,7 @@ export declare const sizes: readonly ["xs", "sm", "md", "lg"];
 export declare const textSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const inputTypes: readonly ["text", "email", "password", "tel", "url", "search", "number"];
 export declare const inputSizes: readonly ["sm", "md", "lg"];
+export declare const selectSizes: readonly ["small", "default", "large"];
 export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
 export declare const iconWeights: readonly ["thin", "medium", "bold"];
 export declare const chipTypes: readonly ["active", "warning", "success", "error", "neutral"];
@@ -34,6 +35,9 @@ export declare namespace Input {
     type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
 }
+export declare namespace Select {
+    type Size = (typeof selectSizes)[number];
+}
 export declare const messageTypes: readonly ["neutral", "warning"];
 export declare namespace Message {
     type Type = (typeof messageTypes)[number];

package/types/components/lmvz-select/lmvz-select.d.ts

@@ -1,4 +1,5 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
+import type { Select } from '../../api';
 import { type AriaValidationHost } from '../../utils/aria/aria-validation-controller';
 import { ReactiveControllerHost } from '../../utils/reactive-controller-host';
 export declare class LmvzSelect extends ReactiveControllerHost implements AriaValidationHost {
@@ -14,6 +15,8 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     disabled: boolean;
     required: boolean;
     name?: string;
+    size: Select.Size;
+    highlighted: boolean;
     private selectedLabel;
     private get hasValue();
     componentDidLoad(): void;

package/types/components.d.ts

@@ -536,6 +536,11 @@ export declare namespace Components {
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
+        /**
+         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` and `aria-selected` are intentionally not used here. `aria-pressed` is reserved for toggle-button roles; `aria-selected` is reserved for option/listbox roles. The `data-highlighted` attribute provides the accessible contract without conflicting with native `<select>` semantics.
+         * @default false
+         */
+        "highlighted": boolean;
         /**
          * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
          */
@@ -549,6 +554,11 @@ export declare namespace Components {
          * @default false
          */
         "required": boolean;
+        /**
+         * Visual size variant of the select field. - `small` — compact height - `default` — standard height (default) - `large` — increased height
+         * @default 'default'
+         */
+        "size": Select.Size;
         /**
          * Currently selected value.
          */
@@ -1255,6 +1265,11 @@ export declare namespace JSX {
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
+        /**
+         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` and `aria-selected` are intentionally not used here. `aria-pressed` is reserved for toggle-button roles; `aria-selected` is reserved for option/listbox roles. The `data-highlighted` attribute provides the accessible contract without conflicting with native `<select>` semantics.
+         * @default false
+         */
+        "highlighted"?: boolean;
         /**
          * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
          */
@@ -1272,6 +1287,11 @@ export declare namespace JSX {
          * @default false
          */
         "required"?: boolean;
+        /**
+         * Visual size variant of the select field. - `small` — compact height - `default` — standard height (default) - `large` — increased height
+         * @default 'default'
+         */
+        "size"?: Select.Size;
         /**
          * Currently selected value.
          */
@@ -1528,6 +1548,8 @@ export declare namespace JSX {
         "disabled": boolean;
         "required": boolean;
         "name": string;
+        "size": Select.Size;
+        "highlighted": boolean;
     }
     export interface LmvzSnackbarAttributes {
         "status": Snackbar.Status;
@@ -1661,6 +1683,12 @@ declare const messageTypes: readonly ["neutral", "warning"];
 
 declare const scaleValues: readonly ["small", "default", "large"];
 
+export declare namespace Select {
+    export type Size = (typeof selectSizes)[number];
+}
+
+declare const selectSizes: readonly ["small", "default", "large"];
+
 declare const sizes: readonly ["xs", "sm", "md", "lg"];
 
 export declare namespace Snackbar {

package/types/index.d.ts

@@ -1,6 +1,6 @@
 export * from '@lmvz-ds/aria-validation';
 export type * from './components.d.ts';
-export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, messageTypes, textSizes } from './api/ds.constants';
+export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, messageTypes, selectSizes, textSizes } from './api/ds.constants';
 export type { LmvzDS, Typography } from './api';
 export * from './components/lmvz-message/public';
 export * from './components/lmvz-snackbar/public';

package/lmvz-components/p-6a1c3088.entry.js

@@ -1 +0,0 @@
-import{g as e,r as l,c as t,h as a,H as s}from"./p-BPeerEwm.js";import{A as o}from"./p-CPOia2kT.js";import{R as c}from"./p-FBuCCcFC.js";import"./p-CdDO7mQa.js";let i=0;const r=class extends c{get el(){return e(this)}get validationEl(){return this.el}selectId="lmvz-select-"+i++;nativeSelectEl;constructor(e){super(),l(this,e),this.lmvzChange=t(this,"lmvzChange",7),this.addController(new o(this))}lmvzChange;value;label;helperText;disabled=!1;required=!1;name;selectedLabel="";get hasValue(){return Boolean(this.value)}componentDidLoad(){this.syncSelectedLabel(),super.componentDidLoad()}handleValueChange(e){this.nativeSelectEl&&this.nativeSelectEl.value!==(e??"")&&(this.nativeSelectEl.value=e??""),this.syncSelectedLabel()}syncSelectedLabel(){if(!this.nativeSelectEl)return;const e=this.nativeSelectEl.selectedIndex;this.selectedLabel=e>=0?this.nativeSelectEl.options[e]?.text??"":""}handleChange=e=>{const l=e.target;this.value=l.value,this.syncSelectedLabel(),this.lmvzChange.emit(l.value)};render(){const e=this.hasValue;return a(s,{key:"ea378aacdaae4df8eaecb3e906815d3d97b0b7b3"},a("div",{key:"28d99d298556ca10233fcf7ebe159328989924bd",class:"select-wrapper"},a("label",{key:"05e4969c87d11387a80c76731fb9e4f862554211",htmlFor:this.selectId,class:e?"floating-label":"assistive-label"},this.label,this.required&&e&&a("span",{key:"4d1e5afd375b43a14e1b34214139fde45178b0ce","aria-hidden":"true"}," *")),a("div",{key:"93ba4ccbf77a17caaddeec5aa2d7576062dc47dd","aria-hidden":"true"},a("span",{key:"0c7054456cc775823dc3c118709e9dff72acbcb8"},e?this.selectedLabel:this.label,this.required&&!e&&a("span",{key:"1c8a75e56c0ca0187809e3c298a7e23304428dff","aria-hidden":"true"}," *")),a("span",{key:"1e696fd7a1203c1705e579c4425ccdd5d9e621a7"},a("img",{key:"c5723c1a240c360c50d02ff1b66c0bebb4337788",src:"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=",alt:""}))),a("select",{key:"e50855b52dd997b6496ff8d0de23b2240843f742",id:this.selectId,ref:e=>this.nativeSelectEl=e,name:this.name,disabled:this.disabled,required:this.required,"aria-label":this.label,onChange:this.handleChange},!e&&a("option",{key:"9044ee2e697c8e41e25acd019dabbf9dd2e54d3d",value:"",disabled:!0,selected:!0,hidden:!0}),a("slot",{key:"87e0c5c64015c3920d33f4c316c1cf7ed94be4f0"}))),this.helperText&&a("div",{key:"745e3512848019291c06bd7f0dcc230f63d960c1",role:"status"},this.helperText))}static get watchers(){return{value:[{handleValueChange:0}]}}};r.style="@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);       --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-select-height: 40px;   --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   cursor: pointer;   position: relative;   z-index: 1;   transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-select-text-color);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } img.sc-lmvz-select {   display: block;   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; }";export{r as lmvz_select}

package/lmvz-components/p-BTa7u4To.js

@@ -1 +0,0 @@
-const a=["xs","sm","md","lg"],s=[...a,"xl"],e=["text","email","password","tel","url","search","number"],r=["sm","md","lg"],l=[...a,"inherit"],t=["thin","medium","bold"],m=["active","warning","success","error","neutral"],n=["default","small"],i=["neutral","warning"];export{m as a,t as b,n as c,r as d,e,l as i,i as m,s as t}