@i-cell/ids-styles 0.0.15-beta.9 → 0.0.15

package/dist/overlay-panel/overlay-panel.css

@@ -0,0 +1,125 @@
+.ids-overlay-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+.ids-overlay-panel.ids-overlay-panel-compact {
+  gap: var(--ids-comp-overlay-panel-size-gap-compact);
+  padding: var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);
+  border-radius: var(--ids-comp-overlay-panel-size-border-radius-compact);
+}
+.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-compact);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-compact);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-compact);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-comfortable {
+  gap: var(--ids-comp-overlay-panel-size-gap-comfortable);
+  padding: var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);
+  border-radius: var(--ids-comp-overlay-panel-size-border-radius-comfortable);
+}
+.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-comfortable);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-comfortable);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-comfortable);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-spacious {
+  gap: var(--ids-comp-overlay-panel-size-gap-spacious);
+  padding: var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);
+  border-radius: var(--ids-comp-overlay-panel-size-border-radius-spacious);
+}
+.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-spacious);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-spacious);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-spacious);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-dense {
+  gap: var(--ids-comp-overlay-panel-size-gap-dense);
+  padding: var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);
+  border-radius: var(--ids-comp-overlay-panel-size-border-radius-dense);
+}
+.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-dense);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-dense);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined {
+  border-width: var(--ids-comp-overlay-panel-size-border-dense);
+  border-style: solid;
+}
+.ids-overlay-panel.ids-overlay-panel-filled {
+  box-shadow: none;
+}
+.ids-overlay-panel.ids-overlay-panel-outlined {
+  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter);
+}
+.ids-overlay-panel.ids-overlay-panel-elevated {
+  box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default);
+}
+.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light {
+  background: var(--ids-comp-overlay-panel-filled-color-bg-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-filled-color-border-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface {
+  background: var(--ids-comp-overlay-panel-filled-color-bg-surface-default);
+}
+.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-filled-color-border-surface-default);
+}
+.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light {
+  background: var(--ids-comp-overlay-panel-outlined-color-bg-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-outlined-color-border-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface {
+  background: var(--ids-comp-overlay-panel-outlined-color-bg-surface-default);
+}
+.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-outlined-color-border-surface-default);
+}
+.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light {
+  background: var(--ids-comp-overlay-panel-elevated-color-bg-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-elevated-color-border-light-default);
+}
+.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface {
+  background: var(--ids-comp-overlay-panel-elevated-color-bg-surface-default);
+}
+.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined {
+  border-color: var(--ids-comp-overlay-panel-elevated-color-border-surface-default);
+}
+.ids-overlay-panel button:hover {
+  border-color: transparent;
+}
+.ids-overlay-panel button:focus, .ids-overlay-panel button:focus-visible {
+  outline-style: none !important;
+}

package/dist/overlay-panel/overlay-panel.min.css

@@ -0,0 +1 @@
+.ids-overlay-panel{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-overlay-panel.ids-overlay-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-compact);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-comfortable);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-spacious);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined{border-width:var(--ids-comp-overlay-panel-size-border-dense);border-style:solid}.ids-overlay-panel.ids-overlay-panel-filled{box-shadow:none}.ids-overlay-panel.ids-overlay-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-overlay-panel.ids-overlay-panel-elevated{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-filled-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-filled-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-outlined-color-border-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface{background:var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)}.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined{border-color:var(--ids-comp-overlay-panel-elevated-color-border-surface-default)}.ids-overlay-panel button:hover{border-color:rgba(0,0,0,0)}.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible{outline-style:none !important}

package/dist/overlay-panel/overlay-panel.plugin.js

