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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-cell/ids-styles",
-  "version": "0.0.15-beta.9",
+  "version": "0.0.16",
   "private": false,
   "description": "Stylesheets for i-Cell Design System UI Kit components (currently Vue and Angular)",
   "scripts": {
@@ -8,9 +8,9 @@
     "watch": "gulp watch",
     "prepack": "npm run build",
     "prepublish": "npm run build",
-    "check-missing-tokens": "npm run build && node scripts/check-missing-tokens.mjs ./dist ./node_modules/@i-cell/ids-tokens/css/tokens.css",
+    "check-missing-tokens": "npm run build && node scripts/check-missing-tokens.mjs ./dist",
     "check-missing-tokens:prepare": "pnpm i",
-    "check-missing-tokens:ci": "node scripts/check-missing-tokens.mjs ./dist ./node_modules/@i-cell/ids-tokens/css/tokens.css --limit=10"
+    "check-missing-tokens:ci": "node scripts/check-missing-tokens.mjs ./dist --limit=10"
   },
   "files": [
     "dist"
@@ -35,7 +35,7 @@
   },
   "homepage": "https://github.com/i-Cell-Mobilsoft-Open-Source/ids-styles#readme",
   "devDependencies": {
-    "@i-cell/ids-tokens": "0.0.24-beta.5",
+    "@i-cell/ids-tokens": "0.0.25-beta.8",
     "commander": "^12.1.0",
     "gulp": "^5.0.0",
     "gulp-prettier": "^6.0.0",

package/dist/action-item/action-item.css

@@ -1,185 +0,0 @@
-.ids-action-item {
-  width: 100%;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-.ids-action-item .ids-action-item-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-style: normal;
-}
-.ids-action-item:not(:disabled) {
-  cursor: pointer;
-}
-.ids-action-item:disabled {
-  cursor: not-allowed;
-}
-.ids-action-item *[icon-leading],
-.ids-action-item *[icon-trailing] {
-  gap: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ids-action-item.ids-action-item-compact {
-  gap: var(--ids-comp-action-item-size-gap-compact);
-  border-radius: var(--ids-comp-action-item-size-border-radius-compact);
-  padding: var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);
-  height: var(--ids-comp-action-item-size-height-compact);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-compact);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-compact);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-compact);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-compact);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-compact);
-}
-.ids-action-item.ids-action-item-compact *[icon-leading],
-.ids-action-item.ids-action-item-compact *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-compact);
-  height: var(--ids-comp-action-item-size-icon-compact);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-compact);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-compact);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-comfortable {
-  gap: var(--ids-comp-action-item-size-gap-comfortable);
-  border-radius: var(--ids-comp-action-item-size-border-radius-comfortable);
-  padding: var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);
-  height: var(--ids-comp-action-item-size-height-comfortable);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-comfortable);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-comfortable);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-comfortable);
-}
-.ids-action-item.ids-action-item-comfortable *[icon-leading],
-.ids-action-item.ids-action-item-comfortable *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-comfortable);
-  height: var(--ids-comp-action-item-size-icon-comfortable);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-comfortable);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-comfortable);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-spacious {
-  gap: var(--ids-comp-action-item-size-gap-spacious);
-  border-radius: var(--ids-comp-action-item-size-border-radius-spacious);
-  padding: var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);
-  height: var(--ids-comp-action-item-size-height-spacious);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-spacious);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-spacious);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-spacious);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-spacious);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-spacious);
-}
-.ids-action-item.ids-action-item-spacious *[icon-leading],
-.ids-action-item.ids-action-item-spacious *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-spacious);
-  height: var(--ids-comp-action-item-size-icon-spacious);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-spacious);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-spacious);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-default);
-  background: var(--ids-comp-action-item-text-color-bg-surface-default);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-active);
-  background: var(--ids-comp-action-item-text-color-bg-surface-active);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:hover {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-hovered);
-  background: var(--ids-comp-action-item-text-color-bg-surface-hovered);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:focus {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-focused);
-  background: var(--ids-comp-action-item-text-color-bg-surface-focused);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:active {
-  background: var(--ids-comp-action-item-text-color-bg-surface-pressed);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-disabled);
-  background: var(--ids-comp-action-item-text-color-bg-surface-disabled);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-default);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-default);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-active);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-active);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-hovered);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-focused);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-focused);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:active {
-  background: var(--ids-comp-action-item-filled-color-bg-surface-pressed);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-disabled);
-}

package/dist/action-item/action-item.min.css

