@sebgroup/green-core 1.14.0 → 1.15.0

package/components/icon/icon.d.ts

@@ -12,5 +12,5 @@ export declare class GdsIcon extends LitElement {
             type: StringConstructor;
         };
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): any;
 }

package/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './grid/grid';
 export * from './grouped-list/grouped-list';
 export * from './segmented-control/segmented-control';
 export * from './icon/icon';
+export * from './theme/theme';

package/components/theme/theme.d.ts

@@ -0,0 +1,20 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-theme
+ *
+ * A component that provides CSS variables for a part of the DOM tree.
+ * Every descendant of this component will inherit the CSS variables
+ * provided by the theme set on this component.
+ *
+ * @slot - The content to apply the theme to.
+ *
+ * @status beta
+ */
+export declare class GdsTheme extends GdsElement {
+    /**
+     * The theme mode. Can be `light`, `dark`, or `auto`.
+     */
+    colorScheme: 'light' | 'dark' | 'auto';
+    connectedCallback(): void;
+    render(): any;
+}

package/components/theme/theme.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/gds-element.d.ts

@@ -4,6 +4,10 @@ export declare class GdsElement extends LitElement {
      * The unscoped name of this element.
      */
     gdsElementName: string;
-    isUsingTransitionalStyles: boolean;
+    /**
+     * Whether the element is using transitional styles.
+     * @internal
+     */
+    _isUsingTransitionalStyles: boolean;
     connectedCallback(): void;
 }

package/index.js

