decantr 0.9.0

package/src/components/placeholder.js

@@ -0,0 +1,132 @@
+/**
+ * Placeholder — Branded visual placeholder for images, avatars, and icons.
+ *
+ * @module decantr/components/placeholder
+ */
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+
+// Logo paths from logo.svg (decantr potion bottle — 27 paths)
+const LOGO_VIEWBOX = '0 0 658 658';
+const LOGO_PATHS = [
+  'M364.635 304.958C383.4 303.623 408.998 304.372 428.081 304.414L533.593 304.512L605.189 304.289C631.047 304.093 665.412 300.467 687.08 316.546C698.787 325.238 708.647 345.863 708.932 360.912C710.071 421.027 718.9 465.751 642.923 472.687L643.516 560.565C643.474 591.103 640.373 638.157 648.93 666.205C657.107 693.009 700.931 707.583 724.027 719.602C823.321 771.272 899.712 870.011 934.19 975.048C971.553 1090.89 961.208 1216.85 905.444 1325.04C849.119 1435.97 757.775 1508.95 640.603 1547.14C595.28 1560.61 548.183 1567.16 500.903 1566.58C389.557 1565.46 277.816 1515.23 200.117 1435.93C114.887 1348.26 67.9814 1230.32 69.7232 1108.05C71.3131 956.687 147.116 824.649 271.118 740.514C281.684 732.873 292.536 726.704 304.031 720.58C330.245 706.606 372.509 694.161 379.167 660.701C384.199 635.403 382.06 606.476 381.913 580.627L381.629 472.096C323.616 469.568 310.295 436.765 310.816 384.492C311.221 343.991 320.238 314.419 364.635 304.958ZM428.731 439.339C430.59 498.952 427.476 560.225 429.093 619.913C430.455 670.223 419.951 718.191 369.831 741.325C317.938 765.277 279.286 787.034 238.007 827.712C161.69 903.532 118.545 1006.52 118.028 1114.09C116.122 1402.3 406.962 1603.33 671.72 1484.47C717.376 1463.98 758.679 1435.55 793.676 1399.76C868.57 1322.82 909.545 1219.09 907.451 1111.74C907.09 976.687 838.683 850.917 725.509 777.23C692.575 755.507 655.926 744.696 626.845 717.108C588.416 680.65 597.019 620.908 597.108 571.668L597.125 438.303L575.677 438.445C558.867 438.438 435.027 437.088 428.731 439.339Z',
+  'M529.791 699.472C572.855 722.194 602.492 751.681 616.943 799.225C631.127 846.686 626.135 897.817 603.036 941.635C589.315 965.592 581.63 977.253 560.121 995.779L702.761 1077.92L702.489 1118.3C735.6 1120.63 769.752 1118.39 803.226 1118.47C818.331 1118.5 870.912 1114.55 880.986 1128.1C890.765 1141.26 880.65 1184.44 877.757 1200.47C871.936 1228.2 859.506 1264.01 846.51 1289.02C828.737 1323.26 807.713 1355.54 780.35 1382.94C706.553 1456.77 616.532 1497.16 511.109 1498.41C488.311 1498.68 453.02 1495.52 431.063 1488.88L418.503 1485.41C379.361 1474 342.22 1456.61 308.396 1433.85C265.393 1406.88 232.882 1373.36 204.703 1331.48C213.727 1320.34 222.343 1309.42 232.174 1298.96C253.659 1274.02 290.721 1244.48 318.673 1226.97C313.594 1185.39 311.297 1160.97 312.076 1119.2C313.474 1108.11 314.084 1095.82 315.682 1084.47C327.252 1002.26 364.961 969.756 426.256 923.05C513.487 848.496 526.64 813.429 529.791 699.472Z',
+  'M232.174 1298.96C253.659 1274.02 290.721 1244.48 318.673 1226.97C320.268 1244.86 321.365 1266.88 336.12 1279.59C345.382 1287.57 357.651 1286.76 365.081 1276.65C371.644 1267.72 372.616 1261.09 372.371 1250.19C412.626 1274.43 452.562 1299.2 492.17 1324.48C503.157 1317.54 528.848 1300.63 539.443 1295.82C542.449 1302.62 550.278 1313.49 554.861 1319.97C574.388 1347.58 584.819 1364.27 590.753 1397.73C625.581 1384.24 662.857 1367.17 687.474 1338.13C700.49 1338.73 714.725 1338.39 727.285 1341.91C746.131 1347.2 771.107 1365.54 780.35 1382.94C706.553 1456.77 616.532 1497.16 511.109 1498.41C488.311 1498.68 453.02 1495.52 431.063 1488.88L418.503 1485.41C379.361 1474 342.22 1456.61 308.396 1433.85C265.393 1406.88 232.882 1373.36 204.703 1331.48C213.727 1320.34 222.343 1309.42 232.174 1298.96Z',
+  'M687.474 1338.13C700.49 1338.73 714.725 1338.39 727.285 1341.91C746.131 1347.2 771.107 1365.54 780.35 1382.94C706.553 1456.77 616.532 1497.16 511.109 1498.41C488.311 1498.68 453.02 1495.52 431.063 1488.88L418.503 1485.41C418.62 1485.03 418.74 1484.65 418.861 1484.28L419.502 1482.41C421.271 1477.16 420.997 1476.35 425.22 1473.1C418.826 1449.64 423.495 1431.47 428.248 1408.34C492.971 1419.84 528.786 1414.86 590.753 1397.73C625.581 1384.24 662.857 1367.17 687.474 1338.13Z',
+  'M418.503 1485.41C418.62 1485.03 418.74 1484.65 418.861 1484.28L419.502 1482.41C421.271 1477.16 420.997 1476.35 425.22 1473.1L431.063 1488.88L418.503 1485.41Z',
+  'M340.414 1385.59C382.881 1349.05 384.214 1399.56 428.248 1408.34C423.495 1431.47 418.826 1449.64 425.22 1473.1C420.997 1476.35 421.271 1477.16 419.502 1482.41L418.861 1484.28C418.74 1484.65 418.62 1485.03 418.503 1485.41C379.361 1474 342.22 1456.61 308.396 1433.85C311.642 1431.26 317.036 1414.61 320.855 1409.2C326.889 1400.67 333.579 1393.39 340.414 1385.59Z',
+  'M204.703 1331.48C213.727 1320.34 222.343 1309.42 232.174 1298.96C260.648 1357.97 280.684 1362.02 340.414 1385.59C333.579 1393.39 326.889 1400.67 320.855 1409.2C317.036 1414.61 311.642 1431.26 308.396 1433.85C265.393 1406.88 232.882 1373.36 204.703 1331.48Z',
+  'M529.791 699.472C572.855 722.194 602.492 751.681 616.943 799.225C631.127 846.686 626.135 897.817 603.036 941.635C589.315 965.592 581.63 977.253 560.121 995.779L558.357 995.076C542.463 1010.98 500.455 1026.41 489.254 1038.38C469.375 1053.95 447.976 1066.66 426.619 1080.16C412.489 1089.1 390.963 1104.82 375.767 1111.02C367.94 1127.69 370.27 1171.84 370.72 1191.81C371 1204.11 369.64 1242.05 372.371 1250.19C372.616 1261.09 371.644 1267.72 365.081 1276.65C357.651 1286.76 345.382 1287.57 336.12 1279.59C321.365 1266.88 320.268 1244.86 318.673 1226.97C313.594 1185.39 311.297 1160.97 312.076 1119.2C313.474 1108.11 314.084 1095.82 315.682 1084.47C327.252 1002.26 364.961 969.756 426.256 923.05C513.487 848.496 526.64 813.429 529.791 699.472Z',
+  'M529.791 699.472C572.855 722.194 602.492 751.681 616.943 799.225C631.127 846.686 626.135 897.817 603.036 941.635C576.312 918.006 551.28 924.27 519.085 923.753C500.146 923.449 439.833 929.951 426.256 923.05C513.487 848.496 526.64 813.429 529.791 699.472Z',
+  'M524.352 975.496C533.455 981.687 548.784 990.036 558.357 995.076C542.463 1010.98 500.455 1026.41 489.254 1038.38C469.375 1053.95 447.976 1066.66 426.619 1080.16C412.489 1089.1 390.963 1104.82 375.767 1111.02C390.86 1079.92 451.281 1035.51 479.656 1012.76C494.708 1000.52 509.609 988.101 524.352 975.496Z',
+  'M702.489 1118.3C735.6 1120.63 769.752 1118.39 803.226 1118.47C818.331 1118.5 870.912 1114.55 880.986 1128.1C890.765 1141.26 880.65 1184.44 877.757 1200.47C871.936 1228.2 859.506 1264.01 846.51 1289.02C828.737 1323.26 807.713 1355.54 780.35 1382.94C771.107 1365.54 746.131 1347.2 727.285 1341.91C714.725 1338.39 700.49 1338.73 687.474 1338.13C705.073 1298.97 701.945 1271.9 701.587 1230.01C701.448 1193.04 701.526 1156.07 701.827 1119.1L702.489 1118.3Z',
+  'M701.587 1230.01C718.498 1216.37 733.3 1208.25 756.256 1210.99C785.443 1214.47 808.6 1230.24 826.912 1252.68C836.089 1263.93 839.21 1279.29 846.51 1289.02C828.737 1323.26 807.713 1355.54 780.35 1382.94C771.107 1365.54 746.131 1347.2 727.285 1341.91C714.725 1338.39 700.49 1338.73 687.474 1338.13C705.073 1298.97 701.945 1271.9 701.587 1230.01Z',
+  'M608.771 1120.31C624.599 1122.51 684.395 1120.34 701.827 1119.1C701.526 1156.07 701.448 1193.04 701.587 1230.01C701.945 1271.9 705.073 1298.97 687.474 1338.13C662.857 1367.17 625.581 1384.24 590.753 1397.73C584.819 1364.27 574.388 1347.58 554.861 1319.97C550.278 1313.49 542.449 1302.62 539.443 1295.82C561.081 1280.97 586.282 1265.98 608.653 1251.71C608.573 1209.11 607.475 1162.49 608.771 1120.31Z',
+  'M558.357 995.076L560.121 995.779L702.761 1077.92L702.489 1118.3L701.827 1119.1C684.395 1120.34 624.599 1122.51 608.771 1120.31C608.509 1116 607.742 1110.85 603.729 1108.45C565.484 1085.61 527.135 1061.75 489.254 1038.38C500.455 1026.41 542.463 1010.98 558.357 995.076Z',
+  'M492.309 1081.1C515.518 1095.02 555.312 1116.19 575.542 1130.05C574.063 1152.13 573.276 1208.56 574.874 1231.87C546.709 1247.44 521.87 1266.52 492.88 1281.24L478.404 1272.91C455.249 1259.43 424.414 1240.94 402.959 1225.24L402.744 1141.5C427.038 1121.95 465.222 1098.91 492.309 1081.1Z',
+  'M402.744 1141.5C468.818 1164.86 514.516 1182.27 482.175 1263.65C480.94 1266.74 479.683 1269.83 478.404 1272.91C455.249 1259.43 424.414 1240.94 402.959 1225.24L402.744 1141.5Z',
+  'M139.11 1118.64C196.763 1119.16 254.42 1119.35 312.076 1119.2C311.297 1160.97 313.594 1185.39 318.673 1226.97C290.721 1244.48 253.659 1274.02 232.174 1298.96C222.343 1309.42 213.727 1320.34 204.703 1331.48C158.16 1257.44 143.539 1205.72 139.11 1118.64Z',
+  'M377.592 801.738C379.74 804.164 383.898 814.821 386.467 818.953C398.27 837.935 414.622 846.73 434.684 854.508C402.369 869.273 392.682 879.014 379.456 911.815L378.927 912.477C376.504 913.074 376.769 911.176 375.882 908.091C367.227 877.946 349.912 868.803 324.435 854.545C354.755 839.574 363.672 833.116 377.592 801.738Z',
+  'M796.151 1004.36C815.577 1004.01 831.724 1019.25 832.485 1038.67C833.245 1058.09 818.34 1074.55 798.943 1075.71C786.033 1076.49 773.711 1070.22 766.734 1059.33C759.757 1048.44 759.218 1034.62 765.32 1023.22C771.423 1011.81 783.218 1004.6 796.151 1004.36Z',
+  'M523.735 557.858C525.802 559.698 528.95 565.215 530.633 567.731C542.14 584.924 544.827 586.879 562.75 595.439C543.673 606.152 537.132 611.934 525.094 629.999C523.005 629.098 516.224 618.83 513.781 615.959C505.107 605.755 498.108 601.316 486.153 596.002C505.937 584.013 512.103 577.952 523.735 557.858Z',
+  'M655.951 946.382C661.622 938.736 664.547 933.477 669.226 925.118C679.655 942.458 684.782 949.244 702.31 960.192C690.666 967.26 686.169 969.507 677.626 980.237C675.054 984.541 672.536 989.191 670.061 993.581C658.952 974.94 657.288 971.655 638.398 960.871C644.829 955.927 649.863 951.748 655.951 946.382Z',
+  'M638.398 960.871C644.829 955.927 649.863 951.748 655.951 946.382C659.758 947.769 663.476 949.146 667.337 950.393C673.079 961.875 673.4 972.635 677.626 980.237C675.054 984.541 672.536 989.191 670.061 993.581C658.952 974.94 657.288 971.655 638.398 960.871Z',
+  'M578.318 338.798C594.442 336.549 616.786 337.529 633.151 338.727C668.449 341.316 669.001 375.8 667.413 402.506C664.949 444.001 628.602 438.418 597.125 438.303L575.677 438.445C558.867 438.438 435.027 437.088 428.731 439.339C424.98 437.184 404.003 437.901 398.442 437.534C366.94 435.464 358.969 424.775 357.626 394.755C356.306 365.241 357.271 342.237 393.292 339.074C412.675 337.374 431.536 339.062 450.783 339.079C493.294 339.322 535.807 339.229 578.318 338.798Z',
+  'M578.318 338.798C594.442 336.549 616.786 337.529 633.151 338.727C668.449 341.316 669.001 375.8 667.413 402.506C664.949 444.001 628.602 438.418 597.125 438.303L575.677 438.445C572.774 434.8 566.77 433.308 562.399 431.578C534.778 419.537 516.268 405.563 530.65 374.083C541.902 349.462 580.599 357.235 586.351 345.378C584.178 341.056 583.399 341.752 578.318 338.798Z',
+  'M591.554 117.162C612.323 116.856 622.068 115.317 635.424 133.329C636.752 161.1 636.603 190.293 636.448 218.182C636.282 247.862 636.13 265.79 601.177 265.954L567.446 265.922C517.231 267.088 458.623 264.077 409.899 266.618C398.52 263.697 386.328 256.921 385.674 244.285C383.846 209.063 383.785 167.862 385.63 132.883C387.166 130.541 388.829 128.287 390.615 126.131C396.533 119.071 402.041 118.644 410.649 118.044C470.771 116.684 531.334 118.211 591.554 117.162Z',
+  'M591.554 117.162C612.323 116.856 622.068 115.317 635.424 133.329C636.752 161.1 636.603 190.293 636.448 218.182C636.282 247.862 636.13 265.79 601.177 265.954L567.446 265.922C558.254 256.103 543.242 249.831 534.862 238.567C525.136 225.495 519.293 207.535 522.25 191.358C529.315 152.707 561.402 157.403 586.358 139.583L587.71 138.601C587.698 131.709 586.275 121.562 591.554 117.162Z',
+  'M385.63 132.883C387.166 130.541 388.829 128.287 390.615 126.131C396.533 119.071 402.041 118.644 410.649 118.044C411.947 133.365 409.179 167.715 408.87 185.307C408.407 211.381 410.747 241.539 409.899 266.618C398.52 263.697 386.328 256.921 385.674 244.285C383.846 209.063 383.785 167.862 385.63 132.883Z',
+];
+// Shared transform for all paths (from logo.svg)
+const PATH_TX = 'matrix(0.408203 0 0 0.408442 0 -0.000244141)';
+
+function createWatermark() {
+  const svg = document.createElementNS(NS, 'svg');
+  svg.setAttribute('viewBox', LOGO_VIEWBOX);
+  svg.setAttribute('aria-hidden', 'true');
+  // Outer flip group (mirrors the original SVG structure)
+  const flip = document.createElementNS(NS, 'g');
+  flip.setAttribute('transform', 'scale(-1,1) translate(-658,0)');
+  // Inner offset group
+  const offset = document.createElementNS(NS, 'g');
+  offset.setAttribute('transform', 'translate(120,-15)');
+  offset.setAttribute('fill', 'currentColor');
+  for (const d of LOGO_PATHS) {
+    const path = document.createElementNS(NS, 'path');
+    path.setAttribute('transform', PATH_TX);
+    path.setAttribute('d', d);
+    offset.appendChild(path);
+  }
+  flip.appendChild(offset);
+  svg.appendChild(flip);
+  return svg;
+}
+
+/**
+ * @param {Object} [props]
+ * @param {'image'|'avatar'|'icon'} [props.variant='image']
+ * @param {string} [props.aspectRatio] - CSS aspect-ratio override
+ * @param {string} [props.width] - Explicit width
+ * @param {string} [props.height] - Explicit height
+ * @param {string} [props.label] - Text overlay
+ * @param {Node} [props.icon] - Custom icon replacing logo watermark
+ * @param {boolean} [props.animate=false] - Shimmer animation
+ * @param {string} [props.class]
+ * @param {...Node} children
+ * @returns {HTMLElement}
+ */
+export function Placeholder(props = {}, ...children) {
+  injectBase();
+  const {
+    variant = 'image',
+    aspectRatio,
+    width,
+    height,
+    label,
+    icon: customIcon,
+    animate = false,
+    class: cls,
+    ...rest
+  } = props;
+
+  const variantClass = variant !== 'image' ? `d-placeholder-${variant}` : '';
+  const animateClass = animate ? 'd-placeholder-animate' : '';
+  const container = h('div', {
+    class: cx('d-placeholder', variantClass, animateClass, cls),
+    role: 'img',
+    'aria-label': label || `${variant} placeholder`,
+    ...rest,
+  });
+
+  // Apply per-instance dimensions
+  if (width) container.style.width = width;
+  if (height) container.style.height = height;
+  if (aspectRatio) container.style.aspectRatio = aspectRatio;
+
+  // Watermark layer
+  const wmLayer = h('div', { class: 'd-placeholder-watermark' });
+  if (customIcon && customIcon.nodeType) {
+    wmLayer.appendChild(customIcon);
+  } else {
+    wmLayer.appendChild(createWatermark());
+  }
+  container.appendChild(wmLayer);
+
+  // Label
+  if (label) {
+    container.appendChild(h('span', { class: 'd-placeholder-label' }, label));
+  }
+
+  // Children
+  for (const child of children) {
+    if (child && child.nodeType) {
+      const wrapper = h('div', { class: 'd-placeholder-content' });
+      wrapper.appendChild(child);
+      container.appendChild(wrapper);
+    }
+  }
+
+  return container;
+}

