@lifeonlars/prime-yggdrasil 0.1.4 → 0.2.0

package/dist/components/button.css

@@ -611,3 +611,82 @@
     border-color: transparent;
     color: var(--severity-danger-text);
   }
+
+  /* Button Contrast Variant */
+  .p-button.p-button-contrast,
+  .p-button-group.p-button-contrast > .p-button,
+  .p-splitbutton.p-button-contrast > .p-button {
+    color: var(--surface-neutral-primary);
+    background: var(--text-neutral-loud);
+    border: 1px solid var(--text-neutral-loud);
+  }
+
+  .p-button.p-button-contrast:not(:disabled):hover,
+  .p-button-group.p-button-contrast > .p-button:not(:disabled):hover,
+  .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: var(--text-neutral-loud);
+    color: var(--surface-neutral-primary);
+    border-color: var(--text-neutral-loud);
+  }
+
+  .p-button.p-button-contrast:not(:disabled):focus,
+  .p-button-group.p-button-contrast > .p-button:not(:disabled):focus,
+  .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+
+  .p-button.p-button-contrast:not(:disabled):active,
+  .p-button-group.p-button-contrast > .p-button:not(:disabled):active,
+  .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: var(--text-neutral-default);
+    color: var(--surface-neutral-primary);
+    border-color: var(--text-neutral-default);
+  }
+
+  .p-button.p-button-contrast.p-button-outlined,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: var(--text-neutral-loud);
+    border: 1px solid;
+  }
+
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: color-mix(in srgb, var(--text-neutral-loud) 4%, transparent);
+    color: var(--text-neutral-loud);
+    border: 1px solid;
+  }
+
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: color-mix(in srgb, var(--text-neutral-loud) 16%, transparent);
+    color: var(--text-neutral-loud);
+    border: 1px solid;
+  }
+
+  .p-button.p-button-contrast.p-button-text,
+  .p-button-group.p-button-contrast > .p-button.p-button-text,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: var(--text-neutral-loud);
+    border-color: transparent;
+  }
+
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: color-mix(in srgb, var(--text-neutral-loud) 4%, transparent);
+    border-color: transparent;
+    color: var(--text-neutral-loud);
+  }
+
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: color-mix(in srgb, var(--text-neutral-loud) 16%, transparent);
+    border-color: transparent;
+    color: var(--text-neutral-loud);
+  }

package/dist/components/data.css

@@ -917,3 +917,144 @@
   .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
     background: var(--surface-state-hover);
   }
+
+  /* DataTable Column Filters */
+  .p-column-filter-menu-button {
+    width: 2rem;
+    height: 2rem;
+    color: var(--text-neutral-subdued);
+    border: 0 none;
+    background: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+
+  .p-column-filter-menu-button:hover {
+    color: var(--text-neutral-loud);
+    border-color: transparent;
+    background: var(--surface-state-hover);
+  }
+
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
+  }
+
+  .p-column-filter-menu-button.p-column-filter-menu-button-open,
+  .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: var(--surface-state-hover);
+    color: var(--text-neutral-loud);
+  }
+
+  .p-column-filter-menu-button.p-column-filter-menu-button-active,
+  .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: var(--surface-brand-overlay);
+    color: var(--text-state-interactive);
+  }
+
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: var(--text-neutral-subdued);
+    border: 0 none;
+    background: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+
+  .p-column-filter-clear-button:hover {
+    color: var(--text-neutral-loud);
+    border-color: transparent;
+    background: var(--surface-state-hover);
+  }
+
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
+  }
+
+  .p-column-filter-row .p-column-filter-menu-button,
+  .p-column-filter-row .p-column-filter-clear-button {
+    margin-left: 0.5rem;
+  }
+
+  .p-column-filter-overlay {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    min-width: 12.5rem;
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem var(--surface-brand-overlay);
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-brand-overlay);
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight, .p-disabled):hover {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid var(--border-neutral-subdued);
+    margin: 0.25rem 0;
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--border-neutral-subdued);
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-secondary);
+    margin: 0;
+    border-top-right-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-md);
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid var(--border-neutral-subdued);
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }

package/dist/components/form.css

