@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

package/build/docs/autogenerated/usage/react/input.tsx.md

@@ -1,7 +1,95 @@
 ```tsx
-import { IxInput } from '@siemens/ix-react';
+import { IxInput, IxButton, IxDateInput, IxTimeInput, IxNumberInput } from '@siemens/ix-react';
 
 export default () => {
-  return <IxInput placeholder="Enter your Username"></IxInput>;
+  const handleSubmit = (e: React.FormEvent, formType: string) => {
+    e.preventDefault();
+    console.log(`${formType} form submitted`);
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log(e);
+        }}
+        id="login-form"
+      >
+        <IxInput type="email" name="email" id="email" />
+        <IxButton
+          form="login-form"
+          type="submit"
+          onClick={(evt) => console.log('Clicked Submit!')}
+        >
+          Login
+        </IxButton>
+      </form>
+      {}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'IxInput')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>IxInput Form</h3>
+        <IxInput type="email" name="email" placeholder="Email" />
+        <IxInput type="password" name="password" placeholder="Password" />
+        <IxNumberInput name="age" placeholder="Age" />
+        <IxDateInput name="dob" placeholder="Date of Birth" />
+        <IxTimeInput name="appointment" placeholder="Appointment Time" />
+        <IxButton type="submit">Submit</IxButton>
+      </form>
+
+      {}
+      <form
+        onSubmit={(e) => handleSubmit(e, 'Native')}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          width: '250px',
+        }}
+      >
+        <h3>Native Input Form</h3>
+        <input
+          type="email"
+          name="email"
+          placeholder="Email"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          style={{
+            padding: '8px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+        <button
+          type="submit"
+          style={{
+            padding: '8px',
+            backgroundColor: '#007acc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          Submit
+        </button>
+        <input type="submit" value="Native Submit Input" />
+      </form>
+    </div>
+  );
 };
 ```

package/build/docs/autogenerated/usage/react/loading.tsx.md

@@ -1,11 +1,11 @@
 ```tsx
-import { showModalLoading } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-react';
+import { ModalLoadingContext } from '@siemens/ix';
+import { IxButton, showModalLoading } from '@siemens/ix-react';
 
 export default () => {
   const startLoading = () => {
     let count = 0;
-    const progress = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);

package/build/docs/autogenerated/usage/react/message.tsx.md

@@ -1,6 +1,5 @@
 ```tsx
