@solid-design-system/components 4.0.10 → 4.1.0

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.0.10",
+  "version": "4.1.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6021,236 +6021,6 @@
             "events": []
           }
         },
-        {
-          "name": "sd-tooltip",
-          "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "Sets the size of the default trigger icon.",
-              "value": { "type": "'lg' | 'sm'", "default": "'lg'" }
-            },
-            {
-              "name": "content",
-              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-              "value": {
-                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",
-                "default": "'top'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the tooltip so it won't show when triggered.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "open",
-              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "trigger",
-              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-              "value": { "type": "string", "default": "'click focus'" }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored."
-            },
-            {
-              "name": "anchor",
-              "description": "Slot to change the default trigger icon. The default icon is an info circle."
-            },
-            {
-              "name": "content",
-              "description": "The content to render in the tooltip. Alternatively, you can use the `content` attribute."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-show",
-              "description": "Emitted when the tooltip begins to show."
-            },
-            {
-              "name": "sd-after-show",
-              "description": "Emitted after the tooltip has shown and all animations are complete."
-            },
-            {
-              "name": "sd-hide",
-              "description": "Emitted when the tooltip begins to hide."
-            },
-            {
-              "name": "sd-after-hide",
-              "description": "Emitted after the tooltip has hidden and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "localize" },
-              { "name": "popup", "type": "SdPopup" },
-              {
-                "name": "size",
-                "description": "Sets the size of the default trigger icon.",
-                "type": "'lg' | 'sm'"
-              },
-              {
-                "name": "content",
-                "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "placement",
-                "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the tooltip so it won't show when triggered.",
-                "type": "boolean"
-              },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-                "type": "boolean"
-              },
-              {
-                "name": "trigger",
-                "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-                "type": "string"
-              },
-              {
-                "name": "hoist",
-                "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-                "type": "boolean"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-show",
-                "description": "Emitted when the tooltip begins to show."
-              },
-              {
-                "name": "sd-after-show",
-                "description": "Emitted after the tooltip has shown and all animations are complete."
-              },
-              {
-                "name": "sd-hide",
-                "description": "Emitted when the tooltip begins to hide."
-              },
-              {
-                "name": "sd-after-hide",
-                "description": "Emitted after the tooltip has hidden and all animations are complete."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sd-video",
-          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "playing",
-              "description": "Set to `true` to hide the play icon.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "isBelowBreakpoint",
-              "description": "Reactive property to trigger breakpoint re-renders.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The default slot used to pass a video player element."
-            },
-            { "name": "play-icon", "description": "The video's play icon." },
-            {
-              "name": "poster",
-              "description": "Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-play",
-              "description": "Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "playing",
-                "description": "Set to `true` to hide the play icon.",
-                "type": "boolean"
-              },
-              {
-                "name": "isBelowBreakpoint",
-                "description": "Reactive property to trigger breakpoint re-renders.",
-                "type": "boolean"
-              },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-play",
-                "description": "Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
@@ -6576,6 +6346,236 @@
               }
             ]
           }