@@ -1 +0,0 @@
-.ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item:not(:disabled){cursor:pointer}.ids-action-item:disabled{cursor:not-allowed}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-action-item-size-gap-compact);border-radius:var(--ids-comp-action-item-size-border-radius-compact);padding:var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);height:var(--ids-comp-action-item-size-height-compact);font-family:var(--ids-comp-action-item-label-typography-font-family-compact);font-size:var(--ids-comp-action-item-label-typography-font-size-compact);font-weight:var(--ids-comp-action-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-action-item-label-typography-line-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-compact);height:var(--ids-comp-action-item-size-icon-compact)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-action-item-size-gap-comfortable);border-radius:var(--ids-comp-action-item-size-border-radius-comfortable);padding:var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);height:var(--ids-comp-action-item-size-height-comfortable);font-family:var(--ids-comp-action-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-action-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-action-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-action-item-label-typography-line-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-comfortable);height:var(--ids-comp-action-item-size-icon-comfortable)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-action-item-size-gap-spacious);border-radius:var(--ids-comp-action-item-size-border-radius-spacious);padding:var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);height:var(--ids-comp-action-item-size-height-spacious);font-family:var(--ids-comp-action-item-label-typography-font-family-spacious);font-size:var(--ids-comp-action-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-action-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-action-item-label-typography-line-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-spacious);height:var(--ids-comp-action-item-size-icon-spacious)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-default);background:var(--ids-comp-action-item-text-color-bg-surface-default)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-default);background:var(--ids-comp-action-item-filled-color-bg-surface-default)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}

package/dist/action-item/action-item.plugin.js

@@ -1,176 +0,0 @@
-// Tailwind CSS plugin for the action-item component in the i-Cell Design System
-module.exports = function ActionItemPlugin() {
-  return function ({ addComponents }) {
-    const cssObj = {
-      '.ids-action-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
-      '.ids-action-item .ids-action-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
-      '.ids-action-item:not(:disabled)': { cursor: 'pointer' },
-      '.ids-action-item:disabled': { cursor: 'not-allowed' },
-      '.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]': {
-        gap: '10px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      '.ids-action-item.ids-action-item-compact': {
-        gap: 'var(--ids-comp-action-item-size-gap-compact)',
-        borderRadius: 'var(--ids-comp-action-item-size-border-radius-compact)',
-        padding: 'var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact)',
-        height: 'var(--ids-comp-action-item-size-height-compact)',
-        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-compact)',
-        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-compact)',
-        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-compact)',
-        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-compact)',
-        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-compact)',
-      },
-      '.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]': {
-        width: 'var(--ids-comp-action-item-size-icon-compact)',
-        height: 'var(--ids-comp-action-item-size-icon-compact)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-compact)',
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-comfortable': {
-        gap: 'var(--ids-comp-action-item-size-gap-comfortable)',
-        borderRadius: 'var(--ids-comp-action-item-size-border-radius-comfortable)',
-        padding: 'var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable)',
-        height: 'var(--ids-comp-action-item-size-height-comfortable)',
-        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-comfortable)',
-        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-comfortable)',
-        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-comfortable)',
-        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-comfortable)',
-        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-comfortable)',
-      },
-      '.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]': {
-        width: 'var(--ids-comp-action-item-size-icon-comfortable)',
-        height: 'var(--ids-comp-action-item-size-icon-comfortable)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-comfortable)',
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-spacious': {
-        gap: 'var(--ids-comp-action-item-size-gap-spacious)',
-        borderRadius: 'var(--ids-comp-action-item-size-border-radius-spacious)',
-        padding: 'var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious)',
-        height: 'var(--ids-comp-action-item-size-height-spacious)',
-        fontFamily: 'var(--ids-comp-action-item-label-typography-font-family-spacious)',
-        fontSize: 'var(--ids-comp-action-item-label-typography-font-size-spacious)',
-        fontWeight: 'var(--ids-comp-action-item-label-typography-font-weight-spacious)',
-        letterSpacing: 'var(--ids-comp-action-item-label-typography-letter-spacing-spacious)',
-        lineHeight: 'var(--ids-comp-action-item-label-typography-line-height-spacious)',
-      },
-      '.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]': {
-        width: 'var(--ids-comp-action-item-size-icon-spacious)',
-        height: 'var(--ids-comp-action-item-size-icon-spacious)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-text-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface': {
-        borderStyle: 'solid',
-        borderWidth: 'var(--ids-comp-action-item-size-border-width-spacious)',
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled': {
-        borderColor: 'var(--ids-comp-action-item-filled-color-border-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface': {
-        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active': {
-        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-active)',
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-active)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface:hover': {
-        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-hovered)',
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface:focus': {
-        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-focused)',
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-focused)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface:active': {
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-pressed)',
-      },
-      '.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled': {
-        color: 'var(--ids-comp-action-item-text-color-fg-label-surface-disabled)',
-        background: 'var(--ids-comp-action-item-text-color-bg-surface-disabled)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface': {
-        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-default)',
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-default)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active': {
-        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-active)',
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-active)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover': {
-        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-hovered)',
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-hovered)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus': {
-        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-focused)',
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-focused)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:active': {
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-pressed)',
-      },
-      '.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled': {
-        color: 'var(--ids-comp-action-item-filled-color-fg-label-surface-disabled)',
-        background: 'var(--ids-comp-action-item-filled-color-bg-surface-disabled)',
-      },
-    };
-
-    addComponents(cssObj);
-  };
-};

package/dist/action-panel/action-panel.css

