npm - @i-cell/ids-styles - Versions diffs - 0.0.41 → 0.0.43 - Mend

@i-cell/ids-styles 0.0.41 → 0.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/breadcrumb/breadcrumb.css +288 -0
package/dist/breadcrumb/breadcrumb.min.css +1 -0
package/dist/breadcrumb/breadcrumb.plugin.js +272 -0
package/dist/button/button.css +62 -62
package/dist/button/button.min.css +1 -1
package/dist/button/button.plugin.js +62 -62
package/dist/components.css +371 -82
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +345 -82
package/dist/icon-button/icon-button.css +20 -20
package/dist/icon-button/icon-button.min.css +1 -1
package/dist/icon-button/icon-button.plugin.js +20 -20
package/package.json +1 -1

package/dist/breadcrumb/breadcrumb.css ADDED Viewed

@@ -0,0 +1,288 @@
+*:has(ids-breadcrumb.ids-breadcrumb) {
+  width: 100%;
+}
+.ids-breadcrumb {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: none;
+  border-color: transparent;
+  line-height: 1.5;
+}
+.ids-breadcrumb::before, .ids-breadcrumb::after, .ids-breadcrumb *, .ids-breadcrumb ::before, .ids-breadcrumb ::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: none;
+  border-color: transparent;
+}
+.ids-breadcrumb {
+  display: block;
+}
+.ids-breadcrumb-divider {
+  display: flex;
+  align-items: center;
+}
+.ids-breadcrumb-link {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ids-breadcrumb-link:link, .ids-breadcrumb-link:visited {
+  text-decoration: none;
+}
+.ids-breadcrumb-link:focus, .ids-breadcrumb-link:focus-visible {
+  outline-offset: 2px;
+  outline-style: solid;
+}
+.ids-breadcrumb-link:active {
+  outline-style: none;
+}
+.ids-breadcrumb-link:not([disabled]) {
+  cursor: pointer;
+}
+.ids-breadcrumb-link:is([disabled]) {
+  cursor: not-allowed;
+}
+.ids-breadcrumb-page {
+  display: block;
+  cursor: default;
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ids-comp-breadcrumb-size-gap-compact);
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list.ids-overlay-panel {
+  align-items: start;
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link {
+  font-family: var(--ids-comp-breadcrumb-navigation-link-typography-font-family-compact);
+  font-size: var(--ids-comp-breadcrumb-navigation-link-typography-font-size-compact);
+  font-weight: var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-breadcrumb-navigation-link-typography-line-height-compact);
+  padding: var(--ids-comp-breadcrumb-navigation-link-size-padding-y-compact) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-compact);
+  max-width: var(--ids-comp-breadcrumb-navigation-link-size-max-width-compact);
+  border-radius: var(--ids-comp-breadcrumb-navigation-link-size-border-radius-compact);
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus-visible {
+  outline-width: var(--ids-comp-breadcrumb-focused-outline-size-outline-compact);
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-page {
+  font-family: var(--ids-comp-breadcrumb-current-page-typography-font-family-compact);
+  font-size: var(--ids-comp-breadcrumb-current-page-typography-font-size-compact);
+  font-weight: var(--ids-comp-breadcrumb-current-page-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-breadcrumb-current-page-typography-line-height-compact);
+  padding: var(--ids-comp-breadcrumb-current-page-size-padding-y-compact) var(--ids-comp-breadcrumb-current-page-size-padding-x-compact);
+  max-width: var(--ids-comp-breadcrumb-current-page-size-max-width-compact);
+}
+.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-divider-foreslash {
+  font-family: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-compact);
+  font-size: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-compact);
+  font-weight: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-compact);
+  padding: var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-compact) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-compact);
+  border-radius: var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-compact);
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ids-comp-breadcrumb-size-gap-comfortable);
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list.ids-overlay-panel {
+  align-items: start;
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link {
+  font-family: var(--ids-comp-breadcrumb-navigation-link-typography-font-family-comfortable);
+  font-size: var(--ids-comp-breadcrumb-navigation-link-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-breadcrumb-navigation-link-typography-line-height-comfortable);
+  padding: var(--ids-comp-breadcrumb-navigation-link-size-padding-y-comfortable) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-comfortable);
+  max-width: var(--ids-comp-breadcrumb-navigation-link-size-max-width-comfortable);
+  border-radius: var(--ids-comp-breadcrumb-navigation-link-size-border-radius-comfortable);
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus-visible {
+  outline-width: var(--ids-comp-breadcrumb-focused-outline-size-outline-comfortable);
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-page {
+  font-family: var(--ids-comp-breadcrumb-current-page-typography-font-family-comfortable);
+  font-size: var(--ids-comp-breadcrumb-current-page-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-breadcrumb-current-page-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-breadcrumb-current-page-typography-line-height-comfortable);
+  padding: var(--ids-comp-breadcrumb-current-page-size-padding-y-comfortable) var(--ids-comp-breadcrumb-current-page-size-padding-x-comfortable);
+  max-width: var(--ids-comp-breadcrumb-current-page-size-max-width-comfortable);
+}
+.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-divider-foreslash {
+  font-family: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-comfortable);
+  font-size: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-comfortable);
+  padding: var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-comfortable) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-comfortable);
+  border-radius: var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-comfortable);
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ids-comp-breadcrumb-size-gap-spacious);
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list.ids-overlay-panel {
+  align-items: start;
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link {
+  font-family: var(--ids-comp-breadcrumb-navigation-link-typography-font-family-spacious);
+  font-size: var(--ids-comp-breadcrumb-navigation-link-typography-font-size-spacious);
+  font-weight: var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-breadcrumb-navigation-link-typography-line-height-spacious);
+  padding: var(--ids-comp-breadcrumb-navigation-link-size-padding-y-spacious) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-spacious);
+  max-width: var(--ids-comp-breadcrumb-navigation-link-size-max-width-spacious);
+  border-radius: var(--ids-comp-breadcrumb-navigation-link-size-border-radius-spacious);
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus-visible {
+  outline-width: var(--ids-comp-breadcrumb-focused-outline-size-outline-spacious);
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-page {
+  font-family: var(--ids-comp-breadcrumb-current-page-typography-font-family-spacious);
+  font-size: var(--ids-comp-breadcrumb-current-page-typography-font-size-spacious);
+  font-weight: var(--ids-comp-breadcrumb-current-page-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-breadcrumb-current-page-typography-line-height-spacious);
+  padding: var(--ids-comp-breadcrumb-current-page-size-padding-y-spacious) var(--ids-comp-breadcrumb-current-page-size-padding-x-spacious);
+  max-width: var(--ids-comp-breadcrumb-current-page-size-max-width-spacious);
+}
+.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-divider-foreslash {
+  font-family: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-spacious);
+  font-size: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-spacious);
+  font-weight: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-spacious);
+  padding: var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-spacious) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-spacious);
+  border-radius: var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-spacious);
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ids-comp-breadcrumb-size-gap-dense);
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list.ids-overlay-panel {
+  align-items: start;
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link {
+  font-family: var(--ids-comp-breadcrumb-navigation-link-typography-font-family-dense);
+  font-size: var(--ids-comp-breadcrumb-navigation-link-typography-font-size-dense);
+  font-weight: var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-dense);
+  letter-spacing: var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-dense);
+  line-height: var(--ids-comp-breadcrumb-navigation-link-typography-line-height-dense);
+  padding: var(--ids-comp-breadcrumb-navigation-link-size-padding-y-dense) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-dense);
+  max-width: var(--ids-comp-breadcrumb-navigation-link-size-max-width-dense);
+  border-radius: var(--ids-comp-breadcrumb-navigation-link-size-border-radius-dense);
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus-visible {
+  outline-width: var(--ids-comp-breadcrumb-focused-outline-size-outline-dense);
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-page {
+  font-family: var(--ids-comp-breadcrumb-current-page-typography-font-family-dense);
+  font-size: var(--ids-comp-breadcrumb-current-page-typography-font-size-dense);
+  font-weight: var(--ids-comp-breadcrumb-current-page-typography-font-weight-dense);
+  letter-spacing: var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-dense);
+  line-height: var(--ids-comp-breadcrumb-current-page-typography-line-height-dense);
+  padding: var(--ids-comp-breadcrumb-current-page-size-padding-y-dense) var(--ids-comp-breadcrumb-current-page-size-padding-x-dense);
+  max-width: var(--ids-comp-breadcrumb-current-page-size-max-width-dense);
+}
+.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-divider-foreslash {
+  font-family: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-dense);
+  font-size: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-dense);
+  font-weight: var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-dense);
+  letter-spacing: var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-dense);
+  line-height: var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-dense);
+  padding: var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-dense) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-dense);
+  border-radius: var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-dense);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-primary-default);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-primary-default);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:hover {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-primary-hovered);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-primary-hovered);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus-visible {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-primary-focused);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-primary-focused);
+  outline-color: var(--ids-comp-breadcrumb-focused-outline-color-dark-focused);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:active {
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-primary-pressed);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:is([disabled]) {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-primary-disabled);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-primary-disabled);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-page {
+  color: var(--ids-comp-breadcrumb-current-page-fg-primary-default);
+  background: var(--ids-comp-breadcrumb-current-page-bg-primary-default);
+}
+.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-divider-foreslash {
+  color: var(--ids-comp-breadcrumb-divider-foreslash-fg-primary-default);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-light-default);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-light-default);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:hover {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-light-hovered);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-light-hovered);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus-visible {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-light-focused);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-light-focused);
+  outline-color: var(--ids-comp-breadcrumb-focused-outline-color-light-focused);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:active {
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-light-pressed);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:is([disabled]) {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-light-disabled);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-light-disabled);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-page {
+  color: var(--ids-comp-breadcrumb-current-page-fg-light-default);
+  background: var(--ids-comp-breadcrumb-current-page-bg-light-default);
+}
+.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-divider-foreslash {
+  color: var(--ids-comp-breadcrumb-divider-foreslash-fg-light-default);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-surface-default);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-surface-default);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:hover {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-surface-hovered);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-surface-hovered);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus, .ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus-visible {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-surface-focused);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-surface-focused);
+  outline-color: var(--ids-comp-breadcrumb-focused-outline-color-dark-focused);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:active {
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-surface-pressed);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:is([disabled]) {
+  color: var(--ids-comp-breadcrumb-navigation-link-fg-surface-disabled);
+  background: var(--ids-comp-breadcrumb-navigation-link-bg-surface-disabled);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-page {
+  color: var(--ids-comp-breadcrumb-current-page-fg-surface-default);
+  background: var(--ids-comp-breadcrumb-current-page-bg-surface-default);
+}
+.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-divider-foreslash {
+  color: var(--ids-comp-breadcrumb-divider-foreslash-fg-surface-default);
+}

package/dist/breadcrumb/breadcrumb.min.css ADDED Viewed

@@ -0,0 +1 @@

+ *:has(ids-breadcrumb.ids-breadcrumb){width:100%}.ids-breadcrumb{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-breadcrumb::before,.ids-breadcrumb::after,.ids-breadcrumb *,.ids-breadcrumb ::before,.ids-breadcrumb ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-breadcrumb{display:block}.ids-breadcrumb-divider{display:flex;align-items:center}.ids-breadcrumb-link{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ids-breadcrumb-link:link,.ids-breadcrumb-link:visited{text-decoration:none}.ids-breadcrumb-link:focus,.ids-breadcrumb-link:focus-visible{outline-offset:2px;outline-style:solid}.ids-breadcrumb-link:active{outline-style:none}.ids-breadcrumb-link:not([disabled]){cursor:pointer}.ids-breadcrumb-link:is([disabled]){cursor:not-allowed}.ids-breadcrumb-page{display:block;cursor:default}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list{display:inline-flex;align-items:center;gap:var(--ids-comp-breadcrumb-size-gap-compact)}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list.ids-overlay-panel{align-items:start}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link{font-family:var(--ids-comp-breadcrumb-navigation-link-typography-font-family-compact);font-size:var(--ids-comp-breadcrumb-navigation-link-typography-font-size-compact);font-weight:var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-compact);letter-spacing:var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-compact);line-height:var(--ids-comp-breadcrumb-navigation-link-typography-line-height-compact);padding:var(--ids-comp-breadcrumb-navigation-link-size-padding-y-compact) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-compact);max-width:var(--ids-comp-breadcrumb-navigation-link-size-max-width-compact);border-radius:var(--ids-comp-breadcrumb-navigation-link-size-border-radius-compact)}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus-visible{outline-width:var(--ids-comp-breadcrumb-focused-outline-size-outline-compact)}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-page{font-family:var(--ids-comp-breadcrumb-current-page-typography-font-family-compact);font-size:var(--ids-comp-breadcrumb-current-page-typography-font-size-compact);font-weight:var(--ids-comp-breadcrumb-current-page-typography-font-weight-compact);letter-spacing:var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-compact);line-height:var(--ids-comp-breadcrumb-current-page-typography-line-height-compact);padding:var(--ids-comp-breadcrumb-current-page-size-padding-y-compact) var(--ids-comp-breadcrumb-current-page-size-padding-x-compact);max-width:var(--ids-comp-breadcrumb-current-page-size-max-width-compact)}.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-divider-foreslash{font-family:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-compact);font-size:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-compact);font-weight:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-compact);letter-spacing:var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-compact);line-height:var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-compact);padding:var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-compact) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-compact);border-radius:var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-compact)}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list{display:inline-flex;align-items:center;gap:var(--ids-comp-breadcrumb-size-gap-comfortable)}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list.ids-overlay-panel{align-items:start}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link{font-family:var(--ids-comp-breadcrumb-navigation-link-typography-font-family-comfortable);font-size:var(--ids-comp-breadcrumb-navigation-link-typography-font-size-comfortable);font-weight:var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-comfortable);line-height:var(--ids-comp-breadcrumb-navigation-link-typography-line-height-comfortable);padding:var(--ids-comp-breadcrumb-navigation-link-size-padding-y-comfortable) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-comfortable);max-width:var(--ids-comp-breadcrumb-navigation-link-size-max-width-comfortable);border-radius:var(--ids-comp-breadcrumb-navigation-link-size-border-radius-comfortable)}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus-visible{outline-width:var(--ids-comp-breadcrumb-focused-outline-size-outline-comfortable)}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-page{font-family:var(--ids-comp-breadcrumb-current-page-typography-font-family-comfortable);font-size:var(--ids-comp-breadcrumb-current-page-typography-font-size-comfortable);font-weight:var(--ids-comp-breadcrumb-current-page-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-comfortable);line-height:var(--ids-comp-breadcrumb-current-page-typography-line-height-comfortable);padding:var(--ids-comp-breadcrumb-current-page-size-padding-y-comfortable) var(--ids-comp-breadcrumb-current-page-size-padding-x-comfortable);max-width:var(--ids-comp-breadcrumb-current-page-size-max-width-comfortable)}.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-divider-foreslash{font-family:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-comfortable);font-size:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-comfortable);font-weight:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-comfortable);line-height:var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-comfortable);padding:var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-comfortable) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-comfortable);border-radius:var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-comfortable)}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list{display:inline-flex;align-items:center;gap:var(--ids-comp-breadcrumb-size-gap-spacious)}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list.ids-overlay-panel{align-items:start}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link{font-family:var(--ids-comp-breadcrumb-navigation-link-typography-font-family-spacious);font-size:var(--ids-comp-breadcrumb-navigation-link-typography-font-size-spacious);font-weight:var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-spacious);letter-spacing:var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-spacious);line-height:var(--ids-comp-breadcrumb-navigation-link-typography-line-height-spacious);padding:var(--ids-comp-breadcrumb-navigation-link-size-padding-y-spacious) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-spacious);max-width:var(--ids-comp-breadcrumb-navigation-link-size-max-width-spacious);border-radius:var(--ids-comp-breadcrumb-navigation-link-size-border-radius-spacious)}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus-visible{outline-width:var(--ids-comp-breadcrumb-focused-outline-size-outline-spacious)}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-page{font-family:var(--ids-comp-breadcrumb-current-page-typography-font-family-spacious);font-size:var(--ids-comp-breadcrumb-current-page-typography-font-size-spacious);font-weight:var(--ids-comp-breadcrumb-current-page-typography-font-weight-spacious);letter-spacing:var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-spacious);line-height:var(--ids-comp-breadcrumb-current-page-typography-line-height-spacious);padding:var(--ids-comp-breadcrumb-current-page-size-padding-y-spacious) var(--ids-comp-breadcrumb-current-page-size-padding-x-spacious);max-width:var(--ids-comp-breadcrumb-current-page-size-max-width-spacious)}.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-divider-foreslash{font-family:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-spacious);font-size:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-spacious);font-weight:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-spacious);letter-spacing:var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-spacious);line-height:var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-spacious);padding:var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-spacious) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-spacious);border-radius:var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-spacious)}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list{display:inline-flex;align-items:center;gap:var(--ids-comp-breadcrumb-size-gap-dense)}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list.ids-overlay-panel{align-items:start}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link{font-family:var(--ids-comp-breadcrumb-navigation-link-typography-font-family-dense);font-size:var(--ids-comp-breadcrumb-navigation-link-typography-font-size-dense);font-weight:var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-dense);letter-spacing:var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-dense);line-height:var(--ids-comp-breadcrumb-navigation-link-typography-line-height-dense);padding:var(--ids-comp-breadcrumb-navigation-link-size-padding-y-dense) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-dense);max-width:var(--ids-comp-breadcrumb-navigation-link-size-max-width-dense);border-radius:var(--ids-comp-breadcrumb-navigation-link-size-border-radius-dense)}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus-visible{outline-width:var(--ids-comp-breadcrumb-focused-outline-size-outline-dense)}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-page{font-family:var(--ids-comp-breadcrumb-current-page-typography-font-family-dense);font-size:var(--ids-comp-breadcrumb-current-page-typography-font-size-dense);font-weight:var(--ids-comp-breadcrumb-current-page-typography-font-weight-dense);letter-spacing:var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-dense);line-height:var(--ids-comp-breadcrumb-current-page-typography-line-height-dense);padding:var(--ids-comp-breadcrumb-current-page-size-padding-y-dense) var(--ids-comp-breadcrumb-current-page-size-padding-x-dense);max-width:var(--ids-comp-breadcrumb-current-page-size-max-width-dense)}.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-divider-foreslash{font-family:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-dense);font-size:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-dense);font-weight:var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-dense);letter-spacing:var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-dense);line-height:var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-dense);padding:var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-dense) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-dense);border-radius:var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-dense)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link{color:var(--ids-comp-breadcrumb-navigation-link-fg-primary-default);background:var(--ids-comp-breadcrumb-navigation-link-bg-primary-default)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:hover{color:var(--ids-comp-breadcrumb-navigation-link-fg-primary-hovered);background:var(--ids-comp-breadcrumb-navigation-link-bg-primary-hovered)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus-visible{color:var(--ids-comp-breadcrumb-navigation-link-fg-primary-focused);background:var(--ids-comp-breadcrumb-navigation-link-bg-primary-focused);outline-color:var(--ids-comp-breadcrumb-focused-outline-color-dark-focused)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:active{background:var(--ids-comp-breadcrumb-navigation-link-bg-primary-pressed)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:is([disabled]){color:var(--ids-comp-breadcrumb-navigation-link-fg-primary-disabled);background:var(--ids-comp-breadcrumb-navigation-link-bg-primary-disabled)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-page{color:var(--ids-comp-breadcrumb-current-page-fg-primary-default);background:var(--ids-comp-breadcrumb-current-page-bg-primary-default)}.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-divider-foreslash{color:var(--ids-comp-breadcrumb-divider-foreslash-fg-primary-default)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link{color:var(--ids-comp-breadcrumb-navigation-link-fg-light-default);background:var(--ids-comp-breadcrumb-navigation-link-bg-light-default)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:hover{color:var(--ids-comp-breadcrumb-navigation-link-fg-light-hovered);background:var(--ids-comp-breadcrumb-navigation-link-bg-light-hovered)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus-visible{color:var(--ids-comp-breadcrumb-navigation-link-fg-light-focused);background:var(--ids-comp-breadcrumb-navigation-link-bg-light-focused);outline-color:var(--ids-comp-breadcrumb-focused-outline-color-light-focused)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:active{background:var(--ids-comp-breadcrumb-navigation-link-bg-light-pressed)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:is([disabled]){color:var(--ids-comp-breadcrumb-navigation-link-fg-light-disabled);background:var(--ids-comp-breadcrumb-navigation-link-bg-light-disabled)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-page{color:var(--ids-comp-breadcrumb-current-page-fg-light-default);background:var(--ids-comp-breadcrumb-current-page-bg-light-default)}.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-divider-foreslash{color:var(--ids-comp-breadcrumb-divider-foreslash-fg-light-default)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link{color:var(--ids-comp-breadcrumb-navigation-link-fg-surface-default);background:var(--ids-comp-breadcrumb-navigation-link-bg-surface-default)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:hover{color:var(--ids-comp-breadcrumb-navigation-link-fg-surface-hovered);background:var(--ids-comp-breadcrumb-navigation-link-bg-surface-hovered)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus-visible{color:var(--ids-comp-breadcrumb-navigation-link-fg-surface-focused);background:var(--ids-comp-breadcrumb-navigation-link-bg-surface-focused);outline-color:var(--ids-comp-breadcrumb-focused-outline-color-dark-focused)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:active{background:var(--ids-comp-breadcrumb-navigation-link-bg-surface-pressed)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:is([disabled]){color:var(--ids-comp-breadcrumb-navigation-link-fg-surface-disabled);background:var(--ids-comp-breadcrumb-navigation-link-bg-surface-disabled)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-page{color:var(--ids-comp-breadcrumb-current-page-fg-surface-default);background:var(--ids-comp-breadcrumb-current-page-bg-surface-default)}.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-divider-foreslash{color:var(--ids-comp-breadcrumb-divider-foreslash-fg-surface-default)}

package/dist/breadcrumb/breadcrumb.plugin.js ADDED Viewed

@@ -0,0 +1,272 @@
+// Tailwind CSS plugin for the breadcrumb component in the i-Cell Design System
+module.exports = function BreadcrumbPlugin() {
+  return function ({ addComponents }) {
+    const cssObj = {
+      '*:has(ids-breadcrumb.ids-breadcrumb)': { width: '100%' },
+      '.ids-breadcrumb': {
+        boxSizing: 'border-box',
+        borderWidth: '0',
+        borderStyle: 'none',
+        borderColor: 'rgba(0,0,0,0)',
+        lineHeight: 1.5,
+        display: 'block',
+      },
+      '.ids-breadcrumb::before,.ids-breadcrumb::after,.ids-breadcrumb *,.ids-breadcrumb ::before,.ids-breadcrumb ::after': {
+        boxSizing: 'border-box',
+        borderWidth: '0',
+        borderStyle: 'none',
+        borderColor: 'rgba(0,0,0,0)',
+      },
+      '.ids-breadcrumb-divider': { display: 'flex', alignItems: 'center' },
+      '.ids-breadcrumb-link': { display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+      '.ids-breadcrumb-link:link,.ids-breadcrumb-link:visited': { textDecoration: 'none' },
+      '.ids-breadcrumb-link:focus,.ids-breadcrumb-link:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
+      '.ids-breadcrumb-link:active': { outlineStyle: 'none' },
+      '.ids-breadcrumb-link:not([disabled])': { cursor: 'pointer' },
+      '.ids-breadcrumb-link:is([disabled])': { cursor: 'not-allowed' },
+      '.ids-breadcrumb-page': { display: 'block', cursor: 'default' },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--ids-comp-breadcrumb-size-gap-compact)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-list.ids-overlay-panel': { alignItems: 'start' },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link': {
+        fontFamily: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-line-height-compact)',
+        padding:
+          'var(--ids-comp-breadcrumb-navigation-link-size-padding-y-compact) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-compact)',
+        maxWidth: 'var(--ids-comp-breadcrumb-navigation-link-size-max-width-compact)',
+        borderRadius: 'var(--ids-comp-breadcrumb-navigation-link-size-border-radius-compact)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-link:focus-visible':
+        { outlineWidth: 'var(--ids-comp-breadcrumb-focused-outline-size-outline-compact)' },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-page': {
+        fontFamily: 'var(--ids-comp-breadcrumb-current-page-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-breadcrumb-current-page-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-breadcrumb-current-page-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-breadcrumb-current-page-typography-line-height-compact)',
+        padding:
+          'var(--ids-comp-breadcrumb-current-page-size-padding-y-compact) var(--ids-comp-breadcrumb-current-page-size-padding-x-compact)',
+        maxWidth: 'var(--ids-comp-breadcrumb-current-page-size-max-width-compact)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-compact .ids-breadcrumb-divider-foreslash': {
+        fontFamily: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-compact)',
+        fontSize: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-compact)',
+        fontWeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-compact)',
+        lineHeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-compact)',
+        padding:
+          'var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-compact) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-compact)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--ids-comp-breadcrumb-size-gap-comfortable)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-list.ids-overlay-panel': { alignItems: 'start' },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link': {
+        fontFamily: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-line-height-comfortable)',
+        padding:
+          'var(--ids-comp-breadcrumb-navigation-link-size-padding-y-comfortable) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-comfortable)',
+        maxWidth: 'var(--ids-comp-breadcrumb-navigation-link-size-max-width-comfortable)',
+        borderRadius: 'var(--ids-comp-breadcrumb-navigation-link-size-border-radius-comfortable)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-link:focus-visible':
+        { outlineWidth: 'var(--ids-comp-breadcrumb-focused-outline-size-outline-comfortable)' },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-page': {
+        fontFamily: 'var(--ids-comp-breadcrumb-current-page-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-breadcrumb-current-page-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-breadcrumb-current-page-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-breadcrumb-current-page-typography-line-height-comfortable)',
+        padding:
+          'var(--ids-comp-breadcrumb-current-page-size-padding-y-comfortable) var(--ids-comp-breadcrumb-current-page-size-padding-x-comfortable)',
+        maxWidth: 'var(--ids-comp-breadcrumb-current-page-size-max-width-comfortable)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-comfortable .ids-breadcrumb-divider-foreslash': {
+        fontFamily: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-comfortable)',
+        fontSize: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-comfortable)',
+        fontWeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-comfortable)',
+        lineHeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-comfortable)',
+        padding:
+          'var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-comfortable) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-comfortable)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--ids-comp-breadcrumb-size-gap-spacious)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-list.ids-overlay-panel': { alignItems: 'start' },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link': {
+        fontFamily: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-line-height-spacious)',
+        padding:
+          'var(--ids-comp-breadcrumb-navigation-link-size-padding-y-spacious) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-spacious)',
+        maxWidth: 'var(--ids-comp-breadcrumb-navigation-link-size-max-width-spacious)',
+        borderRadius: 'var(--ids-comp-breadcrumb-navigation-link-size-border-radius-spacious)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-link:focus-visible':
+        { outlineWidth: 'var(--ids-comp-breadcrumb-focused-outline-size-outline-spacious)' },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-page': {
+        fontFamily: 'var(--ids-comp-breadcrumb-current-page-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-breadcrumb-current-page-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-breadcrumb-current-page-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-breadcrumb-current-page-typography-line-height-spacious)',
+        padding:
+          'var(--ids-comp-breadcrumb-current-page-size-padding-y-spacious) var(--ids-comp-breadcrumb-current-page-size-padding-x-spacious)',
+        maxWidth: 'var(--ids-comp-breadcrumb-current-page-size-max-width-spacious)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-spacious .ids-breadcrumb-divider-foreslash': {
+        fontFamily: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-spacious)',
+        fontSize: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-spacious)',
+        fontWeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-spacious)',
+        lineHeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-spacious)',
+        padding:
+          'var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-spacious) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-spacious)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--ids-comp-breadcrumb-size-gap-dense)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-list.ids-overlay-panel': { alignItems: 'start' },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link': {
+        fontFamily: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-navigation-link-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-breadcrumb-navigation-link-typography-line-height-dense)',
+        padding:
+          'var(--ids-comp-breadcrumb-navigation-link-size-padding-y-dense) var(--ids-comp-breadcrumb-navigation-link-size-padding-x-dense)',
+        maxWidth: 'var(--ids-comp-breadcrumb-navigation-link-size-max-width-dense)',
+        borderRadius: 'var(--ids-comp-breadcrumb-navigation-link-size-border-radius-dense)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-link:focus-visible':
+        { outlineWidth: 'var(--ids-comp-breadcrumb-focused-outline-size-outline-dense)' },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-page': {
+        fontFamily: 'var(--ids-comp-breadcrumb-current-page-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-breadcrumb-current-page-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-breadcrumb-current-page-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-current-page-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-breadcrumb-current-page-typography-line-height-dense)',
+        padding:
+          'var(--ids-comp-breadcrumb-current-page-size-padding-y-dense) var(--ids-comp-breadcrumb-current-page-size-padding-x-dense)',
+        maxWidth: 'var(--ids-comp-breadcrumb-current-page-size-max-width-dense)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-dense .ids-breadcrumb-divider-foreslash': {
+        fontFamily: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-family-dense)',
+        fontSize: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-size-dense)',
+        fontWeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-letter-spacing-dense)',
+        lineHeight: 'var(--ids-comp-breadcrumb-divider-foreslash-typography-line-height-dense)',
+        padding:
+          'var(--ids-comp-breadcrumb-divider-foreslash-size-padding-y-dense) var(--ids-comp-breadcrumb-divider-foreslash-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-breadcrumb-divider-foreslash-size-border-radius-dense)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-primary-default)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-primary-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:hover': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-primary-hovered)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-primary-hovered)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:focus-visible':
+        {
+          color: 'var(--ids-comp-breadcrumb-navigation-link-fg-primary-focused)',
+          background: 'var(--ids-comp-breadcrumb-navigation-link-bg-primary-focused)',
+          outlineColor: 'var(--ids-comp-breadcrumb-focused-outline-color-dark-focused)',
+        },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:active': {
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-primary-pressed)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-link:is([disabled])': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-primary-disabled)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-primary-disabled)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-page': {
+        color: 'var(--ids-comp-breadcrumb-current-page-fg-primary-default)',
+        background: 'var(--ids-comp-breadcrumb-current-page-bg-primary-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-primary .ids-breadcrumb-divider-foreslash': {
+        color: 'var(--ids-comp-breadcrumb-divider-foreslash-fg-primary-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-light-default)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-light-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:hover': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-light-hovered)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-light-hovered)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:focus-visible':
+        {
+          color: 'var(--ids-comp-breadcrumb-navigation-link-fg-light-focused)',
+          background: 'var(--ids-comp-breadcrumb-navigation-link-bg-light-focused)',
+          outlineColor: 'var(--ids-comp-breadcrumb-focused-outline-color-light-focused)',
+        },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:active': {
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-light-pressed)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-link:is([disabled])': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-light-disabled)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-light-disabled)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-page': {
+        color: 'var(--ids-comp-breadcrumb-current-page-fg-light-default)',
+        background: 'var(--ids-comp-breadcrumb-current-page-bg-light-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-light .ids-breadcrumb-divider-foreslash': {
+        color: 'var(--ids-comp-breadcrumb-divider-foreslash-fg-light-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-surface-default)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-surface-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:hover': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-surface-hovered)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-surface-hovered)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus,.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:focus-visible':
+        {
+          color: 'var(--ids-comp-breadcrumb-navigation-link-fg-surface-focused)',
+          background: 'var(--ids-comp-breadcrumb-navigation-link-bg-surface-focused)',
+          outlineColor: 'var(--ids-comp-breadcrumb-focused-outline-color-dark-focused)',
+        },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:active': {
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-surface-pressed)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-link:is([disabled])': {
+        color: 'var(--ids-comp-breadcrumb-navigation-link-fg-surface-disabled)',
+        background: 'var(--ids-comp-breadcrumb-navigation-link-bg-surface-disabled)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-page': {
+        color: 'var(--ids-comp-breadcrumb-current-page-fg-surface-default)',
+        background: 'var(--ids-comp-breadcrumb-current-page-bg-surface-default)',
+      },
+      '.ids-breadcrumb.ids-breadcrumb-surface .ids-breadcrumb-divider-foreslash': {
+        color: 'var(--ids-comp-breadcrumb-divider-foreslash-fg-surface-default)',
+      },
+    };
+    addComponents(cssObj);
+  };
+};