@wireweave/core 2.6.2-beta.0 → 2.7.0-beta.0

package/dist/index.cjs

@@ -7070,8 +7070,21 @@ function generateContainerStyles(prefix) {
   border-bottom: 1px solid var(--${prefix}-border);
   font-size: 16px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   text-align: left;
+  outline: none;
+}
+
+.${prefix}-accordion-header::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--${prefix}-muted);
+  border-bottom: 2px solid var(--${prefix}-muted);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
 
 .${prefix}-accordion-header:hover {
@@ -7087,8 +7100,10 @@ function generateContainerStyles(prefix) {
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
+  display: block;
   margin: 0;
   line-height: 1.5;
+  white-space: normal;
 }
 
 .${prefix}-text-xs { font-size: 12px; }
@@ -7113,6 +7128,7 @@ function generateTextStyles(prefix) {
 .${prefix}-text-muted { color: var(--${prefix}-muted); }
 
 .${prefix}-title {
+  display: block;
   margin: 0 0 8px 0;
   font-weight: 600;
   line-height: 1.25;
@@ -7131,6 +7147,7 @@ h5.${prefix}-title { font-size: 18px; }
 h6.${prefix}-title { font-size: 16px; }
 
 .${prefix}-link {
+  display: inline;
   color: var(--${prefix}-fg);
   text-decoration: underline;
   cursor: pointer;
@@ -7165,6 +7182,7 @@ function generateInputStyles(_theme, prefix) {
   border-radius: var(--${prefix}-radius);
   font-family: inherit;
   font-size: 14px;
+  line-height: 1.5;
   background: var(--${prefix}-bg);
   color: var(--${prefix}-fg);
   transition: border-color 0.15s ease;
@@ -7238,11 +7256,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-textarea {
+  display: block;
   min-height: 80px;
   resize: vertical;
+  white-space: pre-wrap;
 }
 
 .${prefix}-select {
+  cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -7260,6 +7281,7 @@ function generateInputStyles(_theme, prefix) {
 
 .${prefix}-checkbox input,
 .${prefix}-radio input {
+  appearance: auto;
   width: 18px;
   height: 18px;
   margin: 0;
@@ -7315,12 +7337,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-slider {
+  display: block;
   appearance: none;
   width: 100%;
   height: 6px;
   background: var(--${prefix}-border);
   border-radius: 3px;
   outline: none;
+  margin: 8px 0;
 }
 
 .${prefix}-slider::-webkit-slider-thumb {
@@ -7358,6 +7382,7 @@ function generateButtonStyles(_theme, prefix) {
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -7684,16 +7709,32 @@ svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
+  display: table;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--${prefix}-border);
   font-size: 14px;
 }
 
+.${prefix}-table thead {
+  display: table-header-group;
+}
+
+.${prefix}-table tbody {
+  display: table-row-group;
+}
+
+.${prefix}-table tr {
+  display: table-row;
+}
+
 .${prefix}-table th,
 .${prefix}-table td {
+  display: table-cell;
   padding: 10px 12px;
   text-align: left;
+  line-height: 1.5;
+  vertical-align: top;
   border-bottom: 1px solid var(--${prefix}-border);
 }
 
@@ -7716,6 +7757,7 @@ function generateDataStyles(_theme, prefix) {
 }
 
 .${prefix}-list {
+  display: block;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -7726,11 +7768,17 @@ function generateDataStyles(_theme, prefix) {
   padding-left: 24px;
 }
 
+.${prefix}-list-ordered .${prefix}-list-item {
+  display: list-item;
+  list-style: decimal;
+}
+
 .${prefix}-list-none {
   list-style: none;
 }
 
 .${prefix}-list-item {
+  display: list-item;
   padding: 8px 0;
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -7764,6 +7812,7 @@ function generateFeedbackStyles(_theme, prefix) {
   background: transparent;
   border: none;
   font-size: 18px;
+  line-height: 1;
   cursor: pointer;
   opacity: 0.5;
 }
@@ -7781,17 +7830,28 @@ function generateFeedbackStyles(_theme, prefix) {
   font-size: 14px;
 }
 
+.${prefix}-progress-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.${prefix}-progress-wrapper .${prefix}-progress {
+  flex: 1;
+}
+
 .${prefix}-progress {
-  height: 8px;
-  background: var(--${prefix}-border);
-  border-radius: 4px;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
   overflow: hidden;
+  border: 1px solid var(--${prefix}-border);
 }
 
 .${prefix}-progress-bar {
   height: 100%;
   background: var(--${prefix}-fg);
-  border-radius: 4px;
+  border-radius: 5px;
   transition: width 0.3s ease;
 }
 
@@ -7812,6 +7872,15 @@ function generateFeedbackStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }
 
+.${prefix}-progress-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--${prefix}-fg);
+  white-space: nowrap;
+  min-width: 32px;
+  text-align: right;
+}
+
 .${prefix}-spinner {
   display: inline-block;
   width: 20px;
@@ -7916,6 +7985,7 @@ function generateOverlayStyles(_theme, prefix) {
   border: none;
   text-align: left;
   font-size: 14px;
+  line-height: 1.5;
   cursor: pointer;
 }
 
@@ -7954,6 +8024,7 @@ function generateNavigationStyles(_theme, prefix) {
   text-decoration: none;
   border-radius: var(--${prefix}-radius);
   font-size: 14px;
+  line-height: 1.5;
   transition: background-color 0.15s ease;
 }
 
@@ -7987,6 +8058,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-nav-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -8008,6 +8080,7 @@ function generateNavigationStyles(_theme, prefix) {
   border: none;
   border-bottom: 2px solid transparent;
   font-size: 14px;
+  line-height: 1.5;
   color: var(--${prefix}-fg);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -8029,6 +8102,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-breadcrumb-item {
+  display: inline-flex;
   color: var(--${prefix}-fg);
   text-decoration: none;
 }
@@ -8178,6 +8252,7 @@ function generateDividerStyles(prefix = "wf") {
   return `
 /* Divider */
 .${prefix}-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -8403,6 +8478,12 @@ function generateBaseStyles(prefix) {
   box-sizing: inherit;
 }
 
+/* Host CSS isolation reset - :where() keeps specificity at (0,0,0) so component styles always win */
+.${prefix}-page :where(input, button, select, textarea, a, table, thead, tbody, th, td, tr, ul, ol, li, label, hr, h1, h2, h3, h4, h5, h6, p, nav, fieldset, legend) {
+  all: unset;
+  box-sizing: border-box;
+}
+
 /* Page with flex layout - enables justify/align for centering content */
 .${prefix}-page.${prefix}-flex,
 .${prefix}-page[class*="${prefix}-justify-"],
@@ -55782,12 +55863,9 @@ function renderProgress(node, ctx) {
   const percentage = Math.round(value / max * 100);
   const label = node.label ? `<span class="${ctx.prefix}-progress-label">${ctx.escapeHtml(node.label)}</span>` : "";
   if (node.indeterminate) {
-    return `<div class="${classes} ${ctx.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
+    return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes} ${ctx.prefix}-progress-indeterminate" role="progressbar"><div class="${ctx.prefix}-progress-bar"></div></div></div>`;
   }
-  return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
-  ${label}
-  <div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div>
-</div>`;
+  return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes}" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}"><div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div></div><span class="${ctx.prefix}-progress-value">${percentage}%</span></div>`;
 }
 function renderSpinner(node, ctx) {
   const sizeResolved = resolveSizeValue(node.size, "spinner", ctx.prefix);

package/dist/index.js

@@ -6930,8 +6930,21 @@ function generateContainerStyles(prefix) {
   border-bottom: 1px solid var(--${prefix}-border);
   font-size: 16px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   text-align: left;
+  outline: none;
+}
+
+.${prefix}-accordion-header::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--${prefix}-muted);
+  border-bottom: 2px solid var(--${prefix}-muted);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
 
 .${prefix}-accordion-header:hover {
@@ -6947,8 +6960,10 @@ function generateContainerStyles(prefix) {
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
+  display: block;
   margin: 0;
   line-height: 1.5;
+  white-space: normal;
 }
 
 .${prefix}-text-xs { font-size: 12px; }
@@ -6973,6 +6988,7 @@ function generateTextStyles(prefix) {
 .${prefix}-text-muted { color: var(--${prefix}-muted); }
 
 .${prefix}-title {
+  display: block;
   margin: 0 0 8px 0;
   font-weight: 600;
   line-height: 1.25;
@@ -6991,6 +7007,7 @@ h5.${prefix}-title { font-size: 18px; }
 h6.${prefix}-title { font-size: 16px; }
 
 .${prefix}-link {
+  display: inline;
   color: var(--${prefix}-fg);
   text-decoration: underline;
   cursor: pointer;
@@ -7025,6 +7042,7 @@ function generateInputStyles(_theme, prefix) {
   border-radius: var(--${prefix}-radius);
   font-family: inherit;
   font-size: 14px;
+  line-height: 1.5;
   background: var(--${prefix}-bg);
   color: var(--${prefix}-fg);
   transition: border-color 0.15s ease;
@@ -7098,11 +7116,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-textarea {
+  display: block;
   min-height: 80px;
   resize: vertical;
+  white-space: pre-wrap;
 }
 
 .${prefix}-select {
+  cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -7120,6 +7141,7 @@ function generateInputStyles(_theme, prefix) {
 
 .${prefix}-checkbox input,
 .${prefix}-radio input {
+  appearance: auto;
   width: 18px;
   height: 18px;
   margin: 0;
@@ -7175,12 +7197,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-slider {
+  display: block;
   appearance: none;
   width: 100%;
   height: 6px;
   background: var(--${prefix}-border);
   border-radius: 3px;
   outline: none;
+  margin: 8px 0;
 }
 
 .${prefix}-slider::-webkit-slider-thumb {
@@ -7218,6 +7242,7 @@ function generateButtonStyles(_theme, prefix) {
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -7544,16 +7569,32 @@ svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
+  display: table;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--${prefix}-border);
   font-size: 14px;
 }
 
+.${prefix}-table thead {
+  display: table-header-group;
+}
+
+.${prefix}-table tbody {
+  display: table-row-group;
+}
+
+.${prefix}-table tr {
+  display: table-row;
+}
+
 .${prefix}-table th,
 .${prefix}-table td {
+  display: table-cell;
   padding: 10px 12px;
   text-align: left;
+  line-height: 1.5;
+  vertical-align: top;
   border-bottom: 1px solid var(--${prefix}-border);
 }
 
@@ -7576,6 +7617,7 @@ function generateDataStyles(_theme, prefix) {
 }
 
 .${prefix}-list {
+  display: block;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -7586,11 +7628,17 @@ function generateDataStyles(_theme, prefix) {
   padding-left: 24px;
 }
 
+.${prefix}-list-ordered .${prefix}-list-item {
+  display: list-item;
+  list-style: decimal;
+}
+
 .${prefix}-list-none {
   list-style: none;
 }
 
 .${prefix}-list-item {
+  display: list-item;
   padding: 8px 0;
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -7624,6 +7672,7 @@ function generateFeedbackStyles(_theme, prefix) {
   background: transparent;
   border: none;
   font-size: 18px;
+  line-height: 1;
   cursor: pointer;
   opacity: 0.5;
 }
@@ -7641,17 +7690,28 @@ function generateFeedbackStyles(_theme, prefix) {
   font-size: 14px;
 }
 
+.${prefix}-progress-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.${prefix}-progress-wrapper .${prefix}-progress {
+  flex: 1;
+}
+
 .${prefix}-progress {
-  height: 8px;
-  background: var(--${prefix}-border);
-  border-radius: 4px;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
   overflow: hidden;
+  border: 1px solid var(--${prefix}-border);
 }
 
 .${prefix}-progress-bar {
   height: 100%;
   background: var(--${prefix}-fg);
-  border-radius: 4px;
+  border-radius: 5px;
   transition: width 0.3s ease;
 }
 
@@ -7672,6 +7732,15 @@ function generateFeedbackStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }
 
+.${prefix}-progress-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--${prefix}-fg);
+  white-space: nowrap;
+  min-width: 32px;
+  text-align: right;
+}
+
 .${prefix}-spinner {
   display: inline-block;
   width: 20px;
@@ -7776,6 +7845,7 @@ function generateOverlayStyles(_theme, prefix) {
   border: none;
   text-align: left;
   font-size: 14px;
+  line-height: 1.5;
   cursor: pointer;
 }
 
@@ -7814,6 +7884,7 @@ function generateNavigationStyles(_theme, prefix) {
   text-decoration: none;
   border-radius: var(--${prefix}-radius);
   font-size: 14px;
+  line-height: 1.5;
   transition: background-color 0.15s ease;
 }
 
@@ -7847,6 +7918,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-nav-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -7868,6 +7940,7 @@ function generateNavigationStyles(_theme, prefix) {
   border: none;
   border-bottom: 2px solid transparent;
   font-size: 14px;
+  line-height: 1.5;
   color: var(--${prefix}-fg);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -7889,6 +7962,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-breadcrumb-item {
+  display: inline-flex;
   color: var(--${prefix}-fg);
   text-decoration: none;
 }
@@ -8038,6 +8112,7 @@ function generateDividerStyles(prefix = "wf") {
   return `
 /* Divider */
 .${prefix}-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -8263,6 +8338,12 @@ function generateBaseStyles(prefix) {
   box-sizing: inherit;
 }
 
+/* Host CSS isolation reset - :where() keeps specificity at (0,0,0) so component styles always win */
+.${prefix}-page :where(input, button, select, textarea, a, table, thead, tbody, th, td, tr, ul, ol, li, label, hr, h1, h2, h3, h4, h5, h6, p, nav, fieldset, legend) {
+  all: unset;
+  box-sizing: border-box;
+}
+
 /* Page with flex layout - enables justify/align for centering content */
 .${prefix}-page.${prefix}-flex,
 .${prefix}-page[class*="${prefix}-justify-"],
@@ -55642,12 +55723,9 @@ function renderProgress(node, ctx) {
   const percentage = Math.round(value / max * 100);
   const label = node.label ? `<span class="${ctx.prefix}-progress-label">${ctx.escapeHtml(node.label)}</span>` : "";
   if (node.indeterminate) {
-    return `<div class="${classes} ${ctx.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
+    return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes} ${ctx.prefix}-progress-indeterminate" role="progressbar"><div class="${ctx.prefix}-progress-bar"></div></div></div>`;
   }
-  return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
-  ${label}
-  <div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div>
-</div>`;
+  return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes}" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}"><div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div></div><span class="${ctx.prefix}-progress-value">${percentage}%</span></div>`;
 }
 function renderSpinner(node, ctx) {
   const sizeResolved = resolveSizeValue(node.size, "spinner", ctx.prefix);

package/dist/renderer.cjs

@@ -219,8 +219,21 @@ function generateContainerStyles(prefix) {
   border-bottom: 1px solid var(--${prefix}-border);
   font-size: 16px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   text-align: left;
+  outline: none;
+}
+
+.${prefix}-accordion-header::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--${prefix}-muted);
+  border-bottom: 2px solid var(--${prefix}-muted);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
 
 .${prefix}-accordion-header:hover {
@@ -236,8 +249,10 @@ function generateContainerStyles(prefix) {
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
+  display: block;
   margin: 0;
   line-height: 1.5;
+  white-space: normal;
 }
 
 .${prefix}-text-xs { font-size: 12px; }
@@ -262,6 +277,7 @@ function generateTextStyles(prefix) {
 .${prefix}-text-muted { color: var(--${prefix}-muted); }
 
 .${prefix}-title {
+  display: block;
   margin: 0 0 8px 0;
   font-weight: 600;
   line-height: 1.25;
@@ -280,6 +296,7 @@ h5.${prefix}-title { font-size: 18px; }
 h6.${prefix}-title { font-size: 16px; }
 
 .${prefix}-link {
+  display: inline;
   color: var(--${prefix}-fg);
   text-decoration: underline;
   cursor: pointer;
@@ -314,6 +331,7 @@ function generateInputStyles(_theme, prefix) {
   border-radius: var(--${prefix}-radius);
   font-family: inherit;
   font-size: 14px;
+  line-height: 1.5;
   background: var(--${prefix}-bg);
   color: var(--${prefix}-fg);
   transition: border-color 0.15s ease;
@@ -387,11 +405,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-textarea {
+  display: block;
   min-height: 80px;
   resize: vertical;
+  white-space: pre-wrap;
 }
 
 .${prefix}-select {
+  cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -409,6 +430,7 @@ function generateInputStyles(_theme, prefix) {
 
 .${prefix}-checkbox input,
 .${prefix}-radio input {
+  appearance: auto;
   width: 18px;
   height: 18px;
   margin: 0;
@@ -464,12 +486,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-slider {
+  display: block;
   appearance: none;
   width: 100%;
   height: 6px;
   background: var(--${prefix}-border);
   border-radius: 3px;
   outline: none;
+  margin: 8px 0;
 }
 
 .${prefix}-slider::-webkit-slider-thumb {
@@ -507,6 +531,7 @@ function generateButtonStyles(_theme, prefix) {
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -833,16 +858,32 @@ svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
+  display: table;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--${prefix}-border);
   font-size: 14px;
 }
 
+.${prefix}-table thead {
+  display: table-header-group;
+}
+
+.${prefix}-table tbody {
+  display: table-row-group;
+}
+
+.${prefix}-table tr {
+  display: table-row;
+}
+
 .${prefix}-table th,
 .${prefix}-table td {
+  display: table-cell;
   padding: 10px 12px;
   text-align: left;
+  line-height: 1.5;
+  vertical-align: top;
   border-bottom: 1px solid var(--${prefix}-border);
 }
 
@@ -865,6 +906,7 @@ function generateDataStyles(_theme, prefix) {
 }
 
 .${prefix}-list {
+  display: block;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -875,11 +917,17 @@ function generateDataStyles(_theme, prefix) {
   padding-left: 24px;
 }
 
+.${prefix}-list-ordered .${prefix}-list-item {
+  display: list-item;
+  list-style: decimal;
+}
+
 .${prefix}-list-none {
   list-style: none;
 }
 
 .${prefix}-list-item {
+  display: list-item;
   padding: 8px 0;
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -913,6 +961,7 @@ function generateFeedbackStyles(_theme, prefix) {
   background: transparent;
   border: none;
   font-size: 18px;
+  line-height: 1;
   cursor: pointer;
   opacity: 0.5;
 }
@@ -930,17 +979,28 @@ function generateFeedbackStyles(_theme, prefix) {
   font-size: 14px;
 }
 
+.${prefix}-progress-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.${prefix}-progress-wrapper .${prefix}-progress {
+  flex: 1;
+}
+
 .${prefix}-progress {
-  height: 8px;
-  background: var(--${prefix}-border);
-  border-radius: 4px;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
   overflow: hidden;
+  border: 1px solid var(--${prefix}-border);
 }
 
 .${prefix}-progress-bar {
   height: 100%;
   background: var(--${prefix}-fg);
-  border-radius: 4px;
+  border-radius: 5px;
   transition: width 0.3s ease;
 }
 
@@ -961,6 +1021,15 @@ function generateFeedbackStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }
 
+.${prefix}-progress-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--${prefix}-fg);
+  white-space: nowrap;
+  min-width: 32px;
+  text-align: right;
+}
+
 .${prefix}-spinner {
   display: inline-block;
   width: 20px;
@@ -1065,6 +1134,7 @@ function generateOverlayStyles(_theme, prefix) {
   border: none;
   text-align: left;
   font-size: 14px;
+  line-height: 1.5;
   cursor: pointer;
 }
 
@@ -1103,6 +1173,7 @@ function generateNavigationStyles(_theme, prefix) {
   text-decoration: none;
   border-radius: var(--${prefix}-radius);
   font-size: 14px;
+  line-height: 1.5;
   transition: background-color 0.15s ease;
 }
 
@@ -1136,6 +1207,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-nav-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -1157,6 +1229,7 @@ function generateNavigationStyles(_theme, prefix) {
   border: none;
   border-bottom: 2px solid transparent;
   font-size: 14px;
+  line-height: 1.5;
   color: var(--${prefix}-fg);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -1178,6 +1251,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-breadcrumb-item {
+  display: inline-flex;
   color: var(--${prefix}-fg);
   text-decoration: none;
 }
@@ -1327,6 +1401,7 @@ function generateDividerStyles(prefix = "wf") {
   return `
 /* Divider */
 .${prefix}-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -1552,6 +1627,12 @@ function generateBaseStyles(prefix) {
   box-sizing: inherit;
 }
 
+/* Host CSS isolation reset - :where() keeps specificity at (0,0,0) so component styles always win */
+.${prefix}-page :where(input, button, select, textarea, a, table, thead, tbody, th, td, tr, ul, ol, li, label, hr, h1, h2, h3, h4, h5, h6, p, nav, fieldset, legend) {
+  all: unset;
+  box-sizing: border-box;
+}
+
 /* Page with flex layout - enables justify/align for centering content */
 .${prefix}-page.${prefix}-flex,
 .${prefix}-page[class*="${prefix}-justify-"],
@@ -48902,12 +48983,9 @@ function renderProgress(node, ctx) {
   const percentage = Math.round(value / max * 100);
   const label = node.label ? `<span class="${ctx.prefix}-progress-label">${ctx.escapeHtml(node.label)}</span>` : "";
   if (node.indeterminate) {
-    return `<div class="${classes} ${ctx.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
+    return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes} ${ctx.prefix}-progress-indeterminate" role="progressbar"><div class="${ctx.prefix}-progress-bar"></div></div></div>`;
   }
-  return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
-  ${label}
-  <div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div>
-</div>`;
+  return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes}" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}"><div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div></div><span class="${ctx.prefix}-progress-value">${percentage}%</span></div>`;
 }
 function renderSpinner(node, ctx) {
   const sizeResolved = resolveSizeValue(node.size, "spinner", ctx.prefix);

package/dist/renderer.js

@@ -181,8 +181,21 @@ function generateContainerStyles(prefix) {
   border-bottom: 1px solid var(--${prefix}-border);
   font-size: 16px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   text-align: left;
+  outline: none;
+}
+
+.${prefix}-accordion-header::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--${prefix}-muted);
+  border-bottom: 2px solid var(--${prefix}-muted);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
 
 .${prefix}-accordion-header:hover {
@@ -198,8 +211,10 @@ function generateContainerStyles(prefix) {
 function generateTextStyles(prefix) {
   return `/* Text Components */
 .${prefix}-text {
+  display: block;
   margin: 0;
   line-height: 1.5;
+  white-space: normal;
 }
 
 .${prefix}-text-xs { font-size: 12px; }
@@ -224,6 +239,7 @@ function generateTextStyles(prefix) {
 .${prefix}-text-muted { color: var(--${prefix}-muted); }
 
 .${prefix}-title {
+  display: block;
   margin: 0 0 8px 0;
   font-weight: 600;
   line-height: 1.25;
@@ -242,6 +258,7 @@ h5.${prefix}-title { font-size: 18px; }
 h6.${prefix}-title { font-size: 16px; }
 
 .${prefix}-link {
+  display: inline;
   color: var(--${prefix}-fg);
   text-decoration: underline;
   cursor: pointer;
@@ -276,6 +293,7 @@ function generateInputStyles(_theme, prefix) {
   border-radius: var(--${prefix}-radius);
   font-family: inherit;
   font-size: 14px;
+  line-height: 1.5;
   background: var(--${prefix}-bg);
   color: var(--${prefix}-fg);
   transition: border-color 0.15s ease;
@@ -349,11 +367,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-textarea {
+  display: block;
   min-height: 80px;
   resize: vertical;
+  white-space: pre-wrap;
 }
 
 .${prefix}-select {
+  cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -371,6 +392,7 @@ function generateInputStyles(_theme, prefix) {
 
 .${prefix}-checkbox input,
 .${prefix}-radio input {
+  appearance: auto;
   width: 18px;
   height: 18px;
   margin: 0;
@@ -426,12 +448,14 @@ function generateInputStyles(_theme, prefix) {
 }
 
 .${prefix}-slider {
+  display: block;
   appearance: none;
   width: 100%;
   height: 6px;
   background: var(--${prefix}-border);
   border-radius: 3px;
   outline: none;
+  margin: 8px 0;
 }
 
 .${prefix}-slider::-webkit-slider-thumb {
@@ -469,6 +493,7 @@ function generateButtonStyles(_theme, prefix) {
   font-family: inherit;
   font-size: 14px;
   font-weight: 500;
+  line-height: 1.5;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
@@ -795,16 +820,32 @@ svg.${prefix}-icon-xl { width: 32px; height: 32px; }
 function generateDataStyles(_theme, prefix) {
   return `/* Data Components */
 .${prefix}-table {
+  display: table;
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--${prefix}-border);
   font-size: 14px;
 }
 
+.${prefix}-table thead {
+  display: table-header-group;
+}
+
+.${prefix}-table tbody {
+  display: table-row-group;
+}
+
+.${prefix}-table tr {
+  display: table-row;
+}
+
 .${prefix}-table th,
 .${prefix}-table td {
+  display: table-cell;
   padding: 10px 12px;
   text-align: left;
+  line-height: 1.5;
+  vertical-align: top;
   border-bottom: 1px solid var(--${prefix}-border);
 }
 
@@ -827,6 +868,7 @@ function generateDataStyles(_theme, prefix) {
 }
 
 .${prefix}-list {
+  display: block;
   list-style: none;
   padding: 0;
   margin: 0;
@@ -837,11 +879,17 @@ function generateDataStyles(_theme, prefix) {
   padding-left: 24px;
 }
 
+.${prefix}-list-ordered .${prefix}-list-item {
+  display: list-item;
+  list-style: decimal;
+}
+
 .${prefix}-list-none {
   list-style: none;
 }
 
 .${prefix}-list-item {
+  display: list-item;
   padding: 8px 0;
   border-bottom: 1px solid var(--${prefix}-border);
 }
@@ -875,6 +923,7 @@ function generateFeedbackStyles(_theme, prefix) {
   background: transparent;
   border: none;
   font-size: 18px;
+  line-height: 1;
   cursor: pointer;
   opacity: 0.5;
 }
@@ -892,17 +941,28 @@ function generateFeedbackStyles(_theme, prefix) {
   font-size: 14px;
 }
 
+.${prefix}-progress-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.${prefix}-progress-wrapper .${prefix}-progress {
+  flex: 1;
+}
+
 .${prefix}-progress {
-  height: 8px;
-  background: var(--${prefix}-border);
-  border-radius: 4px;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
   overflow: hidden;
+  border: 1px solid var(--${prefix}-border);
 }
 
 .${prefix}-progress-bar {
   height: 100%;
   background: var(--${prefix}-fg);
-  border-radius: 4px;
+  border-radius: 5px;
   transition: width 0.3s ease;
 }
 
@@ -923,6 +983,15 @@ function generateFeedbackStyles(_theme, prefix) {
   color: var(--${prefix}-muted);
 }
 
+.${prefix}-progress-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--${prefix}-fg);
+  white-space: nowrap;
+  min-width: 32px;
+  text-align: right;
+}
+
 .${prefix}-spinner {
   display: inline-block;
   width: 20px;
@@ -1027,6 +1096,7 @@ function generateOverlayStyles(_theme, prefix) {
   border: none;
   text-align: left;
   font-size: 14px;
+  line-height: 1.5;
   cursor: pointer;
 }
 
@@ -1065,6 +1135,7 @@ function generateNavigationStyles(_theme, prefix) {
   text-decoration: none;
   border-radius: var(--${prefix}-radius);
   font-size: 14px;
+  line-height: 1.5;
   transition: background-color 0.15s ease;
 }
 
@@ -1098,6 +1169,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-nav-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -1119,6 +1191,7 @@ function generateNavigationStyles(_theme, prefix) {
   border: none;
   border-bottom: 2px solid transparent;
   font-size: 14px;
+  line-height: 1.5;
   color: var(--${prefix}-fg);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -1140,6 +1213,7 @@ function generateNavigationStyles(_theme, prefix) {
 }
 
 .${prefix}-breadcrumb-item {
+  display: inline-flex;
   color: var(--${prefix}-fg);
   text-decoration: none;
 }
@@ -1289,6 +1363,7 @@ function generateDividerStyles(prefix = "wf") {
   return `
 /* Divider */
 .${prefix}-divider {
+  display: block;
   margin: 8px 0;
   border: none;
   border-top: 1px solid var(--${prefix}-border);
@@ -1514,6 +1589,12 @@ function generateBaseStyles(prefix) {
   box-sizing: inherit;
 }
 
+/* Host CSS isolation reset - :where() keeps specificity at (0,0,0) so component styles always win */
+.${prefix}-page :where(input, button, select, textarea, a, table, thead, tbody, th, td, tr, ul, ol, li, label, hr, h1, h2, h3, h4, h5, h6, p, nav, fieldset, legend) {
+  all: unset;
+  box-sizing: border-box;
+}
+
 /* Page with flex layout - enables justify/align for centering content */
 .${prefix}-page.${prefix}-flex,
 .${prefix}-page[class*="${prefix}-justify-"],
@@ -48864,12 +48945,9 @@ function renderProgress(node, ctx) {
   const percentage = Math.round(value / max * 100);
   const label = node.label ? `<span class="${ctx.prefix}-progress-label">${ctx.escapeHtml(node.label)}</span>` : "";
   if (node.indeterminate) {
-    return `<div class="${classes} ${ctx.prefix}-progress-indeterminate"${styleAttr} role="progressbar">${label}</div>`;
+    return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes} ${ctx.prefix}-progress-indeterminate" role="progressbar"><div class="${ctx.prefix}-progress-bar"></div></div></div>`;
   }
-  return `<div class="${classes}"${styleAttr} role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}">
-  ${label}
-  <div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div>
-</div>`;
+  return `${label}<div class="${ctx.prefix}-progress-wrapper"${styleAttr}><div class="${classes}" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}"><div class="${ctx.prefix}-progress-bar" style="width: ${percentage}%"></div></div><span class="${ctx.prefix}-progress-value">${percentage}%</span></div>`;
 }
 function renderSpinner(node, ctx) {
   const sizeResolved = resolveSizeValue(node.size, "spinner", ctx.prefix);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/core",
-  "version": "2.6.2-beta.0",
+  "version": "2.7.0-beta.0",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",
@@ -32,16 +32,21 @@
     "build": "pnpm build:grammar && pnpm build:ts",
     "test": "vitest run",
     "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "clean": "rm -rf dist",
     "release": "release-it"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.4",
+    "@storybook/html": "^10.2.18",
+    "@storybook/html-vite": "^10.2.18",
     "@types/node": "^25.0.8",
     "@vitest/coverage-v8": "^3.2.4",
     "lucide": "^0.562.0",
     "peggy": "^5.0.0",
     "release-it": "^19.2.3",
+    "storybook": "^10.2.18",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vitest": "^3.1.1"