@rossigee/clarity-ui 18.2.1-fixed

package/icon/icon.component.scss

@@ -0,0 +1,242 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../styles/variables/variables.density' as density;
+@use '../styles/mixins';
+// TODO: Remove this import — the icon has no <slot> elements so slot/::slotted/dialog rules
+// from base.element.scss are unused. Removing it currently changes some inherited styles;
+// audit and remove once safe to do so.
+@use '../styles/core/base/base.element.scss';
+
+:host {
+  --color: currentColor;
+
+  display: inline-block;
+  @include mixins.equilateral(#{tokens.$cds-global-space-7});
+  @include mixins.min-equilateral(#{tokens.$cds-global-space-7});
+
+  margin: 0;
+  vertical-align: middle;
+  fill: var(--color);
+  color: var(--color); // See https://github.com/vmware/clarity/issues/5332
+  contain: strict;
+  cursor: inherit;
+}
+
+svg {
+  display: block;
+}
+
+// sizing
+:host([size*='xs']) {
+  // 12px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-xs});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-xs});
+}
+
+:host([size*='sm']) {
+  // weirdly, the default... 16px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-s});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-s});
+}
+
+:host([size*='md']) {
+  // 20px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-m});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-m});
+}
+
+:host([size*='lg']) {
+  // 24px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-l});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-l});
+}
+
+// note: the selectors for `xl` and `xxl` work as expected due to the order in
+// which they are listed here. this is fine and expected for CSS. just know
+// that if their order is switched around, they will break.
+// likewise if we add an `xxs` it will have to go AFTER `xs`!
+:host([size*='xl']) {
+  // 28px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-xl});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-xl});
+}
+
+:host([size*='xxl']) {
+  // 32px
+  @include mixins.equilateral(#{density.$clr-base-icon-size-2xl});
+  @include mixins.min-equilateral(#{density.$clr-base-icon-size-2xl});
+}
+
+:host([size*='3xl']) {
+  // 36px
+  @include mixins.equilateral(density.$clr-base-icon-size-3xl);
+  @include mixins.min-equilateral(density.$clr-base-icon-size-3xl);
+}
+
+:host([size*='4xl']) {
+  // 64px
+  @include mixins.equilateral(density.$clr-base-icon-size-4xl);
+  @include mixins.min-equilateral(density.$clr-base-icon-size-4xl);
+}
+
+:host([size*='fit']) {
+  height: auto;
+  width: auto;
+  contain: layout;
+}
+
+// colors
+:host([status='success']) {
+  --color: #{tokens.$cds-alias-status-success};
+}
+
+:host([status='danger']) {
+  --color: #{tokens.$cds-alias-status-danger};
+}
+
+:host([status='warning']) {
+  --color: #{tokens.$cds-alias-status-warning-dark};
+}
+
+:host([status='info']) {
+  --color: #{tokens.$cds-alias-status-info};
+}
+
+:host([status='neutral']) {
+  --color: #{tokens.$cds-alias-status-neutral};
+}
+
+:host([inverse]) {
+  --color: #{tokens.$cds-global-color-construction-200};
+}
+
+// directional
+:host([direction='up']) {
+  transform: rotate(0deg);
+}
+
+:host([direction='down']) {
+  transform: rotate(180deg);
+}
+
+:host([direction='right']) {
+  transform: rotate(90deg);
+}
+
+:host([direction='left']) {
+  transform: rotate(270deg);
+}
+
+:host([flip='horizontal']) {
+  transform: scale(-1) rotateX(180deg);
+}
+
+:host([flip='vertical']) {
+  transform: scale(-1) rotateY(180deg);
+}
+
+.badge,
+.alert {
+  fill: var(--badge-color, #{tokens.$cds-alias-status-danger});
+}
+
+// variant badge colors
+
+:host([badge='success']) {
+  --badge-color: #{tokens.$cds-alias-status-success};
+}
+
+:host([badge='danger']) {
+  --badge-color: #{tokens.$cds-alias-status-danger};
+}
+
+:host([badge*='warning']) {
+  --badge-color: #{tokens.$cds-alias-status-warning-dark};
+}
+
+:host([badge='inherit']) {
+  --badge-color: currentColor;
+}
+
+:host([badge='info']) {
+  --badge-color: #{tokens.$cds-alias-status-info};
+}
+
+:host([badge='neutral']) {
+  --badge-color: #{tokens.$cds-alias-status-neutral};
+}
+
+// alert colors
+:host([badge='inherit-triangle']) {
+  --badge-color: currentColor;
+}
+
+// inverse + variants
+:host([badge][inverse]) {
+  --badge-color: #{tokens.$cds-alias-status-danger};
+}
+
+// variant badge colors
+:host([badge='success'][inverse]) {
+  --badge-color: #{tokens.$cds-alias-status-success};
+}
+
+:host([badge*='warning'][inverse]) {
+  --badge-color: #{tokens.$cds-alias-status-warning-dark};
+}
+
+:host([badge*='inherit'][inverse]) {
+  --badge-color: currentColor;
+}
+
+:host([badge='info'][inverse]) {
+  --badge-color: #{tokens.$cds-alias-status-info};
+}
+
+// unknown icon animation
+
+.cds-internal-dot-1 {
+  animation: fade-in-and-out 1.8s ease-in 0s infinite;
+}
+
+.cds-internal-dot-2 {
+  animation: fade-in-and-out 1.8s ease-out 0.422s infinite;
+}
+
+.cds-internal-dot-3 {
+  animation: fade-in-and-out 1.8s ease-out 0.675s infinite;
+}
+
+@keyframes fade-in-and-out {
+  0% {
+    opacity: 0;
+  }
+
+  75% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .cds-internal-dot-1 {
+    animation: none;
+  }
+
+  .cds-internal-dot-2 {
+    animation: none;
+  }
+
+  .cds-internal-dot-3 {
+    animation: none;
+  }
+}

package/image/_icons.clarity.scss

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:string';
+@use '../layout/variables.login';
+
+//Background SVG Images work only when the svg is url encoded.
+//Use this encoder http://meyerweb.com/eric/tools/dencoder/ to encode the SVG.
+
+$svg_data: 'data:image/svg+xml;charset=utf8';
+
+@function encodeColorString($colorStr) {
+  @if not string.index($colorStr, '#') {
+    @return $colorStr;
+  }
+
+  @return '%23#{string.slice($colorStr, 2)}';
+}
+@function generateErrorIcon($fillColor: #a32100) {
+  $error-icon: '%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A' +
+    encodeColorString($fillColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$error-icon}');
+}
+@function generateWarningIcon($fillColor: #747474) {
+  $warning-icon: '%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.clr-i-outline%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A' +
+    encodeColorString($fillColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-triangle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C21.32a1.3%2C1.3%2C0%2C0%2C0%2C1.3-1.3V14a1.3%2C1.3%2C0%2C1%2C0-2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C0%2C18%2C21.32Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20cx%3D%2217.95%22%20cy%3D%2224.27%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20d%3D%22M30.33%2C25.54%2C20.59%2C7.6a3%2C3%2C0%2C0%2C0-5.27%2C0L5.57%2C25.54A3%2C3%2C0%2C0%2C0%2C8.21%2C30H27.69a3%2C3%2C0%2C0%2C0%2C2.64-4.43Zm-1.78%2C1.94a1%2C1%2C0%2C0%2C1-.86.49H8.21a1%2C1%2C0%2C0%2C1-.88-1.48L17.07%2C8.55a1%2C1%2C0%2C0%2C1%2C1.76%2C0l9.74%2C17.94A1%2C1%2C0%2C0%2C1%2C28.55%2C27.48Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$warning-icon}');
+}
+@function generateCheckIcon($fillColor: #747474) {
+  $check-icon: '%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2036%2036%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20focusable%3D%22false%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%3E%3Cpath%20fill%3D%22' +
+    encodeColorString($fillColor + '') +
+    '%22%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M13.72%2C27.69%2C3.29%2C17.27a1%2C1%2C0%2C0%2C1%2C1.41-1.41l9%2C9L31.29%2C7.29a1%2C1%2C0%2C0%2C1%2C1.41%2C1.41Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E';
+  //$check-icon: "%3Csvg%20version=%221.1%22%20viewBox=%220%200%2036%2036%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20focusable=%22false%22%20aria-hidden=%22true%22%20role=%22img%22%3E%3Cpath%20class=%22clr-i-outline%20clr-i-outline-path-1%22%20d=%22M13.72,27.69,3.29,17.27a1,1,0,0,1,1.41-1.41l9,9L31.29,7.29a1,1,0,0,1,1.41,1.41Z%22%3E%3C/path%3E%3C/svg%3E";
+
+  @return url('#{$svg_data},#{$check-icon}');
+}
+@function generateSpinnerIcon($fillBgColor: #000000, $fillSnakeColor: #0077b8, $opacityBg: 0.15) {
+  $spinner-icon: '%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20' +
+    encodeColorString($fillBgColor + '') +
+    '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%20' + $opacityBg +
+    '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20' +
+    encodeColorString($fillSnakeColor + '') /* the blue, smaller part of the ring*/ +
+    '%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A';
+
+  @return url('#{$svg_data},#{$spinner-icon}');
+}
+@function generateLoginBackground() {
+  @return url('#{$svg_data},#{variables.$clr-login-background}');
+}
+@function generateLoginVMWareLogo() {
+  @return url('#{$svg_data}, #{variables.$clr-login-logo}');
+}
+@function generateVMWLogo() {
+  $logo: '%3Csvg%20viewBox%3D%220%200%2036%2036%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3Evm%20bug%3C%2Ftitle%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Headers%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22CL-Headers-Specs%22%20transform%3D%22translate(-262.000000%2C%20-175.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%2201%22%20transform%3D%22translate(238.000000%2C%20163.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22vm-bug%22%20transform%3D%22translate(24.703125%2C%2012.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-42%22%20fill-opacity%3D%220.25%22%20fill%3D%22%23DDDDDD%22%20opacity%3D%220.6%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%223%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7.63948376%2C13.8762402%20C7.32265324%2C13.2097082%206.53978152%2C12.9085139%205.80923042%2C13.219934%20C5.07771043%2C13.5322837%204.80932495%2C14.3103691%205.13972007%2C14.9769011%20L8.20725954%2C21.3744923%20C8.68977207%2C22.3784735%209.19844491%2C22.9037044%2010.1528121%2C22.9037044%20C11.1720955%2C22.9037044%2011.6168209%2C22.3310633%2012.0983646%2C21.3744923%20C12.0983646%2C21.3744923%2014.7744682%2C15.7847341%2014.8015974%2C15.7261685%20C14.8287266%2C15.6666733%2014.9149588%2C15.4863286%2015.1872199%2C15.4872582%20C15.4178182%2C15.490047%2015.6106294%2C15.6657437%2015.6106294%2C15.9018652%20L15.6106294%2C21.3698443%20C15.6106294%2C22.212073%2016.0979865%2C22.9037044%2017.0349134%2C22.9037044%20C17.9718403%2C22.9037044%2018.4785754%2C22.212073%2018.4785754%2C21.3698443%20L18.4785754%2C16.8965503%20C18.4785754%2C16.0338702%2019.1219254%2C15.4742436%2020.0007183%2C15.4742436%20C20.8785423%2C15.4742436%2021.4637583%2C16.0524624%2021.4637583%2C16.8965503%20L21.4637583%2C21.3698443%20C21.4637583%2C22.212073%2021.9520842%2C22.9037044%2022.8880423%2C22.9037044%20C23.8240003%2C22.9037044%2024.3326731%2C22.212073%2024.3326731%2C21.3698443%20L24.3326731%2C16.8965503%20C24.3326731%2C16.0338702%2024.9750543%2C15.4742436%2025.8538472%2C15.4742436%20C26.7307023%2C15.4742436%2027.3168871%2C16.0524624%2027.3168871%2C16.8965503%20L27.3168871%2C21.3698443%20C27.3168871%2C22.212073%2027.8052131%2C22.9037044%2028.74214%2C22.9037044%20C29.6771291%2C22.9037044%2030.1848331%2C22.212073%2030.1848331%2C21.3698443%20L30.1848331%2C16.2783582%20C30.1848331%2C14.4070488%2028.6181207%2C13.0962956%2026.7307023%2C13.0962956%20C24.8452216%2C13.0962956%2023.6651006%2C14.3475536%2023.6651006%2C14.3475536%20C23.037253%2C13.5666793%2022.1720247%2C13.0972252%2020.7089847%2C13.0972252%20C19.164557%2C13.0972252%2017.8129406%2C14.3475536%2017.8129406%2C14.3475536%20C17.1841241%2C13.5666793%2016.1154267%2C13.0972252%2015.2308204%2C13.0972252%20C13.8617638%2C13.0972252%2012.7746572%2C13.675444%2012.1119292%2C15.1302871%20L10.1528121%2C19.5608189%20L7.63948376%2C13.8762402%22%20id%3D%22Fill-4%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$logo}');
+}
+@function generateSearchIcon($fillBgColor: #ffffff) {
+  $search-icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A' +
+    encodeColorString($fillBgColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ESearch%3C%2Ftitle%3E%3Cg%20id%3D%22icons%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15%2C4.05A10.95%2C10.95%2C0%2C1%2C1%2C4.05%2C15%2C11%2C11%2C0%2C0%2C1%2C15%2C4.05M15%2C2A13%2C13%2C0%2C1%2C0%2C28%2C15%2C13%2C13%2C0%2C0%2C0%2C15%2C2Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20%20d%3D%22M33.71%2C32.29l-7.37-7.42-1.42%2C1.41%2C7.37%2C7.42a1%2C1%2C0%2C1%2C0%2C1.42-1.41Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$search-icon}');
+}
+@function generateCaretIcon($fillColor: #9a9a9a) {
+  $caret-icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A' +
+    encodeColorString($fillColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A';
+
+  @return url('#{$svg_data},#{$caret-icon}');
+}
+@function generateLeftCaretIcon($fillColor: #747474) {
+  $left-caret-icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cdefs%3E%3Cstyle%3E.cls-3%7Bfill%3A' +
+    encodeColorString($fillColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%3E%3Cpolygon%20class%3D%22cls-3%22%20points%3D%2210.15%2014.72%203.44%208%2010.15%201.28%2011%202.13%205.14%208%2011%2013.87%2010.15%2014.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$left-caret-icon}');
+}
+@function generateRightCaretIcon($fillColor: #747474) {
+  $right-caret-icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A' +
+    encodeColorString($fillColor + '') +
+    '%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%225.85%2014.72%2012.56%208%205.85%201.28%205%202.13%2010.86%208%205%2013.87%205.85%2014.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$right-caret-icon}');
+}
+
+// FIXME: This is NOT a clean SVG. We'll fix that when everyone's back next week.
+
+@function generateEmptyDatagridPlaceholder() {
+  $placeholder-image: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M34.2043%2029.6417C34.4334%2029.6417%2034.6209%2029.8292%2034.6209%2030.0583V35.1167C34.6209%2035.3458%2034.4334%2035.5333%2034.2043%2035.5333C33.9751%2035.5333%2033.7876%2035.3458%2033.7876%2035.1167V30.0583C33.7876%2029.8292%2033.9751%2029.6417%2034.2043%2029.6417Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M31.675%2032.1708H36.7333C36.9625%2032.1708%2037.15%2032.3583%2037.15%2032.5875C37.15%2032.8167%2036.9625%2033.0042%2036.7333%2033.0042H31.675C31.4458%2033.0042%2031.2583%2032.8167%2031.2583%2032.5875C31.2583%2032.3583%2031.4458%2032.1708%2031.675%2032.1708Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4.95426%2022.1875C5.18343%2022.1875%205.37093%2022.375%205.37093%2022.6042V24.9375C5.37093%2025.1667%205.18343%2025.3542%204.95426%2025.3542C4.7251%2025.3542%204.5376%2025.1667%204.5376%2024.9375V22.6042C4.5376%2022.375%204.7251%2022.1875%204.95426%2022.1875Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M3.78727%2023.3542H6.12061C6.34977%2023.3542%206.53727%2023.5417%206.53727%2023.7708C6.53727%2024%206.34977%2024.1875%206.12061%2024.1875H3.78727C3.55811%2024.1875%203.37061%2024%203.37061%2023.7708C3.37061%2023.5417%203.55811%2023.3542%203.78727%2023.3542Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M20.0002%204.65835C24.4044%204.65835%2028.6252%204.90835%2031.8919%205.36251C35.2419%205.82918%2036.5169%206.35835%2036.9711%206.62085C36.5127%206.88751%2035.2419%207.41251%2031.8919%207.87918C28.6252%208.33335%2024.4002%208.58335%2020.0002%208.58335C15.6002%208.58335%2011.3752%208.33335%208.10856%207.87918C4.75856%207.41251%203.48356%206.88335%203.02939%206.62085C3.48773%206.35418%204.75856%205.82918%208.10856%205.36251C11.3752%204.90835%2015.6002%204.65835%2020.0002%204.65835ZM20.0002%203.82501C10.0627%203.82501%202.00439%205.07918%202.00439%206.62501C2.00439%208.17085%2010.0627%209.42501%2020.0002%209.42501C29.9377%209.42501%2037.9961%208.17085%2037.9961%206.62501C37.9961%205.07918%2029.9377%203.82501%2020.0002%203.82501Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M21.996%2027.8667C21.996%2026.7833%2022.3752%2025.7333%2023.0668%2024.9L37.896%207.01666H37.821C36.5918%208.375%2029.0835%209.42083%2020.0002%209.42083C10.9168%209.42083%203.41266%208.375%202.17933%207.01666H2.146L16.9752%2024.9C17.6668%2025.7333%2018.046%2026.7833%2018.046%2027.8667V35.0125H18.071C18.071%2035.0125%2018.071%2035.025%2018.071%2035.0333C18.071%2035.6667%2018.9502%2036.1792%2020.0335%2036.1792C21.1168%2036.1792%2021.996%2035.6667%2021.996%2035.0333C21.996%2035.025%2021.996%2035.0208%2021.996%2035.0125H22.0002V27.8667H21.996Z%22%20fill%3D%22%23AEB8BC%22%2F%3E%0A%3C%2Fsvg%3E';
+
+  @return url('#{$svg_data},#{$placeholder-image}');
+}

package/image/_images.clarity.scss

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../styles/core/tokens/variables.tokens' as tokens;
+@use '../emphasis/alert/variables.alert' as alert-variables;
+@use 'mixins.images' as images-mixins;
+@use '../styles/mixins';
+@use 'icons.clarity';
+
+@include mixins.exports('images.clarity') {
+  %icon-styles {
+    display: inline-block;
+
+    @include mixins.equilateral(alert-variables.$clr-icon-dimension-sm);
+
+    padding: 0;
+
+    @include images-mixins.icon-background-styles();
+  }
+
+  .alert-icon,
+  .clr-icon {
+    @extend %icon-styles;
+
+    &.clr-icon-warning,
+    &.icon-warning {
+      background-image: icons.generateWarningIcon();
+    }
+
+    &.clr-icon-warning-white {
+      background-image: icons.generateWarningIcon(#{tokens.$cds-global-color-white});
+    }
+
+    &.clr-vmw-logo {
+      background-image: icons.generateVMWLogo();
+    }
+  }
+}

package/image/_mixins.images.scss

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+@mixin icon-background-styles() {
+  background-repeat: no-repeat;
+  background-size: contain;
+  vertical-align: middle;
+}