@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/Button.js

@@ -13,16 +13,18 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { markEvent } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import { getIconAccessibleName } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
-import { isPhone, isTablet, isCombi, isDesktop, isSafari, } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isSafari, } from "@ui5/webcomponents-base/dist/Device.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import { submitForm, resetForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
+import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
+import IconMode from "./types/IconMode.js";
 import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
@@ -31,30 +33,28 @@ let activeButton = null;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-button</code> component represents a simple push button.
- * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing
+ * The `ui5-button` component represents a simple push button.
+ * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing
  * certain keyboard keys, such as Enter.
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify
+ * For the `ui5-button` UI, you can define text, icon, or both. You can also specify
  * whether the text or the icon is displayed first.
- * <br><br>
+ *
  * You can choose from a set of predefined types that offer different
  * styling to correspond to the triggered action.
- * <br><br>
- * You can set the <code>ui5-button</code> as enabled or disabled. An enabled
- * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes
- * its style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
  *
- * <h3>ES6 Module Import</h3>
+ * You can set the `ui5-button` as enabled or disabled. An enabled
+ * `ui5-button` can be pressed by clicking or tapping it. The button changes
+ * its style to provide visual feedback to the user that it is pressed or hovered over with
+ * the mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.
  *
- * <code>import "@ui5/webcomponents/dist/Button";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Button.js";`
  * @csspart button - Used to style the native button element
  * @constructor
  * @extends UI5Element
