@synergy-design-system/components 1.26.3 → 2.0.0

package/dist/custom-elements.json

@@ -707,6 +707,22 @@
                 "text": "HTMLButtonElement | HTMLLinkElement"
               }
             },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "hasFocus",
@@ -960,6 +976,11 @@
               "name": "isLink",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleDisabledChange"
@@ -1451,25 +1472,25 @@
             },
             {
               "kind": "field",
-              "name": "nested",
+              "name": "sharp",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card as a nested item. Can be used when nesting multiple syn-cards to create hierarchy",
-              "attribute": "nested",
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "attribute": "sharp",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "nested",
+              "name": "sharp",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the card as a nested item. Can be used when nesting multiple syn-cards to create hierarchy",
-              "fieldName": "nested"
+              "description": "Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy.",
+              "fieldName": "sharp"
             }
           ],
           "superclass": {
@@ -3217,7 +3238,7 @@
           "name": "SynHeader",
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
+              "description": "The component's base wrapper",
               "name": "base"
             },
             {
@@ -3247,15 +3268,15 @@
           ],
           "slots": [
             {
-              "description": "The label for the header.",
-              "name": ""
+              "description": "The label for the header",
+              "name": "label"
             },
             {
-              "description": "The logo that should be displayed. Will fall back to the SICK logo if not provided.",
+              "description": "The logo that should be displayed. Will fall back to the SICK logo if not provided",
               "name": "logo"
             },
             {
-              "description": "The meta-navigation is used to add various application toolbar icons. Best used with `<syn-icon-button />` and `<syn-drop-down />`",
+              "description": "The meta-navigation is used to add various application toolbar icons Best used with `<syn-icon-button />` and `<syn-drop-down />`",
               "name": "meta-navigation"
             },
             {
@@ -3263,12 +3284,12 @@
               "name": "navigation"
             },
             {
-              "description": "An icon to use in lieu of the default show burger menu icon",
-              "name": "show-burger-menu"
+              "description": "An icon to use in lieu of the default burger-menu=open state. The default close icon is a 'x'.",
+              "name": "open-burger-menu-icon"
             },
             {
-              "description": "An icon to use in lieu of the default hide burger menu icon",
-              "name": "hide-burger-menu"
+              "description": "An icon to use in lieu of the default burger-menu=closed state. The default open icon is a burger menu.",
+              "name": "closed-burger-menu-icon"
             }
           ],
           "members": [
@@ -3311,29 +3332,18 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+              "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
               "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "showBurgerMenu",
+              "name": "burgerMenu",
               "type": {
-                "text": "boolean"
+                "text": "'hidden' | 'open' | 'closed'"
               },
-              "default": "false",
-              "description": "Adds a button to toggle the burger menu's visibility.\nThe button is added automatically, if the component finds a syn-side-nav in non-rail mode.",
-              "attribute": "show-burger-menu",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "burgerMenuVisible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether or not the burger menu is currently visible.",
-              "attribute": "burger-menu-visible",
+              "default": "'hidden'",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "attribute": "burger-menu",
               "reflects": true
             },
             {
@@ -3345,6 +3355,11 @@
               "privacy": "private",
               "description": "The side nav"
             },