package/src/components/popconfirm.js

@@ -0,0 +1,70 @@
+/**
+ * Popconfirm — Confirmation popover attached to a trigger element.
+ * Uses createOverlay behavior for positioning.
+ *
+ * @module decantr/components/popconfirm
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay } from './_behaviors.js';
+
+const { div, span, button: buttonTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.title='Are you sure?']
+ * @param {string} [props.description]
+ * @param {Function} [props.onConfirm]
+ * @param {Function} [props.onCancel]
+ * @param {string} [props.confirmText='Yes']
+ * @param {string} [props.cancelText='No']
+ * @param {Node} [props.icon]
+ * @param {'top'|'bottom'|'left'|'right'} [props.position='top']
+ * @param {Function} props.trigger - Returns trigger element
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Popconfirm(props = {}) {
+  injectBase();
+  const {
+    title = 'Are you sure?', description, onConfirm, onCancel,
+    confirmText = 'Yes', cancelText = 'No', icon, position = 'top',
+    trigger, class: cls
+  } = props;
+
+  const triggerEl = typeof trigger === 'function' ? trigger() : buttonTag({ type: 'button' }, 'Click');
+
+  const cancelBtn = buttonTag({ type: 'button', class: 'd-btn d-btn-sm d-btn-outline' }, cancelText);
+  const confirmBtn = buttonTag({ type: 'button', class: 'd-btn d-btn-sm d-btn-primary' }, confirmText);
+
+  const body = div({ class: 'd-popconfirm-body' });
+  if (icon) body.appendChild(span({ class: 'd-popconfirm-icon' }, typeof icon === 'string' ? icon : icon));
+  const textWrap = div({ class: 'd-popconfirm-text' });
+  textWrap.appendChild(div({ class: 'd-popconfirm-title' }, title));
+  if (description) textWrap.appendChild(div({ class: 'd-popconfirm-desc' }, description));
+  body.appendChild(textWrap);
+
+  const footer = div({ class: 'd-popconfirm-footer' }, cancelBtn, confirmBtn);
+
+  const content = div({
+    class: cx('d-popconfirm', `d-popover-${position}`, cls)
+  }, body, footer);
+
+  const wrap = div({ class: 'd-popconfirm-wrap' }, triggerEl, content);
+
+  const overlay = createOverlay(triggerEl, content, {
+    trigger: 'click',
+    closeOnEscape: true,
+    closeOnOutside: true
+  });
+
+  cancelBtn.addEventListener('click', () => { overlay.close(); if (onCancel) onCancel(); });
+  confirmBtn.addEventListener('click', () => { overlay.close(); if (onConfirm) onConfirm(); });
+
+  onDestroy(() => {
+    overlay.destroy();
+  });
+
+  return wrap;
+}

package/src/components/popover.js

@@ -0,0 +1,58 @@
+/**
+ * Popover — Floating content panel attached to a trigger element.
+ * Uses createOverlay behavior for show/hide, click-outside, escape.
+ *
+ * @module decantr/components/popover
+ */
+import { onDestroy } from '../core/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createOverlay } from './_behaviors.js';
+
+const { div } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {Function} [props.trigger] — Function returning trigger element
+ * @param {string} [props.position] — 'top'|'bottom'|'left'|'right' (default: 'bottom')
+ * @param {string} [props.align] — 'start'|'center'|'end' (default: 'center')
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Popover(props = {}, ...children) {
+  injectBase();
+
+  const {
+    trigger,
+    position = 'bottom',
+    align = 'center',
+    class: cls
+  } = props;
+
+  const content = div({
+    class: cx('d-popover-content', `d-popover-${position}`, align !== 'center' && `d-popover-align-${align}`, cls),
+    role: 'dialog'
+  }, ...children);
+
+  const wrap = div({ class: 'd-popover' });
+
+  const triggerEl = typeof trigger === 'function' ? trigger() : tags.button({ type: 'button' }, 'Open');
+  triggerEl.setAttribute('aria-haspopup', 'dialog');
+  triggerEl.setAttribute('aria-expanded', 'false');
+  wrap.appendChild(triggerEl);
+  wrap.appendChild(content);
+
+  const overlay = createOverlay(triggerEl, content, {
+    trigger: 'click',
+    closeOnEscape: true,
+    closeOnOutside: true,
+    onOpen: () => wrap.classList.add('d-popover-open'),
+    onClose: () => wrap.classList.remove('d-popover-open')
+  });
+
+  onDestroy(() => {
+    overlay.destroy();
+  });
+
+  return wrap;
+}