+        },
+        {
+          "name": "sd-tooltip",
+          "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Sets the size of the default trigger icon.",
+              "value": { "type": "'lg' | 'sm'", "default": "'lg'" }
+            },
+            {
+              "name": "content",
+              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+              "value": {
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",
+                "default": "'top'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the tooltip so it won't show when triggered.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "trigger",
+              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+              "value": { "type": "string", "default": "'click focus'" }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored."
+            },
+            {
+              "name": "anchor",
+              "description": "Slot to change the default trigger icon. The default icon is an info circle."
+            },
+            {
+              "name": "content",
+              "description": "The content to render in the tooltip. Alternatively, you can use the `content` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-show",
+              "description": "Emitted when the tooltip begins to show."
+            },
+            {
+              "name": "sd-after-show",
+              "description": "Emitted after the tooltip has shown and all animations are complete."
+            },
+            {
+              "name": "sd-hide",
+              "description": "Emitted when the tooltip begins to hide."
+            },
+            {
+              "name": "sd-after-hide",
+              "description": "Emitted after the tooltip has hidden and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              { "name": "popup", "type": "SdPopup" },
+              {
+                "name": "size",
+                "description": "Sets the size of the default trigger icon.",
+                "type": "'lg' | 'sm'"
+              },
+              {
+                "name": "content",
+                "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "placement",
+                "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the tooltip so it won't show when triggered.",
+                "type": "boolean"
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+                "type": "boolean"
+              },
+              {
+                "name": "trigger",
+                "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+                "type": "string"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+                "type": "boolean"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-show",
+                "description": "Emitted when the tooltip begins to show."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the tooltip has shown and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the tooltip begins to hide."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the tooltip has hidden and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sd-video",
+          "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "playing",
+              "description": "Set to `true` to hide the play icon.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "isBelowBreakpoint",
+              "description": "Reactive property to trigger breakpoint re-renders.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot used to pass a video player element."
+            },
+            { "name": "play-icon", "description": "The video's play icon." },
+            {
+              "name": "poster",
+              "description": "Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-play",
+              "description": "Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "playing",
+                "description": "Set to `true` to hide the play icon.",
+                "type": "boolean"
+              },
+              {
+                "name": "isBelowBreakpoint",
+                "description": "Reactive property to trigger breakpoint re-renders.",
+                "type": "boolean"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-play",
+                "description": "Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video."
+              }
+            ]
+          }
         }
       ]
     }

