feat: select

packages/components/src/components/dropdown-select-item/dropdown-select-item.css

@@ -0,0 +1,16 @@
+:host {
+}
+
+/*!*option*!*/
+
+[part~='base'] {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+[part~='prefix'],
+[part~='label'],
+[part~='suffix'] {
+  display: flex;
+}

packages/components/src/components/dropdown-select-item/dropdown-select-item.tsx

@@ -0,0 +1,30 @@
+import { Component, Element, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'scale-dropdown-select-item',
+  styleUrl: 'dropdown-select-item.css',
+  shadow: true,
+})
+export class DropdownSelectItem {
+  @Element() hostElement: HTMLElement;
+  @Prop() selected?: boolean;
+  @Prop() focused?: boolean;
+  @Prop() value?: any;
+
+  render() {
+    return (
+      <div part="base">
+        <div part="prefix">
+          <slot name="prefix"></slot>
+        </div>
+
+        <div part="label">
+          <slot></slot>
+        </div>
+        <div part="suffix">
+          <slot name="suffix"></slot>
+        </div>
+      </div>
+    );
+  }
+}

packages/components/src/components/dropdown-select-item/readme.md

@@ -0,0 +1,29 @@
+# scale-dropdown-select-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type      | Default     |
+| ---------- | ---------- | ----------- | --------- | ----------- |
+| `focused`  | `focused`  |             | `boolean` | `undefined` |
+| `selected` | `selected` |             | `boolean` | `undefined` |
+| `value`    | `value`    |             | `any`     | `undefined` |
+
+
+## Shadow Parts
+
+| Part       | Description |
+| ---------- | ----------- |
+| `"base"`   |             |
+| `"label"`  |             |
+| `"prefix"` |             |
+| `"suffix"` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/dropdown-select/dropdown-select.css