package/src/components/progress.js

@@ -0,0 +1,61 @@
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {number|Function} [props.value] - Current value (0-100 or 0-max)
+ * @param {number} [props.max] - Maximum value (default: 100)
+ * @param {string} [props.label]
+ * @param {string} [props.variant] - primary|success|warning|error
+ * @param {string} [props.size] - sm|md|lg (default: base 8px)
+ * @param {boolean} [props.striped]
+ * @param {boolean} [props.animated]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Progress(props = {}) {
+  injectBase();
+
+  const { value, max = 100, label, variant, size, striped, animated, class: cls } = props;
+
+  const progressClass = cx(
+    'd-progress',
+    size && `d-progress-${size}`,
+    variant && `d-progress-${variant}`,
+    striped && 'd-progress-striped',
+    animated && 'd-progress-animated'
+  );
+
+  const bar = h('div', { class: 'd-progress-bar', role: 'progressbar', 'aria-valuemin': '0', 'aria-valuemax': String(max) });
+  const progress = h('div', { class: progressClass }, bar);
+
+  // For md/lg sizes, label goes inside the progress bar; otherwise outside
+  const labelInside = size === 'md' || size === 'lg';
+  let labelEl = null;
+  if (label) {
+    labelEl = h('span', { class: 'd-progress-label' }, label);
+    if (labelInside) {
+      progress.appendChild(labelEl);
+    }
+  }
+
+  const wrap = h('div', { class: cx('d-progress-wrap', cls) }, progress);
+  if (label && !labelInside) {
+    wrap.appendChild(labelEl);
+  }
+
+  function updateBar(val) {
+    const pct = Math.min(Math.max((val / max) * 100, 0), 100);
+    bar.style.width = pct + '%';
+    bar.setAttribute('aria-valuenow', String(val));
+  }
+
+  if (typeof value === 'function') {
+    createEffect(() => updateBar(value()));
+  } else {
+    updateBar(value || 0);
+  }
+
+  return wrap;
+}

