carbon-components-svelte 0.89.7 → 0.89.9

package/README.md

@@ -14,7 +14,7 @@ Design systems facilitate design and development through reuse, consistency, and
 The Carbon Svelte portfolio also includes:
 
 - **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,400+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
 

package/css/_checkbox-readonly.scss

@@ -0,0 +1,54 @@
+// This file backports readonly checkbox styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+// The readonly checkbox feature was added to Carbon Design System in Nov 2022.
+
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'carbon-components/scss/globals/scss/vars';
+@import 'carbon-components/scss/globals/scss/helper-mixins';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Readonly checkbox styles
+/// @access private
+/// @group checkbox
+@mixin checkbox-readonly {
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label-text {
+    cursor: text;
+    user-select: text;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox
+    + .#{$prefix}--checkbox-label::before {
+    border-color: $disabled-02;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before {
+    border: 1px solid $disabled-02;
+    background: transparent;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after {
+    border-color: $text-01;
+  }
+}
+
+@include exports('checkbox-readonly') {
+  @include checkbox-readonly;
+}

package/css/_text-area-warn.scss

@@ -0,0 +1,46 @@
+// This file backports textarea warning styles from carbon-components v11+
+// to ensure compatibility with carbon-components v10.58.12.
+// The warning state feature provides consistency with other input components.
+
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import 'carbon-components/scss/globals/scss/vars';
+@import 'carbon-components/scss/globals/scss/helper-mixins';
+@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+/// Textarea warning styles
+/// @access private
+/// @group text-area
+@mixin text-area-warn {
+  //----------------------------------------------
+  // Warning state
+  // ---------------------------------------------
+  .#{$prefix}--text-area--warning {
+    padding-right: $carbon--spacing-08;
+  }
+
+  .#{$prefix}--text-area__invalid-icon.#{$prefix}--text-area__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--text-area__invalid-icon.#{$prefix}--text-area__invalid-icon--warning path[fill] {
+    fill: $inverse-01;
+    opacity: 1;
+  }
+
+  .#{$prefix}--text-area__wrapper[data-warn]~.#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: rem(200px);
+    font-weight: 400;
+  }
+}
+
+@include exports('text-area-warn') {
+  @include text-area-warn;
+}