@@ -0,0 +1,125 @@
+// Tailwind CSS plugin for the overlay-panel component in the i-Cell Design System
+module.exports = function OverlayPanelPlugin() {
+  return function ({ addComponents }) {
+    const cssObj = {
+      '.ids-overlay-panel': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', boxSizing: 'border-box' },
+      '.ids-overlay-panel.ids-overlay-panel-compact': {
+        gap: 'var(--ids-comp-overlay-panel-size-gap-compact)',
+        padding: 'var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact)',
+        borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-compact)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-filled.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-compact)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-outlined.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-compact)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-compact.ids-overlay-panel-elevated.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-compact)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-comfortable': {
+        gap: 'var(--ids-comp-overlay-panel-size-gap-comfortable)',
+        padding: 'var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable)',
+        borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-comfortable)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-filled.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-comfortable)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-outlined.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-comfortable)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-comfortable.ids-overlay-panel-elevated.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-comfortable)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-spacious': {
+        gap: 'var(--ids-comp-overlay-panel-size-gap-spacious)',
+        padding: 'var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious)',
+        borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-spacious)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-filled.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-spacious)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-outlined.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-spacious)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-spacious.ids-overlay-panel-elevated.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-spacious)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-dense': {
+        gap: 'var(--ids-comp-overlay-panel-size-gap-dense)',
+        padding: 'var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense)',
+        borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-dense)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-filled.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-dense)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-outlined.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-dense)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-dense.ids-overlay-panel-elevated.ids-overlay-panel-outlined': {
+        borderWidth: 'var(--ids-comp-overlay-panel-size-border-dense)',
+        borderStyle: 'solid',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-filled': { boxShadow: 'none' },
+      '.ids-overlay-panel.ids-overlay-panel-outlined': {
+        boxShadow:
+          'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-elevated': {
+        boxShadow:
+          'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light': {
+        background: 'var(--ids-comp-overlay-panel-filled-color-bg-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-light.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-filled-color-border-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface': {
+        background: 'var(--ids-comp-overlay-panel-filled-color-bg-surface-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-filled.ids-overlay-panel-surface.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-filled-color-border-surface-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light': {
+        background: 'var(--ids-comp-overlay-panel-outlined-color-bg-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-light.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-outlined-color-border-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface': {
+        background: 'var(--ids-comp-overlay-panel-outlined-color-bg-surface-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-outlined.ids-overlay-panel-surface.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-outlined-color-border-surface-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light': {
+        background: 'var(--ids-comp-overlay-panel-elevated-color-bg-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-light.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-light-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface': {
+        background: 'var(--ids-comp-overlay-panel-elevated-color-bg-surface-default)',
+      },
+      '.ids-overlay-panel.ids-overlay-panel-elevated.ids-overlay-panel-surface.ids-overlay-panel-outlined': {
+        borderColor: 'var(--ids-comp-overlay-panel-elevated-color-border-surface-default)',
+      },
+      '.ids-overlay-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
+      '.ids-overlay-panel button:focus,.ids-overlay-panel button:focus-visible': { outlineStyle: 'none !important' },
+    };
+
+    addComponents(cssObj);
+  };
+};

package/dist/paginator/paginator.css

@@ -28,10 +28,9 @@
   font-style: normal;
   border-style: none;
 }
-.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus {
-  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline);
-  outline-style: solid;
+.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
   outline-offset: 2px;
+  outline-style: solid;
 }
 .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:not(:disabled) {
   cursor: pointer;
@@ -45,6 +44,13 @@
 .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last {
   order: 3;
 }
+.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-truncation:disabled {
+  cursor: default;
+}
+.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow > .ids-icon,
+.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-truncation > .ids-icon {
+  color: inherit;
+}
 .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
   order: 2;
 }
@@ -72,6 +78,9 @@
   line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-compact);
   border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact);
 }
+.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
+  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline-compact);
+}
 .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
   gap: var(--ids-comp-paginator-page-links-size-gap-compact);
 }
@@ -83,7 +92,15 @@
 }
 .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
   height: var(--ids-comp-paginator-page-links-size-height-compact);
-  width: var(--ids-comp-paginator-page-links-size-min-width-compact);
+  min-width: var(--ids-comp-paginator-page-links-size-min-width-compact);
+}
+.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow > .ids-icon,
+.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation > .ids-icon {
+  width: var(--ids-comp-paginator-page-links-size-icon-compact);
+  height: var(--ids-comp-paginator-page-links-size-icon-compact);
+  font-size: var(--ids-comp-paginator-page-links-icon-typography-font-size-compact);
+  font-weight: var(--ids-comp-paginator-page-links-icon-typography-font-weight-compact);
+  line-height: var(--ids-comp-paginator-page-links-icon-typography-line-height-compact);
 }
 .ids-paginator.ids-paginator-compact .ids-paginator__help-text {
   font-family: var(--ids-comp-paginator-help-text-label-typography-font-family-compact);
@@ -109,6 +126,9 @@
   line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);
   border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable);
 }
+.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
+  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline-comfortable);
+}
 .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
   gap: var(--ids-comp-paginator-page-links-size-gap-comfortable);
 }
@@ -120,7 +140,15 @@
 }
 .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
   height: var(--ids-comp-paginator-page-links-size-height-comfortable);
-  width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
+  min-width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
+}
+.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow > .ids-icon,
+.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation > .ids-icon {
+  width: var(--ids-comp-paginator-page-links-size-icon-comfortable);
+  height: var(--ids-comp-paginator-page-links-size-icon-comfortable);
+  font-size: var(--ids-comp-paginator-page-links-icon-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-paginator-page-links-icon-typography-font-weight-comfortable);
+  line-height: var(--ids-comp-paginator-page-links-icon-typography-line-height-comfortable);
 }
 .ids-paginator.ids-paginator-comfortable .ids-paginator__help-text {
   font-family: var(--ids-comp-paginator-help-text-label-typography-font-family-comfortable);
@@ -146,6 +174,9 @@
   line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);
   border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious);
 }