package/src/components/qrcode.js

@@ -0,0 +1,251 @@
+/**
+ * QRCode — QR code generator with canvas/SVG rendering and status overlays.
+ *
+ * @module decantr/components/qrcode
+ */
+import { h } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { onMount, onDestroy } from '../core/index.js';
+import { injectBase, cx, resolve } from './_base.js';
+import { encodeQR } from './_qr-encoder.js';
+import { Spinner } from './spinner.js';
+import { icon } from './icon.js';
+
+/**
+ * @param {Object} [props]
+ * @param {string|Function} [props.value=''] - Text to encode (reactive)
+ * @param {number} [props.size=160] - Pixel dimensions
+ * @param {string} [props.color] - Module color (default: resolved --d-fg)
+ * @param {string} [props.bgColor] - Background color (default: resolved --d-bg)
+ * @param {'canvas'|'svg'} [props.type='canvas'] - Render mode
+ * @param {'L'|'M'|'Q'|'H'} [props.level='M'] - Error correction level
+ * @param {string} [props.icon] - Center logo URL
+ * @param {number} [props.iconSize=40] - Logo size
+ * @param {boolean} [props.bordered=true] - Card border
+ * @param {string|Function} [props.status] - 'active'|'loading'|'expired'|'scanned' (reactive)
+ * @param {Function} [props.onRefresh] - Expired refresh callback
+ * @param {number} [props.padding=12] - Quiet zone padding
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function QRCode(props = {}) {
+  injectBase();
+  const {
+    value = '', size = 160, color, bgColor,
+    type = 'canvas', level = 'M',
+    icon: iconUrl, iconSize = 40, bordered = true,
+    status, onRefresh, padding = 12,
+    class: cls
+  } = props;
+
+  const container = h('div', {
+    class: cx('d-qrcode',
+      bordered && 'd-qrcode-bordered',
+      cls
+    )
+  });
+
+  let renderEl = null;
+  let statusOverlay = null;
+  let resolvedFg = null;
+  let resolvedBg = null;
+
+  function resolveColors() {
+    if (color && bgColor) {
+      resolvedFg = color;
+      resolvedBg = bgColor;
+      return;
+    }
+    const computed = typeof getComputedStyle === 'function' ? getComputedStyle(container) : null;
+    resolvedFg = color || (computed ? computed.getPropertyValue('--d-fg').trim() : '#000') || '#000';
+    resolvedBg = bgColor || (computed ? computed.getPropertyValue('--d-bg').trim() : '#fff') || '#fff';
+  }
+
+  function render(data) {
+    if (!data) return;
+
+    let qr;
+    try {
+      qr = encodeQR(data, level);
+    } catch {
+      return;
+    }
+
+    // Remove old render element
+    if (renderEl && renderEl.parentNode) renderEl.remove();
+
+    if (type === 'svg') {
+      renderEl = renderSVG(qr, size, resolvedFg, resolvedBg, padding);
+    } else {
+      renderEl = renderCanvas(qr, size, resolvedFg, resolvedBg, padding);
+    }
+
+    // Insert before status overlay or at end
+    if (statusOverlay && statusOverlay.parentNode) {
+      container.insertBefore(renderEl, statusOverlay);
+    } else {
+      container.appendChild(renderEl);
+    }
+
+    // Icon overlay
+    if (iconUrl) {
+      let iconEl = container.querySelector('.d-qrcode-icon');
+      if (!iconEl) {
+        iconEl = h('img', {
+          class: 'd-qrcode-icon',
+          src: iconUrl,
+          width: String(iconSize),
+          height: String(iconSize),
+          alt: ''
+        });
+        container.appendChild(iconEl);
+      }
+    }
+  }
+
+  // Status overlay
+  function updateStatus(s) {
+    // Remove existing status classes
+    container.classList.remove('d-qrcode-expired', 'd-qrcode-loading', 'd-qrcode-scanned');
+    if (statusOverlay) { statusOverlay.remove(); statusOverlay = null; }
+
+    if (!s || s === 'active') return;
+
+    container.classList.add(`d-qrcode-${s}`);
+    statusOverlay = h('div', { class: 'd-qrcode-status' });
+
+    if (s === 'loading') {
+      statusOverlay.appendChild(Spinner({ size: 'lg' }));
+    } else if (s === 'expired') {
+      const refreshBtn = h('button', {
+        class: 'd-btn d-btn-sm d-btn-primary',
+        type: 'button'
+      });
+      try { refreshBtn.appendChild(icon('refresh-cw', { size: '16' })); } catch {}
+      refreshBtn.appendChild(document.createTextNode(' Refresh'));
+      if (onRefresh) refreshBtn.addEventListener('click', onRefresh);
+      statusOverlay.appendChild(refreshBtn);
+    } else if (s === 'scanned') {
+      try {
+        statusOverlay.appendChild(icon('check', { size: '48', class: 'd-qrcode-check' }));
+      } catch {
+        statusOverlay.appendChild(h('span', null, '✓'));
+      }
+    }
+
+    container.appendChild(statusOverlay);
+  }
+
+  // Use requestAnimationFrame to resolve CSS custom properties after mount
+  if (typeof requestAnimationFrame === 'function') {
+    requestAnimationFrame(() => {
+      resolveColors();
+      const val = typeof value === 'function' ? value() : value;
+      if (val) render(val);
+      const st = typeof status === 'function' ? status() : status;
+      if (st) updateStatus(st);
+    });
+  } else {
+    // Test/SSR env — resolve immediately
+    resolveColors();
+    const val = typeof value === 'function' ? value() : value;
+    if (val) render(val);
+    const st = typeof status === 'function' ? status() : status;
+    if (st) updateStatus(st);
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => {
+      const val = value();
+      resolveColors();
+      render(val);
+    });
+  }
+
+  // Reactive status
+  if (typeof status === 'function') {
+    createEffect(() => updateStatus(status()));
+  }
+
+  return container;
+}
+
+/**
+ * Render QR code to a canvas element.
+ */
+function renderCanvas(qr, size, fg, bg, padding) {
+  const canvas = h('canvas');
+  canvas.width = size;
+  canvas.height = size;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return canvas;
+
+  const moduleCount = qr.size;
+  const drawSize = size - padding * 2;
+  const cellSize = drawSize / moduleCount;
+
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, size, size);
+
+  ctx.fillStyle = fg;
+  for (let r = 0; r < moduleCount; r++) {
+    for (let c = 0; c < moduleCount; c++) {
+      if (qr.modules[r][c]) {
+        ctx.fillRect(
+          padding + c * cellSize,
+          padding + r * cellSize,
+          cellSize + 0.5,
+          cellSize + 0.5
+        );
+      }
+    }
+  }
+
+  return canvas;
+}
+
+/**
+ * Render QR code as SVG element.
+ */
+function renderSVG(qr, size, fg, bg, padding) {
+  const ns = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(ns, 'svg');
+  svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
+  svg.setAttribute('width', String(size));
+  svg.setAttribute('height', String(size));
+  svg.setAttribute('xmlns', ns);
+
+  // Background
+  const bgRect = document.createElementNS(ns, 'rect');
+  bgRect.setAttribute('width', String(size));
+  bgRect.setAttribute('height', String(size));
+  bgRect.setAttribute('fill', bg);
+  svg.appendChild(bgRect);
+
+  const moduleCount = qr.size;
+  const drawSize = size - padding * 2;
+  const cellSize = drawSize / moduleCount;
+
+  // Build a single path for all modules (much more efficient than individual rects)
+  let d = '';
+  for (let r = 0; r < moduleCount; r++) {
+    for (let c = 0; c < moduleCount; c++) {
+      if (qr.modules[r][c]) {
+        const x = padding + c * cellSize;
+        const y = padding + r * cellSize;
+        d += `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}z`;
+      }
+    }
+  }
+
+  if (d) {
+    const path = document.createElementNS(ns, 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('fill', fg);
+    svg.appendChild(path);
+  }
+
+  return svg;
+}