feat(ld-select): css component

src/docs/components/docs-example/docs-example.css

@@ -48,12 +48,12 @@
 @media (prefers-color-scheme: dark) {
   @mixin docs-example-ui-dark;
 }
-.docs-ui-dark {
-  @mixin docs-example-ui-dark;
-}
 .docs-ui-light {
   @mixin docs-example-ui-light;
 }
+.docs-ui-dark {
+  @mixin docs-example-ui-dark;
+}
 
 .docs-example {
   display: block;

src/docs/components/docs-example/docs-example.tsx

@@ -9,7 +9,7 @@ import { ThemeName } from '../../../liquid/types/theme'
   shadow: false,
 })
 export class DocsExample {
-  /** Web component markup encoded as URI component. */
+  /** Web Component markup encoded as URI component. */
   @Prop() code!: string
 
   /** CSS component markup encoded as URI component. */
@@ -33,7 +33,7 @@ export class DocsExample {
   /** Is code toggled to be visible */
   @State() isCodeVisible = this.opened
 
-  /** Is web component visible (as opposed to the css component version) */
+  /** Is Web Component visible (as opposed to the css component version) */
   @State() isWebComponent = true
 
   @Listen('pickTheme')

src/docs/components/docs-switch-web-css/docs-switch-web-css.tsx

@@ -16,7 +16,7 @@ import {
   shadow: false,
 })
 export class DocsSwitchWebCss {
-  /** On stands for web component; off stands for CSS component */
+  /** On stands for Web Component; off stands for CSS component */
   @Prop({ mutable: true }) isOn = true
 
   /** Theme select change event. */

src/index.md

@@ -20,6 +20,6 @@ title: Liquid
 
 > ⚠️  **Important**: Liquid is currently in its early development stage and subject to major changes.
 
-Liquid is a UI component library based on the [Liquid Design System](https://lds.merck.design/), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and web Components, bundled in several bundle formats, which you can use in a wide veriaty of plattforms and projects.
+Liquid is a UI component library based on the [Liquid Design System](https://lds.merck.design/), focusing on accessibility and interoperability. It is built with [Stencil.js](https://stenciljs.com) and contains, inter alia, CSS Components and Web Components, bundled in several bundle formats, which you can use in a wide veriaty of plattforms and projects.
 
 <docs-page-nav next-title="Getting Started" next-href="/liquid/getting-started/"></docs-page-nav>

src/liquid/components/ld-checkbox/readme.md

@@ -508,7 +508,7 @@ Please reffer to the [ld-label](/components/ld-label/) docs for more information
 
 ### Input validation
 
-The `ld-checkbox` web component provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
+The `ld-checkbox` Web Component provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
 
 {% example %}
 <style>

src/liquid/components/ld-icon/readme.md

@@ -9,7 +9,7 @@ permalink: components/ld-icon/
 
 # ld-icon
 
-## Web component
+## Web Component
 
 {% example %}
 <ld-icon name="placeholder"></ld-icon>

src/liquid/components/ld-input/ld-input.css

@@ -1,17 +1,3 @@
-/*
-:where(.ld-input) {
-  width: 12rem;
-}
-*/
-
-ld-input {
-  border-radius: var(--ld-br-m);
-
-  > .ld-input {
-    width: 100%;
-  }
-}
-
 .ld-input {
   --ld-input-padding-x-sm: 0.5rem;
   --ld-input-padding-x-md: 0.625rem;
@@ -44,6 +30,7 @@ ld-input {
   border-radius: var(--ld-br-m);
   line-height: 1;
   min-height: var(--ld-input-min-height-md);
+  width: var(--ld-input-width);
 
   &::before {
     content: '';
@@ -409,6 +396,14 @@ ld-input {
   }
 }
 
+:where(ld-input) {
+  border-radius: var(--ld-br-m);
+
+  > .ld-input {
+    width: 100%;
+  }
+}
+
 .ld-input--dark {
   background-color: var(--ld-col-bg-lg);
 }

src/liquid/components/ld-input/readme.md

@@ -568,7 +568,7 @@ You can use [slots](#slots) in order to add static or interactive elements, such
 </div>
 {% endexample %}
 
-> **Note**: The web component `ld-input` listens for `click` events on the contained `ld-icon` component and automatically focuses the input field on icon click. The CSS component version of `ld-input` doesn't do that.
+> **Note**: The Web Component `ld-input` listens for `click` events on the contained `ld-icon` component and automatically focuses the input field on icon click. The CSS component version of `ld-input` doesn't do that.
 
 #### With button
 
@@ -967,7 +967,7 @@ You can use [slots](#slots) in order to add static or interactive elements, such
 
 ### Input validation
 
-The `ld-input` web component does not provide any properties or methods for validating the input value internally. Instead, it provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
+The `ld-input` Web Component does not provide any properties or methods for validating the input value internally. Instead, it provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
 
 {% example %}
 <style>

src/liquid/components/ld-radio/readme.md

@@ -276,7 +276,7 @@ Please reffer to the [ld-label](/components/ld-label/) docs for more information
 
 ### Input validation
 
-The `ld-radio` web component provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
+The `ld-radio` Web Component provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for `focus`, `input` and `blur` events and setting error / info messages via the [`ld-input-message`](/components/ld-input-message/) component. The following is an example on how you could implement input validation with vanilla JS:
 
 {% example %}
 <style>