@@ -86,16 +86,11 @@ let Button = Button_1 = class Button extends UI5Element {
         };
     }
     onEnterDOM() {
-        this._isTouch = (isPhone() || isTablet()) && !isCombi();
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     async onBeforeRendering() {
-        const formSupport = getFeature("FormSupport");
-        if (this.type !== ButtonType.Button && !formSupport) {
-            console.warn(`In order for the "type" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
-        if (this.submits && !formSupport) {
-            console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-        }
         this.iconOnly = this.isIconOnly;
         this.hasIcon = !!this.icon;
         this.buttonTitle = this.tooltip || await getIconAccessibleName(this.icon);
@@ -105,19 +100,18 @@ let Button = Button_1 = class Button extends UI5Element {
             return;
         }
         markEvent(e, "button");
-        const formSupport = getFeature("FormSupport");
-        if (formSupport && this._isSubmit) {
-            formSupport.triggerFormSubmit(this);
+        if (this._isSubmit) {
+            submitForm(this);
         }
-        if (formSupport && this._isReset) {
-            formSupport.triggerFormReset(this);
+        if (this._isReset) {
+            resetForm(this);
         }
         if (isSafari()) {
             this.getDomRef()?.focus();
         }
     }
     _onmousedown(e) {
-        if (this.nonInteractive || this._isTouch) {
+        if (this.nonInteractive) {
             return;
         }
         markEvent(e, "button");
@@ -159,18 +153,12 @@ let Button = Button_1 = class Button extends UI5Element {
         if (this.active) {
             this._setActiveState(false);
         }
-        if (isDesktop()) {
-            this.focused = false;
-        }
     }
     _onfocusin(e) {
         if (this.nonInteractive) {
             return;
         }
         markEvent(e, "button");
-        if (isDesktop()) {
-            this.focused = true;
-        }
     }
     _setActiveState(active) {
         const eventPrevented = !this.fireEvent("_active-state-change", null, true);
@@ -179,14 +167,17 @@ let Button = Button_1 = class Button extends UI5Element {
         }
         this.active = active;
     }
+    get _hasPopup() {
+        return this.accessibilityAttributes.hasPopup;
+    }
     get hasButtonType() {
         return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
     }
-    get iconRole() {
+    get iconMode() {
         if (!this.icon) {
             return "";
         }
-        return "presentation";
+        return IconMode.Decorative;
     }
     get isIconOnly() {
         return !willShowContent(this.text);
@@ -201,12 +192,15 @@ let Button = Button_1 = class Button extends UI5Element {
     get buttonTypeText() {
         return Button_1.i18nBundle.getText(Button_1.typeTextMappings()[this.design]);
     }
+    get effectiveAccRole() {
+        return this.accessibleRole.toLowerCase();
+    }
     get tabIndexValue() {
         const tabindex = this.getAttribute("tabindex");
         if (tabindex) {
             return tabindex;
         }
-        return this.nonInteractive ? "-1" : this._tabIndex;
+        return this.nonInteractive ? "-1" : this.forcedTabIndex;
     }
     get showIconTooltip() {
         return this.iconOnly && !this.tooltip;
@@ -254,15 +248,15 @@ __decorate([
 __decorate([
     property({ type: ButtonType, defaultValue: ButtonType.Button })
 ], Button.prototype, "type", void 0);
+__decorate([
+    property({ type: ButtonAccessibleRole, defaultValue: ButtonAccessibleRole.Button })
+], Button.prototype, "accessibleRole", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "iconOnly", void 0);
-__decorate([
-    property({ type: Boolean })
-], Button.prototype, "focused", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "hasIcon", void 0);
@@ -277,7 +271,7 @@ __decorate([
 ], Button.prototype, "_iconSettings", void 0);
 __decorate([
     property({ defaultValue: "0", noAttribute: true })
-], Button.prototype, "_tabIndex", void 0);
+], Button.prototype, "forcedTabIndex", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "_isTouch", void 0);
@@ -287,19 +281,20 @@ __decorate([
 Button = Button_1 = __decorate([
     customElement({
         tag: "ui5-button",
+        formAssociated: true,
         languageAware: true,
         renderer: litRender,
         template: ButtonTemplate,
         styles: buttonCss,
         dependencies: [Icon],
+        shadowRootOptions: { delegatesFocus: true },
     })
     /**
      * Fired when the component is activated either with a
      * mouse/tap or by using the Enter or Space key.
-     * <br><br>
-     * <b>Note:</b> The event will not be fired if the <code>disabled</code>
-     * property is set to <code>true</code>.
      *
+     * **Note:** The event will not be fired if the `disabled`
+     * property is set to `true`.
      * @public
      * @native
      */

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type { PassiveEventListenerObject } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport { getIconAccessibleName } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\n\nimport {\n\tisPhone,\n\tisTablet,\n\tisCombi,\n\tisDesktop,\n\tisSafari,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport type { IFormElement } from \"./features/InputElementsFormSupport.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport ButtonType from \"./types/ButtonType.js\";\nimport type { IButton } from \"./Interfaces.js\";\nimport ButtonTemplate from \"./generated/templates/ButtonTemplate.lit.js\";\nimport Icon from \"./Icon.js\";\n\nimport { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport buttonCss from \"./generated/themes/Button.css.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeButton: Button | null = null;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-button</code> component represents a simple push button.\n * It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing\n * certain keyboard keys, such as Enter.\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify\n * whether the text or the icon is displayed first.\n * <br><br>\n * You can choose from a set of predefined types that offer different\n * styling to correspond to the triggered action.\n * <br><br>\n * You can set the <code>ui5-button</code> as enabled or disabled. An enabled\n * <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes\n * its style to provide visual feedback to the user that it is pressed or hovered over with\n * the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Button\";</code>\n *\n * @csspart button - Used to style the native button element\n * @constructor\n * @extends UI5Element\n * @implements { IButton }\n * @public\n */\n@customElement({\n\ttag: \"ui5-button\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: ButtonTemplate,\n\tstyles: buttonCss,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n * <br><br>\n * <b>Note:</b> The event will not be fired if the <code>disabled</code>\n * property is set to <code>true</code>.\n *\n * @public\n * @native\n */\n@event(\"click\")\n/**\n * Fired whenever the active state of the component changes.\n * @private\n */\n@event(\"_active-state-change\")\nclass Button extends UI5Element implements IFormElement, IButton {\n\t/**\n\t * Defines the component design.\n\t *\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: `${ButtonDesign}`;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t * <br><br>\n\t * Example:\n\t *\n\t * See all the available icons within the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether the icon should be displayed after the component text.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\n\n\t/**\n\t * When set to <code>true</code>, the component will\n\t * automatically submit the nearest HTML form element on <code>press</code>.\n\t * <br><br>\n\t * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t *\n\t * @default false\n\t * @public\n\t * @deprecated Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".\n\t */\n\t@property({ type: Boolean })\n\tsubmits!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * <br>\n\t * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @default \"\"\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t *\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * An object of strings that defines several additional accessibility attribute values\n\t * for customization depending on the use case.\n\t *\n\t * It supports the following fields:\n\t *\n\t * <ul>\n\t * \t\t<li><code>expanded</code>: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t *\t\t\t<ul>\n\t *\t\t\t\t<li><code>true</code></li>\n\t *\t\t\t\t<li><code>false</code></li>\n\t *\t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:\n\t * \t\t\t<ul>\n\t *\t\t\t\t<li><code>Dialog</code></li>\n\t *\t\t\t\t<li><code>Grid</code></li>\n\t *\t\t\t\t<li><code>ListBox</code></li>\n\t *\t\t\t\t<li><code>Menu</code></li>\n\t *\t\t\t\t<li><code>Tree</code></li>\n\t * \t\t\t</ul>\n\t * \t\t</li>\n\t * \t\t<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>\n\t * </ul>\n\t *\n\t * @public\n\t * @since 1.2.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: { expanded: \"true\" | \"false\", hasPopup: \"Dialog\" | \"Grid\" | \"ListBox\" | \"Menu\" | \"Tree\", controls: string};\n\n\t/**\n\t * Defines whether the button has special form-related functionality.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t *\n\t * @default \"Button\"\n\t * @public\n\t * @since 1.15.0\n\t */\n\t@property({ type: ButtonType, defaultValue: ButtonType.Button })\n\ttype!: `${ButtonType}`;\n\n\t/**\n\t * Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/**\n\t * Defines if a content has been added to the default slot\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ticonOnly!: boolean;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * Indicates if the elements has a slotted icon\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasIcon!: boolean;\n\n\t/**\n\t * Indicates if the element if focusable\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tnonInteractive!: boolean;\n\n\t/**\n\t * The current title of the button, either the tooltip property or the icons tooltip. The tooltip property with higher prio.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tbuttonTitle?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_iconSettings!: object;\n\n\t/**\n\t * Defines the tabIndex of the component.\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t/**\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isTouch!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t_deactivate: () => void;\n\n\t_ontouchstart: PassiveEventListenerObject;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeButton) {\n\t\t\t\tactiveButton._setActiveState(false);\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\n\t\tconst handleTouchStartEvent = (e: TouchEvent) => {\n\t\t\tmarkEvent(e, \"button\");\n\n\t\t\tif (this.nonInteractive) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._setActiveState(true);\n\t\t};\n\n\t\tthis._ontouchstart = {\n\t\t\thandleEvent: handleTouchStartEvent,\n\t\t\tpassive: true,\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tthis._isTouch = (isPhone() || isTablet()) && !isCombi();\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (this.type !== ButtonType.Button && !formSupport) {\n\t\t\tconsole.warn(`In order for the \"type\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\t\tif (this.submits && !formSupport) {\n\t\t\tconsole.warn(`In order for the \"submits\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\n\t\tthis.iconOnly = this.isIconOnly;\n\t\tthis.hasIcon = !!this.icon;\n\n\t\tthis.buttonTitle = this.tooltip || await getIconAccessibleName(this.icon);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport && this._isSubmit) {\n\t\t\tformSupport.triggerFormSubmit(this);\n\t\t}\n\t\tif (formSupport && this._isReset) {\n\t\t\tformSupport.triggerFormReset(this);\n\t\t}\n\n\t\tif (isSafari()) {\n\t\t\tthis.getDomRef()?.focus();\n\t\t}\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tif (this.nonInteractive || this._isTouch) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tthis._setActiveState(true);\n\t\tactiveButton = this; // eslint-disable-line\n\t}\n\n\t_ontouchend(e: TouchEvent) {\n\t\tif (this.disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\n\t\tif (this.active) {\n\t\t\tthis._setActiveState(false);\n\t\t}\n\n\t\tif (activeButton) {\n\t\t\tactiveButton._setActiveState(false);\n\t\t}\n\t}\n\n\t_onmouseup(e: MouseEvent) {\n\t\tmarkEvent(e, \"button\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tmarkEvent(e, \"button\");\n\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis._setActiveState(true);\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tif (this.active) {\n\t\t\t\tthis._setActiveState(false);\n\t\t\t}\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.active) {\n\t\t\tthis._setActiveState(false);\n\t\t}\n\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = false;\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tif (isDesktop()) {\n\t\t\tthis.focused = true;\n\t\t}\n\t}\n\n\t_setActiveState(active: boolean) {\n\t\tconst eventPrevented = !this.fireEvent(\"_active-state-change\", null, true);\n\n\t\tif (eventPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = active;\n\t}\n\n\tget hasButtonType() {\n\t\treturn this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;\n\t}\n\n\tget iconRole() {\n\t\tif (!this.icon) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn \"presentation\";\n\t}\n\n\tget isIconOnly() {\n\t\treturn !willShowContent(this.text);\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Positive\": BUTTON_ARIA_TYPE_ACCEPT,\n\t\t\t\"Negative\": BUTTON_ARIA_TYPE_REJECT,\n\t\t\t\"Emphasized\": BUTTON_ARIA_TYPE_EMPHASIZED,\n\t\t};\n\t}\n\n\tget buttonTypeText() {\n\t\treturn Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);\n\t}\n\n\tget tabIndexValue() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (tabindex) {\n\t\t\treturn tabindex;\n\t\t}\n\n\t\treturn this.nonInteractive ? \"-1\" : this._tabIndex;\n\t}\n\n\tget showIconTooltip() {\n\t\treturn this.iconOnly && !this.tooltip;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget _isSubmit() {\n\t\treturn this.type === ButtonType.Submit || this.submits;\n\t}\n\n\tget _isReset() {\n\t\treturn this.type === ButtonType.Reset;\n\t}\n\n\tstatic async onDefine() {\n\t\tButton.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nButton.define();\n\nexport default Button;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport type { AccessibilityAttributes, PassiveEventListenerObject } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { markEvent } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport { getIconAccessibleName } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\n\nimport {\n\tisDesktop,\n\tisSafari,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport { submitForm, resetForm } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport type { IFormElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport ButtonType from \"./types/ButtonType.js\";\nimport ButtonAccessibleRole from \"./types/ButtonAccessibleRole.js\";\nimport ButtonTemplate from \"./generated/templates/ButtonTemplate.lit.js\";\nimport Icon from \"./Icon.js\";\nimport IconMode from \"./types/IconMode.js\";\n\nimport { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport buttonCss from \"./generated/themes/Button.css.js\";\n\n/**\n * Interface for components that may be used as a button inside numerous higher-order components\n * @public\n */\ninterface IButton extends HTMLElement, ITabbable {\n\tnonInteractive: boolean;\n}\n\nlet isGlobalHandlerAttached = false;\nlet activeButton: Button | null = null;\n\ntype ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, \"expanded\" | \"hasPopup\" | \"controls\">;\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-button` component represents a simple push button.\n * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\n * certain keyboard keys, such as Enter.\n *\n * ### Usage\n *\n * For the `ui5-button` UI, you can define text, icon, or both. You can also specify\n * whether the text or the icon is displayed first.\n *\n * You can choose from a set of predefined types that offer different\n * styling to correspond to the triggered action.\n *\n * You can set the `ui5-button` as enabled or disabled. An enabled\n * `ui5-button` can be pressed by clicking or tapping it. The button changes\n * its style to provide visual feedback to the user that it is pressed or hovered over with\n * the mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Button.js\";`\n * @csspart button - Used to style the native button element\n * @constructor\n * @extends UI5Element\n * @implements { IButton }\n * @public\n */\n@customElement({\n\ttag: \"ui5-button\",\n\tformAssociated: true,\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: ButtonTemplate,\n\tstyles: buttonCss,\n\tdependencies: [Icon],\n\tshadowRootOptions: { delegatesFocus: true },\n})\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @public\n * @native\n */\n@event(\"click\")\n/**\n * Fired whenever the active state of the component changes.\n * @private\n */\n@event(\"_active-state-change\")\nclass Button extends UI5Element implements IButton, IFormElement {\n\t/**\n\t * Defines the component design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: `${ButtonDesign}`;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * Example:\n\t * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether the icon should be displayed after the component text.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\n\n\t/**\n\t * When set to `true`, the component will\n\t * automatically submit the nearest HTML form element on `press`.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.`\n\t * @default false\n\t * @public\n\t * @deprecated Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".\n\t */\n\t@property({ type: Boolean })\n\tsubmits!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @default \"\"\n\t * @public\n\t * @since 1.2.0\n\t */\n\t@property()\n\ttooltip!: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t *\n\t * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\n\t * Accepts a lowercase string value.\n\t *\n\t * @public\n\t * @since 1.2.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: ButtonAccessibilityAttributes;\n\n\t/**\n\t * Defines whether the button has special form-related functionality.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default \"Button\"\n\t * @public\n\t * @since 1.15.0\n\t */\n\t@property({ type: ButtonType, defaultValue: ButtonType.Button })\n\ttype!: `${ButtonType}`;\n\n\t/**\n\t * Describes the accessibility role of the button.\n\t *\n\t * **Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.\n\t *\n\t * @default \"Button\"\n\t * @public\n\t * @since 1.23\n\t */\n\t@property({ type: ButtonAccessibleRole, defaultValue: ButtonAccessibleRole.Button })\n\taccessibleRole!: `${ButtonAccessibleRole}`;\n\n\t/**\n\t * Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/**\n\t * Defines if a content has been added to the default slot\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\ticonOnly!: boolean;\n\n\t/**\n\t * Indicates if the elements has a slotted icon\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasIcon!: boolean;\n\n\t/**\n\t * Indicates if the element is focusable\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tnonInteractive!: boolean;\n\n\t/**\n\t * The current title of the button, either the tooltip property or the icons tooltip. The tooltip property with higher prio.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tbuttonTitle?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_iconSettings!: object;\n\n\t/**\n\t * Defines the tabIndex of the component.\n\t * @private\n\t */\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\tforcedTabIndex!: string;\n\n\t/**\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isTouch!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t_deactivate: () => void;\n\n\t_ontouchstart: PassiveEventListenerObject;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeButton) {\n\t\t\t\tactiveButton._setActiveState(false);\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\n\t\tconst handleTouchStartEvent = (e: TouchEvent) => {\n\t\t\tmarkEvent(e, \"button\");\n\n\t\t\tif (this.nonInteractive) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis._setActiveState(true);\n\t\t};\n\n\t\tthis._ontouchstart = {\n\t\t\thandleEvent: handleTouchStartEvent,\n\t\t\tpassive: true,\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tthis.iconOnly = this.isIconOnly;\n\t\tthis.hasIcon = !!this.icon;\n\n\t\tthis.buttonTitle = this.tooltip || await getIconAccessibleName(this.icon);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tif (this._isSubmit) {\n\t\t\tsubmitForm(this);\n\t\t}\n\n\t\tif (this._isReset) {\n\t\t\tresetForm(this);\n\t\t}\n\n\t\tif (isSafari()) {\n\t\t\tthis.getDomRef()?.focus();\n\t\t}\n\t}\n\n\t_onmousedown(e: MouseEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t\tthis._setActiveState(true);\n\t\tactiveButton = this; // eslint-disable-line\n\t}\n\n\t_ontouchend(e: TouchEvent) {\n\t\tif (this.disabled) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t}\n\n\t\tif (this.active) {\n\t\t\tthis._setActiveState(false);\n\t\t}\n\n\t\tif (activeButton) {\n\t\t\tactiveButton._setActiveState(false);\n\t\t}\n\t}\n\n\t_onmouseup(e: MouseEvent) {\n\t\tmarkEvent(e, \"button\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tmarkEvent(e, \"button\");\n\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis._setActiveState(true);\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tif (this.active) {\n\t\t\t\tthis._setActiveState(false);\n\t\t\t}\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.active) {\n\t\t\tthis._setActiveState(false);\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tif (this.nonInteractive) {\n\t\t\treturn;\n\t\t}\n\n\t\tmarkEvent(e, \"button\");\n\t}\n\n\t_setActiveState(active: boolean) {\n\t\tconst eventPrevented = !this.fireEvent(\"_active-state-change\", null, true);\n\n\t\tif (eventPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = active;\n\t}\n\n\tget _hasPopup() {\n\t\treturn this.accessibilityAttributes.hasPopup;\n\t}\n\n\tget hasButtonType() {\n\t\treturn this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;\n\t}\n\n\tget iconMode() {\n\t\tif (!this.icon) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\treturn IconMode.Decorative;\n\t}\n\n\tget isIconOnly() {\n\t\treturn !willShowContent(this.text);\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Positive\": BUTTON_ARIA_TYPE_ACCEPT,\n\t\t\t\"Negative\": BUTTON_ARIA_TYPE_REJECT,\n\t\t\t\"Emphasized\": BUTTON_ARIA_TYPE_EMPHASIZED,\n\t\t};\n\t}\n\n\tget buttonTypeText() {\n\t\treturn Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);\n\t}\n\n\tget effectiveAccRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget tabIndexValue() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\n\t\tif (tabindex) {\n\t\t\treturn tabindex;\n\t\t}\n\n\t\treturn this.nonInteractive ? \"-1\" : this.forcedTabIndex;\n\t}\n\n\tget showIconTooltip() {\n\t\treturn this.iconOnly && !this.tooltip;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget _isSubmit() {\n\t\treturn this.type === ButtonType.Submit || this.submits;\n\t}\n\n\tget _isReset() {\n\t\treturn this.type === ButtonType.Reset;\n\t}\n\n\tstatic async onDefine() {\n\t\tButton.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nButton.define();\n\nexport default Button;\nexport type {\n\tButtonAccessibilityAttributes,\n\tIButton,\n};\n"]}

package/dist/Calendar.d.ts

@@ -1,11 +1,15 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
-import CalendarDate from "./CalendarDate.js";
 import CalendarPart from "./CalendarPart.js";
 import type { DayPickerChangeEventDetail } from "./DayPicker.js";
 import type { MonthPickerChangeEventDetail } from "./MonthPicker.js";
 import type { YearPickerChangeEventDetail } from "./YearPicker.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import CalendarLegend from "./CalendarLegend.js";
+import type { CalendarLegendItemSelectionChangeEventDetail } from "./CalendarLegend.js";
+import SpecialCalendarDate from "./SpecialCalendarDate.js";
+import CalendarLegendItemType from "./types/CalendarLegendItemType.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 interface ICalendarPicker {
     _showPreviousPage: () => void;
@@ -16,116 +20,112 @@ interface ICalendarPicker {
     _firstYear?: number;
     _lastYear?: number;
 }
-type CalendarSelectedDatesChangeEventDetail = {
-    values: Array<string>;
-    dates: Array<number>;
+interface ICalendarSelectedDates extends UI5Element {
+    value?: string;
+    startValue?: string;
+    endValue?: string;
+}
+type CalendarSelectionChangeEventDetail = {
+    selectedValues: Array<string>;
+    selectedDates: Array<number>;
     timestamp: number | undefined;
 };
+type SpecialCalendarDateT = {
+    specialDateTimestamp: number;
+    type: `${CalendarLegendItemType}`;
+};
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-calendar</code> component allows users to select one or more dates.
- * <br><br>
- * Currently selected dates are represented with instances of <code>ui5-date</code> as
- * children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a
- * date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property.
- * Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances
- * of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the
- * <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally.
- * <br><br>
+ * The `ui5-calendar` component allows users to select one or more dates.
  *
- * <h3>Usage</h3>
+ * Currently selected dates are represented with instances of `ui5-date` as
+ * children of the `ui5-calendar`. The value property of each `ui5-date` must be a
+ * date string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.
+ * Whenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances
+ * of `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the
+ * `selection-change` event. This is useful if you want to control the selected dates externally.
+ *
+ * ### Usage
  *
  * The user can navigate to a particular date by:
- * <br>
- * <ul>
- * <li>Pressing over a month inside the months view</li>
- * <li>Pressing over an year inside the years view</li>
- * </ul>
- * <br>
+ *
+ * - Pressing over a month inside the months view
+ * - Pressing over an year inside the years view
+ *
  * The user can confirm a date selection by pressing over a date inside the days view.
- * <br><br>
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-calendar</code> provides advanced keyboard handling.
+ * ### Keyboard Handling
+ * The `ui5-calendar` provides advanced keyboard handling.
  * When a picker is showed and focused the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
- * - Day picker: <br>
- * <ul>
- * <li>[F4] - Shows month picker</li>
- * <li>[SHIFT] + [F4] - Shows year picker</li>
- * <li>[PAGEUP] - Navigate to the previous month</li>
- * <li>[PAGEDOWN] - Navigate to the next month</li>
- * <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li>
- * <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li>
- * <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li>
- * <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li>
- * <li>[HOME] - Navigate to the first day of the week</li>
- * <li>[END] - Navigate to the last day of the week</li>
- * <li>[CTRL] + [HOME] - Navigate to the first day of the month</li>
- * <li>[CTRL] + [END] - Navigate to the last day of the month</li>
- * </ul>
- * <br>
- * - Month picker: <br>
- * <ul>
- * <li>[PAGEUP] - Navigate to the previous year</li>
- * <li>[PAGEDOWN] - Navigate to the next year</li>
- * <li>[HOME] - Navigate to the first month of the current row</li>
- * <li>[END] - Navigate to the last month of the current row</li>
- * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
- * <li>[CTRL] + [END] - Navigate to the last month of the year</li>
- * </ul>
- * <br>
- * - Year picker: <br>
- * <ul>
- * <li>[PAGEUP] - Navigate to the previous year range</li>
- * <li>[PAGEDOWN] - Navigate the next year range</li>
- * <li>[HOME] - Navigate to the first year of the current row</li>
- * <li>[END] - Navigate to the last year of the current row</li>
- * <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li>
- * <li>[CTRL] + [END] - Navigate to the last year of the current year range</li>
- * </ul>
- * <br>
- *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ *
+ * - Day picker:
+ *
+ * - [F4] - Shows month picker
+ * - [Shift] + [F4] - Shows year picker
+ * - [Page Up] - Navigate to the previous month
+ * - [Page Down] - Navigate to the next month
+ * - [Shift] + [Page Up] - Navigate to the previous year
+ * - [Shift] + [Page Down] - Navigate to the next year
+ * - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
+ * - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
+ * - [Home] - Navigate to the first day of the week
+ * - [End] - Navigate to the last day of the week
+ * - [Ctrl] + [Home] - Navigate to the first day of the month
+ * - [Ctrl] + [End] - Navigate to the last day of the month
+ *
+ * - Month picker:
+ *
+ * - [Page Up] - Navigate to the previous year
+ * - [Page Down] - Navigate to the next year
+ * - [Home] - Navigate to the first month of the current row
+ * - [End] - Navigate to the last month of the current row
+ * - [Ctrl] + [Home] - Navigate to the first month of the current year
+ * - [Ctrl] + [End] - Navigate to the last month of the year
+ *
+ * - Year picker:
+ *
+ * - [Page Up] - Navigate to the previous year range
+ * - [Page Down] - Navigate the next year range
+ * - [Home] - Navigate to the first year of the current row
+ * - [End] - Navigate to the last year of the current row
+ * - [Ctrl] + [Home] - Navigate to the first year of the current year range
+ * - [Ctrl] + [End] - Navigate to the last year of the current year range
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
-* <h3>Calendar types</h3>
+ * ### Calendar types
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
  * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
- * you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules:
- * <br><br>
+ * you need to set the `primaryCalendarType` property and import one or more of the following modules:
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
  *
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
- * <br><br>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
  *
- * Or, you can use the global configuration and set the <code>calendarType</code> key:
- * <br>
- * <code>
- * &lt;script data-id="sap-ui-config" type="application/json"&gt;
- * {
- *	"calendarType": "Japanese"
- * }
- * &lt;/script&gt;
- * </code>
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`
  *
+ * Or, you can use the global configuration and set the `calendarType` key:
  *
- * <h3>ES6 Module Import</h3>
+ * ```html
+ * <script data-id="sap-ui-config" type="application/json">
+ * 	{
+ * 		"calendarType": "Japanese"
+ * 	}
+ * </script>
+ * ```
  *
- * <code>import "@ui5/webcomponents/dist/Calendar";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Calendar.js";`
  * @constructor
  * @extends CalendarPart
  * @public
@@ -134,23 +134,20 @@ type CalendarSelectedDatesChangeEventDetail = {
 declare class Calendar extends CalendarPart {
     /**
      * Defines the type of selection used in the calendar component.
-     * Accepted property values are:<br>
-     * <ul>
-     * <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
-     * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
-     * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
-     * </ul>
+     * Accepted property values are:
+     *
+     * - `CalendarSelectionMode.Single` - enables a single date selection.(default value)
+     * - `CalendarSelectionMode.Range` - enables selection of a date range.
+     * - `CalendarSelectionMode.Multiple` - enables selection of multiple dates.
      * @default "Single"
      * @public
      */
     selectionMode: `${CalendarSelectionMode}`;
     /**
      * Defines the visibility of the week numbers column.
-     * <br><br>
      *
-     * <b>Note:</b> For calendars other than Gregorian,
+     * **Note:** For calendars other than Gregorian,
      * the week numbers are not displayed regardless of what is set.
-     *
      * @default false
      * @public
      */
@@ -168,21 +165,40 @@ declare class Calendar extends CalendarPart {
     _pickersMode: CalendarPickersMode;
     _valueIsProcessed: boolean;
     /**
-     * Defines the selected date or dates (depending on the <code>selectionMode</code> property)
-     * for this calendar as instances of <code>ui5-date</code>.
-     *
+     * Defines the calendar legend of the component.
+     * @public
+     * @since 1.23.0
+     */
+    calendarLegend: Array<CalendarLegend>;
+    /**
+     * Defines the selected date or dates (depending on the `selectionMode` property)
+     * for this calendar as instances of `ui5-date`.
+     * @public
+     */
+    dates: Array<ICalendarSelectedDates>;
+    /**
+     * Defines the special dates, visually emphasized in the calendar.
      * @public
+     * @since 1.23.0
      */
-    dates: Array<CalendarDate>;
+    specialDates: Array<SpecialCalendarDate>;
     /**
+     * Defines the selected item type of the calendar legend item (if such exists).
      * @private
      */
-    get _selectedDatesTimestamps(): Array<number>;
+    _selectedItemType: `${CalendarLegendItemType}`;
     constructor();
+    /**
+     * @private
+     */
+    get _selectedDatesTimestamps(): Array<number>;
     /**
      * @private
      */
     _setSelectedDates(selectedDates: Array<number>): void;
+    _isValidCalendarDate(dateString: string): boolean;
+    get _specialCalendarDates(): SpecialCalendarDateT[];
+    _onCalendarLegendSelectionChange(e: CustomEvent<CalendarLegendItemSelectionChangeEventDetail>): void;
     /**
      * Makes sure that _currentPicker is always set to a value, allowed by _pickersMode
      */
@@ -227,6 +243,8 @@ declare class Calendar extends CalendarPart {
     onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>): void;
     onNavigate(e: CustomEvent): void;
     _onkeydown(e: KeyboardEvent): void;
+    _onLegendFocusOut(): void;
+    get _specialDates(): SpecialCalendarDate[];
     /**
      * Returns an array of UTC timestamps, representing the selected dates.
      * @protected
@@ -234,7 +252,7 @@ declare class Calendar extends CalendarPart {
      */
     get selectedDates(): Array<number>;
     /**
-     * Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
+     * Creates instances of `ui5-date` or `ui5-date-range` inside this `ui5-calendar` with values, equal to the provided UTC timestamps
      * @protected
      * @deprecated
      * @param selectedDates Array of UTC timestamps
@@ -242,4 +260,4 @@ declare class Calendar extends CalendarPart {
     set selectedDates(selectedDates: Array<number>);
 }
 export default Calendar;
-export type { ICalendarPicker, CalendarSelectedDatesChangeEventDetail, };
+export type { ICalendarPicker, ICalendarSelectedDates, CalendarSelectionChangeEventDetail, SpecialCalendarDateT, };