@@ -46,6 +46,60 @@
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
     border-color: var(--severity-danger-text);
   }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: var(--text-neutral-subdued);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: var(--text-neutral-subdued);
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: var(--severity-danger-text);
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    border-radius: var(--radius-md);
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: var(--surface-neutral-secondary);
+    border-radius: var(--radius-sm);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: var(--severity-danger-text);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: var(--severity-warning-text);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: var(--severity-success-text);
+  }
   .p-inputgroup > .p-component,
   .p-inputgroup > .p-inputwrapper > .p-inputtext,
   .p-inputgroup > .p-float-label > .p-component {
@@ -487,6 +541,152 @@
   .p-dropdown.p-invalid.p-component {
     border-color: var(--severity-danger-text);
   }
+  .p-dropdown-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--border-neutral-subdued);
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-secondary);
+    margin: 0;
+    border-top-right-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-md);
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: var(--text-neutral-subdued);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-brand-overlay);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: color-mix(in srgb, var(--surface-brand-primary) 24%, transparent);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-primary);
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-default);
+    background: transparent;
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: var(--border-state-interactive);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
+    border-color: var(--border-state-interactive);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.375rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-size: 1rem;
+    color: var(--text-neutral-default);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: var(--surface-brand-overlay);
+    color: var(--text-state-interactive);
+    border-radius: var(--radius-md);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
+    margin-left: 0.5rem;
+  }
+  .p-autocomplete.p-invalid.p-component > .p-inputtext {
+    border-color: var(--severity-danger-text);
+  }
+  .p-autocomplete-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-brand-overlay);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-primary);
+    font-weight: 700;
+  }
   .p-multiselect {
     display: inline-flex;
     cursor: pointer;
@@ -602,6 +802,68 @@
   .p-treeselect.p-invalid.p-component {
     border-color: var(--severity-danger-text);
   }
+
+  /* TreeSelect Panel */
+  .p-treeselect-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid var(--border-neutral-subdued);
+    color: var(--text-neutral-loud);
+    background: var(--surface-neutral-secondary);
+    margin: 0;
+    border-top-right-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-md);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: var(--text-neutral-subdued);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: var(--text-neutral-subdued);
+    border: 0 none;
+    background: transparent;
+    border-radius: var(--radius-full);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem var(--surface-brand-overlay);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: var(--text-neutral-loud);
+    border-color: transparent;
+    background: var(--surface-state-hover);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: var(--text-neutral-default);
+    background: transparent;
+  }
+
   .p-cascadeselect {
     background: var(--text-onsurface-onbrand);
     border: 1px solid var(--border-neutral-subdued);
@@ -649,6 +911,47 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: var(--severity-danger-text);
   }
+  .p-cascadeselect-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-brand-overlay);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: color-mix(in srgb, var(--surface-brand-primary) 24%, transparent);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
   .p-listbox {
     background: var(--text-onsurface-onbrand);
     color: var(--text-neutral-subdued);

package/dist/components/misc-extended.css

@@ -0,0 +1,192 @@
+/**
+ * Extended miscellaneous components
+ * Components not commonly used but part of PrimeReact
+ */
+
+  /* InputOTP */
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
+  /* Mention */
+  .p-mention-panel {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  }
+
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: var(--text-neutral-default);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: var(--text-neutral-default);
+    background: var(--surface-state-hover);
+  }
+
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: var(--text-state-interactive);
+    background: var(--surface-brand-overlay);
+  }
+
+  /* Toolbar */
+  .p-toolbar {
+    background: var(--surface-neutral-secondary);
+    border: 1px solid var(--border-neutral-subdued);
+    padding: 1.25rem;
+    border-radius: var(--radius-md);
+    gap: 0.5rem;
+  }
+
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+
+  /* ConfirmPopup */
+  .p-confirm-popup {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    border-radius: var(--radius-md);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+  }
+
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 1.25rem;
+  }
+
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgb(255 255 255 / 0%);
+    border-bottom-color: var(--surface-neutral-primary);
+  }
+
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgb(255 255 255 / 0%);
+    border-bottom-color: var(--surface-neutral-primary);
+  }
+
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: var(--surface-neutral-primary);
+  }
+
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: var(--surface-neutral-primary);
+  }
+
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+
+  /* ScrollTop */
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--radius-full);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+
+  .p-scrolltop.p-link {
+    background: rgb(0 0 0 / 70%);
+  }
+
+  .p-scrolltop.p-link:hover {
+    background: rgb(0 0 0 / 80%);
+  }
+
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: var(--surface-neutral-secondary);
+  }
+
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* DataScroller */
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+
+  .p-datascroller .p-datascroller-header {
+    background: var(--surface-neutral-secondary);
+    color: var(--text-neutral-loud);
+    border: 1px solid var(--border-neutral-subdued);
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+
+  .p-datascroller .p-datascroller-content {
+    background: var(--surface-neutral-primary);
+    color: var(--text-neutral-default);
+    border: 0 none;
+    padding: 0;
+  }
+
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid var(--border-neutral-subdued);
+    border-width: 0 0 1px 0;
+  }
+
+  .p-datascroller .p-datascroller-footer {
+    background: var(--surface-neutral-secondary);
+    color: var(--text-neutral-loud);
+    border: 1px solid var(--border-neutral-subdued);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }

