@ukic/web-components 3.0.0 → 3.1.0

package/dist/collection/components/ic-section-container/ic-section-container.stories.js

@@ -0,0 +1,62 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Section container",
+  component: "ic-section-container",
+};
+
+export const LeftAligned = {
+  render: () =>
+    html`<ic-section-container>
+      <main>
+        <div style="display: flex; justify-content: space-between">
+          <button>Start</button>
+          <button>End</button>
+        </div>
+      </main>
+    </ic-section-container>`,
+
+  name: "Left aligned",
+};
+
+export const CenterAlignment = {
+  render: () =>
+    html`<ic-section-container aligned="center">
+      <main>
+        <div style="display: flex; justify-content: space-between">
+          <button>Start</button>
+          <button>End</button>
+        </div>
+      </main>
+    </ic-section-container>`,
+
+  name: "Center alignment",
+};
+
+export const FullWidthAlignment = {
+  render: () =>
+    html`<ic-section-container aligned="full-width">
+      <main>
+        <div style="display: flex; justify-content: space-between">
+          <button>Start</button>
+          <button>End</button>
+        </div>
+      </main>
+    </ic-section-container>`,
+
+  name: "Full-width alignment",
+};
+
+export const FullHeight = {
+  render: () =>
+    html`<ic-section-container aligned="full-width" full-height>
+      <main>
+        <div style="display: flex; justify-content: space-between">
+          <button>Start</button>
+          <button>End</button>
+        </div>
+      </main>
+    </ic-section-container>`,
+
+  name: "Full-height",
+};

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