-import { showMessage } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-react';
+import { IxButton, showMessage } from '@siemens/ix-react';
 
 export default () => {
   const triggerMessage = async () => {

package/build/docs/autogenerated/usage/react/modal-close.tsx.md

@@ -0,0 +1,52 @@
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  Modal,
+  ModalRef,
+  showModal,
+  dismissModal,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+
+  return (
+    <Modal ref={modalRef}>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="secondary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()}>OK</IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+
+export default () => {
+  async function show() {
+    const modalInstance = await showModal({
+      content: <CustomModal />,
+    });
+    setTimeout(() => {
+      dismissModal(modalInstance);
+    }, 5000);
+  }
+
+  return <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>;
+};
+```

package/build/docs/autogenerated/usage/react/pane-layout.tsx.md

@@ -27,7 +27,7 @@ export default () => {
         <p>This is the bottom pane.</p>
       </IxPane>
 
-      <div slot="content">
+      <div>
         <IxButton
           onClick={() =>
             setVariant(variant === 'inline' ? 'floating' : 'inline')

package/build/docs/autogenerated/usage/react/split-button.scoped.css.md

@@ -0,0 +1,9 @@
+```css
+body {
+  display: flex;
+}
+
+ix-split-button {
+  margin: 0.25rem;
+}
+```

package/build/docs/autogenerated/usage/react/split-button.tsx.md

@@ -1,13 +1,28 @@
 ```tsx
 import { iconChevronDownSmall } from '@siemens/ix-icons/icons';
 import { IxDropdownItem, IxSplitButton } from '@siemens/ix-react';
+import './split-button.scoped.css'
 
 export default () => {
   return (
-    <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
-      <IxDropdownItem label="Item 1"></IxDropdownItem>
-      <IxDropdownItem label="Item 2"></IxDropdownItem>
-    </IxSplitButton>
+    <div>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall}>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disabled>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disableButton>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+      <IxSplitButton label="Action text" splitIcon={iconChevronDownSmall} disableDropdownButton>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+      </IxSplitButton>
+    </div>
   );
 };
 ```

package/build/docs/autogenerated/usage/react/theme-switcher.tsx.md

@@ -1,48 +1,73 @@
 ```tsx
 import './theme-switcher.scoped.css';
 
-import { IxSelectCustomEvent, themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 import {
   IxButton,
+  IxCheckbox,
   IxCol,
   IxLayoutGrid,
   IxRow,
   IxSelect,
   IxSelectItem,
 } from '@siemens/ix-react';
-import { ChangeEvent, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export default () => {
-  const [themes] = useState(['theme-classic-light', 'theme-classic-dark']);
-  const [selectedTheme, setSelectedTheme] = useState(themes[1]);
+  const [variants] = useState<ThemeVariant[]>(['light', 'dark']);
+  const [selectedVariant, setSelectedVariant] = useState<ThemeVariant>('dark');
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
 
-  const valueChange = (event: IxSelectCustomEvent<string | string[]>) => {
-    const newTheme: string = event.detail as string;
-    themeSwitcher.setTheme(newTheme);
-    setSelectedTheme(newTheme);
+  useEffect(() => {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(selectedVariant);
+  }, []);
+
+  const onValueChange = (event: CustomEvent<string | string[]>) => {
+    if (useSystemTheme) {
+      return;
+    }
+
+    const newVariant = event.detail as ThemeVariant;
+
+    themeSwitcher.setVariant(newVariant);
+    setSelectedVariant(newVariant);
   };
 
   const toggle = () => {
+    if (useSystemTheme) {
+      return;
+    }
+
     themeSwitcher.toggleMode();
+
+    const newVariant = selectedVariant === 'light' ? 'dark' : 'light';
+
+    setSelectedVariant(newVariant);
   };
 
-  const systemChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.checked) {
+  const onCheckedChange = (event: CustomEvent<boolean>) => {
+    const checked = event.detail;
+
+    setUseSystemTheme(checked);
+
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(selectedVariant);
     }
-
-    themeSwitcher.setTheme(selectedTheme);
   };
 
   return (
-    <IxLayoutGrid class="theme-switcher">
+    <IxLayoutGrid className="theme-switcher">
       <IxRow>
         <IxCol size="2">
           <span>Light/Dark</span>
         </IxCol>
         <IxCol>
-          <IxButton onClick={toggle}>Toggle mode</IxButton>
+          <IxButton onClick={toggle} disabled={useSystemTheme}>
+            Toggle mode
+          </IxButton>
         </IxCol>
       </IxRow>
 
@@ -50,15 +75,15 @@ export default () => {
         <IxCol size="2">Theme</IxCol>
         <IxCol>
           <IxSelect
-            value={selectedTheme}
-            onValueChange={valueChange}
-            placeholder="Select a theme"
+            value={selectedVariant}
+            onValueChange={onValueChange}
+            disabled={useSystemTheme}
           >
-            {themes.map((theme) => (
+            {variants.map((variant) => (
               <IxSelectItem
-                key={theme}
-                label={theme}
-                value={theme}
+                key={variant}
+                label={variant}
+                value={variant}
               ></IxSelectItem>
             ))}
           </IxSelect>
@@ -68,15 +93,7 @@ export default () => {
       <IxRow>
         <IxCol size="2"></IxCol>
         <IxCol>
-          <input
-            className="ix-form-control"
-            type="checkbox"
-            id="system"
-            onChange={systemChange}
-          />
-          <label className="ix-form-label" htmlFor="system">
-            Use System
-          </label>
+          <IxCheckbox label="Use system" onCheckedChange={onCheckedChange} />
         </IxCol>
       </IxRow>
     </IxLayoutGrid>

package/build/docs/autogenerated/usage/react/tooltip-with-icon.tsx.md

@@ -0,0 +1,23 @@
+```tsx
+import './tooltip.scoped.css';
+
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+
+const TooltipWithIcon = () => {
+  return (
+    <>
+      <IxButton className="any-class" aria-describedby="tooltip-1">
+        Hover me
+      </IxButton>
+      <IxTooltip id="tooltip-1" for=".any-class">
+        <IxIcon slot="title-icon" name={iconInfo} size="16"></IxIcon>
+        <div slot="title-content">Tooltip Title</div>
+        Simple selector with icon
+      </IxTooltip>
+    </>
+  );
+};
+
+export default TooltipWithIcon;
+```

package/build/docs/autogenerated/usage/react/tooltip.tsx.md

@@ -6,7 +6,7 @@ import { IxButton, IxTooltip } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton class="any-class" aria-describedby="tooltip-1">
+      <IxButton className="any-class" aria-describedby="tooltip-1">
         Hover me
       </IxButton>
       <IxTooltip id="tooltip-1" for=".any-class">

package/build/docs/autogenerated/usage/vue/aggrid.vue.md

@@ -1,55 +1,88 @@
 ```vue
 <script setup lang="ts">
-import { GridOptions } from 'ag-grid-community';
+import { ref, onMounted } from 'vue';
 import { AgGridVue } from 'ag-grid-vue3';
+import { getIxTheme } from '@siemens/ix-aggrid';
+import {
+  ModuleRegistry,
+  AllCommunityModule,
+  GridOptions,
+} from 'ag-grid-community';
+import * as agGrid from 'ag-grid-community';
 
-const gridOptions = {
-  columnDefs: [
-    {
-      field: 'type',
-      headerName: 'Type',
-      resizable: true,
-      checkboxSelection: true,
-    },
-    {
-      field: 'status',
-      headerName: 'Status',
-      resizable: true,
-      sortable: true,
-      filter: true,
-    },
-    { field: 'hwVersion', headerName: 'HW version', resizable: true },
-  ],
-  rowData: [
-    {
-      type: 'Equipment',
-      status: 'Normal',
-      hwVersion: '2.0',
-      checked: false,
-    },
-    {
-      type: 'Positioner',
-      status: 'Maintenance',
-      hwVersion: '1.0',
-      checked: true,
-    },
-    {
-      type: 'Pressure sensor',
-      status: 'Unknown',
-      hwVersion: 'N/A',
-      checked: false,
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const gridOptions = ref<GridOptions | null>(null);
+
+onMounted(() => {
+  const ixTheme = getIxTheme(agGrid);
+
+  gridOptions.value = {
+    theme: ixTheme,
+    rowDragManaged: true,
+    tooltipShowDelay: 500,
+    rowSelection: {
+      mode: 'multiRow',
+      checkboxes: true,
+      headerCheckbox: true,
+      selectAll: 'filtered',
     },
-  ],
-  rowSelection: 'multiple',
-  suppressCellFocus: true,
-  checkboxSelection: true,
-} as GridOptions;
+    columnDefs: [
+      {
+        field: 'type',
+        headerName: 'Type',
+        resizable: true,
+        rowDrag: true,
+        tooltipField: 'type',
+      },
+      {
+        field: 'status',
+        headerName: 'Status',
+        resizable: true,
+        sortable: true,
+        filter: true,
+        tooltipValueGetter: (params) => {
+          return `Status: ${params.value} - Type: ${params.data.type}`;
+        },
+      },
+      {
+        field: 'hwVersion',
+        headerName: 'HW version',
+        resizable: true,
+        tooltipValueGetter: (params) => {
+          if (params.value === 'N/A') {
+            return 'Hardware version not available';
+          }
+          return `Hardware Version ${params.value}`;
+        },
+      },
+    ],
+    rowData: [
+      {
+        type: 'Equipment',
+        status: 'Normal',
+        hwVersion: '2.0',
+      },
+      {
+        type: 'Positioner',
+        status: 'Maintenance',
+        hwVersion: '1.0',
+      },
+      {
+        type: 'Pressure sensor',
+        status: 'Unknown',
+        hwVersion: 'N/A',
+      },
+    ],
+    suppressCellFocus: true,
+  };
+});
 </script>
 
 <template>
   <AgGridVue
+    v-if="gridOptions"
     style="height: 12rem; width: 100%"
-    class="ag-theme-alpine-dark ag-theme-ix"
     :gridOptions="gridOptions"
   >
   </AgGridVue>

package/build/docs/autogenerated/usage/vue/application-breakpoints.vue.md

@@ -28,7 +28,8 @@ export default {
     };
   },
   methods: {
-    setBreakpoint(value: Breakpoint) {
+    setBreakpoint(event: CustomEvent<Breakpoint>) {
+      const value = event?.detail;
       if (validBreakpoints.has(value)) {
         this.breakpoints = [value];
       }
@@ -65,22 +66,10 @@ export default {
         slot="header"
         header-title="Choose breakpoint"
       ></IxContentHeader>
-      <IxRadioGroup :value="breakpoints[0]">
-        <IxRadio
-          value="sm"
-          label="Small"
-          @click="setBreakpoint('sm')"
-        ></IxRadio>
-        <IxRadio
-          value="md"
-          label="Medium"
-          @click="setBreakpoint('md')"
-        ></IxRadio>
-        <IxRadio
-          value="lg"
-          label="Large"
-          @click="setBreakpoint('lg')"
-        ></IxRadio>
+      <IxRadioGroup :value="breakpoints[0]" @valueChange="setBreakpoint">
+        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
+        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
+        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
       </IxRadioGroup>
     </IxContent>
   </IxApplication>

package/build/docs/autogenerated/usage/vue/blind-variants.vue.md

@@ -7,8 +7,8 @@ import { IxBlind } from '@siemens/ix-vue';
 <style scoped src="./blind-variants.css"></style>
 
 <template>
-  <IxBlind :icon="iconBulb" label="Insight" sublabel="sublabel">
-    <div>Insight content</div>
+  <IxBlind :icon="iconBulb" label="Example" sublabel="sublabel">
+    <div>Filled content</div>
   </IxBlind>
   <IxBlind
     variant="outline"

package/build/docs/autogenerated/usage/vue/global.css.md

@@ -1,11 +1,6 @@
 ```css
 @import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
 
-
-@import 'ag-grid-community/styles/ag-grid.css';
-@import 'ag-grid-community/styles/ag-theme-alpine.css';
-@import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
-
 html {
   width: 100vw;
   height: 100vh;

package/build/docs/autogenerated/usage/vue/loading.vue.md

@@ -1,13 +1,11 @@
 ```vue
-1
-
 <script setup lang="ts">
-import { showModalLoading } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-vue';
+import { IxButton, showModalLoading } from '@siemens/ix-vue';
+import { ModalLoadingContext } from '@siemens/ix';
 
 const startLoading = () => {
   let count = 0;
-  const progress = showModalLoading('Loading 0/2');
+  const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
   const interval = setInterval(() => {
     count++;
     progress.update(`Loading ${count}/2`);

package/build/docs/autogenerated/usage/vue/message.vue.md

@@ -1,7 +1,6 @@
 ```vue
 <script setup lang="ts">
-import { showMessage } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-vue';
+import { IxButton, showMessage } from '@siemens/ix-vue';
 
 const triggerMessage = async () => {
   (

package/build/docs/autogenerated/usage/vue/modal-close.vue.md

@@ -0,0 +1,41 @@
+```vue
+<script setup lang="tsx">
+import {
+  IxButton,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+  Modal,
+  type ModalSlotProps,
+  showModal,
+  dismissModal,
+} from '@siemens/ix-vue';
+
+function show() {
+  showModal({
+    content: (
+      <Modal>
+        {({ closeModal, dismissModal }: ModalSlotProps) => [
+          <IxModalHeader>Message headline</IxModalHeader>,
+          <IxModalContent>Message text lorem ipsum</IxModalContent>,
+          <IxModalFooter>
+            <IxButton variant="secondary" onClick={() => dismissModal()}>
+              Cancel
+            </IxButton>
+            <IxButton onClick={() => closeModal()}>OK</IxButton>
+          </IxModalFooter>,
+        ]}
+      </Modal>
+    ),
+  }).then((modalInstance) => {
+    setTimeout(() => {
+      dismissModal(modalInstance);
+    }, 5000);
+  });
+}
+</script>
+
+<template>
+  <IxButton @click="show()">Show modal (auto-dismiss)</IxButton>
+</template>
+```

package/build/docs/autogenerated/usage/vue/pane-layout.vue.md

@@ -26,7 +26,7 @@ const layout = ref<'full-horizontal' | 'full-vertical'>('full-horizontal');
       <p>This is the bottom pane.</p>
     </IxPane>
 
-    <div slot="content">
+    <div>
       <IxButton
         @click="
           () => {

package/build/docs/autogenerated/usage/vue/popover-news.vue.md

@@ -3,7 +3,6 @@
 import {
   IxApplication,
   IxApplicationHeader,
-  IxBasicNavigation,
   IxMenu,
   IxMenuAbout,
   IxMenuAboutItem,