package/dist/components/misc.css

@@ -78,6 +78,15 @@
   .p-avatar.p-avatar-xl .p-avatar-icon {
     font-size: 2rem;
   }
+
+  .p-avatar-circle {
+    border-radius: var(--radius-full);
+  }
+
+  .p-avatar-group .p-avatar {
+    border: 2px solid var(--surface-neutral-primary);
+  }
+
   .p-chip {
     background-color: var(--surface-neutral-secondary);
     color: var(--text-neutral-default);

package/dist/components/overlay.css

@@ -176,3 +176,37 @@
   .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
     border-bottom-color: var(--text-neutral-subdued);
   }
+
+  /* Component Overlay Transitions */
+  .p-component-overlay {
+    background-color: rgb(0 0 0 / 40%);
+    transition-duration: 0.2s;
+  }
+
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+
+    to {
+      background-color: rgb(0 0 0 / 40%);
+    }
+  }
+
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: rgb(0 0 0 / 40%);
+    }
+
+    to {
+      background-color: transparent;
+    }
+  }

package/dist/components.css

@@ -13,3 +13,4 @@
 @import "./components/message.css";
 @import "./components/media.css";
 @import "./components/misc.css";
+@import "./components/misc-extended.css";

package/dist/flag-denmark.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6670_42251)">
+<path d="M-0.00186157 3H24.0019V21H-0.00186157V3Z" fill="#C8102E"/>
+<path d="M7.71189 3H10.2844V21H7.71189V3Z" fill="white"/>
+<path d="M-0.00186157 10.7137H24.0019V13.2863H-0.00186157V10.7137Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_6670_42251">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/flag-finland.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3H24V21H0V3Z" fill="white"/>
+<path d="M0 9.54375H24V14.4562H0V9.54375Z" fill="#002F6C"/>
+<path d="M6.58125 3H11.49V21H6.5775L6.58125 3Z" fill="#002F6C"/>
+</svg>

package/dist/flag-norway.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3H24V21H0V3Z" fill="#ED2939"/>
+<path d="M6.75 3H11.25V21H6.75V3Z" fill="white"/>
+<path d="M0 9.75H24V14.25H0V9.75Z" fill="white"/>
+<path d="M7.875 3H10.125V21H7.875V3Z" fill="#002664"/>
+<path d="M0 10.875H24V13.125H0V10.875Z" fill="#002664"/>
+</svg>

package/dist/flag-sweden.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3H24V21H0V3Z" fill="#005293"/>
+<path d="M6.6 3V10.2H0V13.8H6.6V21H10.2V13.8H24V10.2H10.2V3H6.6Z" fill="#FECB00"/>
+</svg>

package/dist/flag-uk.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3H24V21H0V3Z" fill="#012169"/>
+<path d="M2.8125 3L11.9625 9.7875L21.075 3H24V5.325L15 12.0375L24 18.7125V21H21L12 14.2875L3.0375 21H0V18.75L8.9625 12.075L0 5.4V3H2.8125Z" fill="white"/>
+<path d="M15.9 13.5375L24 19.5V21L13.8375 13.5375H15.9ZM9 14.2875L9.225 15.6L2.025 21H0L9 14.2875ZM24 3V3.1125L14.6625 10.1625L14.7375 8.5125L22.125 3H24ZM0 3L8.9625 9.6H6.7125L0 4.575V3Z" fill="#C8102E"/>
+<path d="M9.0375 3V21H15.0375V3H9.0375ZM0 9V15H24V9H0Z" fill="white"/>
+<path d="M0 10.2375V13.8375H24V10.2375H0ZM10.2375 3V21H13.8375V3H10.2375Z" fill="#C8102E"/>
+</svg>

