@siemens/ix 1.5.0 → 1.6.0

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
+import '@siemens/ix-icons';
+import type { Components as IxIconsComponents, JSX as IxIconsJSX } from '@siemens/ix-icons';
 export * from './components';
 export * from './components/category-filter/filter-state';
 export * from './components/category-filter/input-state';
@@ -11,3 +13,13 @@ export * from './components/upload/upload-file-state';
 export { NotificationColor } from './components/utils/notification-color';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
 export * from './components/utils/theme-switcher';
+declare module './components' {
+  namespace Components {
+    type IxIcon = IxIconsComponents.IxIcon;
+  }
+}
+declare module './components' {
+  namespace JSX {
+    type IxIcon = IxIconsJSX.IxIcon;
+  }
+}

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.32.1",
-    "@siemens/ix-icons": "~1.0.0",
+    "@siemens/ix-icons": "^1.1.0",
     "@stencil/vue-output-target": "^0.7.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil-community/postcss": "^2.1.0",

package/scss/components/_buttons.scss

@@ -26,9 +26,6 @@
 
   .glyph {
     margin-right: $tiny-space;
-  }
-
-  .glyph {
     font-weight: $font-weight-normal;
   }
 
@@ -42,9 +39,7 @@ $button-categories: (primary, secondary);
 
 @mixin btn($name, $enable-border: true) {
   .btn-#{$name} {
-    & {
-      border-radius: var(--theme-btn--border-radius);
-    }
+    border-radius: var(--theme-btn--border-radius);
 
     @if $enable-border == false {
       --bs-btn-border-width: 0px;
@@ -61,6 +56,8 @@ $button-categories: (primary, secondary);
         border-width: var(--theme-btn--border-thickness);
         border-color: var(--theme-btn-#{$name}--border-color);
         border-style: solid;
+      } @else {
+        border-color: transparent;
       }
     }
 

package/scss/components/_forms.scss

@@ -34,18 +34,20 @@
     color: var(--theme-input-hint--color);
   }
 
-  @include hover {
-    background-color: var(--theme-input--background--hover);
-    border-color: var(--theme-input--border-color--hover);
-    cursor: auto;
-  }
-
-  @include focus-visible {
-    background-color: var(--theme-input--background--focus);
-    border-color: var(--theme-input--border-color--focus);
-    outline-offset: var(--theme-input--focus--outline-offset);
-    box-shadow: var(--theme-input--box-shadow);
-    outline: 1px solid var(--theme-color-focus-bdr);
+  &:not(:read-only):not([readonly]):not([readOnly]):not(.readonly) {
+    @include hover {
+      background-color: var(--theme-input--background--hover);
+      border-color: var(--theme-input--border-color--hover);
+      cursor: auto;
+    }
+
+    @include focus-visible {
+      background-color: var(--theme-input--background--focus);
+      border-color: var(--theme-input--border-color--focus);
+      outline-offset: var(--theme-input--focus--outline-offset);
+      box-shadow: var(--theme-input--box-shadow);
+      outline: 1px solid var(--theme-color-focus-bdr);
+    }
   }
 }
 
@@ -96,6 +98,10 @@
   color: var(--theme-color-weak-text);
 
   border-color: var(--theme-input--border-color-bottom--disabled);
+
+  &::placeholder {
+    color: transparent;
+  }
 }
 
 .form-control-plaintext {

package/scss/mixins/shadow-dom/_component.scss

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@mixin ix-component() {
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
+}

package/scss/mixins/shadow-dom/_hover.scss

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@mixin ghost-hover-pressed {
+  :host(:not(.disabled):not(:disabled).hover),
+  :host(:not(.disabled):not(:disabled):hover) {
+    background-color: var(--theme-ghost--background--hover);
+  }
+
+  :host(:not(.disabled):not(:disabled).active),
+  :host(:not(.disabled):not(:disabled):active) {
+    background-color: var(--theme-ghost--background--active);
+  }
+}

package/scss/theme/classic-dark/_borderRadius.scss

@@ -21,4 +21,4 @@
       --theme-upload--border-radius: var(--theme-default-border-radius);
       --theme-workflow--border-radius: var(--theme-default-border-radius);
   }
-}
+}