package/cdn-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-0-10-select', { detail: { item } });
+        this.emit('sd-4-1-0-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/cdn-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-0-10-divider) {
+  ::slotted(sd-4-1-0-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/cdn-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-0-10-icon name="check" library="system" aria-hidden="true"></sd-4-0-10-icon>
+          <sd-4-1-0-icon name="check" library="system" aria-hidden="true"></sd-4-1-0-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-0-10-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-10-icon>
+          <sd-4-1-0-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-1-0-icon>
         </span>
       </div>
     `;

package/cdn-versioned/chunks/chunk.2F2YU5TY.js

@@ -0,0 +1 @@
+import{a as z}from"./chunk.64UNKF45.js";import{c as O}from"./chunk.3L472FD4.js";import{a as c,c as m}from"./chunk.A3DKF5BY.js";import{a as h,d as p}from"./chunk.RQYP7MH5.js";import{a as u}from"./chunk.KLRPP4NQ.js";import{a as K}from"./chunk.E2DRD2OX.js";import{a as D}from"./chunk.26YUWEYR.js";import{a as I}from"./chunk.TWQVHGYD.js";import{a as C,b as o,d as l,h as d}from"./chunk.GQU4LYQ6.js";import{b as M,e as A}from"./chunk.IRWHG2Q4.js";import{e as i}from"./chunk.TJOCV4DC.js";var n=class extends d{constructor(){super(...arguments);this.localize=new D(this);this.open=!1;this.rounded=!1;this.placement="bottom-start";this.disabled=!1;this.stayOpenOnSelect=!1;this.distance=0;this.skidding=0;this.noAutoSize=!1;this.noFlip=!1;this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleMenuItemActivate=this.handleMenuItemActivate.bind(this),this.handlePanelSelect=this.handlePanelSelect.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this)}firstUpdated(){this.panel.hidden=!this.open,this.open&&(this.addOpenListeners(),this.popup.active=!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.hide()}getAccessibleTrigger(){let t=this.trigger.assignedElements({flatten:!0}).find(a=>z(a).start),s=null;if(t)switch(t.tagName.toLowerCase()){case"sd-4-1-0-button":case"sd-4-1-0-icon-button":s=t.button;break;case"sd-4-1-0-navigation-item":s=t.button;break;default:s=t}return s}updateAccessibleTrigger(){let e=this.getAccessibleTrigger();e&&(e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded",this.open?"true":"false"))}focusOnTrigger(){let e=this.getAccessibleTrigger();typeof(e==null?void 0:e.focus)=="function"&&e.focus()}getMenu(){return this.panel.assignedElements({flatten:!0}).find(e=>e.tagName.toLowerCase()==="sd-menu")}handleKeyDown(e){this.open&&e.key==="Escape"&&(e.stopPropagation(),this.hide(),this.focusOnTrigger())}handleDocumentKeyDown(e){var t;if(e.key==="Tab"){if(this.open&&((t=document.activeElement)==null?void 0:t.tagName.toLowerCase())==="sd-menu-item"){e.preventDefault(),this.hide(),this.focusOnTrigger();return}setTimeout(()=>{var a,r,g,f,y,w,b,E,v,k,T,L;let s=((y=(f=(g=(r=(a=document.activeElement)==null?void 0:a.shadowRoot)==null?void 0:r.activeElement)==null?void 0:g.shadowRoot)==null?void 0:f.activeElement)==null?void 0:y.getRootNode())instanceof ShadowRoot?(v=(E=(b=(w=document.activeElement)==null?void 0:w.shadowRoot)==null?void 0:b.activeElement)==null?void 0:E.shadowRoot)==null?void 0:v.activeElement:((k=this.containingElement)==null?void 0:k.getRootNode())instanceof ShadowRoot?(L=(T=document.activeElement)==null?void 0:T.shadowRoot)==null?void 0:L.activeElement:document.activeElement;(!this.containingElement||(s==null?void 0:s.closest(this.containingElement.tagName.toLowerCase()))!==this.containingElement)&&this.hide()})}}handleDocumentMouseDown(e){let t=e.composedPath();this.containingElement&&!t.includes(this.containingElement)&&this.hide()}handleMenuItemActivate(e){let t=e.target;O(t,this.panel)}handlePanelSelect(e){let t=e.target;!this.stayOpenOnSelect&&t.tagName.toLowerCase()==="sd-menu"&&(this.hide(),this.focusOnTrigger())}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(e){if(e.key==="Escape"&&this.open){e.stopPropagation(),this.focusOnTrigger(),this.hide();return}if([" ","Enter"].includes(e.key)){e.preventDefault(),this.handleTriggerClick();return}let t=this.getMenu();if(t){let s=t.defaultSlot.assignedElements({flatten:!0}),a=s[0],r=s[s.length-1];["ArrowDown","ArrowUp","Home","End"].includes(e.key)&&(e.preventDefault(),this.open||this.show(),s.length>0&&requestAnimationFrame(()=>{(e.key==="ArrowDown"||e.key==="Home")&&(t.setCurrentItem(a),a.focus()),(e.key==="ArrowUp"||e.key==="End")&&(t.setCurrentItem(r),r.focus())}))}}handleTriggerKeyUp(e){e.key===" "&&e.preventDefault()}handleTriggerSlotChange(){this.updateAccessibleTrigger()}async show(){if(!this.open)return this.open=!0,u(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,u(this,"sd-after-hide")}reposition(){this.popup.reposition()}addOpenListeners(){this.panel.addEventListener("sd-activate",this.handleMenuItemActivate),this.panel.addEventListener("sd-4-1-0-select",this.handlePanelSelect),this.panel.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){this.panel&&(this.panel.removeEventListener("sd-activate",this.handleMenuItemActivate),this.panel.removeEventListener("sd-4-1-0-select",this.handlePanelSelect),this.panel.removeEventListener("keydown",this.handleKeyDown)),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}async handleOpenChange(){if(this.disabled){this.open=!1;return}if(this.updateAccessibleTrigger(),this.open){this.emit("sd-show"),this.addOpenListeners(),await p(this),this.panel.hidden=!1,this.popup.active=!0;let{keyframes:e,options:t}=m(this,"dropdown.show",{dir:this.localize.dir()});await h(this.popup.popup,e,t),this.emit("sd-after-show")}else{this.emit("sd-hide"),this.removeOpenListeners(),await p(this);let{keyframes:e,options:t}=m(this,"dropdown.hide",{dir:this.localize.dir()});await h(this.popup.popup,e,t),this.panel.hidden=!0,this.popup.active=!1,this.emit("sd-after-hide")}}render(){return A`<sd-4-1-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded&&this.distance<1?1:this.distance}" skidding="${this.skidding}" strategy="${this.hoist?"fixed":"absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${I("shadow bg-white",this.open?"block pointer-events-auto":"pointer-events-none",this.rounded&&"rounded-md")}" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dropdown"></slot></sd-4-1-0-popup>`}};n.styles=[...d.styles,M`:host{display:inline-block}#dropdown::part(popup){z-index:var(--sd-z-index-dropdown,900)}#dropdown[data-current-placement^=top]::part(popup){transform-origin:bottom}#dropdown[data-current-placement^=bottom]::part(popup){transform-origin:top}#dropdown[data-current-placement^=left]::part(popup){transform-origin:right}#dropdown[data-current-placement^=right]::part(popup){transform-origin:left}:host(:not([no-auto-size])) ::slotted(:not([slot=trigger])){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`],i([l("#dropdown")],n.prototype,"popup",2),i([l("[part=trigger]")],n.prototype,"trigger",2),i([l("[part=panel]")],n.prototype,"panel",2),i([o({type:Boolean,reflect:!0})],n.prototype,"open",2),i([o({type:Boolean,reflect:!0})],n.prototype,"rounded",2),i([o({reflect:!0})],n.prototype,"placement",2),i([o({type:Boolean,reflect:!0})],n.prototype,"disabled",2),i([o({attribute:"stay-open-on-select",type:Boolean,reflect:!0})],n.prototype,"stayOpenOnSelect",2),i([o({attribute:!1})],n.prototype,"containingElement",2),i([o({type:Number})],n.prototype,"distance",2),i([o({type:Number})],n.prototype,"skidding",2),i([o({type:Boolean,reflect:!0,attribute:"no-auto-size"})],n.prototype,"noAutoSize",2),i([o({type:Boolean,reflect:!0,attribute:"no-flip"})],n.prototype,"noFlip",2),i([o({type:Boolean})],n.prototype,"hoist",2),i([K("open",{waitUntilFirstUpdate:!0})],n.prototype,"handleOpenChange",1),n=i([C("sd-4-1-0-dropdown")],n);c("dropdown.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}});c("dropdown.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});export{n as a};

package/cdn-versioned/chunks/chunk.2POHB7E4.js

@@ -0,0 +1 @@
+import{a as w}from"./chunk.SXH5LQRL.js";import{b as C,c as E,d as V,e as k}from"./chunk.65NSSTJE.js";import{a as M}from"./chunk.EJKLI2Q4.js";import{a as m}from"./chunk.E2DRD2OX.js";import{a as b}from"./chunk.6HO6CE4A.js";import{a as f}from"./chunk.TWQVHGYD.js";import{a as y,b as n,c as u,d as c,h as p}from"./chunk.GQU4LYQ6.js";import{b as g,e as d}from"./chunk.IRWHG2Q4.js";import{e as o}from"./chunk.TJOCV4DC.js";var s=class extends p{constructor(){super(...arguments);this.formControlController=new C(this);this.hasSlotController=new b(this,"label","error-text");this.customValidityMessage="";this.hasButtonGroup=!1;this.defaultValue="";this.showInvalidStyle=!1;this.size="lg";this.required=!1;this.orientation="vertical";this.label="";this.boldLabel=!1;this.name="option";this.value="";this.form=""}get validity(){let t=this.required&&!this.value;return this.customValidityMessage!==""?k:t?V:E}get validationMessage(){let t=this.required&&!this.value;return this.customValidityMessage!==""?this.customValidityMessage:t?this.validationInput.validationMessage:""}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value}firstUpdated(){this.formControlController.updateValidity()}getAllRadios(){return[...this.querySelectorAll("sd-4-1-0-radio, sd-4-1-0-radio-button")]}handleRadioClick(t){let e=t.target.closest("sd-4-1-0-radio, sd-4-1-0-radio-button"),l=this.getAllRadios(),i=this.value;e.disabled||(this.value=e.value,l.forEach(h=>h.checked=h===e),this.value!==i&&(this.emit("sd-change"),this.emit("sd-input")))}handleKeyDown(t){var v;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;let e=this.getAllRadios().filter(r=>!r.disabled),l=(v=e.find(r=>r.checked))!=null?v:e[0],i=t.key===" "?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,h=this.value,a=e.indexOf(l)+i;a<0&&(a=e.length-1),a>e.length-1&&(a=0),this.getAllRadios().forEach(r=>{r.checked=!1,this.hasButtonGroup||(r.tabIndex=-1)}),this.value=e[a].value,e[a].checked=!0,this.hasButtonGroup?e[a].shadowRoot.querySelector("button").focus():(e[a].tabIndex=0,e[a].focus()),this.value!==h&&(this.emit("sd-change"),this.emit("sd-input")),t.preventDefault()}focus(){let t=this.getAllRadios(),l=t.find(i=>i.checked)||t[0];l&&l.focus()}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}async syncRadioElements(){var e,l;let t=this.getAllRadios();if(await Promise.all(t.map(async i=>{await i.updateComplete,i.checked=i.value===this.value,i.size=this.size,i instanceof w&&(i.invalid=this.showInvalidStyle)})),this.hasButtonGroup=t.some(i=>i.tagName.toLowerCase()==="sd-4-1-0-radio-button"),!t.some(i=>i.checked))if(this.hasButtonGroup){let i=(e=t[0].shadowRoot)==null?void 0:e.querySelector("button");i&&(i.tabIndex=0)}else t[0].tabIndex=0;if(this.hasButtonGroup){let i=(l=this.shadowRoot)==null?void 0:l.querySelector("sd-4-1-0-button-group");i&&(i.disableRole=!0)}}syncRadios(){if(customElements.get("sd-4-1-0-radio")&&customElements.get("sd-4-1-0-radio-button")){this.syncRadioElements();return}customElements.get("sd-4-1-0-radio")?this.syncRadioElements():customElements.whenDefined("sd-4-1-0-radio").then(()=>this.syncRadios()),customElements.get("sd-4-1-0-radio-button")?this.syncRadioElements():customElements.whenDefined("sd-4-1-0-radio-button").then(()=>this.syncRadios())}updateCheckedRadio(){this.getAllRadios().forEach(e=>e.checked=e.value===this.value),this.formControlController.setValidity(this.validity.valid)}handleSizeChange(){this.syncRadios()}handleInvalidChange(){this.syncRadios()}handleValueChange(){this.hasUpdated&&(this.updateCheckedRadio(),this.reportValidity())}checkValidity(){let t=this.required&&!this.value,e=this.customValidityMessage!=="";return t||e?(this.formControlController.emitInvalidEvent(),!1):!0}getForm(){return this.formControlController.getForm()}reportValidity(){let t=this.validity.valid;return this.formControlController.setValidity(t),this.validationInput.hidden=!0,clearTimeout(this.validationTimeout),this.formControlController.fakeUserInteraction(),t||(this.validationInput.hidden=!1,this.validationInput.reportValidity(),this.validationTimeout=setTimeout(()=>this.validationInput.hidden=!0,1e4)),t}setCustomValidity(t=""){this.customValidityMessage=t,this.validationInput.setCustomValidity(t),this.formControlController.updateValidity()}render(){let t=this.hasSlotController.test("label"),e=this.label?!0:!!t,l=this.hasSlotController.test("tooltip"),i=d`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;return d`<fieldset part="form-control" class="${f("border-0 p-0 m-0 flex flex-col",{sm:"text-sm",md:"text-base",lg:"text-base"}[this.size])}" role="radiogroup" aria-describedby="invalid-message">${t||l?d`<div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${f("p-0 leading-normal text-black text-left",!e&&"hidden",this.boldLabel&&"font-bold")}" @click="${this.focus}" aria-hidden="${e?"false":"true"}"><slot name="label">${this.label}</slot></legend>${l?d`<slot name="tooltip"></slot>`:""}</div>`:null}<div part="form-control-input" class="${f("flex",{vertical:"flex-col",horizontal:"flex-row"}[this.orientation])}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup?d`<sd-4-1-0-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${i}</sd-4-1-0-button-group>`:i}</div></fieldset>${this.formControlController.renderInvalidMessage()}`}};s.dependencies={"sd-4-1-0-button-group":M},s.styles=[...p.styles,g`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-1-0-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-1-0-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-1-0-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-1-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-1-0-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-1-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`],o([c("slot:not([name])")],s.prototype,"defaultSlot",2),o([c("#validation-input")],s.prototype,"validationInput",2),o([c("#invalid-message")],s.prototype,"invalidMessage",2),o([u()],s.prototype,"hasButtonGroup",2),o([u()],s.prototype,"defaultValue",2),o([u()],s.prototype,"showInvalidStyle",2),o([n({reflect:!0})],s.prototype,"size",2),o([n({type:Boolean,reflect:!0})],s.prototype,"required",2),o([n({reflect:!0})],s.prototype,"orientation",2),o([n()],s.prototype,"label",2),o([n({type:Boolean,reflect:!0})],s.prototype,"boldLabel",2),o([n()],s.prototype,"name",2),o([n({reflect:!0})],s.prototype,"value",2),o([n({reflect:!0})],s.prototype,"form",2),o([m("size",{waitUntilFirstUpdate:!0})],s.prototype,"handleSizeChange",1),o([m("showInvalidStyle",{waitUntilFirstUpdate:!0})],s.prototype,"handleInvalidChange",1),o([m("value")],s.prototype,"handleValueChange",1),s=o([y("sd-4-1-0-radio-group")],s);export{s as a};

package/cdn-versioned/chunks/{chunk.BAO3UVTY.js → chunk.3EINSGT6.js}

@@ -1 +1 @@
-import{a}from"./chunk.DCOFYPWX.js";import{a as p,b as o,c as d,d as v,h as n}from"./chunk.GQU4LYQ6.js";import{b as l,e as t}from"./chunk.IRWHG2Q4.js";import{e as i}from"./chunk.TJOCV4DC.js";var r=class extends n{constructor(){super(...arguments);this.variant="primary";this.shapes=["top","middle","bottom"];this.componentBreakpoint=0}getSvg(e,s){return{0:this.smallSvg(s),414:this.mediumSvg(s),640:this.largeSvg(s)}[e]}largeSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>this.setBreakpoint()),this.updateComplete.then(()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)})}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${a({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${a({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="${a("z-10 relative",this.variant==="image"&&"invisible opacity-0")}" part="content"><slot>${this.variant==="image"?"":t`<div class="h-8"></div>`}</slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${a({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}renderStylizedVariant(){return t`<div part="stylized-container" class="w-full overflow-hidden"><slot class="${a(this.variant!=="image"&&"hidden")}" name="image"></slot></div>`}renderShapes(){return t`${this.shapes.includes("top")?this.renderTopBrandshape():""} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():""} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():""}`}render(){let e=this.variant.startsWith("border-")||this.variant==="image";return t`<div class="${a({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white","border-white":"fill-transparent","border-primary":"fill-transparent",image:"fill-transparent"}[this.variant],"relative")}" part="base">${e?this.renderStylizedVariant():""} ${this.renderShapes()}</div>`}};r.styles=[...n.styles,l`:host{container-type:inline-size;display:block;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan)*var(--adjacent));--curve:calc((var(--opposite) - (var(--radius)/3))*0.5)}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{border-radius:0 var(--radius);height:calc(100% - var(--curve)*2);left:var(--sd-spacing-0,0);margin-top:calc(var(--curve));position:absolute;top:var(--sd-spacing-0,0);transform:skewY(calc(var(--angle)*-1))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:calc(100% + var(--curve)*2)!important;-o-object-fit:cover;object-fit:cover;position:absolute!important;transform:translateY(calc(var(--curve)*-1)) skewY(var(--angle));width:100%}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{height:100%;margin-top:0;transform:unset}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:100%!important;transform:unset}}:host([variant=border-primary]){--internal-border-color:rgb(var(--sd-color-primary,0 53 142))}:host([variant=border-white]){--internal-border-color:var(--sd-color-white,#fff)}:host([variant^=border-]) [part=stylized-container]:before{border-color:var(--internal-border-color,#000);border-style:solid;border-width:2px;content:"";right:var(--sd-spacing-0,0)}`],i([v("[part=base]")],r.prototype,"containerElem",2),i([o({type:String})],r.prototype,"variant",2),i([o({type:Array})],r.prototype,"shapes",2),i([d()],r.prototype,"componentBreakpoint",2),r=i([p("sd-4-0-10-brandshape")],r);export{r as a};
+import{a}from"./chunk.TWQVHGYD.js";import{a as p,b as o,c as d,d as v,h as n}from"./chunk.GQU4LYQ6.js";import{b as l,e as t}from"./chunk.IRWHG2Q4.js";import{e as i}from"./chunk.TJOCV4DC.js";var r=class extends n{constructor(){super(...arguments);this.variant="primary";this.shapes=["top","middle","bottom"];this.componentBreakpoint=0}getSvg(e,s){return{0:this.smallSvg(s),414:this.mediumSvg(s),640:this.largeSvg(s)}[e]}largeSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return e==="top"?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>this.setBreakpoint()),this.updateComplete.then(()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)})}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${a({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${a({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="${a("z-10 relative",this.variant==="image"&&"invisible opacity-0")}" part="content"><slot>${this.variant==="image"?"":t`<div class="h-8"></div>`}</slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${a({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}renderStylizedVariant(){return t`<div part="stylized-container" class="w-full overflow-hidden"><slot class="${a(this.variant!=="image"&&"hidden")}" name="image"></slot></div>`}renderShapes(){return t`${this.shapes.includes("top")?this.renderTopBrandshape():""} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():""} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():""}`}render(){let e=this.variant.startsWith("border-")||this.variant==="image";return t`<div class="${a({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white","border-white":"fill-transparent","border-primary":"fill-transparent",image:"fill-transparent"}[this.variant],"relative")}" part="base">${e?this.renderStylizedVariant():""} ${this.renderShapes()}</div>`}};r.styles=[...n.styles,l`:host{container-type:inline-size;display:block;--angle:11deg;--radius:60px;--tan:tan(var(--angle));--adjacent:100cqw;--opposite:calc(var(--tan)*var(--adjacent));--curve:calc((var(--opposite) - (var(--radius)/3))*0.5)}@supports not (transform:skewY(11deg)){:host{--tan:0.1943803091}}@media (min-width:415px){:host{--radius:72px}}@media (min-width:640px){:host{--radius:84px}}:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{border-radius:0 var(--radius);height:calc(100% - var(--curve)*2);left:var(--sd-spacing-0,0);margin-top:calc(var(--curve));position:absolute;top:var(--sd-spacing-0,0);transform:skewY(calc(var(--angle)*-1))}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:calc(100% + var(--curve)*2)!important;-o-object-fit:cover;object-fit:cover;position:absolute!important;transform:translateY(calc(var(--curve)*-1)) skewY(var(--angle));width:100%}@supports not (height:100cqw){:host([variant=image]) [part=stylized-container],:host([variant^=border-]) [part=stylized-container]:before{height:100%;margin-top:0;transform:unset}slot[name=image]::slotted(img),slot[name=image]::slotted(video){height:100%!important;transform:unset}}:host([variant=border-primary]){--internal-border-color:rgb(var(--sd-color-primary,0 53 142))}:host([variant=border-white]){--internal-border-color:var(--sd-color-white,#fff)}:host([variant^=border-]) [part=stylized-container]:before{border-color:var(--internal-border-color,#000);border-style:solid;border-width:2px;content:"";right:var(--sd-spacing-0,0)}`],i([v("[part=base]")],r.prototype,"containerElem",2),i([o({type:String})],r.prototype,"variant",2),i([o({type:Array})],r.prototype,"shapes",2),i([d()],r.prototype,"componentBreakpoint",2),r=i([p("sd-4-1-0-brandshape")],r);export{r as a};