package/docs/AI-AGENT-GUIDE.md

@@ -122,6 +122,85 @@ Or use utility classes:
 <div className="shadow-4">High shadow</div>
 ```
 
+## ⚙️ PrimeReact Configuration
+
+### App Setup with PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` to configure global settings:
+
+```tsx
+import { PrimeReactProvider } from 'primereact/api';
+
+function App() {
+  const primeConfig = {
+    ripple: true,              // Enable ripple effect on buttons/clicks
+    inputStyle: 'outlined',    // 'outlined' or 'filled'
+    locale: 'en',              // Default locale
+  };
+
+  return (
+    <PrimeReactProvider value={primeConfig}>
+      {/* Your app content */}
+    </PrimeReactProvider>
+  );
+}
+```
+
+### Ripple Effect
+
+The ripple effect is **disabled by default**. Enable it for Material Design-style click animations:
+
+```tsx
+<PrimeReactProvider value={{ ripple: true }}>
+```
+
+**Supported components:**
+- Button
+- Checkbox
+- RadioButton
+- Dropdown items
+- Menu items
+- ListBox items
+
+**Note:** The ripple effect is a JavaScript feature, not CSS. It's configured at the app level, not in the theme.
+
+### Input Style
+
+Choose between outlined (default) or filled input styles:
+
+```tsx
+// Outlined inputs (default) - border around input
+<PrimeReactProvider value={{ inputStyle: 'outlined' }}>
+
+// Filled inputs - filled background, bottom border only
+<PrimeReactProvider value={{ inputStyle: 'filled' }}>
+```
+
+### Other Configuration Options
+
+```tsx
+const primeConfig = {
+  ripple: true,
+  inputStyle: 'outlined',
+
+  // Append overlays to specific element (default: document.body)
+  appendTo: 'self',  // or document.getElementById('overlays')
+
+  // Control z-index layering
+  zIndex: {
+    modal: 1100,     // Modals
+    overlay: 1000,   // Overlays/dropdowns
+    menu: 1000,      // Menus
+    tooltip: 1100,   // Tooltips
+  },
+
+  // Locale for date formatting, number formatting, etc.
+  locale: 'en',
+};
+```
+
+**Documentation:** [PrimeReact Configuration](https://primereact.org/configuration/)
+
 ## 🧩 Component Selection Guide
 
 ### Data Display
@@ -245,6 +324,42 @@ import { Card } from 'primereact/card';
 <Card>Content</Card>
 ```
 
+### 5. **CRITICAL: Applying Utility Classes to Components**
+```tsx
+// ❌ DON'T DO THIS - Utility classes on components
+<Button className="w-full block mt-4 p-4" label="Submit" />
+<InputText className="text-lg font-bold" />
+<DataTable className="my-8" value={data} />
+
+// ✅ DO THIS INSTEAD - Use component props + wrapper
+<div className="w-full mt-4">  {/* Utility classes on wrapper */}
+  <Button label="Submit" />
+</div>
+
+<div className="text-lg">  {/* Styling on wrapper */}
+  <InputText />
+</div>
+```
+
+**Why this matters:**
+- ✅ **Components** are configured via **props** (size, variant, severity, etc.)
+- ✅ **Utility classes** are for **layout/composition** (flex, grid, margins, width)
+- ❌ Mixing utility classes with components breaks the design system
+- ❌ Can cause unexpected visual bugs (icon misalignment, broken layouts)
+
+**Correct approach:**
+```tsx
+// ✅ Layout utilities on wrappers/containers
+<div className="flex gap-4 w-full">
+  <Button label="Cancel" severity="secondary" />
+  <Button label="Submit" />
+</div>
+
+// ✅ Component configuration via props
+<Button label="Large Button" size="large" />
+<InputText placeholder="Text" className="w-full" />  {/* Width is OK */}
+```
+
 ## 🔍 Decision Tree for UI Development
 
 ```

package/docs/THEME-COMPLETENESS-AUDIT.md

@@ -0,0 +1,251 @@
+# Prime Yggdrasil Theme Completeness Audit
+
+**Date:** 2026-01-08
+**Base Theme:** PrimeReact Lara Light Blue
+**Status:** ⚠️ Incomplete - Missing ~141 CSS classes
+
+---
+
+## Executive Summary
+
+### PrimeReact Architecture
+
+PrimeReact uses a **fully headless/unstyled architecture**:
+- Components are React components with NO built-in styling
+- `primereact.css` is deprecated/empty
+- **Themes provide 100% of the styling** (layout, colors, spacing, positioning)
+- This is by design - similar to Tailwind CSS or Headless UI
+
+### Current State
+
+- **Lara theme:** 7,068 lines, 662 unique CSS classes
+- **Yggdrasil theme:** 5,590 lines, 521 unique CSS classes
+- **Missing:** ~1,500 lines, 141 CSS classes
+- **Coverage:** ~79% complete
+
+---
+
+## Missing Components
+
+### Major Component Families Not Included
+
+1. **AutoComplete** - Searchable dropdown with autocomplete
+2. **ColorPicker** - Color selection component
+3. **DataScroller** - Infinite scroll data display
+4. **InputOTP** - One-time password input
+5. **Mention** - @mention autocomplete for text areas
+6. **ScrollTop** - Back-to-top button
+7. **Toolbar** - Action button toolbar
+8. **TreeSelect** - Tree structure selection (partial - base exists, but missing panel/overlay styles)
+
+### Missing Specialized Styles
+
+- **Column Filter** - Advanced DataTable column filtering UI (40+ classes)
+- **Confirm Popup** - Confirmation dialog positioning
+- **Avatar Group** - Multiple avatar display
+- **Component Overlay** - Enter/leave transitions
+- **Button Contrast** - High contrast button variant
+- **Error States** - Dedicated error styling
+
+---
+
+## What We DO Have (Well Covered)
+
+✅ **Forms:** InputText, Dropdown, MultiSelect, Checkbox, Radio, Slider, Rating, InputSwitch
+✅ **Buttons:** All variants, sizes, severities, outlined, text, raised, rounded
+✅ **Data:** DataTable, Paginator, Tree, TreeTable
+✅ **Panels:** Card, Accordion, TabView, Fieldset
+✅ **Overlays:** Dialog, Sidebar, Tooltip, ConfirmDialog
+✅ **Menus:** Menu, Menubar, ContextMenu, MegaMenu, Breadcrumb, Steps
+✅ **Messages:** Toast, Message, InlineMessage
+✅ **Media:** Carousel, Galleria, Image
+✅ **Misc:** Badge, Chip, Tag, Avatar (basic), ProgressBar, Skeleton
+✅ **Calendar/Date:** Full calendar component
+
+---
+
+## Recent Fixes
+
+### IconField Positioning (2026-01-08)
+
+**Issue:** Password toggle icons, search icons, and all IconField icons were mispositioned
+
+**Root Cause:** Missing IconField CSS positioning rules in theme
+
+**Fix:** Added to `src/theme/components/form.css`:
+```css
+.p-icon-field { position: relative; }
+.p-icon-field > .p-input-icon { position: absolute; top: 50%; margin-top: -0.5rem; }
+.p-icon-field-left > .p-input-icon:first-of-type { left: 0.75rem; }
+.p-icon-field-right > .p-input-icon:last-of-type { right: 0.75rem; }
+.p-icon-field-left > .p-inputtext { padding-left: 2.5rem; }
+.p-icon-field-right > .p-inputtext { padding-right: 2.5rem; }
+```
+
+**Impact:** Fixes Password, Search, Calendar icon positioning across all use cases
+
+---
+
+## Ripple Effect
+
+**Status:** ❌ Not included (but not CSS-related)
+
+The ripple effect is a **JavaScript feature**, not CSS. To enable:
+
+```tsx
+import { PrimeReactProvider } from 'primereact/api';
+
+function App() {
+  return (
+    <PrimeReactProvider value={{ ripple: true }}>
+      {/* Your app */}
+    </PrimeReactProvider>
+  );
+}
+```
+
+**Recommendation:** Add ripple configuration to the AI-AGENT-GUIDE.md with example code.
+
+---
+
+## Recommendations
+
+### Option 1: Complete Theme (Recommended for Production)
+
+**Pros:**
+- Full PrimeReact component coverage
+- No missing components
+- Better user experience
+
+**Cons:**
+- More CSS to maintain
+- Larger bundle size
+
+**Action Items:**
+1. Extract missing component styles from Lara theme
+2. Convert to semantic tokens
+3. Add to appropriate component category files
+4. Test each component in Storybook
+
+**Estimated Effort:** 4-6 hours
+
+---
+
+### Option 2: As-Needed Addition
+
+**Pros:**
+- Smaller bundle size
+- Only maintain what you use
+- Faster initial development
+
+**Cons:**
+- Components break when first used
+- Users need to report missing styles
+- Inconsistent component coverage
+
+**Current Approach:** This is what we're doing now
+
+---
+
+### Option 3: Document Supported Components
+
+**Pros:**
+- Clear expectations
+- Intentional scope
+- Maintain quality over quantity
+
+**Cons:**
+- Limited component set
+- May not fit all use cases
+
+**Action Items:**
+1. Create SUPPORTED-COMPONENTS.md
+2. List all tested/working components
+3. Mark unsupported components
+4. Provide workarounds or alternatives
+
+---
+
+## Missing Component Priority Assessment
+
+### High Priority (Common Use Cases)
+
+1. **AutoComplete** - Very common in search/filter UIs
+2. **Toolbar** - Standard in admin panels
+3. **Column Filter** - Essential for DataTable filtering
+4. **InputOTP** - Growing use for 2FA/authentication
+
+### Medium Priority (Specialized Features)
+
+5. **TreeSelect** panel/overlay - Complete the partial implementation
+6. **Confirm Popup** - Nice-to-have confirmation UX
+7. **ColorPicker** - Design tools, customization UIs
+
+### Low Priority (Niche Use Cases)
+
+8. **DataScroller** - Alternative to pagination (less common)
+9. **Mention** - Social/collaborative apps only
+10. **ScrollTop** - Nice-to-have UX enhancement
+
+---
+
+## Next Steps
+
+### Immediate Actions
+
+1. ✅ **Document ripple configuration** in AI-AGENT-GUIDE.md
+2. ✅ **Document IconField fix** for future reference
+3. ⏳ **Test current theme** in external project to identify critical gaps
+4. ⏳ **Create SUPPORTED-COMPONENTS.md** listing coverage
+
+### Short Term (Before Next Release)
+
+1. Add high-priority missing components (AutoComplete, Toolbar, Column Filter)
+2. Complete TreeSelect implementation
+3. Add component coverage tests
+4. Update documentation with component support matrix
+
+### Long Term
+
+1. Achieve 100% Lara theme parity
+2. Automated theme comparison tests
+3. CSS size optimization
+4. Component-specific documentation
+
+---
+
+## Testing Checklist
+
+When testing theme completeness in external projects:
+
+- [ ] All form inputs render correctly
+- [ ] Icons position correctly (IconField, Password, etc.)
+- [ ] DataTable with filtering works
+- [ ] Overlay components position correctly
+- [ ] Buttons have all variants
+- [ ] No console errors about missing CSS
+- [ ] Dark mode works across all components
+- [ ] Responsive behavior works
+- [ ] Semantic tokens apply correctly
+
+---
+
+## Files Modified Today
+
+1. `src/theme/components/form.css` - Added IconField positioning
+2. `src/stories/Password.stories.tsx` - Added Password component examples
+3. `src/stories/IconField.stories.tsx` - Added IconField examples
+
+---
+
+## Conclusion
+
+**The Lara theme IS complete and self-contained.** Our Yggdrasil theme is based on it but we only extracted ~79% of the component styles during the initial conversion.
+
+**The good news:** We have all the core components that most apps need (forms, tables, dialogs, menus).
+
+**The gap:** Specialized components (AutoComplete, ColorPicker, etc.) are missing.
+
+**The fix:** Extract missing components from Lara theme as needed, or do a complete extraction for 100% coverage.
+
+The IconField issue we just fixed is exactly this pattern - a component style that exists in Lara but wasn't included in our initial extraction.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifeonlars/prime-yggdrasil",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "description": "AI-agent-friendly PrimeReact design system for component-driven development with semantic tokens and dark mode support",
   "keywords": [