+.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
+  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline-spacious);
+}
 .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
   gap: var(--ids-comp-paginator-page-links-size-gap-spacious);
 }
@@ -157,7 +188,15 @@
 }
 .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
   height: var(--ids-comp-paginator-page-links-size-height-spacious);
-  width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
+  min-width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
+}
+.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow > .ids-icon,
+.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation > .ids-icon {
+  width: var(--ids-comp-paginator-page-links-size-icon-spacious);
+  height: var(--ids-comp-paginator-page-links-size-icon-spacious);
+  font-size: var(--ids-comp-paginator-page-links-icon-typography-font-size-spacious);
+  font-weight: var(--ids-comp-paginator-page-links-icon-typography-font-weight-spacious);
+  line-height: var(--ids-comp-paginator-page-links-icon-typography-line-height-spacious);
 }
 .ids-paginator.ids-paginator-spacious .ids-paginator__help-text {
   font-family: var(--ids-comp-paginator-help-text-label-typography-font-family-spacious);
@@ -183,6 +222,9 @@
   line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-dense);
   border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense);
 }
+.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
+  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline-dense);
+}
 .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
   gap: var(--ids-comp-paginator-page-links-size-gap-dense);
 }
@@ -194,7 +236,15 @@
 }
 .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
   height: var(--ids-comp-paginator-page-links-size-height-dense);
-  width: var(--ids-comp-paginator-page-links-size-min-width-dense);
+  min-width: var(--ids-comp-paginator-page-links-size-min-width-dense);
+}
+.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow > .ids-icon,
+.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation > .ids-icon {
+  width: var(--ids-comp-paginator-page-links-size-icon-dense);
+  height: var(--ids-comp-paginator-page-links-size-icon-dense);
+  font-size: var(--ids-comp-paginator-page-links-icon-typography-font-size-dense);
+  font-weight: var(--ids-comp-paginator-page-links-icon-typography-font-weight-dense);
+  line-height: var(--ids-comp-paginator-page-links-icon-typography-line-height-dense);
 }
 .ids-paginator.ids-paginator-dense .ids-paginator__help-text {
   font-family: var(--ids-comp-paginator-help-text-label-typography-font-family-dense);
@@ -206,7 +256,7 @@
   height: var(--ids-comp-paginator-help-text-size-height-dense);
   padding: var(--ids-comp-paginator-help-text-size-padding-y-dense);
 }
-.ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus {
+.ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus-visible {
   outline-color: var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
@@ -217,7 +267,7 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-active);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active);
 }
-.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus {
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
   background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused);
 }
@@ -233,16 +283,31 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled);
 }
-.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled) {
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+}
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+}
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+}
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+}
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
 }
-.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
+}
+.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled);
 }
 .ids-paginator.ids-paginator-primary .ids-paginator__help-text {
   color: var(--ids-comp-paginator-help-text-color-fg-primary-default);
 }
-.ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus {
+.ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus-visible {
   outline-color: var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
@@ -253,7 +318,7 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active);
 }
-.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus {
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
   background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused);
 }
@@ -269,16 +334,31 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled);
 }
-.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled) {
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+}
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
 }
-.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+}
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+}
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+}
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
+}
+.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled);
 }
 .ids-paginator.ids-paginator-secondary .ids-paginator__help-text {
   color: var(--ids-comp-paginator-help-text-color-fg-secondary-default);
 }
-.ids-paginator.ids-paginator-light .ids-paginator__page-button:focus {
+.ids-paginator.ids-paginator-light .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-light .ids-paginator__page-button:focus-visible {
   outline-color: var(--ids-comp-paginator-page-links-focused-outline-color-light-focused);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
@@ -289,7 +369,7 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-light-active);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active);
 }
-.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus {
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
   background: var(--ids-comp-paginator-page-links-plain-color-bg-light-focused);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused);
 }
@@ -305,16 +385,31 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled);
 }
-.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled) {
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+}
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+}
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+}
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
 }
-.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+}
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
+}
+.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled);
 }
 .ids-paginator.ids-paginator-light .ids-paginator__help-text {
   color: var(--ids-comp-paginator-help-text-color-fg-light-default);
 }
-.ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus {
+.ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus, .ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus-visible {
   outline-color: var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
@@ -325,7 +420,7 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-active);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active);
 }
-.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus {
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
   background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused);
 }
@@ -341,10 +436,25 @@
   background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled);
   color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled);
 }
-.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled) {
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+}
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow.active:not(:disabled) {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+}
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:focus-visible {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+}
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:hover {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+}
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:active {
+  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
+}
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:disabled {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);
 }
-.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
+.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-truncation {
   color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled);
 }
 .ids-paginator.ids-paginator-surface .ids-paginator__help-text {