@@ -1,91 +0,0 @@
-.ids-action-panel {
-  display: flex;
-  width: 22.25rem;
-  flex-direction: column;
-  align-items: flex-start;
-  box-sizing: border-box;
-}
-.ids-action-panel.ids-action-panel-compact {
-  gap: var(--ids-comp-action-panel-size-gap-compact);
-  padding: var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact);
-  border-radius: var(--ids-comp-action-panel-size-border-radius-compact);
-}
-.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-comfortable {
-  gap: var(--ids-comp-action-panel-size-gap-comfortable);
-  padding: var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable);
-  border-radius: var(--ids-comp-action-panel-size-border-radius-comfortable);
-}
-.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-spacious {
-  gap: var(--ids-comp-action-panel-size-gap-spacious);
-  padding: var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious);
-  border-radius: var(--ids-comp-action-panel-size-border-radius-spacious);
-}
-.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-dense {
-  gap: var(--ids-comp-action-panel-size-gap-dense);
-  padding: var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense);
-  border-radius: var(--ids-comp-action-panel-size-border-radius-dense);
-}
-.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined {
-  border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
-}
-.ids-action-panel.ids-action-panel-filled {
-  box-shadow: none;
-}
-.ids-action-panel.ids-action-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-action-panel.ids-action-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-action-panel.ids-action-panel-filled {
-  background: var(--ids-comp-action-panel-filled-color-bg-light-default);
-}
-.ids-action-panel.ids-action-panel-outlined {
-  background: var(--ids-comp-action-panel-outlined-color-bg-light-default);
-}
-.ids-action-panel.ids-action-panel-elevated {
-  background: var(--ids-comp-action-panel-elevated-color-bg-light-default);
-}
-.ids-action-panel button:hover {
-  border-color: transparent;
-}
-.ids-action-panel button:focus {
-  outline: none !important;
-}
-
-.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel) {
-  @apply py-3;
-}

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

@@ -1 +0,0 @@
-.ids-action-panel{display:flex;width:22.25rem;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-action-panel.ids-action-panel-compact{gap:var(--ids-comp-action-panel-size-gap-compact);padding:var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact);border-radius:var(--ids-comp-action-panel-size-border-radius-compact)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable{gap:var(--ids-comp-action-panel-size-gap-comfortable);padding:var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-action-panel-size-border-radius-comfortable)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious{gap:var(--ids-comp-action-panel-size-gap-spacious);padding:var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious);border-radius:var(--ids-comp-action-panel-size-border-radius-spacious)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-dense{gap:var(--ids-comp-action-panel-size-gap-dense);padding:var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense);border-radius:var(--ids-comp-action-panel-size-border-radius-dense)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-filled{box-shadow:none}.ids-action-panel.ids-action-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-action-panel.ids-action-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-action-panel.ids-action-panel-filled{background:var(--ids-comp-action-panel-filled-color-bg-light-default)}.ids-action-panel.ids-action-panel-outlined{background:var(--ids-comp-action-panel-outlined-color-bg-light-default)}.ids-action-panel.ids-action-panel-elevated{background:var(--ids-comp-action-panel-elevated-color-bg-light-default)}.ids-action-panel button:hover{border-color:rgba(0,0,0,0)}.ids-action-panel button:focus{outline:none !important}.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel){@apply py-3}

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

@@ -1,91 +0,0 @@
-// Tailwind CSS plugin for the action-panel component in the i-Cell Design System
-module.exports = function ActionPanelPlugin() {
-  return function ({ addComponents }) {
-    const cssObj = {
-      '.ids-action-panel': {
-        display: 'flex',
-        width: '22.25rem',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        boxSizing: 'border-box',
-      },
-      '.ids-action-panel.ids-action-panel-compact': {
-        gap: 'var(--ids-comp-action-panel-size-gap-compact)',
-        padding: 'var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact)',
-        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-compact)',
-      },
-      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-comfortable': {
-        gap: 'var(--ids-comp-action-panel-size-gap-comfortable)',
-        padding: 'var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable)',
-        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-comfortable)',
-      },
-      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
-        border:
-          'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
-        border:
-          'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-spacious': {
-        gap: 'var(--ids-comp-action-panel-size-gap-spacious)',
-        padding: 'var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious)',
-        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-spacious)',
-      },
-      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-dense': {
-        gap: 'var(--ids-comp-action-panel-size-gap-dense)',
-        padding: 'var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense)',
-        borderRadius: 'var(--ids-comp-action-panel-size-border-radius-dense)',
-      },
-      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
-        border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
-      },
-      '.ids-action-panel.ids-action-panel-filled': {
-        boxShadow: 'none',
-        background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
-      },
-      '.ids-action-panel.ids-action-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)',
-        background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
-      },
-      '.ids-action-panel.ids-action-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)',
-        background: 'var(--ids-comp-action-panel-elevated-color-bg-light-default)',
-      },
-      '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
-      '.ids-action-panel button:focus': { outline: 'none !important' },
-      '.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel)': { '@apply py-3': true },
-    };
-
-    addComponents(cssObj);
-  };
-};