@@ -85,8 +85,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property14) => {
-        const key = property14;
+      watchedProperties.forEach((property15) => {
+        const key = property15;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -152,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 = "-8a7149";
+var VER_SUFFIX = "-633bb8";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -204,7 +204,7 @@ function getUnscopedTagName(tagName) {
 import { property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
-// libs/core/src/utils/helpers/transitional-styles.ts
+// libs/core/src/utils/transitional-styles/transitional-styles.ts
 import { html as html2 } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 function supportsConstructedStylesheets() {
@@ -215,18 +215,19 @@ function supportsConstructedStylesheets() {
     return false;
   }
 }
-var TransitionalStyles = class {
+var TransitionalStyles = class _TransitionalStyles {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
     this.sheetsLegacy = /* @__PURE__ */ new Map();
     this.useLegacyStylesheets = !supportsConstructedStylesheets();
+    this.chlorophyllTokens = new CSSStyleSheet();
   }
   static get instance() {
     if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
       globalThis.__gdsTransitionalStyles = {
         ...globalThis.__gdsTransitionalStyles,
-        [VER_SUFFIX]: new TransitionalStyles()
+        [VER_SUFFIX]: new _TransitionalStyles()
       };
     return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
@@ -248,10 +249,10 @@ var TransitionalStyles = class {
     const element = this.elements.get(styleKey);
     if (!element || !element.shadowRoot)
       return;
-    element.shadowRoot.adoptedStyleSheets = [sheet];
-    element.isUsingTransitionalStyles = true;
+    element.shadowRoot.adoptedStyleSheets = [this.chlorophyllTokens, sheet];
+    element._isUsingTransitionalStyles = true;
   }
-  // This is a fallback for browsers that don't support constructed stylesheets.
+  // This is a fallback for browsers that dosen't support constructed stylesheets.
   // Primarily, this is here to support Safari/iOS 15.x
   //
   // To work around the lack of Constructed Stylesheets, we use a regular <style>
@@ -261,7 +262,7 @@ var TransitionalStyles = class {
   // Lit itself will also add a <style> element to the shadow root in these browsers,
   // meaning that we have to override the base styles added from the static style
   // property in this case. This is what the `all: revert` rule is for.
-  // We can use cascade layers to ensure that the revert rule ovverides the base styles
+  // We can use cascade layers to ensure that the revert rule overides the base styles
   // but not the transitional styles.
   // `@layer base, reset, transitional-styles;`
   applyToElementLegacy(styleKey) {
@@ -277,6 +278,7 @@ var TransitionalStyles = class {
       }
       ${unsafeHTML(sheet)}
     </style>`;
+    element._isUsingTransitionalStyles = true;
   }
   register(name, styles2) {
     if (this.useLegacyStylesheets) {
@@ -295,15 +297,19 @@ var TransitionalStyles = class {
 import "reflect-metadata";
 
 // libs/core/src/gds-element.ts
-import { LitElement as LitElement2 } from "lit";
-var GdsElement = class extends LitElement2 {
+import { LitElement } from "lit";
+var GdsElement = class extends LitElement {
   constructor() {
     super(...arguments);
     /**
      * The unscoped name of this element.
      */
     this.gdsElementName = "";
-    this.isUsingTransitionalStyles = false;
+    /**
+     * Whether the element is using transitional styles.
+     * @internal
+     */
+    this._isUsingTransitionalStyles = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -637,8 +643,8 @@ var GdsOption = class extends Focusable(GdsElement) {
       else
         this.removeAttribute("highlighted");
     }
-    return html3`${this._tStyles}${when(isMultiple, () => checkbox)}
-      <slot></slot>`;
+    return html3`${this._tStyles}
+      <div>${when(isMultiple, () => checkbox)} <slot></slot></div>`;
   }
 };
 _hidden = new WeakMap();
@@ -1008,11 +1014,9 @@ GdsPopover = __decorateClass([
 
 // libs/core/src/components/form-control.ts
 import { property as property4 } from "lit/decorators.js";
-var _internals;
 var GdsFormControlElement = class extends GdsElement {
   constructor() {
     super();
-    __privateAdd(this, _internals, void 0);
     this.invalid = false;
     this.name = "";
     /**
@@ -1023,9 +1027,9 @@ var GdsFormControlElement = class extends GdsElement {
       this.value = void 0;
     };
     try {
-      __privateSet(this, _internals, this.attachInternals());
+      this.#internals = this.attachInternals();
     } catch (e) {
-      __privateSet(this, _internals, {
+      this.#internals = {
         form: this.closest("form"),
         setFormValue: (value) => {
           this.value = value;
@@ -1050,37 +1054,41 @@ var GdsFormControlElement = class extends GdsElement {
         willValidate: true,
         checkValidity: () => true,
         reportValidity: () => true
-      });
+      };
     }
   }
+  #internals;
+  static {
+    this.formAssociated = true;
+  }
   get form() {
-    return __privateGet(this, _internals).form;
+    return this.#internals.form;
   }
   get validity() {
-    return __privateGet(this, _internals).validity;
+    return this.#internals.validity;
   }
   get validationMessage() {
-    return __privateGet(this, _internals).validationMessage;
+    return this.#internals.validationMessage;
   }
   get willValidate() {
-    return __privateGet(this, _internals).willValidate;
+    return this.#internals.willValidate;
   }
   checkValidity() {
-    return __privateGet(this, _internals).checkValidity();
+    return this.#internals.checkValidity();
   }
   reportValidity() {
-    return __privateGet(this, _internals).reportValidity();
+    return this.#internals.reportValidity();
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateGet(this, _internals).form?.addEventListener("reset", this._handleFormReset);
+    this.#internals.form?.addEventListener("reset", this._handleFormReset);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateGet(this, _internals).form?.removeEventListener("reset", this._handleFormReset);
+    this.#internals.form?.removeEventListener("reset", this._handleFormReset);
   }
   __handleValidityChange() {
-    __privateGet(this, _internals).setValidity(
+    this.#internals.setValidity(
       {
         badInput: false,
         customError: this.invalid,
@@ -1098,11 +1106,9 @@ var GdsFormControlElement = class extends GdsElement {
     );
   }
   __handleValueChange() {
-    __privateGet(this, _internals).setFormValue(this.value);
+    this.#internals.setFormValue(this.value);
   }
 };
-_internals = new WeakMap();
-GdsFormControlElement.formAssociated = true;
 __decorateClass([
   property4({
     type: Boolean,
@@ -1566,22 +1572,22 @@ var context_menu_styles_default = style6;
 // libs/core/src/primitives/menu/menu.ts
 import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 import { state as state5 } from "lit/decorators.js";
+var _slotRef2;
 var GdsMenu = class extends GdsElement {
   constructor() {
     super();
-    this.#slotRef = createRef3();
+    __privateAdd(this, _slotRef2, createRef3());
     new ListboxKbNavController(this);
   }
-  #slotRef;
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "menu");
     TransitionalStyles.instance.apply(this, "gds-listbox");
   }
   get navigableItems() {
-    if (!this.#slotRef.value)
+    if (!__privateGet(this, _slotRef2).value)
       return [];
-    return unwrap(this.#slotRef.value).assignedElements().filter(
+    return unwrap(__privateGet(this, _slotRef2).value).assignedElements().filter(
       (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
     ) || [];
   }
@@ -1592,9 +1598,10 @@ var GdsMenu = class extends GdsElement {
     this.navigableItems[0]?.focus();
   }
   render() {
-    return html`${this._tStyles}<slot ${ref3(this.#slotRef)}></slot>`;
+    return html`${this._tStyles}<slot ${ref3(__privateGet(this, _slotRef2))}></slot>`;
   }
 };
+_slotRef2 = new WeakMap();
 __decorateClass([
   state5()
 ], GdsMenu.prototype, "_tStyles", 2);
@@ -1730,7 +1737,8 @@ var GdsMenuItem = class extends Focusable(GdsElement) {
     TransitionalStyles.instance.apply(this, "gds-option");
   }
   render() {
-    return html`${this._tStyles}<slot></slot>`;
+    return html`${this._tStyles}
+      <div><slot></slot></div>`;
   }
 };
 _handleOnClick = new WeakMap();
@@ -2026,10 +2034,10 @@ GdsCalendar = __decorateClass([
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement6 } from "lit";
+import { LitElement as LitElement5 } from "lit";
 import { property as property8, state as state9 } from "lit/decorators.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
-var GdsDatePartSpinner = class extends LitElement6 {
+var GdsDatePartSpinner = class extends LitElement5 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -2812,7 +2820,7 @@ GdsDatepicker = __decorateClass([
 ], GdsDatepicker);
 
 // libs/core/src/components/grid/grid.ts
-import { css as css10, LitElement as LitElement7, unsafeCSS as unsafeCSS3 } from "lit";
+import { css as css10, LitElement as LitElement6, unsafeCSS as unsafeCSS3 } from "lit";
 import { property as property10, state as state11 } from "lit/decorators.js";
 
 // libs/core/src/tokens.style.ts
@@ -2821,7 +2829,7 @@ import { unsafeCSS as unsafeCSS2 } from "lit";
 // dist/libs/tokens/internal/pallet.css
 var pallet_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Apr 2024 10:11:05 GMT
+ * Generated on Thu, 18 Apr 2024 14:24:24 GMT
  */
 
 :host {
@@ -2982,7 +2990,7 @@ var pallet_default = `/**
 // dist/libs/tokens/internal/theme/light.css
 var light_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Apr 2024 10:11:05 GMT
+ * Generated on Thu, 18 Apr 2024 14:24:24 GMT
  */
 
 :host {
@@ -3103,7 +3111,7 @@ var light_default = `/**
 // dist/libs/tokens/internal/size.css
 var size_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Apr 2024 10:11:05 GMT
+ * Generated on Thu, 18 Apr 2024 14:24:24 GMT
  */
 
 :host {
@@ -3335,7 +3343,7 @@ var grid_style_css_default = style8;
 
 // libs/core/src/components/grid/grid.ts
 var BreakpointPattern = /(?<l>l:([a-z0-9]+))?\s*(?<m>m:([a-z0-9]+))?\s*(?<s>s:([a-z0-9]+))?/;
-var GdsGrid = class extends LitElement7 {
+var GdsGrid = class extends LitElement6 {
   constructor() {
     super(...arguments);
     this._gridVariables = {
@@ -3616,30 +3624,30 @@ 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;
+  z-index: 1;
 }
 
 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-radius: calc(infinity * 1px);
   border-width: 0;
+  color: var(--gds-sys-color-content-content);
+  cursor: pointer;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-family: inherit;
   font-size: inherit;
   overflow: hidden;
-  white-space: nowrap;
+  padding: 0 1rem;
+  text-align: center;
   text-overflow: ellipsis;
+  white-space: nowrap;
   width: 100%;
-  color: var(--gds-sys-color-content-content);
 }
 
 @media (pointer: fine) {
@@ -3688,16 +3696,16 @@ GdsSegment = __decorateClass([
 
 // 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);
+  box-sizing: border-box;
   contain: layout;
+  display: inline-flex;
+  gap: 0.25rem;
+  height: 3rem;
   max-width: 100%;
   overflow: hidden;
-  height: 3rem;
 }
 
 :host([size='small']) {
@@ -3709,37 +3717,37 @@ var segmented_control_style_default = `:host {
   display: flex;
   flex-grow: 0;
   flex-shrink: 1;
-  width: 100%;
-  position: relative;
   overflow: hidden;
+  position: relative;
+  width: 100%;
 }
 
 #segments {
   box-sizing: border-box;
   display: inline-flex;
-  transition: 0.2s;
+  gap: 0.25rem;
   position: relative;
+  transition: 0.2s;
   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;
+  background-color: var(--gds-sys-color-container-container-dim1);
+  border-radius: calc(infinity * 1px);
+  border-width: 0;
+  color: var(--gds-sys-color-content-content);
+  cursor: pointer;
+  display: flex;
+  font-size: 1rem;
   height: 100%;
+  justify-content: center;
   width: 2.5rem;
-  cursor: pointer;
-  color: var(--gds-sys-color-content-content);
 
   @media (pointer: fine) {
     &:hover {
@@ -3758,18 +3766,20 @@ var segmented_control_style_default = `:host {
 }
 
 ::slotted(*) {
-  flex-shrink: 0;
   flex-grow: 1;
+  flex-shrink: 0;
   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;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  transition:
+    transform 0.2s,
+    width 0.2s;
   z-index: 0;
 }
 `;
@@ -3850,14 +3860,14 @@ var GdsSegmentedControl = class extends GdsElement {
         if (availableWidth / numSegments > this.segMinWidth) {
           return {
             count: numSegments,
-            segmentWidth: (availableWidth - getSegmentGap(this.isUsingTransitionalStyles) * (numSegments - 1)) / 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;
+        const segmentWidth = (availableWidth - getSegmentGap(this._isUsingTransitionalStyles) * (maxVisibleSegments - 1)) / maxVisibleSegments;
         return {
           count: maxVisibleSegments,
           segmentWidth
@@ -3887,7 +3897,7 @@ var GdsSegmentedControl = class extends GdsElement {
         this.segments.forEach((segment) => {
           segment.style.width = segmentWidth + "px";
         });
-        __privateSet(this, _segmentsContainerLeft, -__privateGet(this, _firstVisibleIndex) * segmentWidth - getSegmentGap(this.isUsingTransitionalStyles) * __privateGet(this, _firstVisibleIndex));
+        __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);
@@ -3917,7 +3927,7 @@ var GdsSegmentedControl = class extends GdsElement {
       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;
+        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 {
@@ -4107,8 +4117,7 @@ GdsSegmentedControl = __decorateClass([
 ], GdsSegmentedControl);
 
 // libs/core/src/components/icon/icon.ts
-import { LitElement as LitElement8, html as html8, unsafeCSS as unsafeCSS6 } from "lit";
-import { customElement as customElement2 } from "lit/decorators.js";
+import { LitElement as LitElement7, unsafeCSS as unsafeCSS6 } from "lit";
 
 // libs/core/src/components/icon/stem.styles.scss
 var stem_styles_default = `svg:not([display=none]) {
@@ -4131,7 +4140,7 @@ symbol {
 }`;
 
 // libs/core/src/components/icon/icon.ts
-var GdsIcon = class extends LitElement8 {
+var GdsIcon = class extends LitElement7 {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -4142,7 +4151,7 @@ var GdsIcon = class extends LitElement8 {
   }
   render() {
     const { name } = this;
-    return html8`
+    return html`
       <svg display="none">
         <symbol id="plus">
           <line x1="12" y1="5" x2="12" y2="19" />
@@ -4244,8 +4253,32 @@ GdsIcon.properties = {
   name: { type: String }
 };
 GdsIcon = __decorateClass([
-  customElement2("gds-icon")
+  gdsCustomElement("gds-icon")
 ], GdsIcon);
+
+// libs/core/src/components/theme/theme.ts
+import { property as property14 } from "lit/decorators.js";
+var GdsTheme = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.colorScheme = "light";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-theme");
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+};
+__decorateClass([
+  property14({ reflect: true, attribute: "color-scheme" })
+], GdsTheme.prototype, "colorScheme", 2);
+GdsTheme = __decorateClass([
+  gdsCustomElement("gds-theme")
+], GdsTheme);
 export {
   GdsContextMenu,
   GdsDatepicker,
@@ -4257,6 +4290,7 @@ export {
   GdsMenuItem,
   GdsOption,
   GdsSegmentedControl,
+  GdsTheme,
   VER_SUFFIX,
   gdsCustomElement,
   getScopedTagName,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/transitional-styles.d.ts

@@ -1 +1 @@
-export * from './utils/helpers/transitional-styles';
+export * from './utils/transitional-styles/transitional-styles';