@sebgroup/green-core 1.12.0 → 1.14.1

package/index.js

@@ -9,9 +9,9 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg6) => {
+var __accessCheck = (obj, member, msg7) => {
   if (!member.has(obj))
-    throw TypeError("Cannot " + msg6);
+    throw TypeError("Cannot " + msg7);
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
@@ -27,6 +27,14 @@ var __privateSet = (obj, member, value, setter) => {
   setter ? setter.call(obj, value) : member.set(obj, value);
   return value;
 };
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
 var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
@@ -77,8 +85,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property12) => {
-        const key = property12;
+      watchedProperties.forEach((property14) => {
+        const key = property14;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -144,7 +152,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-b357a1";
+var VER_SUFFIX = "-791bd2";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -241,6 +249,7 @@ var TransitionalStyles = class {
     if (!element || !element.shadowRoot)
       return;
     element.shadowRoot.adoptedStyleSheets = [sheet];
+    element.isUsingTransitionalStyles = true;
   }
   // This is a fallback for browsers that don't support constructed stylesheets.
   // Primarily, this is here to support Safari/iOS 15.x
@@ -294,6 +303,7 @@ var GdsElement = class extends LitElement2 {
      * The unscoped name of this element.
      */
     this.gdsElementName = "";
+    this.isUsingTransitionalStyles = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1046,9 +1056,6 @@ var GdsFormControlElement = class extends GdsElement {
   get form() {
     return __privateGet(this, _internals).form;
   }
-  get type() {
-    return getUnscopedTagName(this.localName) || "gds-form-control";
-  }
   get validity() {
     return __privateGet(this, _internals).validity;
   }
@@ -1231,6 +1238,9 @@ var GdsDropdown = class extends GdsFormControlElement {
       getScopedTagName("gds-option")
     ));
   }
+  get type() {
+    return "gds-dropdown";
+  }
   /**
    * Get the options of the dropdown.
    */
@@ -2379,6 +2389,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
       day: "dd"
     });
   }
+  get type() {
+    return "gds-datepicker";
+  }
   get dateformat() {
     return this._dateFormatLayout.layout.map((f) => f.token).join(this._dateFormatLayout.delimiter);
   }
@@ -2808,7 +2821,7 @@ import { unsafeCSS as unsafeCSS2 } from "lit";
 // dist/libs/tokens/internal/pallet.css
 var pallet_default = `/**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ * Generated on Wed, 17 Apr 2024 14:10:00 GMT
  */
 
 :host {
@@ -2969,7 +2982,7 @@ var pallet_default = `/**
 // dist/libs/tokens/internal/theme/light.css
 var light_default = `/**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ * Generated on Wed, 17 Apr 2024 14:10:00 GMT
  */
 
 :host {
@@ -3090,7 +3103,7 @@ var light_default = `/**
 // dist/libs/tokens/internal/size.css
 var size_default = `/**
  * Do not edit directly
- * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ * Generated on Wed, 17 Apr 2024 14:10:00 GMT
  */
 
 :host {
@@ -3590,15 +3603,659 @@ __decorateClass([
 GdsGroupedList = __decorateClass([
   gdsCustomElement("gds-grouped-list")
 ], GdsGroupedList);
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+import { unsafeCSS as unsafeCSS5 } from "lit";
+import { query as query4, state as state13, property as property13 } from "lit/decorators.js";
+import { when as when6 } from "lit/directives/when.js";
+import { msg as msg6 } from "@lit/localize";
+
+// libs/core/src/components/segmented-control/segment/segment.ts
+import { property as property12 } from "lit/decorators.js";
+import { unsafeCSS as unsafeCSS4 } from "lit";
+
+// libs/core/src/components/segmented-control/segment/segment.style.css
+var segment_style_default = `:host {
+  z-index: 1;
+  display: flex;
+  transition: 0.2s;
+}
+
+button {
+  flex-shrink: 0;
+  flex-grow: 1;
+  font-family: inherit;
+  padding: 0 1rem;
+  text-align: center;
+  cursor: pointer;
+  border-radius: calc(infinity * 1px);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border-width: 0;
+  font-size: inherit;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  color: var(--gds-sys-color-content-content);
+}
+
+@media (pointer: fine) {
+  button:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--gds-sys-color-state-layers-state-black-dim1),
+      transparent
+    );
+  }
+}
+
+button:focus-visible {
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+`;
+
+// libs/core/src/components/segmented-control/segment/segment.ts
+var GdsSegment = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-segmented");
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html`<button aria-current=${String(this.selected)}>
+      <slot></slot>
+    </button>`;
+  }
+};
+GdsSegment.styles = [...tokens, unsafeCSS4(segment_style_default)];
+__decorateClass([
+  property12({ type: Boolean, reflect: true })
+], GdsSegment.prototype, "selected", 2);
+__decorateClass([
+  property12()
+], GdsSegment.prototype, "value", 2);
+GdsSegment = __decorateClass([
+  gdsCustomElement("gds-segment")
+], GdsSegment);
+
+// libs/core/src/components/segmented-control/segmented-control.style.css
+var segmented_control_style_default = `:host {
+  box-sizing: border-box;
+  display: inline-flex;
+  background-color: var(--gds-sys-color-container-container-dim1);
+  border: 0.25rem solid var(--gds-sys-color-container-container-dim1);
+  gap: 0.25rem;
+  border-radius: calc(infinity * 1px);
+  contain: layout;
+  max-width: 100%;
+  overflow: hidden;
+  height: 3rem;
+}
+
+:host([size='small']) {
+  height: 2.5rem;
+}
+
+#track {
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 1;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+#segments {
+  box-sizing: border-box;
+  display: inline-flex;
+  transition: 0.2s;
+  position: relative;
+  z-index: 1;
+  gap: 0.25rem;
+}
+
+#btn-prev,
+#btn-next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  border-radius: calc(infinity * 1px);
+  background-color: var(--gds-sys-color-container-container-dim1);
+  border-width: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  aspect-ratio: 1;
+  height: 100%;
+  width: 2.5rem;
+  cursor: pointer;
+  color: var(--gds-sys-color-content-content);
+
+  @media (pointer: fine) {
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-sys-color-state-layers-state-black-dim1),
+        var(--gds-sys-color-container-container-dim1)
+      );
+    }
+  }
+}
+
+:host([size='small']) #btn-prev,
+:host([size='small']) #btn-next {
+  width: 2rem;
+}
+
+::slotted(*) {
+  flex-shrink: 0;
+  flex-grow: 1;
+  z-index: 1;
+}
+
+#indicator {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background-color: var(--gds-sys-color-container-container-bright);
+  border-radius: calc(infinity * 1px);
+  transition: transform 0.2s, width 0.2s;
+  z-index: 0;
+}
+`;
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+var BTN_SIZE = {
+  small: 36,
+  medium: 44
+};
+var getSegmentGap = (transitionalStyles) => transitionalStyles ? 0 : 4;
+var _value, _tid, _resizeObserver, _firstVisibleIndex, _calculatedSegmentWidth, _segmentWidth, _segmentsContainerLeft, _focusedIndex, _dragStartX, _dragStartLeft, _isDragging, _startDrag, _drag, _endDrag, _calcVisibleAfterDrag, _calcLayout, _applySegmentsTransform, _handleSlotChange, handleSlotChange_fn, _scrollLeft, _scrollRight, _updateScrollBtnState, _updateIndicator, _handleSegmentClick, _updateSelectedFromValue;
+var GdsSegmentedControl = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange);
+    this.segMinWidth = 100;
+    this.size = "medium";
+    __privateAdd(this, _value, void 0);
+    this._showPrevButton = false;
+    this._showNextButton = false;
+    __privateAdd(this, _tid, void 0);
+    __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
+      __privateGet(this, _tid) && clearTimeout(__privateGet(this, _tid));
+      __privateSet(this, _tid, setTimeout(() => {
+        __privateGet(this, _calcLayout).call(this);
+      }, 20));
+    }));
+    __privateAdd(this, _firstVisibleIndex, 0);
+    __privateAdd(this, _calculatedSegmentWidth, 0);
+    __privateAdd(this, _segmentWidth, 0);
+    __privateAdd(this, _segmentsContainerLeft, 0);
+    __privateAdd(this, _focusedIndex, 0);
+    __privateAdd(this, _dragStartX, 0);
+    __privateAdd(this, _dragStartLeft, 0);
+    __privateAdd(this, _isDragging, false);
+    __privateAdd(this, _startDrag, (event) => {
+      __privateSet(this, _dragStartX, event.clientX);
+      __privateSet(this, _dragStartLeft, __privateGet(this, _segmentsContainerLeft));
+      __privateSet(this, _isDragging, true);
+    });
+    __privateAdd(this, _drag, (event) => {
+      if (!__privateGet(this, _isDragging))
+        return;
+      event.preventDefault();
+      const delta = event.clientX - __privateGet(this, _dragStartX);
+      if (Math.abs(delta) < 5)
+        return;
+      try {
+        if (!this._elSegments.hasPointerCapture(event.pointerId))
+          this._elSegments.setPointerCapture(event.pointerId);
+        __privateSet(this, _segmentsContainerLeft, __privateGet(this, _dragStartLeft) + delta);
+        __privateGet(this, _applySegmentsTransform).call(this);
+      } catch {
+      }
+    });
+    __privateAdd(this, _endDrag, (event) => {
+      if (!__privateGet(this, _isDragging))
+        return;
+      __privateSet(this, _isDragging, false);
+      try {
+        this._elSegments.releasePointerCapture(event.pointerId);
+        __privateGet(this, _calcVisibleAfterDrag).call(this);
+      } catch {
+      }
+    });
+    __privateAdd(this, _calcVisibleAfterDrag, () => {
+      __privateSet(this, _firstVisibleIndex, Math.round(
+        -__privateGet(this, _segmentsContainerLeft) / __privateGet(this, _calculatedSegmentWidth)
+      ));
+      __privateGet(this, _calcLayout).call(this);
+    });
+    // Calculates the layout based on the configured min width
+    // and the available space in the track
+    __privateAdd(this, _calcLayout, (followFocus = false) => {
+      const calcNumVisibleSegments = () => {
+        const numSegments = this.segments.length;
+        const availableWidth = this._elTrack.offsetWidth;
+        if (availableWidth / numSegments > this.segMinWidth) {
+          return {
+            count: numSegments,
+            segmentWidth: (availableWidth - getSegmentGap(this.isUsingTransitionalStyles) * (numSegments - 1)) / numSegments
+          };
+        }
+        const availableWidthIncBtns = this.offsetWidth - BTN_SIZE[this.size] * 2;
+        const maxVisibleSegments = Math.floor(
+          availableWidthIncBtns / this.segMinWidth
+        );
+        const segmentWidth = (availableWidth - getSegmentGap(this.isUsingTransitionalStyles) * (maxVisibleSegments - 1)) / maxVisibleSegments;
+        return {
+          count: maxVisibleSegments,
+          segmentWidth
+        };
+      };
+      const { count } = calcNumVisibleSegments();
+      if (followFocus) {
+        if (__privateGet(this, _focusedIndex) >= __privateGet(this, _firstVisibleIndex) + count) {
+          __privateSet(this, _firstVisibleIndex, __privateGet(this, _focusedIndex) - count + 1);
+        }
+        if (__privateGet(this, _focusedIndex) < __privateGet(this, _firstVisibleIndex)) {
+          __privateSet(this, _firstVisibleIndex, __privateGet(this, _focusedIndex));
+        }
+      }
+      const endFirstIndex = this.segments.length - count;
+      const hasReachedEnd = __privateGet(this, _firstVisibleIndex) >= endFirstIndex;
+      const isAtStart = __privateGet(this, _firstVisibleIndex) <= 0;
+      if (hasReachedEnd) {
+        __privateSet(this, _firstVisibleIndex, endFirstIndex);
+      }
+      if (isAtStart) {
+        __privateSet(this, _firstVisibleIndex, 0);
+      }
+      __privateGet(this, _updateScrollBtnState).call(this, count);
+      this.updateComplete.then(() => {
+        const { segmentWidth, count: count2 } = calcNumVisibleSegments();
+        this.segments.forEach((segment) => {
+          segment.style.width = segmentWidth + "px";
+        });
+        __privateSet(this, _segmentsContainerLeft, -__privateGet(this, _firstVisibleIndex) * segmentWidth - getSegmentGap(this.isUsingTransitionalStyles) * __privateGet(this, _firstVisibleIndex));
+        __privateGet(this, _applySegmentsTransform).call(this);
+        __privateSet(this, _calculatedSegmentWidth, segmentWidth);
+        __privateSet(this, _segmentWidth, segmentWidth);
+        __privateGet(this, _updateIndicator).call(this);
+      });
+    });
+    __privateAdd(this, _applySegmentsTransform, () => {
+      window.requestAnimationFrame(() => {
+        this._elSegments.style.transform = `translateX(${__privateGet(this, _segmentsContainerLeft)}px)`;
+      });
+    });
+    __privateAdd(this, _scrollLeft, () => {
+      __privateWrapper(this, _firstVisibleIndex)._--;
+      __privateGet(this, _calcLayout).call(this);
+    });
+    __privateAdd(this, _scrollRight, () => {
+      __privateWrapper(this, _firstVisibleIndex)._++;
+      __privateGet(this, _calcLayout).call(this);
+    });
+    // Updates the visibility of the scroll buttons
+    __privateAdd(this, _updateScrollBtnState, (numVisibleSegments) => {
+      this._showPrevButton = __privateGet(this, _firstVisibleIndex) > 0;
+      this._showNextButton = __privateGet(this, _firstVisibleIndex) < this.segments.length - numVisibleSegments;
+    });
+    // Updates the selection indicator position
+    __privateAdd(this, _updateIndicator, () => {
+      const segment = this.segments.find((s) => s.selected);
+      if (segment) {
+        const selectedSegmentIndex = this.segments.indexOf(segment);
+        const offset2 = selectedSegmentIndex * __privateGet(this, _segmentWidth) + getSegmentGap(this.isUsingTransitionalStyles) * selectedSegmentIndex;
+        this._elIndicator.style.transform = `translateX(${offset2}px)`;
+        this._elIndicator.style.width = `${__privateGet(this, _segmentWidth)}px`;
+      } else {
+        this._elIndicator.style.transform = `translateX(-100%)`;
+        this._elIndicator.style.width = `0px`;
+      }
+    });
+    __privateAdd(this, _handleSegmentClick, (event) => {
+      const selectedSegment = this.segments.find(
+        (s) => s === event.target || s.contains(event.target)
+      );
+      if (selectedSegment) {
+        this.segments.forEach((s) => s.selected = false);
+        selectedSegment.selected = true;
+        __privateSet(this, _value, selectedSegment.value);
+        __privateGet(this, _updateIndicator).call(this);
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { segment: selectedSegment },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    });
+    __privateAdd(this, _updateSelectedFromValue, () => {
+      if (!__privateGet(this, _value))
+        return;
+      this.updateComplete.then(() => {
+        const selectedSegment = this.segments.find((s) => s.value === __privateGet(this, _value));
+        if (selectedSegment) {
+          this.segments.forEach((s) => s.selected = false);
+          selectedSegment.selected = true;
+          __privateSet(this, _focusedIndex, this.segments.indexOf(selectedSegment));
+          __privateGet(this, _calcLayout).call(this, true);
+        }
+      });
+    });
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(val) {
+    __privateSet(this, _value, val);
+    __privateGet(this, _updateSelectedFromValue).call(this);
+  }
+  /**
+   * Returns the segments in the control
+   * @readonly
+   */
+  get segments() {
+    return this._elSlot ? this._elSlot.assignedElements() : [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-segmented-control");
+    __privateGet(this, _resizeObserver).observe(this);
+    this.addEventListener("focusin", (e) => {
+      if (e.target instanceof GdsSegment) {
+        __privateSet(this, _focusedIndex, this.segments.indexOf(e.target));
+        __privateGet(this, _calcLayout).call(this, true);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).unobserve(this);
+  }
+  render() {
+    return html`${this._tStyles}
+      ${when6(
+      this._showPrevButton,
+      () => html`<button
+            id="btn-prev"
+            @click=${__privateGet(this, _scrollLeft)}
+            aria-label=${msg6("Scroll right")}
+          >
+            <gds-icon name="chevron-left"></gds-icon>
+          </button>`
+    )}
+      <div
+        id="track"
+        @scroll=${() => {
+      this._elTrack.scrollLeft = 0;
+    }}
+      >
+        <div
+          id="segments"
+          @pointerdown=${__privateGet(this, _startDrag)}
+          @pointermove=${__privateGet(this, _drag)}
+          @touchmove=${__privateGet(this, _drag)}
+          @pointerup=${__privateGet(this, _endDrag)}
+          @pointercancel=${__privateGet(this, _endDrag)}
+          role="list"
+        >
+          <slot
+            gds-allow="gds-segment"
+            @click=${__privateGet(this, _handleSegmentClick)}
+            @slotchange=${__privateMethod(this, _handleSlotChange, handleSlotChange_fn)}
+            role="none"
+          ></slot>
+          <div id="indicator" role="none"></div>
+        </div>
+      </div>
+      ${when6(
+      this._showNextButton,
+      () => html`<button
+            id="btn-next"
+            @click=${__privateGet(this, _scrollRight)}
+            aria-label=${msg6("Scroll right")}
+          >
+            <gds-icon name="chevron-right"></gds-icon>
+          </button>`
+    )}`;
+  }
+  _recalculateMinWidth() {
+    this.updateComplete.then(() => __privateGet(this, _calcLayout).call(this));
+  }
+};
+_value = new WeakMap();
+_tid = new WeakMap();
+_resizeObserver = new WeakMap();
+_firstVisibleIndex = new WeakMap();
+_calculatedSegmentWidth = new WeakMap();
+_segmentWidth = new WeakMap();
+_segmentsContainerLeft = new WeakMap();
+_focusedIndex = new WeakMap();
+_dragStartX = new WeakMap();
+_dragStartLeft = new WeakMap();
+_isDragging = new WeakMap();
+_startDrag = new WeakMap();
+_drag = new WeakMap();
+_endDrag = new WeakMap();
+_calcVisibleAfterDrag = new WeakMap();
+_calcLayout = new WeakMap();
+_applySegmentsTransform = new WeakMap();
+_handleSlotChange = new WeakSet();
+handleSlotChange_fn = function() {
+  const selSegmentValue = this.segments.find((s) => s.selected)?.value;
+  if (selSegmentValue) {
+    __privateSet(this, _value, selSegmentValue);
+  }
+  __privateGet(this, _calcLayout).call(this);
+};
+_scrollLeft = new WeakMap();
+_scrollRight = new WeakMap();
+_updateScrollBtnState = new WeakMap();
+_updateIndicator = new WeakMap();
+_handleSegmentClick = new WeakMap();
+_updateSelectedFromValue = new WeakMap();
+GdsSegmentedControl.styles = [tokens, unsafeCSS5(segmented_control_style_default)];
+__decorateClass([
+  property13({ type: Number, attribute: "seg-min-width" })
+], GdsSegmentedControl.prototype, "segMinWidth", 2);
+__decorateClass([
+  property13()
+], GdsSegmentedControl.prototype, "size", 2);
+__decorateClass([
+  property13()
+], GdsSegmentedControl.prototype, "value", 1);
+__decorateClass([
+  state13()
+], GdsSegmentedControl.prototype, "_tStyles", 2);
+__decorateClass([
+  query4("slot")
+], GdsSegmentedControl.prototype, "_elSlot", 2);
+__decorateClass([
+  query4("#indicator")
+], GdsSegmentedControl.prototype, "_elIndicator", 2);
+__decorateClass([
+  query4("#track")
+], GdsSegmentedControl.prototype, "_elTrack", 2);
+__decorateClass([
+  query4("#segments")
+], GdsSegmentedControl.prototype, "_elSegments", 2);
+__decorateClass([
+  state13()
+], GdsSegmentedControl.prototype, "_showPrevButton", 2);
+__decorateClass([
+  state13()
+], GdsSegmentedControl.prototype, "_showNextButton", 2);
+__decorateClass([
+  watch("segMinWidth")
+], GdsSegmentedControl.prototype, "_recalculateMinWidth", 1);
+GdsSegmentedControl = __decorateClass([
+  gdsCustomElement("gds-segmented-control")
+], GdsSegmentedControl);
+
+// libs/core/src/components/icon/icon.ts
+import { LitElement as LitElement8, unsafeCSS as unsafeCSS6 } from "lit";
+
+// libs/core/src/components/icon/stem.styles.scss
+var stem_styles_default = `svg:not([display=none]) {
+  contain: layout style;
+  display: flex;
+  height: 1lh;
+  isolation: isolate;
+  overflow: hidden;
+  width: auto;
+}
+
+symbol {
+  fill: none;
+  height: 24px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2px;
+  width: 24px;
+}`;
+
+// libs/core/src/components/icon/icon.ts
+var GdsIcon = class extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.name = "";
+  }
+  static get styles() {
+    return unsafeCSS6(stem_styles_default);
+  }
+  render() {
+    const { name } = this;
+    return html`
+      <svg display="none">
+        <symbol id="plus">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </symbol>
+        <symbol id="x">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </symbol>
+        <symbol id="chevron-right">
+          <polyline points="9 18 15 12 9 6" />
+        </symbol>
+        <symbol id="chevron-left">
+          <polyline points="15 18 9 12 15 6" />
+        </symbol>
+        <symbol id="chevron-down">
+          <polyline points="6 9 12 15 18 9" />
+        </symbol>
+        <symbol id="arrow">
+          <line x1="5" y1="12" x2="19" y2="12" />
+          <polyline points="12 5 19 12 12 19" />
+        </symbol>
+        <symbol id="bell">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+        </symbol>
+        <symbol id="calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </symbol>
+        <symbol id="lock">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </symbol>
+        <symbol id="eye">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </symbol>
+        <symbol id="hash">
+          <line x1="4" y1="9" x2="20" y2="9" />
+          <line x1="4" y1="15" x2="20" y2="15" />
+          <line x1="10" y1="3" x2="8" y2="21" />
+          <line x1="16" y1="3" x2="14" y2="21" />
+        </symbol>
+        <symbol id="mail">
+          <path
+            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+          />
+          <polyline points="22,6 12,13 2,6" />
+        </symbol>
+        <symbol id="send">
+          <line x1="22" y1="2" x2="11" y2="13" />
+          <polygon points="22 2 15 22 11 13 2 9 22 2" />
+        </symbol>
+        <symbol id="info">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </symbol>
+        <symbol id="tel">
+          <path
+            d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+          />
+        </symbol>
+        <symbol id="search">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </symbol>
+        <symbol id="user">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </symbol>
+        <symbol id="arrow-up">
+          <line x1="12" y1="19" x2="12" y2="5" />
+          <polyline points="5 12 12 5 19 12" />
+        </symbol>
+        <symbol id="arrow-down">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <polyline points="19 12 12 19 5 12" />
+        </symbol>
+        <symbol id="warning">
+          <path
+            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+          />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <path x1="12" y1="17" x2="12.01" y2="17" />
+        </symbol>
+      </svg>
+      <svg viewBox="0 0 24 24">
+        <use href="#${name}"></use>
+      </svg>
+    `;
+  }
+};
+GdsIcon.properties = {
+  open: { type: String, reflect: true },
+  name: { type: String }
+};
+GdsIcon = __decorateClass([
+  gdsCustomElement("gds-icon")
+], GdsIcon);
 export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
   GdsGrid,
   GdsGroupedList,
+  GdsIcon,
   GdsMenuHeading,
   GdsMenuItem,
   GdsOption,
+  GdsSegmentedControl,
   VER_SUFFIX,
   gdsCustomElement,
   getScopedTagName,