@design.estate/dees-catalog 3.36.0 → 3.37.0

package/dist_watch/bundle.js

@@ -53587,26 +53587,26 @@ var init_fontawesome_svg_core = __esm({
       }
     };
     parse7 = {
-      icon: function icon(_icon2) {
-        if (_icon2 === null) {
+      icon: function icon(_icon3) {
+        if (_icon3 === null) {
           return null;
         }
-        if (_typeof(_icon2) === "object" && _icon2.prefix && _icon2.iconName) {
+        if (_typeof(_icon3) === "object" && _icon3.prefix && _icon3.iconName) {
           return {
-            prefix: _icon2.prefix,
-            iconName: byAlias(_icon2.prefix, _icon2.iconName) || _icon2.iconName
+            prefix: _icon3.prefix,
+            iconName: byAlias(_icon3.prefix, _icon3.iconName) || _icon3.iconName
           };
         }
-        if (Array.isArray(_icon2) && _icon2.length === 2) {
-          var iconName = _icon2[1].indexOf("fa-") === 0 ? _icon2[1].slice(3) : _icon2[1];
-          var prefix4 = getCanonicalPrefix(_icon2[0]);
+        if (Array.isArray(_icon3) && _icon3.length === 2) {
+          var iconName = _icon3[1].indexOf("fa-") === 0 ? _icon3[1].slice(3) : _icon3[1];
+          var prefix4 = getCanonicalPrefix(_icon3[0]);
           return {
             prefix: prefix4,
             iconName: byAlias(prefix4, iconName) || iconName
           };
         }
-        if (typeof _icon2 === "string" && (_icon2.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon2.match(ICON_SELECTION_SYNTAX_PATTERN))) {
-          var canonicalIcon = getCanonicalIcon(_icon2.split(" "), {
+        if (typeof _icon3 === "string" && (_icon3.indexOf("".concat(config2.cssPrefix, "-")) > -1 || _icon3.match(ICON_SELECTION_SYNTAX_PATTERN))) {
+          var canonicalIcon = getCanonicalIcon(_icon3.split(" "), {
             skipLookups: true
           });
           return {
@@ -53614,11 +53614,11 @@ var init_fontawesome_svg_core = __esm({
             iconName: byAlias(canonicalIcon.prefix, canonicalIcon.iconName) || canonicalIcon.iconName
           };
         }
-        if (typeof _icon2 === "string") {
+        if (typeof _icon3 === "string") {
           var _prefix = getDefaultUsablePrefix();
           return {
             prefix: _prefix,
-            iconName: byAlias(_prefix, _icon2) || _icon2
+            iconName: byAlias(_prefix, _icon3) || _icon3
           };
         }
       }
@@ -113576,7 +113576,49 @@ var generateCpuCores = (count2) => {
   }));
 };
 var demoFunc7 = () => {
-  return b2(_a11 || (_a11 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n    </div>\n    \n    <script>\n      // Cleanup live updates on page unload\n      window.addEventListener('beforeunload', () => {\n        if ((window as any).liveUpdateInterval) {\n          clearInterval((window as any).liveUpdateInterval);\n        }\n      });\n    <\/script>\n  </dees-demowrapper>\n  "])), i`
+  return b2(_a11 || (_a11 = __template(["\n  <dees-demowrapper>\n    <style>\n      ", '\n    </style>\n    \n    <div class="demo-container">\n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ', "; border-radius: 6px; font-size: 14px; font-family: monospace; color: ", ';">\n          <em>Click on tile actions or grid actions to see the result...</em>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <div class="tile-config">\n          <div class="config-section">\n            <div class="config-title">Configuration Options</div>\n            <div class="config-description">\n              Each tile type supports different properties:\n              <ul style="margin: 8px 0; padding-left: 20px;">\n                <li><strong>Number:</strong> value, unit, color, description</li>\n                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>\n                <li><strong>Percentage:</strong> value (0-100), color, description</li>\n                <li><strong>Trend:</strong> value, unit, trendData array, description</li>\n                <li><strong>Text:</strong> value (string), color, description</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </dees-panel>\n      \n      <dees-panel .title=', " .subtitle=", '>\n        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", '\n        ></dees-statsgrid>\n        \n        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>\n        <dees-statsgrid\n          .tiles=', "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="cpu-cores-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", '>\n        <dees-statsgrid\n          id="interactive-grid"\n          .tiles=', "\n          .gridActions=", "\n          .minTileWidth=", "\n          .gap=", "\n        ></dees-statsgrid>\n      </dees-panel>\n      \n      <dees-panel .title=", " .subtitle=", '>\n        <div class="code-block">', "</div>\n      </dees-panel>\n\n      <dees-panel .title=", " .subtitle=", ">\n        <dees-statsgrid\n          .tiles=", "\n          .minTileWidth=", "\n          .gap=", `
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+
+    <script>
+      // Cleanup live updates on page unload
+      window.addEventListener('beforeunload', () => {
+        if ((window as any).liveUpdateInterval) {
+          clearInterval((window as any).liveUpdateInterval);
+        }
+      });
+    <\/script>
+  </dees-demowrapper>
+  `])), i`
         .demo-container {
           display: flex;
           flex-direction: column;
@@ -114072,7 +114114,108 @@ html\`
       }
     ]}
   ></dees-statsgrid>
-\`;`);
+\`;`, "7. Disk & Storage Tiles", "Partition and physical disk visualization tiles", [
+    {
+      id: "root-partition",
+      title: "Root Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:folder-root",
+      partitionData: {
+        used: 698341425152,
+        // ~650 GB
+        total: 1073741824e3,
+        // ~1 TB
+        filesystem: "ext4",
+        mountPoint: "/"
+      }
+    },
+    {
+      id: "home-partition",
+      title: "Home Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:home",
+      partitionData: {
+        used: 214748364800,
+        // ~200 GB
+        total: 536870912e3,
+        // ~500 GB
+        filesystem: "ext4",
+        mountPoint: "/home"
+      }
+    },
+    {
+      id: "data-partition",
+      title: "Data Partition",
+      value: 0,
+      type: "partition",
+      icon: "lucide:database",
+      partitionData: {
+        used: 1932735283200,
+        // ~1.8 TB (90% - critical)
+        total: 2147483648e3,
+        // ~2 TB
+        filesystem: "xfs",
+        mountPoint: "/data"
+      }
+    },
+    {
+      id: "nvme-ssd",
+      title: "Primary NVMe",
+      value: 0,
+      type: "disk",
+      icon: "lucide:hard-drive",
+      columnSpan: 2,
+      diskData: {
+        capacity: 2e12,
+        // 2 TB
+        model: "Samsung 990 Pro",
+        type: "nvme",
+        iops: {
+          read: 7450,
+          write: 6900
+        },
+        health: 98
+      }
+    },
+    {
+      id: "sata-ssd",
+      title: "Secondary SSD",
+      value: 0,
+      type: "disk",
+      icon: "lucide:hard-drive",
+      diskData: {
+        capacity: 1e12,
+        // 1 TB
+        model: "Crucial MX500",
+        type: "ssd",
+        iops: {
+          read: 560,
+          write: 510
+        },
+        health: 85
+      }
+    },
+    {
+      id: "hdd-storage",
+      title: "Backup HDD",
+      value: 0,
+      type: "disk",
+      icon: "lucide:archive",
+      diskData: {
+        capacity: 8e12,
+        // 8 TB
+        model: "Seagate IronWolf",
+        type: "hdd",
+        iops: {
+          read: 210,
+          write: 195
+        },
+        health: 42
+      }
+    }
+  ], 280, 16);
 };
 
 // ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
@@ -127643,54 +127786,94 @@ var demoFunc26 = () => b2`
       <dees-panel .title=${"3. Buttons with Icons"} .subtitle=${"Combining icons with text for enhanced visual communication"}>
         <div class="icon-row">
           <dees-button>
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
             Add Item
           </dees-button>
           <dees-button type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
             Delete
           </dees-button>
           <dees-button type="outline">
-            <dees-icon iconFA="faDownload"></dees-icon>
+            <dees-icon icon="lucide:Download"></dees-icon>
             Download
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button type="secondary" size="sm">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
             Settings
           </dees-button>
           <dees-button type="ghost">
-            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            <dees-icon icon="fa:caretLeft"></dees-icon>
             Back
           </dees-button>
           <dees-button type="ghost">
             Next
-            <dees-icon iconFA="faChevronRight"></dees-icon>
+            <dees-icon icon="fa:caretRight"></dees-icon>
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button size="icon" type="default">
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="secondary">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="outline">
-            <dees-icon iconFA="faSearch"></dees-icon>
+            <dees-icon icon="lucide:Search"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="ghost">
-            <dees-icon iconFA="faEllipsisV"></dees-icon>
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
           </dees-button>
         </div>
       </dees-panel>
     </dees-demowrapper>
-    
+
+    <dees-demowrapper .runAfterRender=${async (elementArg) => {
+  const buttons = elementArg.querySelectorAll("dees-button");
+  buttons.forEach((button) => {
+    button.addEventListener("clicked", () => {
+      const icon3 = button.getAttribute("icon") || "none";
+      const position3 = button.getAttribute("iconPosition") || "left";
+      console.log(`Icon property button: icon=${icon3}, position=${position3}`);
+    });
+  });
+}}>
+      <dees-panel .title=${"4. Icons via Property"} .subtitle=${"Simplified icon syntax using the icon property"}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
     <dees-demowrapper .runAfterRender=${async (elementArg) => {
   const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
   const successButton = elementArg.querySelector('dees-button[status="success"]');
@@ -127711,7 +127894,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"4. Button States"} .subtitle=${"Different states to indicate button status and loading conditions"}>
+      <dees-panel .title=${"5. Button States"} .subtitle=${"Different states to indicate button status and loading conditions"}>
         <div class="button-group">
           <dees-button status="normal">Normal</dees-button>
           <dees-button status="pending">Processing...</dees-button>
@@ -127751,7 +127934,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"5. Event Handling"} .subtitle=${"Interactive examples with click event handling"}>
+      <dees-panel .title=${"6. Event Handling"} .subtitle=${"Interactive examples with click event handling"}>
         <div class="button-group">
           <dees-button>Click Me</dees-button>
           <dees-button type="secondary" .eventDetailData=${"custom-data-123"}>
@@ -127787,7 +127970,7 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"6. Form Integration"} .subtitle=${"Buttons working within forms with automatic spacing"}>
+      <dees-panel .title=${"7. Form Integration"} .subtitle=${"Buttons working within forms with automatic spacing"}>
         <dees-form>
           <dees-input-text label="Name" key="name" required></dees-input-text>
           <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
@@ -127813,7 +127996,7 @@ var demoFunc26 = () => b2`
     }
   });
 }}>
-      <dees-panel .title=${"7. Backward Compatibility"} .subtitle=${"Old button types are automatically mapped to new variants"}>
+      <dees-panel .title=${"8. Backward Compatibility"} .subtitle=${"Old button types are automatically mapped to new variants"}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
           <dees-button type="highlighted">Highlighted → Destructive</dees-button>
@@ -127851,36 +128034,36 @@ var demoFunc26 = () => b2`
     });
   }
 }}>
-      <dees-panel .title=${"8. Advanced Examples"} .subtitle=${"Complex button configurations and real-world use cases"}>
+      <dees-panel .title=${"9. Advanced Examples"} .subtitle=${"Complex button configurations and real-world use cases"}>
         <div class="horizontal-group">
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
             <dees-button type="default" size="sm">
-              <dees-icon iconFA="faSave"></dees-icon>
+              <dees-icon icon="lucide:Save"></dees-icon>
               Save Changes
             </dees-button>
             <dees-button type="secondary" size="sm">
-              <dees-icon iconFA="faUndo"></dees-icon>
+              <dees-icon icon="lucide:Undo2"></dees-icon>
               Discard
             </dees-button>
             <dees-button type="ghost" size="sm">
-              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
               Help
             </dees-button>
           </div>
-          
+
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
             <dees-button type="destructive" size="sm">
-              <dees-icon iconFA="faTrash"></dees-icon>
+              <dees-icon icon="fa:trash"></dees-icon>
               Delete Account
             </dees-button>
             <dees-button type="outline" size="sm">
-              <dees-icon iconFA="faArchive"></dees-icon>
+              <dees-icon icon="lucide:Archive"></dees-icon>
               Archive Data
             </dees-button>
             <dees-button type="ghost" size="sm" disabled>
-              <dees-icon iconFA="faBan"></dees-icon>
+              <dees-icon icon="lucide:Ban"></dees-icon>
               Not Available
             </dees-button>
           </div>
@@ -127889,8 +128072,7 @@ var demoFunc26 = () => b2`
         <div style="margin-top: 24px;">
           <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
           <div class="code-snippet">
-            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
-            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
             &nbsp;&nbsp;Save Changes<br>
             &lt;/dees-button&gt;
           </div>
@@ -127904,7 +128086,7 @@ var demoFunc26 = () => b2`
 init_dist_ts26();
 init_dist_ts25();
 init_theme();
-var _insideForm_dec, _status_dec2, _size_dec2, _type_dec3, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a33, _DeesButton_decorators, _init31, _text2, _eventDetailData, _disabled4, _isHidden, _type3, _size2, _status2, _insideForm;
+var _iconPosition_dec, _icon_dec2, _insideForm_dec, _status_dec2, _size_dec2, _type_dec3, _isHidden_dec, _disabled_dec4, _eventDetailData_dec, _text_dec2, _a33, _DeesButton_decorators, _init31, _text2, _eventDetailData, _disabled4, _isHidden, _type3, _size2, _status2, _insideForm, _icon2, _iconPosition;
 _DeesButton_decorators = [t4("dees-button")];
 var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
   reflect: true,
@@ -127925,7 +128107,7 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
 })], _insideForm_dec = [n5({
   type: Boolean,
   reflect: true
-})], _a33) {
+})], _icon_dec2 = [n5({ type: String, reflect: true })], _iconPosition_dec = [n5({ type: String, reflect: true })], _a33) {
   constructor() {
     super();
     __privateAdd(this, _text2, __runInitializers(_init31, 8, this)), __runInitializers(_init31, 11, this);
@@ -127936,6 +128118,8 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     __privateAdd(this, _size2, __runInitializers(_init31, 28, this, "default")), __runInitializers(_init31, 31, this);
     __privateAdd(this, _status2, __runInitializers(_init31, 32, this, "normal")), __runInitializers(_init31, 35, this);
     __privateAdd(this, _insideForm, __runInitializers(_init31, 36, this, false)), __runInitializers(_init31, 39, this);
+    __privateAdd(this, _icon2, __runInitializers(_init31, 40, this)), __runInitializers(_init31, 43, this);
+    __privateAdd(this, _iconPosition, __runInitializers(_init31, 44, this, "left")), __runInitializers(_init31, 47, this);
   }
   async connectedCallback() {
     await super.connectedCallback();
@@ -127943,6 +128127,33 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
       this.insideForm = true;
     }
   }
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  extractLightDom() {
+    const iconElement = this.querySelector("dees-icon");
+    const textContent = Array.from(this.childNodes).filter((node2) => node2.nodeType === Node.TEXT_NODE).map((node2) => node2.textContent?.trim()).filter(Boolean).join(" ");
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+    if (iconElement) {
+      const iconValue = iconElement.icon || iconElement.getAttribute("icon") || (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+      if (iconValue) {
+        const children2 = Array.from(this.childNodes);
+        const iconIndex = children2.indexOf(iconElement);
+        const textNodes = children2.filter(
+          (node2) => node2.nodeType === Node.TEXT_NODE && node2.textContent?.trim()
+        );
+        if (textNodes.length > 0) {
+          const firstTextIndex = children2.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? "left" : "right";
+        }
+        this.icon = iconValue;
+      }
+      iconElement.remove();
+    }
+    this.innerHTML = "";
+  }
   render() {
     const typeMap = {
       "normal": "default",
@@ -127953,19 +128164,24 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     };
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === "big" ? "lg" : this.size;
+    const leftIcon = this.iconPosition === "left" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
+    const rightIcon = this.iconPosition === "right" && this.icon ? b2`<dees-icon .icon=${this.icon}></dees-icon>` : "";
+    const isIconOnly = actualSize === "icon" && this.icon;
     return b2`
       <div
         class="button ${this.isHidden ? "hidden" : ""} ${actualType} size-${actualSize} ${this.status} ${this.disabled ? "disabled" : ""}"
         @click="${this.dispatchClick}"
       >
         ${this.status === "normal" ? b2`` : b2`
-          <dees-spinner 
-            .bnw=${true} 
+          <dees-spinner
+            .bnw=${true}
             status="${this.status}"
             size="${actualSize === "sm" ? 14 : actualSize === "lg" ? 18 : 16}"
           ></dees-spinner>
         `}
-        <div class="textbox">${this.text || b2`<slot>Button</slot>`}</div>
+        ${leftIcon}
+        ${isIconOnly ? "" : b2`<div class="textbox">${this.text || "Button"}</div>`}
+        ${rightIcon}
       </div>
     `;
   }
@@ -127983,6 +128199,7 @@ var DeesButton = class extends (_a33 = DeesElement, _text_dec2 = [n5({
     );
   }
   async firstUpdated() {
+    this.extractLightDom();
   }
 };
 _init31 = __decoratorStart(_a33);
@@ -127994,6 +128211,8 @@ _type3 = new WeakMap();
 _size2 = new WeakMap();
 _status2 = new WeakMap();
 _insideForm = new WeakMap();
+_icon2 = new WeakMap();
+_iconPosition = new WeakMap();
 __decorateElement(_init31, 4, "text", _text_dec2, DeesButton, _text2);
 __decorateElement(_init31, 4, "eventDetailData", _eventDetailData_dec, DeesButton, _eventDetailData);
 __decorateElement(_init31, 4, "disabled", _disabled_dec4, DeesButton, _disabled4);
@@ -128002,6 +128221,8 @@ __decorateElement(_init31, 4, "type", _type_dec3, DeesButton, _type3);
 __decorateElement(_init31, 4, "size", _size_dec2, DeesButton, _size2);
 __decorateElement(_init31, 4, "status", _status_dec2, DeesButton, _status2);
 __decorateElement(_init31, 4, "insideForm", _insideForm_dec, DeesButton, _insideForm);
+__decorateElement(_init31, 4, "icon", _icon_dec2, DeesButton, _icon2);
+__decorateElement(_init31, 4, "iconPosition", _iconPosition_dec, DeesButton, _iconPosition);
 DeesButton = __decorateElement(_init31, 0, "DeesButton", _DeesButton_decorators, DeesButton);
 __publicField(DeesButton, "demo", demoFunc26);
 __publicField(DeesButton, "demoGroup", "Button");
@@ -128265,6 +128486,12 @@ __publicField(DeesButton, "styles", [
         height: 18px;
       }
 
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
     `
 ]);
 __runInitializers(_init31, 1, DeesButton);
@@ -128367,6 +128594,10 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
         return this.renderMultiPercentage(tile);
       case "cpuCores":
         return this.renderCpuCores(tile);
+      case "partition":
+        return this.renderPartition(tile);
+      case "disk":
+        return this.renderDisk(tile);
       case "text":
         return b2`
           <div class="text-value" style="${tile.color ? `color: ${tile.color}` : ""}">
@@ -128552,6 +128783,103 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
       </div>
     `;
   }
+  formatBytes(bytes) {
+    if (bytes === 0) return "0 B";
+    const k4 = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
+    const i11 = Math.floor(Math.log(bytes) / Math.log(k4));
+    return parseFloat((bytes / Math.pow(k4, i11)).toFixed(1)) + " " + sizes[i11];
+  }
+  renderPartition(tile) {
+    if (!tile.partitionData) {
+      return b2`<div class="tile-value">${tile.value}</div>`;
+    }
+    const { used, total, filesystem, mountPoint } = tile.partitionData;
+    const percentage = Math.min(100, Math.max(0, used / total * 100));
+    const free = total - used;
+    const getColorClass = () => {
+      if (percentage >= 90) return "critical";
+      if (percentage >= 75) return "warning";
+      return "";
+    };
+    return b2`
+      <div class="partition-wrapper">
+        <div class="partition-header">
+          <span class="partition-percentage">${Math.round(percentage)}%</span>
+        </div>
+        <div class="partition-bar">
+          <div
+            class="partition-bar-fill ${getColorClass()}"
+            style="width: ${percentage}%"
+          ></div>
+        </div>
+        <div class="partition-stats">
+          <div class="partition-stat">
+            <span class="partition-stat-label">Used</span>
+            <span class="partition-stat-value">${this.formatBytes(used)}</span>
+          </div>
+          <div class="partition-stat">
+            <span class="partition-stat-label">Free</span>
+            <span class="partition-stat-value">${this.formatBytes(free)}</span>
+          </div>
+        </div>
+        <div class="partition-meta">
+          <span class="partition-filesystem">${filesystem}</span>
+          ${mountPoint ? b2`<span class="partition-mountpoint">${mountPoint}</span>` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderDisk(tile) {
+    if (!tile.diskData) {
+      return b2`<div class="tile-value">${tile.value}</div>`;
+    }
+    const { capacity, model, type: type5, iops, health } = tile.diskData;
+    const getHealthClass = (value2) => {
+      if (value2 >= 70) return "good";
+      if (value2 >= 30) return "warning";
+      return "critical";
+    };
+    return b2`
+      <div class="disk-wrapper">
+        <div class="disk-capacity">${this.formatBytes(capacity)}</div>
+        ${model || type5 ? b2`
+          <div class="disk-model">
+            ${model ? b2`<span>${model}</span>` : ""}
+            ${type5 ? b2`<span class="disk-type-badge">${type5}</span>` : ""}
+          </div>
+        ` : ""}
+        <div class="disk-metrics">
+          ${iops ? b2`
+            <div class="disk-iops">
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Read</span>
+                <span class="disk-iops-value">${iops.read.toLocaleString()}</span>
+              </div>
+              <div class="disk-iops-item">
+                <span class="disk-iops-label">Write</span>
+                <span class="disk-iops-value">${iops.write.toLocaleString()}</span>
+              </div>
+            </div>
+          ` : ""}
+          ${health !== void 0 ? b2`
+            <div class="disk-health">
+              <div class="disk-health-header">
+                <span class="disk-health-label">Health</span>
+                <span class="disk-health-value">${health}%</span>
+              </div>
+              <div class="disk-health-bar">
+                <div
+                  class="disk-health-fill ${getHealthClass(health)}"
+                  style="width: ${health}%"
+                ></div>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
   async handleGridAction(action) {
     if (action.action) {
       await action.action();
@@ -128985,6 +129313,219 @@ __publicField(DeesStatsGrid, "styles", [
         max-width: 100%;
       }
 
+      /* Partition Styles */
+      .partition-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .partition-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+
+      .partition-percentage {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .partition-bar {
+        width: 100%;
+        height: 6px;
+        background: ${cssManager.bdTheme("#e8e8e8", "#1a1a1a")};
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .partition-bar-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme("#333333", "#e0e0e0")};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 3px;
+      }
+
+      .partition-bar-fill.warning {
+        background: ${cssManager.bdTheme("hsl(45.4 93.4% 47.5%)", "hsl(45.4 93.4% 47.5%)")};
+      }
+
+      .partition-bar-fill.critical {
+        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 84.2% 60.2%)")};
+      }
+
+      .partition-stats {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+      }
+
+      .partition-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .partition-stat-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      .partition-stat-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        letter-spacing: -0.01em;
+      }
+
+      .partition-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-top: 4px;
+      }
+
+      .partition-filesystem {
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(215 20.2% 16.8%)")};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .partition-mountpoint {
+        font-size: 11px;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+      }
+
+      /* Disk Styles */
+      .disk-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 8px;
+      }
+
+      .disk-capacity {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .disk-model {
+        font-size: 12px;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .disk-type-badge {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+        background: ${cssManager.bdTheme("hsl(210 40% 96.1%)", "hsl(215 20.2% 16.8%)")};
+        padding: 2px 6px;
+        border-radius: 3px;
+      }
+
+      .disk-metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-top: auto;
+      }
+
+      .disk-iops {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .disk-iops-item {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+      }
+
+      .disk-iops-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+      }
+
+      .disk-iops-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+      }
+
+      .disk-health {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .disk-health-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      .disk-health-label {
+        font-size: 10px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme("hsl(215.4 16.3% 56.9%)", "hsl(215 20.2% 55.1%)")};
+        text-transform: uppercase;
+      }
+
+      .disk-health-value {
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme("hsl(215.3 25% 8.8%)", "hsl(210 40% 98%)")};
+      }
+
+      .disk-health-bar {
+        width: 100%;
+        height: 4px;
+        background: ${cssManager.bdTheme("#e8e8e8", "#1a1a1a")};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+
+      .disk-health-fill {
+        height: 100%;
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 2px;
+      }
+
+      .disk-health-fill.good {
+        background: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
+      }
+
+      .disk-health-fill.warning {
+        background: ${cssManager.bdTheme("hsl(45.4 93.4% 47.5%)", "hsl(45.4 93.4% 47.5%)")};
+      }
+
+      .disk-health-fill.critical {
+        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 84.2% 60.2%)")};
+      }
+
       /* Trend Styles */
       .trend-container {
         width: 100%;