@@ -0,0 +1,293 @@
+:host {
+  --font-weight: var(--telekom-typography-font-weight-bold);
+  --height: var(--telekom-spacing-unit-x12);
+  --color: var(--telekom-color-text-and-icon-standard);
+  --color-disabled: var(--telekom-color-text-and-icon-disabled);
+  --background-disabled: none;
+  --background-hover: var(--telekom-color-ui-state-fill-hovered);
+  --border: var(--telekom-spacing-unit-x025) solid
+    var(--telekom-color-ui-border-standard);
+  --border-color-hover: var(--telekom-color-ui-border-hovered);
+  --border-color-focus: var(--telekom-color-ui-border-hovered);
+  --border-color-disabled: var(--telekom-color-ui-border-disabled);
+  --border-invalid: var(--telekom-spacing-unit-x05) solid
+    var(--telekom-color-functional-danger-hovered);
+  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
+    var(--telekom-color-functional-focus);
+  --spacing-x: var(--telekom-spacing-unit-x3);
+  --transition: all var(--telekom-motion-duration-transition)
+    var(--telekom-motion-easing-standard);
+  --radius: var(--telekom-radius-standard);
+
+  /*combobox*/
+  --transition-combobox: var(--transition);
+  --font-size-combobox: var(--telekom-typography-font-size-body);
+  --background-combobox: var(--telekom-color-ui-state-fill-standard);
+  --spacing-combobox: var(--telekom-spacing-unit-x3)
+    var(--telekom-spacing-unit-x10) 0 calc(var(--spacing-x) - 1px);
+
+  /*helper-text*/
+  --transition-helper-text: var(--transition);
+  --font-size-helper-text: var(--telekom-typography-font-size-small);
+  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
+  --color-helper-text: var(
+    --telekom-color-text-and-icon-functional-informational
+  );
+  --color-helper-text-invalid: var(
+    --telekom-color-text-and-icon-functional-danger
+  );
+
+  /*meta*/
+  --spacing-y-meta: var(--telekom-spacing-unit-x1);
+  --color-meta: var(--telekom-color-text-and-icon-standard);
+
+  /*icon*/
+  --height-icon: var(--telekom-spacing-unit-x6);
+  --color-icon: var(--telekom-color-text-and-icon-standard);
+  --color-icon-hover: var(--telekom-color-text-and-icon-standard);
+  --color-icon-active: var(--telekom-color-text-and-icon-standard);
+  --transition-icon: var(--transition);
+
+  /*label*/
+  --color-label: var(--telekom-color-text-and-icon-additional);
+  --z-index-label: var(--scl-z-index-10);
+  --transition-label: var(--transition);
+  --font-size-label: var(--telekom-typography-font-size-body);
+  --font-weight-label: var(--telekom-typography-font-weight-medium);
+  --font-size-label-focus: var(--telekom-typography-font-size-footnote);
+  --font-weight-label-focus: var(--telekom-typography-font-weight-bold);
+  --line-height-label-animated: var(--telekom-typography-font-size-small);
+  --transform-label: translate(
+    var(--spacing-x),
+    calc((var(--telekom-spacing-unit-x12) - var(--font-size-label)) / 2)
+  );
+  --transform-label-animated: translate(
+    var(--spacing-x),
+    var(--telekom-spacing-unit-x2)
+  );
+
+  /*listbox*/
+  --background-listbox: var(--telekom-color-background-surface);
+  --box-shadow-listbox: 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  --max-height-listbox: 300px;
+  --z-index-listbox: 99;
+
+  /*option  */
+  --outline-color-option: var(--telekom-color-functional-focus);
+}
+
+/*combobox-container*/
+[part='combobox-container'] *,
+[part='combobox-container'] *::before,
+[part='combobox-container'] *::after {
+  box-sizing: border-box;
+}
+
+[part='combobox-container'] {
+  display: block;
+  position: relative;
+}
+
+/*combobox*/
+[part='combobox'] {
+  width: 100%;
+  height: var(--height);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  outline: none;
+  padding: var(--spacing-combobox);
+  z-index: 1;
+  box-sizing: border-box;
+  transition: var(--transition-combobox);
+  font-family: inherit;
+  font-size: var(--font-size-combobox);
+  border-radius: var(--radius);
+  border: var(--border);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--background-combobox);
+  color: var(--color);
+}
+
+[part~='select']:not([part~='disabled'])
+  [part='combobox']:hover
+  ~ [part='icon'] {
+  color: var(--color-icon-hover);
+}
+[part~='select']:not([part~='disabled'])
+  [part='combobox']:active
+  ~ [part='icon'] {
+  color: var(--color-icon-active);
+}
+
+[part~='select']:not([part~='disabled']):not([part~='invalid'])
+  [part='combobox']:hover {
+  border-color: var(--border-color-hover);
+  background-color: var(--background-hover);
+}
+
+[part~='select']:not([part~='disabled'])[part~='invalid']
+  [part='combobox']:hover {
+  background-color: var(--background-hover);
+}
+
+[part~='select']:not([part~='disabled']):not([part~='invalid'])
+  [part='combobox']:focus {
+  border-color: var(--border-color-focus);
+}
+
+[part~='select']:not([part~='disabled']):not([part~='steal-focus'])
+  [part='combobox']:focus {
+  box-shadow: var(--box-shadow-focus);
+}
+
+[part~='invalid'] [part='combobox'] {
+  border: var(--border-invalid);
+}
+
+[part~='transparent'] [part='combobox'] {
+  background-color: transparent;
+}
+
+[part~='disabled'] [part='combobox'] {
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+  color: var(--color-disabled);
+  background: var(--background-disabled);
+}
+
+/*helper-text*/
+[part='helper-text'] {
+  font-weight: var(--font-weight);
+  transition: var(--transition-helper-text);
+  padding-left: var(--spacing-x);
+  font-size: var(--font-size-helper-text);
+  line-height: var(--line-height-helper-text);
+  color: var(--color-helper-text);
+}
+
+[part~='invalid'] [part='helper-text'] {
+  color: var(--color-helper-text-invalid);
+}
+
+[part~='disabled'] [part='helper-text'] {
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+  color: var(--color-disabled);
+  background: var(--background-disabled);
+}
+
+/*meta*/
+[part='meta'] {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--spacing-y-meta);
+  color: var(--color-meta);
+}
+
+/*icon*/
+[part='icon'] {
+  top: 50%;
+  right: var(--spacing-x);
+  position: absolute;
+  transform: translateY(-50%);
+  pointer-events: none;
+  height: var(--height-icon);
+  color: var(--color-icon);
+  transition: var(--transition-icon);
+}
+
+[part~='disabled'] [part='icon'] {
+  color: var(--color-disabled);
+}
+
+/*label*/
+[part='label'] {
+  top: 0;
+  left: 0;
+  color: var(--color-label);
+  display: flex;
+  z-index: var(--z-index-label);
+  position: absolute;
+  transition: var(--transition-label);
+  pointer-events: none;
+  font-size: var(--font-size-label);
+  transform: var(--transform-label);
+  font-weight: var(--font-weight-label);
+}
+
+[part~='animated'] [part='label'] {
+  transform: var(--transform-label-animated);
+  font-size: var(--font-size-label-focus);
+  font-weight: var(--font-weight-label-focus);
+  line-height: var(--line-height-label-animated);
+}
+
+[part~='disabled'] [part='label'] {
+  cursor: not-allowed;
+  border-color: var(--border-color-disabled);
+  color: var(--color-disabled);
+  background: var(--background-disabled);
+}
+
+/*listbox*/
+[part='listbox'] {
+  overflow-y: auto;
+  position: relative;
+  max-height: var(--max-height-listbox);
+}
+
+[part='listbox-pad'] {
+  background: var(--background-listbox);
+  box-shadow: var(--box-shadow-listbox);
+  border-radius: var(--radius);
+  padding: var(--radius) 0;
+  margin-top: var(--telekom-line-weight-highlight);
+  left: 0;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: var(--z-index-listbox);
+  display: none;
+}
+
+[part~='open'] [part='listbox-pad'] {
+  display: block;
+}
+
+[part~='transparent'] [part='listbox'] {
+  background-color: transparent;
+}
+
+/*option*/
+[part~='option'] {
+  color: var(--color);
+}
+
+[part~='option']:hover {
+  background-color: var(--background-hover);
+}
+
+[part~='option'][part~='current'] {
+  outline: 3px solid var(--outline-color-option);
+  outline-offset: -3px;
+}
+
+[part~='option'][aria-selected='true'] {
+  padding-right: 30px;
+  position: relative;
+}
+
+[part~='option'][aria-selected='true'] scale-icon-action-success {
+  position: absolute;
+  right: 16px;
+  top: 12px;
+}
+
+[part~='option'] scale-dropdown-select-item::part(base) {
+  padding: 12px;
+}