@@ -443,32 +443,55 @@ video {
 
 /**
  * @prop --input-width: Width of the input field
+ * @prop --menu-width: Width of the dropdown menu
  * @prop --ic-z-index-menu: z-index of select menu
  */
 
 :host {
   display: block;
   position: relative;
+
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --menu-max-height: 100px;
+  --border-color: var(--ic-select-field-border);
+  --border-color-hover: var(--ic-select-field-border-hover);
+  --border-color-pressed: var(--ic-select-field-border-pressed);
+  --border-color-disabled: var(--ic-select-field-border-disabled);
+  --border-color-error: var(--ic-select-field-border-error);
+  --border-color-error-hover: var(--ic-select-field-border-error-hover);
+  --border-color-error-pressed: var(--ic-select-field-border-error-pressed);
+  --border-color-success: var(--ic-select-field-border-success);
+  --border-color-success-hover: var(--ic-select-field-border-success-hover);
+  --border-color-success-pressed: var(--ic-select-field-border-success-pressed);
+  --border-color-warning: var(--ic-select-field-border-warning);
+  --border-color-warning-hover: var(--ic-select-field-border-warning-hover);
+  --border-color-warning-pressed: var(--ic-select-field-border-warning-pressed);
+  --ic-input-label-text-color: var(--ic-select-field-labe);
+  --ic-input-label-helper-text-color: var(
+    --ic-select-input-field-label-subtitle
+  );
+  --ic-input-validation-status-text-color: var(--ic-select-state-text);
+  --ic-input-validation-error: var(--ic-select-state-icon-error);
+  --ic-input-validation-warning-icon-color: var(--ic-select-state-icon-warning);
+  --ic-input-validation-success-icon-color: var(--ic-select-state-icon-success);
+  --menu-item-text-color: var(--ic-select-list-option-text);
+  --menu-bg-color: var(--ic-select-list-option-background);
+  --menu-border-color: var(--ic-select-dropdown-list-border);
+}
+
+:host(.ic-select-disabled) {
+  --ic-input-label-text-color: var(--ic-select-field-label-disabled);
+  --ic-input-label-helper-text-color: var(
+    --ic-select-input-field-label-subtitle-disabled
+  );
 }
 
 :host(.ic-select-full-width) {
   width: 100%;
 }
 
-ic-input-component-container:hover {
-  --border-color: var(--ic-action-dark-hover);
-}
-
-ic-input-component-container:active {
-  --border-color: var(--ic-action-dark-active);
-
-  color: var(--ic-action-dark-active);
-}
-
 ic-input-component-container.menu-open {
-  --border-color: var(--ic-architectural-400);
-
-  color: var(--ic-action-dark);
+  --border-color: var(--ic-select-field-border-pressed);
 }
 
 ic-input-validation .status-icon,
@@ -489,8 +512,8 @@ ic-input-label {
 select {
   border: 0;
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-color-primary-text);
+  background-color: var(--ic-select-field-background);
+  color: var(--ic-select-content-text);
   line-height: 1.5rem;
   letter-spacing: 0.005rem;
   width: 100%;
@@ -501,17 +524,18 @@ select {
           appearance: none;
   background-repeat: no-repeat;
   background-position: right 0.375rem center;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-image: var(--ic-select-mobile-dropdown-icon);
+  caret-color: var(--ic-select-input-field-text-cursor);
 }
 
 select option,
 .select-option-selected {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-select-list-option-text);
 }
 
 select:disabled {
-  color: var(--ic-architectural-200);
-  background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  color: var(--ic-select-content-text-disabled);
+  background-image: var(--ic-select-mobile-dropdown-icon-disabled);
 }
 
 select:focus {
@@ -540,16 +564,12 @@ select:not([disabled]) {
   justify-content: space-between;
   background: none;
   border: none;
+  background-color: var(--ic-select-field-background);
+  color: var(--ic-select-content-text);
 }
 
 .select-input:focus {
-  outline: var(--ic-hc-focus-outline);
-}
-
-:host(:not(.ic-select-disabled))
-  ic-input-component-container:hover
-  .select-input {
-  background-color: var(--ic-architectural-white);
+  outline: none;
 }
 
 .select-input[disabled] {
@@ -560,6 +580,23 @@ select:not([disabled]) {
   cursor: auto;
 }
 
+.select-input.with-clear-button {
+  padding-right: 0;
+}
+
+.value-text {
+  max-width: calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+
+.value-text.with-clear-button {
+  padding-right: calc(var(--ic-space-xl) + var(--ic-space-xs));
+}
+
 .searchable-select-container {
   align-items: center;
   display: flex;
@@ -569,8 +606,8 @@ select:not([disabled]) {
 
 .expand-icon {
   height: var(--ic-space-lg);
-  padding-left: var(--ic-space-xs);
-  color: var(--ic-action-dark);
+  padding-left: var(--ic-space-xxs);
+  color: var(--ic-select-expand-icon-color);
 }
 
 .expand-icon > svg {
@@ -581,17 +618,18 @@ select:not([disabled]) {
 
 :host(.ic-select-disabled) .expand-icon,
 :host(.ic-select-disabled) .expand-icon > svg > path {
-  color: var(--ic-architectural-200);
+  color: var(--ic-select-disabled-expand-icon-color);
 }
 
 :host(.ic-select-searchable) .expand-icon {
-  padding-left: var(--ic-space-xxs);
+  padding-left: 0;
   height: 2.25rem;
 }
 
 :host(.ic-select-searchable) .expand-icon > svg {
   height: 2.25rem;
-  padding: 0 0.375rem;
+  padding: 0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0
+    var(--ic-space-xxs);
 }
 
 :host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon > svg {
@@ -599,11 +637,7 @@ select:not([disabled]) {
 }
 
 .expand-icon-open {
-  color: var(--ic-action-dark);
-}
-
-.expand-icon-filled {
-  color: var(--ic-action-dark);
+  color: var(--ic-select-expand-icon-color);
 }
 
 .expand-icon-open,
@@ -611,9 +645,19 @@ select:not([disabled]) {
   transform: rotateX(180deg);
 }
 
-:host(.ic-select-disabled) .value-text,
 .placeholder {
-  color: var(--ic-color-tertiary-text);
+  color: var(--ic-select-content-placeholder-text);
+}
+
+:host(.ic-select-disabled.ic-select-searchable) .select-input::-moz-placeholder {
+  color: var(--ic-select-content-text-disabled);
+}
+
+:host(.ic-select-disabled) .value-text,
+:host(.ic-select-disabled) .select-input,
+:host(.ic-select-disabled) .placeholder,
+:host(.ic-select-disabled.ic-select-searchable) .select-input::placeholder {
+  color: var(--ic-select-content-text-disabled);
 }
 
 .select-input-end {
@@ -623,18 +667,12 @@ select:not([disabled]) {
 
 .clear-button-container {
   display: flex;
-  gap: var(--ic-space-xxs);
-  padding-left: 2.375rem;
   align-items: center;
 }
 
-:host(.ic-select-small) .clear-button-container {
-  padding-left: 1.875rem;
-}
-
 .divider {
-  width: var(--ic-border-width);
-  background-color: var(--ic-architectural-400);
+  width: var(--ic-space-1px);
+  background-color: var(--ic-select-content-divider);
   margin: var(--ic-space-xxs) 0;
   border-radius: var(--ic-space-1px);
   height: var(--ic-space-lg);
@@ -644,25 +682,37 @@ select:not([disabled]) {
   height: var(--ic-space-md);
 }
 
+:host(.ic-select-large) .divider {
+  height: var(--ic-space-xl);
+}
+
 .clear-button {
+  color: var(--ic-select-clear-button);
   position: absolute;
-  right: 2.75rem;
+  right: calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));
   border-radius: var(--ic-border-radius);
   transition: box-shadow var(--ic-easing-transition),
     border-radius var(--ic-easing-transition);
 }
 
-.clear-button:focus {
-  background-color: var(--ic-focus-blue);
-  box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);
+.clear-button:focus,
+.clear-button:active {
+  background-color: var(--ic-color-focus-inner);
+  box-shadow: inset 0 0 0 0.125rem var(--ic-color-focus-outer);
   border-radius: 0.25rem;
 }
 
-.clear-button:focus * {
-  fill: white;
+.clear-button:focus,
+.clear-button:active * {
+  fill: var(--ic-atoms-input-clear-button-focus);
+}
+
+.clear-button.searchable {
+  position: static;
 }
 
-.searchable-select-results-status {
+.searchable-select-results-status,
+.multi-select-selected-count {
   border: 0;
   clip: rect(0, 0, 0, 0, 0);
   height: var(--ic-space-1px);
@@ -674,11 +724,11 @@ select:not([disabled]) {
 }
 
 ::slotted([slot="icon"]) {
-  fill: var(--ic-color-tertiary-text);
+  fill: var(--ic-select-content-placeholder-text);
 }
 
 .has-value ::slotted([slot="icon"]) {
-  fill: var(--ic-color-primary-text);
+  fill: var(--ic-select-content-text);
 }
 
 .readonly ::slotted([slot="icon"]) {