@i-cell/ids-styles 0.0.32 → 0.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components.css +167 -11
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +157 -11
  4. package/dist/menu-item/menu-item.css +167 -11
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +157 -11
  7. package/package.json +3 -3
package/dist/components.css CHANGED
@@ -7051,22 +7051,35 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7051
7051
  color: var(--ids-comp-icon-button-standard-color-fg-surface-disabled);
7052
7052
  }
7053
7053
 
7054
+ a.ids-menu-item:link, a.ids-menu-item:visited {
7055
+ text-decoration: none;
7056
+ }
7057
+
7054
7058
  .ids-menu-item {
7055
7059
  width: 100%;
7060
+ box-sizing: border-box;
7056
7061
  display: inline-flex;
7057
7062
  flex-shrink: 0;
7058
7063
  align-items: center;
7059
- justify-content: center;
7064
+ }
7065
+ .ids-menu-item.ids-menu-item-no-label {
7066
+ justify-content: space-between;
7060
7067
  }
7061
7068
  .ids-menu-item .ids-menu-item-label {
7062
7069
  overflow: hidden;
7063
7070
  text-overflow: ellipsis;
7064
7071
  font-style: normal;
7065
7072
  }
7066
- .ids-menu-item:not(:disabled) {
7073
+ .ids-menu-item .ids-menu-item-label--wrapper {
7074
+ display: flex;
7075
+ flex: 1 1 0;
7076
+ align-items: center;
7077
+ justify-content: flex-start;
7078
+ }
7079
+ .ids-menu-item:not(:is(:disabled, .ids-menu-item-disabled)) {
7067
7080
  cursor: pointer;
7068
7081
  }
7069
- .ids-menu-item:disabled {
7082
+ .ids-menu-item:is(:disabled, .ids-menu-item-disabled) {
7070
7083
  cursor: not-allowed;
7071
7084
  }
7072
7085
  .ids-menu-item.ids-menu-item-compact {
@@ -7095,9 +7108,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7095
7108
  .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover {
7096
7109
  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
7097
7110
  }
7098
- .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled {
7111
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7099
7112
  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
7100
7113
  }
7114
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light {
7115
+ border-style: solid;
7116
+ border-width: var(--ids-comp-menu-item-size-border-width-compact);
7117
+ border-color: var(--ids-comp-menu-item-text-color-border-light-default);
7118
+ }
7119
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:hover {
7120
+ border-color: var(--ids-comp-menu-item-text-color-border-light-hovered);
7121
+ }
7122
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7123
+ border-color: var(--ids-comp-menu-item-text-color-border-light-disabled);
7124
+ }
7101
7125
  .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface {
7102
7126
  border-style: solid;
7103
7127
  border-width: var(--ids-comp-menu-item-size-border-width-compact);
@@ -7106,9 +7130,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7106
7130
  .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover {
7107
7131
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
7108
7132
  }
7109
- .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled {
7133
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7110
7134
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
7111
7135
  }
7136
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light {
7137
+ border-style: solid;
7138
+ border-width: var(--ids-comp-menu-item-size-border-width-compact);
7139
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-default);
7140
+ }
7141
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:hover {
7142
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-hovered);
7143
+ }
7144
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7145
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-disabled);
7146
+ }
7112
7147
  .ids-menu-item.ids-menu-item-comfortable {
7113
7148
  gap: var(--ids-comp-menu-item-size-gap-comfortable);
7114
7149
  border-radius: var(--ids-comp-menu-item-size-border-radius-comfortable);
@@ -7135,9 +7170,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7135
7170
  .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover {
7136
7171
  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
7137
7172
  }
7138
- .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled {
7173
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7139
7174
  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
7140
7175
  }
7176
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light {
7177
+ border-style: solid;
7178
+ border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
7179
+ border-color: var(--ids-comp-menu-item-text-color-border-light-default);
7180
+ }
7181
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:hover {
7182
+ border-color: var(--ids-comp-menu-item-text-color-border-light-hovered);
7183
+ }
7184
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7185
+ border-color: var(--ids-comp-menu-item-text-color-border-light-disabled);
7186
+ }
7141
7187
  .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface {
7142
7188
  border-style: solid;
7143
7189
  border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
@@ -7146,9 +7192,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7146
7192
  .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover {
7147
7193
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
7148
7194
  }
7149
- .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled {
7195
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7150
7196
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
7151
7197
  }
7198
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light {
7199
+ border-style: solid;
7200
+ border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
7201
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-default);
7202
+ }
7203
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:hover {
7204
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-hovered);
7205
+ }
7206
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7207
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-disabled);
7208
+ }
7152
7209
  .ids-menu-item.ids-menu-item-spacious {
7153
7210
  gap: var(--ids-comp-menu-item-size-gap-spacious);
7154
7211
  border-radius: var(--ids-comp-menu-item-size-border-radius-spacious);
@@ -7175,9 +7232,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7175
7232
  .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover {
7176
7233
  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
7177
7234
  }
7178
- .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled {
7235
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7179
7236
  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
7180
7237
  }
7238
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light {
7239
+ border-style: solid;
7240
+ border-width: var(--ids-comp-menu-item-size-border-width-spacious);
7241
+ border-color: var(--ids-comp-menu-item-text-color-border-light-default);
7242
+ }
7243
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:hover {
7244
+ border-color: var(--ids-comp-menu-item-text-color-border-light-hovered);
7245
+ }
7246
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7247
+ border-color: var(--ids-comp-menu-item-text-color-border-light-disabled);
7248
+ }
7181
7249
  .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface {
7182
7250
  border-style: solid;
7183
7251
  border-width: var(--ids-comp-menu-item-size-border-width-spacious);
@@ -7186,9 +7254,20 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7186
7254
  .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover {
7187
7255
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
7188
7256
  }
7189
- .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled {
7257
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7190
7258
  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
7191
7259
  }
7260
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light {
7261
+ border-style: solid;
7262
+ border-width: var(--ids-comp-menu-item-size-border-width-spacious);
7263
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-default);
7264
+ }
7265
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:hover {
7266
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-hovered);
7267
+ }
7268
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7269
+ border-color: var(--ids-comp-menu-item-filled-color-border-light-disabled);
7270
+ }
7192
7271
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
7193
7272
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
7194
7273
  background: var(--ids-comp-menu-item-text-color-bg-surface-default);