+            {
+              "kind": "method",
+              "name": "toggleBurgerMenu",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleBurgerMenuToggle",
@@ -3353,11 +3368,12 @@
             {
               "kind": "method",
               "name": "updateBurgerMenuBasedOnSideNav",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Automatically update the burger menu icon based\non the state of the side-nav, if one is connected."
             },
             {
               "kind": "method",
-              "name": "handleBurgerMenuVisible"
+              "name": "handleBurgerMenu"
             },
             {
               "kind": "method",
@@ -3366,7 +3382,7 @@
                 {
                   "name": "sideNav",
                   "type": {
-                    "text": "SynSideNav"
+                    "text": "SynSideNav | null"
                   },
                   "description": "The side navigation to connect to the header"
                 }
@@ -3376,16 +3392,22 @@
           ],
           "events": [
             {
-              "description": "Emitted when the burger menu button is toggled to visible",
-              "name": "syn-burger-menu-show",
-              "reactName": "onSynBurgerMenuShow",
-              "eventName": "SynBurgerMenuShowEvent"
+              "description": "Emitted when the burger menu is toggled to closed",
+              "name": "syn-burger-menu-closed",
+              "reactName": "onSynBurgerMenuClosed",
+              "eventName": "SynBurgerMenuClosedEvent"
             },
             {
-              "description": "Emitted when the burger menu button is toggled to not visible",
-              "name": "syn-burger-menu-hide",
-              "reactName": "onSynBurgerMenuHide",
-              "eventName": "SynBurgerMenuHideEvent"
+              "description": "Emitted when the burger menu is toggled to hidden",
+              "name": "syn-burger-menu-hidden",
+              "reactName": "onSynBurgerMenuHidden",
+              "eventName": "SynBurgerMenuHiddenEvent"
+            },
+            {
+              "description": "Emitted when the burger menu is toggled to open",
+              "name": "syn-burger-menu-open",
+              "reactName": "onSynBurgerMenuOpen",
+              "eventName": "SynBurgerMenuOpenEvent"
             }
           ],
           "attributes": [
@@ -3395,26 +3417,17 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The headers label. If you need to display HTML, use the `default` slot instead.",
+              "description": "The headers label. If you need to display HTML, use the `label` slot instead.",
               "fieldName": "label"
             },
             {
-              "name": "show-burger-menu",
+              "name": "burger-menu",
               "type": {
-                "text": "boolean"
+                "text": "'hidden' | 'open' | 'closed'"
               },
-              "default": "false",
-              "description": "Adds a button to toggle the burger menu's visibility.\nThe button is added automatically, if the component finds a syn-side-nav in non-rail mode.",
-              "fieldName": "showBurgerMenu"
-            },
-            {
-              "name": "burger-menu-visible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether or not the burger menu is currently visible.",
-              "fieldName": "burgerMenuVisible"
+              "default": "'hidden'",
+              "description": "Defines the current visibility and icon of the burger-menu icon.\nThe menu button is added automatically if the component finds a syn-side-nav in non-rail mode.\nThe following values can be used:\n- hidden: The burger menu is not visible\n- open: The burger menu is visible and shows the close icon\n- closed: The burger menu is visible and shows the open icon",
+              "fieldName": "burgerMenu"
             }
           ],
           "superclass": {
@@ -3425,7 +3438,7 @@
           "tagNameWithoutPrefix": "header",
           "tagName": "syn-header",
           "customElement": true,
-          "jsDoc": "/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot - The label for the header.\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided.\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons.\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot show-burger-menu - An icon to use in lieu of the default show burger menu icon\n * @slot hide-burger-menu - An icon to use in lieu of the default hide burger menu icon\n *\n * @event syn-burger-menu-show - Emitted when the burger menu button is toggled to visible\n * @event syn-burger-menu-hide - Emitted when the burger menu button is toggled to not visible\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n */",
+          "jsDoc": "/**\n * @summary The <syn-header /> element provides a generic application header\n * that can be used to add applications name, toolbar and primary navigation.\n *\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs\n * @status stable\n * @since 1.10.0\n *\n * @slot label - The label for the header\n * @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided\n * @slot meta-navigation - The meta-navigation is used to add various application toolbar icons\n *                     Best used with `<syn-icon-button />` and `<syn-drop-down />`\n * @slot navigation - This slot can be used to add an optional horizontal navigation\n * @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.\n *                      The default close icon is a 'x'.\n * @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.\n *                      The default open icon is a burger menu.\n *\n * @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed\n * @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden\n * @event syn-burger-menu-open - Emitted when the burger menu is toggled to open\n *\n * @csspart base - The component's base wrapper\n * @csspart content - The wrapper most content items reside\n * @csspart logo - The wrapper the application logo resides in\n * @csspart label - The element wrapping the application name\n * @csspart meta-navigation - The Item wrapping the optional application menu\n * @csspart navigation - The wrapper that is holding the optional top navigation section\n * @csspart burger-menu-toggle-button - The button that toggles the burger menu\n */",
           "documentation": "https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs",
           "status": "stable",
           "since": "1.10.0"
@@ -6959,6 +6972,13 @@
               "privacy": "private",
               "description": "Internal resize observer"
             },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -6995,16 +7015,6 @@
               "privacy": "private",
               "description": "The priority menu dropdown"
             },
-            {
-              "kind": "field",
-              "name": "priorityMenuLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Menu'",
-              "description": "The components priority menu label.\nThis will be shown after the priority menu 3 dots link",
-              "attribute": "priority-menu-label"
-            },
             {
               "kind": "field",
               "name": "itemPositionsCached",
@@ -7083,17 +7093,6 @@
               "privacy": "private"
             }
           ],
-          "attributes": [
-            {
-              "name": "priority-menu-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Menu'",
-              "description": "The components priority menu label.\nThis will be shown after the priority menu 3 dots link",
-              "fieldName": "priorityMenuLabel"
-            }
-          ],
           "superclass": {
             "name": "SynergyElement",
             "module": "/src/internal/synergy-element.js"
@@ -7712,6 +7711,17 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style radio button with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleBlur",
@@ -7799,6 +7809,15 @@
               "default": "'medium'",
               "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
               "fieldName": "size"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style radio button with rounded edges.",
+              "fieldName": "pill"
             }
           ],
           "superclass": {
@@ -11322,7 +11341,7 @@
   "package": {
     "name": "@synergy-design-system/components",
     "description": "",
-    "version": "1.26.3",
+    "version": "2.0.0",
     "author": {
       "name": "SICK Global UX Foundation",
       "url": "https://www.sick.com"

package/dist/events/events.d.ts

@@ -1,8 +1,9 @@
 export type * from './syn-after-hide.ts';
 export type * from './syn-after-show.ts';
 export type * from './syn-blur.ts';
-export type * from './syn-burger-menu-hide.ts';
-export type * from './syn-burger-menu-show.ts';
+export type * from './syn-burger-menu-closed.ts';
+export type * from './syn-burger-menu-hidden.ts';
+export type * from './syn-burger-menu-open.ts';
 export type * from './syn-change.ts';
 export type * from './syn-clear.ts';
 export type * from './syn-error.ts';

package/dist/events/syn-burger-menu-closed.d.ts

@@ -0,0 +1,6 @@
+export type SynBurgerMenuClosedEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-burger-menu-closed': SynBurgerMenuClosedEvent;
+    }
+}

package/dist/events/syn-burger-menu-hidden.d.ts

@@ -0,0 +1,6 @@
+export type SynBurgerMenuHiddenEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-burger-menu-hidden': SynBurgerMenuHiddenEvent;
+    }
+}

package/dist/events/syn-burger-menu-open.d.ts

@@ -0,0 +1,6 @@
+export type SynBurgerMenuOpenEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'syn-burger-menu-open': SynBurgerMenuOpenEvent;
+    }
+}