ids-enterprise-wc 1.0.0-beta.17 → 1.0.0-beta.19

package/components/ids-button/ids-button.css

@@ -466,6 +466,11 @@ button {
   padding: var(--ids-space-30);
   padding-inline: var(--ids-space-30);
 }
+.ids-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
+.ids-toggle-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
+.ids-menu-button.color-variant-alternate-formatter.ids-menu-button.compact.square {
+  border-radius: var(--ids-border-radius-02);
+}
 .ids-button.color-variant-module,
 .ids-toggle-button.color-variant-module,
 .ids-menu-button.color-variant-module {
@@ -740,6 +745,9 @@ button {
   padding: var(--ids-space-30);
   padding-inline: var(--ids-space-30);
 }
+.ids-icon-button.color-variant-alternate-formatter.ids-menu-button.compact.square {
+  border-radius: var(--ids-border-radius-02);
+}
 .ids-icon-button.color-variant-module {
   color: var(--ids-button-module-color-text-default);
 }

package/components/ids-button/ids-button.d.ts

@@ -10,6 +10,7 @@ declare const Base: {
         showTooltip(): void;
         beforeTooltipShow(tooltip?: any): void;
         tooltip: string;
+        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -19,7 +20,7 @@ declare const Base: {
         canTooltipShow?(tooltipEl: import("../ids-tooltip/ids-tooltip").default | null, tooltipContent: string): boolean;
         onTooltipTargetDetection?(tooltipEl: import("../ids-tooltip/ids-tooltip").default | null): HTMLElement | SVGElement;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -27,6 +28,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
@@ -367,7 +369,9 @@ declare const Base: {
         readonly localeAPI: import("../ids-locale/ids-locale").default;
         connectedCallback(): void;
         locale: string;
-        language: any;
+        get language(): any;
+        set language(value: string);
+        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -377,7 +381,7 @@ declare const Base: {
         onLocaleChange?: ((locale?: import("../ids-locale/ids-locale").default | undefined) => void) | undefined;
         onLanguageChange?: ((locale?: import("../ids-locale/ids-locale").default | undefined) => void) | undefined;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -385,6 +389,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
@@ -729,7 +734,7 @@ declare const Base: {
         "__#25@#attachLoadingIndicator"(): void;
         "__#25@#addClass"(): void;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -737,6 +742,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
@@ -1089,6 +1095,7 @@ declare const Base: {
             x: number;
             y: number;
         };
+        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -1096,7 +1103,7 @@ declare const Base: {
         detachEventsByName: (eventName: string) => void;
         handledEvents: Map<any, any>;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -1104,6 +1111,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
@@ -1446,7 +1454,7 @@ declare const Base: {
         "__#4@#refreshColorVariant"(oldVariantName?: string | null | undefined, newVariantName?: string | null | undefined): void;
         onColorVariantRefresh?(variantName: string | null | undefined): void;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -1454,6 +1462,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
@@ -1801,7 +1810,9 @@ declare const Base: {
         "__#12@#addIsFocusedCssClass"(): void;
         "__#12@#removeHideFocusCssClass"(): void;
         "__#12@#removeIsFocusedCssClass"(): void;
-        hideFocus: boolean;
+        get hideFocus(): boolean;
+        set hideFocus(value: string | boolean | null);
+        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -1809,7 +1820,7 @@ declare const Base: {
         detachEventsByName: (eventName: string) => void;
         handledEvents: Map<any, any>;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -1817,6 +1828,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
@@ -2170,6 +2182,7 @@ declare const Base: {
         disconnectedCallback(): void;
         onEvent(eventName: string, target: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: unknown, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        bubbleEvent(evt: CustomEvent<any>): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<unknown> | undefined): void;
         triggerVetoableEvent(eventType: string, data?: any): boolean;
         detachAllEvents(): void;
@@ -2189,7 +2202,7 @@ declare const Base: {
         "__#5@#removeHoverEndListener"(): void;
         "__#5@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -2198,6 +2211,7 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;

package/components/ids-button/ids-button.js

@@ -1 +1 @@
-import{b as a}from"../../chunks/ids-chunk-WERRPJQF.js";import"../../chunks/ids-chunk-JOUT6B26.js";import"../../chunks/ids-chunk-6W3Q5D5I.js";import"../../chunks/ids-chunk-XUD3WMIT.js";import"../../chunks/ids-chunk-FO52BNTK.js";import"../../chunks/ids-chunk-XDHN7FIQ.js";import"../../chunks/ids-chunk-AWX53KLG.js";import"../../chunks/ids-chunk-LFKI3ZIN.js";import"../../chunks/ids-chunk-3QLSR2DO.js";import"../../chunks/ids-chunk-4XZUCEYZ.js";import"../../chunks/ids-chunk-23UNNOWE.js";import"../../chunks/ids-chunk-PHQEFZRD.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-CT5U7IVV.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-EVENS4EI.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-4WDX2CDM.js";import"../../chunks/ids-chunk-MJGRLEUU.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZKFSRERX.js";import"../../chunks/ids-chunk-SDTXNG6G.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-VEAPPKDG.js";import"../../chunks/ids-chunk-NSM2KAOK.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{b as a}from"../../chunks/ids-chunk-JO6ZOPOI.js";import"../../chunks/ids-chunk-E3MFRI5A.js";import"../../chunks/ids-chunk-NN64MNKP.js";import"../../chunks/ids-chunk-XCNLA7ZY.js";import"../../chunks/ids-chunk-BGDUXM3H.js";import"../../chunks/ids-chunk-YU2NMYIB.js";import"../../chunks/ids-chunk-U5Y3JESF.js";import"../../chunks/ids-chunk-2GQ5TB6S.js";import"../../chunks/ids-chunk-5EILFGOX.js";import"../../chunks/ids-chunk-EQXBSRVZ.js";import"../../chunks/ids-chunk-H52JAL42.js";import"../../chunks/ids-chunk-4XPAUVKO.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-CATQTJOO.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-ZDL2DB6F.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-PBWMSP2R.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-5DMZXGXL.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-QOTW4DDW.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-C2V3P7CU.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-calendar/ids-calendar-event.d.ts

@@ -1,4 +1,5 @@
 import IdsElement from '../../core/ids-element';
+import { type IdsColorValueCategories } from '../../utils/ids-color-utils/ids-color-utils';
 export type CalendarEventData = {
     id: string;
     subject: string;
@@ -10,13 +11,13 @@ export type CalendarEventData = {
     starts: string;
     ends: string;
     type: string;
-    isAllDay: string;
+    isAllDay: string | boolean;
 };
 export type CalendarEventTypeData = {
     id: string;
     label: string;
     translationKey: string;
-    color: 'amber' | 'amethyst' | 'azure' | 'emerald' | 'ruby' | 'slate' | 'turquoise';
+    color: IdsColorValueCategories;
     checked: boolean;
     disabled?: boolean;
 };
@@ -25,7 +26,9 @@ declare const Base: {
         readonly localeAPI: import("../ids-locale/ids-locale").default;
         connectedCallback(): void;
         locale: string;
-        language: any;
+        get language(): any;
+        set language(value: string);
+        bubbleEvent(evt: any): void;
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: any, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<any> | undefined): void;
@@ -35,7 +38,7 @@ declare const Base: {
         onLocaleChange?: ((locale?: import("../ids-locale/ids-locale").default | undefined) => void) | undefined;
         onLanguageChange?: ((locale?: import("../ids-locale/ids-locale").default | undefined) => void) | undefined;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -43,6 +46,7 @@ declare const Base: {
             noShadowRoot?: boolean | undefined;
             noStyles?: boolean | undefined;
         } | undefined;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         disconnectedCallback(): void;
@@ -50,7 +54,10 @@ declare const Base: {
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#3@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void; /**
+         * Sets top style of calendar event
+         * @param {string | null} value css top value
+         */
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -397,6 +404,7 @@ declare const Base: {
         disconnectedCallback(): void;
         onEvent(eventName: string, target: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
         offEvent(eventName: string, target?: unknown, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
+        bubbleEvent(evt: CustomEvent<any>): void;
         triggerEvent(eventName: string, target: any, options?: CustomEventInit<unknown> | undefined): void;
         triggerVetoableEvent(eventType: string, data?: any): boolean;
         detachAllEvents(): void;
@@ -416,7 +424,7 @@ declare const Base: {
         "__#5@#removeHoverEndListener"(): void;
         "__#5@#removeKeyDownEndListener"(): void;
         name?: string | undefined;
-        state: Record<string, any>;
+        state: any;
         cachedNonce: string;
         container?: HTMLElement | null | undefined;
         hasStyles: boolean;
@@ -425,13 +433,17 @@ declare const Base: {
             noStyles?: boolean | undefined;
         } | undefined;
         connectedCallback(): void;
+        mountedCallback(): void;
         "__#3@#addBaseName"(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         render(force?: boolean | undefined): any;
         template(): string;
         readonly nonce: any;
         appendStyles(): void;
-        "__#3@#appendHostCss"(): void;
+        "__#3@#appendHostCss"(): void; /**
+         * Sets top style of calendar event
+         * @param {string | null} value css top value
+         */
         theme: string;
         lastTheme: string;
         loadTheme(theme: string): Promise<void>;
@@ -762,6 +774,7 @@ declare const Base: {
 } & typeof IdsElement;
 export default class IdsCalendarEvent extends Base {
     #private;
+    cssClasses: string[];
     cachedEvent: CalendarEventData | null;
     cachedEventType: CalendarEventTypeData | null;
     constructor();

package/components/ids-calendar/ids-calendar-event.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-QMM56NA3.js";import"../../chunks/ids-chunk-PHQEFZRD.js";import"../../chunks/ids-chunk-CT5U7IVV.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-4WDX2CDM.js";import"../../chunks/ids-chunk-MJGRLEUU.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-WYSIBKRB.js";import"../../chunks/ids-chunk-JBUWUXJX.js";import"../../chunks/ids-chunk-ZKFSRERX.js";import"../../chunks/ids-chunk-SDTXNG6G.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-VEAPPKDG.js";import"../../chunks/ids-chunk-NSM2KAOK.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-JAGHXURE.js";import"../../chunks/ids-chunk-4XPAUVKO.js";import"../../chunks/ids-chunk-CATQTJOO.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-PBWMSP2R.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-5DMZXGXL.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-QOTW4DDW.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-C2V3P7CU.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-calendar/ids-calendar.css

@@ -32,34 +32,47 @@
   flex-shrink: 0;
 }
 
+.calendar-custom-legend {
+  display: none;
+  border-width: 0 1px 1px;
+  background-color: var(--ids-calendar-toolbar-color-background);
+  border-style: solid;
+  border-color: var(--ids-calendar-toolbar-color-border);
+  box-sizing: border-box;
+  padding: 4px;
+}
+.calendar-custom-legend.is-populated {
+  display: block;
+}
+
 ids-toolbar-section::part(container),
 .ids-toolbar-section {
   align-items: center;
 }
 
-.calendar-details-pane ids-accordion-header[color=azure]::part(header) {
-  background-color: var(--ids-color-azure-60);
+.calendar-details-pane ids-accordion-header[color=blue]::part(header) {
+  background-color: var(--ids-color-blue-60);
 }
-.calendar-details-pane ids-accordion-header[color=amber]::part(header) {
-  background-color: var(--ids-color-amber-60);
+.calendar-details-pane ids-accordion-header[color=orange]::part(header) {
+  background-color: var(--ids-color-orange-60);
 }
-.calendar-details-pane ids-accordion-header[color=amethyst]::part(header) {
-  background-color: var(--ids-color-amethyst-60);
+.calendar-details-pane ids-accordion-header[color=purple]::part(header) {
+  background-color: var(--ids-color-purple-60);
 }
-.calendar-details-pane ids-accordion-header[color=emerald]::part(header) {
-  background-color: var(--ids-color-emerald-60);
+.calendar-details-pane ids-accordion-header[color=green]::part(header) {
+  background-color: var(--ids-color-green-60);
 }
-.calendar-details-pane ids-accordion-header[color=ruby]::part(header) {
-  background-color: var(--ids-color-ruby-60);
+.calendar-details-pane ids-accordion-header[color=red]::part(header) {
+  background-color: var(--ids-color-red-60);
 }
-.calendar-details-pane ids-accordion-header[color=turquoise]::part(header) {
-  background-color: var(--ids-color-turquoise-60);
+.calendar-details-pane ids-accordion-header[color=teal]::part(header) {
+  background-color: var(--ids-color-teal-60);
 }
-.calendar-details-pane ids-accordion-header[color=slate]::part(header) {
+.calendar-details-pane ids-accordion-header[color=neutral]::part(header) {
   background-color: var(--ids-color-neutral-60);
 }
 .calendar-details-pane ids-accordion-header::part(header) {
-  color: var(--ids-color-neutral-00);
+  color: var(--ids-color-white-100);
 }
 .calendar-details-pane ids-accordion-header ids-text::part(text) {
   overflow: hidden;
@@ -85,32 +98,32 @@ ids-accordion-panel::part(content) {
 }
 
 .btn-today-text {
-  color: var(--ids-color-azure-60);
+  color: var(--ids-color-blue-60);
 }
 
 .calendar-events-list {
   margin-top: 20px;
   padding: 0;
 }
-.calendar-events-list .detail-item[color=azure] {
-  border-inline-start-color: var(--ids-color-azure-60);
+.calendar-events-list .detail-item[color=blue] {
+  border-inline-start-color: var(--ids-color-blue-60);
 }
-.calendar-events-list .detail-item[color=amber] {
-  border-inline-start-color: var(--ids-color-amber-60);
+.calendar-events-list .detail-item[color=orange] {
+  border-inline-start-color: var(--ids-color-orange-60);
 }
-.calendar-events-list .detail-item[color=amethyst] {
-  border-inline-start-color: var(--ids-color-amethyst-60);
+.calendar-events-list .detail-item[color=purple] {
+  border-inline-start-color: var(--ids-color-purple-60);
 }
-.calendar-events-list .detail-item[color=emerald] {
-  border-inline-start-color: var(--ids-color-emerald-60);
+.calendar-events-list .detail-item[color=green] {
+  border-inline-start-color: var(--ids-color-green-60);
 }
-.calendar-events-list .detail-item[color=ruby] {
-  border-inline-start-color: var(--ids-color-ruby-60);
+.calendar-events-list .detail-item[color=red] {
+  border-inline-start-color: var(--ids-color-red-60);
 }
-.calendar-events-list .detail-item[color=turquoise] {
-  border-inline-start-color: var(--ids-color-turquoise-60);
+.calendar-events-list .detail-item[color=teal] {
+  border-inline-start-color: var(--ids-color-teal-60);
 }
-.calendar-events-list .detail-item[color=slate] {
+.calendar-events-list .detail-item[color=neutral] {
   border-inline-start-color: var(--ids-color-neutral-60);
 }
 .calendar-events-list .detail-item {
@@ -149,25 +162,25 @@ ids-accordion-panel::part(content) {
   display: none;
   padding: 10px;
 }
-.event-types-legend .event-type-color[color=azure] {
-  background-color: var(--ids-color-azure-60);
+.event-types-legend .event-type-color[color=blue] {
+  background-color: var(--ids-color-blue-60);
 }
-.event-types-legend .event-type-color[color=amber] {
-  background-color: var(--ids-color-amber-60);
+.event-types-legend .event-type-color[color=orange] {
+  background-color: var(--ids-color-orange-60);
 }
-.event-types-legend .event-type-color[color=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
+.event-types-legend .event-type-color[color=purple] {
+  background-color: var(--ids-color-purple-60);
 }
-.event-types-legend .event-type-color[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+.event-types-legend .event-type-color[color=green] {
+  background-color: var(--ids-color-green-60);
 }
-.event-types-legend .event-type-color[color=ruby] {
-  background-color: var(--ids-color-ruby-60);
+.event-types-legend .event-type-color[color=red] {
+  background-color: var(--ids-color-red-60);
 }
-.event-types-legend .event-type-color[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+.event-types-legend .event-type-color[color=teal] {
+  background-color: var(--ids-color-teal-60);
 }
-.event-types-legend .event-type-color[color=slate] {
+.event-types-legend .event-type-color[color=neutral] {
   background-color: var(--ids-color-neutral-60);
 }
 
@@ -220,30 +233,27 @@ ids-accordion-panel::part(content) {
   width: 100%;
   height: 100%;
 }
-#event-form #event-form-header[color=azure] {
-  background-color: var(--ids-color-azure-60);
+#event-form #event-form-header[color=blue] {
+  background-color: var(--ids-color-blue-60);
 }
-#event-form #event-form-header[color=amber] {
-  background-color: var(--ids-color-amber-60);
+#event-form #event-form-header[color=orange] {
+  background-color: var(--ids-color-orange-60);
 }
-#event-form #event-form-header[color=amethyst] {
-  background-color: var(--ids-color-amethyst-60);
+#event-form #event-form-header[color=purple] {
+  background-color: var(--ids-color-purple-60);
 }
-#event-form #event-form-header[color=emerald] {
-  background-color: var(--ids-color-emerald-60);
+#event-form #event-form-header[color=green] {
+  background-color: var(--ids-color-green-60);
 }
-#event-form #event-form-header[color=ruby] {
-  background-color: var(--ids-color-ruby-60);
+#event-form #event-form-header[color=red] {
+  background-color: var(--ids-color-red-60);
 }
-#event-form #event-form-header[color=turquoise] {
-  background-color: var(--ids-color-turquoise-60);
+#event-form #event-form-header[color=teal] {
+  background-color: var(--ids-color-teal-60);
 }
-#event-form #event-form-header[color=slate] {
+#event-form #event-form-header[color=neutral] {
   background-color: var(--ids-color-neutral-60);
 }
-#event-form ids-list-box {
-  max-width: 278px;
-}
 #event-form ids-list-box-option {
   text-align: left;
 }
@@ -277,10 +287,10 @@ ids-accordion-panel::part(content) {
   margin-inline-start: -1px;
 }
 #event-form-actions ids-button[data-action=submit]::part(button) {
-  color: var(--ids-color-azure-70);
+  color: var(--ids-color-blue-70);
 }
 #event-form-actions ids-button[data-action=submit]::part(button):hover {
-  color: var(--ids-color-azure-80);
+  color: var(--ids-color-blue-80);
 }
 
 @media (max-width: 840px) {
@@ -304,11 +314,23 @@ ids-accordion-panel::part(content) {
     height: 100%;
     width: 100%;
   }
+  #event-form-content {
+    height: 100%;
+    overflow-y: auto;
+    padding-bottom: 50px;
+  }
   #event-form-content ids-date-picker,
   #event-form-content ids-time-picker {
     max-width: unset;
   }
   #event-form-content .inline-container {
+    position: relative;
     display: block;
   }
+  #event-form-actions {
+    background-color: var(--ids-popup-menu-color-background-default);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
 }