@@ -7208,10 +7287,33 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7208
7287
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
7209
7288
  background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
7210
7289
  }
7211
- .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled {
7290
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7212
7291
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
7213
7292
  background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
7214
7293
  }
7294
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
7295
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
7296
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
7297
+ }
7298
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
7299
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
7300
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
7301
+ }
7302
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
7303
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
7304
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
7305
+ }
7306
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
7307
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
7308
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
7309
+ }
7310
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
7311
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
7312
+ }
7313
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7314
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
7315
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
7316
+ }
7215
7317
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
7216
7318
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
7217
7319
  background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
@@ -7231,10 +7333,64 @@ button.ids-chip.ids-chip-outlined.ids-chip-dark:not(:disabled):active > .ids-chi
7231
7333
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
7232
7334
  background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
7233
7335
  }
7234
- .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled {
7336
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
7235
7337
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
7236
7338
  background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
7237
7339
  }
7340
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
7341
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
7342
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
7343
+ }
7344
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
7345
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
7346
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
7347
+ }
7348
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
7349
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
7350
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
7351
+ }
7352
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
7353
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
7354
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
7355
+ }
7356
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
7357
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
7358
+ }
7359
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
7360
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
7361
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
7362
+ }
7363
+
7364
+ .ids-active-indicator {
7365
+ display: flex;
7366
+ flex-direction: column;
7367
+ justify-content: center;
7368
+ position: relative;
7369
+ }
7370
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item)::after {
7371
+ content: "";
7372
+ position: absolute;
7373
+ width: 100%;
7374
+ bottom: 0;
7375
+ }
7376
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-compact)::after {
7377
+ height: var(--ids-comp-menu-item-active-indicator-size-height-compact);
7378
+ border-radius: var(--ids-comp-menu-item-active-indicator-size-border-radius-compact);
7379
+ }
7380
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-comfortable)::after {
7381
+ height: var(--ids-comp-menu-item-active-indicator-size-height-comfortable);
7382
+ border-radius: var(--ids-comp-menu-item-active-indicator-size-border-radius-comfortable);
7383
+ }
7384
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-spacious)::after {
7385
+ height: var(--ids-comp-menu-item-active-indicator-size-height-spacious);
7386
+ border-radius: var(--ids-comp-menu-item-active-indicator-size-border-radius-spacious);
7387
+ }
7388
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-surface)::after {
7389
+ background-color: var(--ids-comp-menu-item-active-indicator-color-bg-surface-default);
7390
+ }
7391
+ .ids-active-indicator.ids-active-indicator--active:has(.ids-menu-item.ids-menu-item-light)::after {
7392
+ background-color: var(--ids-comp-menu-item-active-indicator-color-bg-light-default);
7393
+ }
7238
7394
 
7239
7395
  .ids-notification > .ids-notification__content-wrapper {
7240
7396
  display: flex;