@rossigee/clarity-ui 18.2.1-fixed

package/styles/_variables.clarity.scss

@@ -0,0 +1,139 @@
+/*
+ * 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.
+ */
+// Clarity Components
+//
+// Global
+// Alerts
+// Badge & Label
+// Button
+// Card
+// Dropdown
+// List
+// Table
+// Datagrid (Has dependency on table)
+// Form, Input, Checkbox, Radio, Toggle
+// Header
+// Login
+// Modal and Wizard
+// Nav
+// Typography
+// Progress Bars
+// Signpost
+// Stack View
+// Tabs
+// Tree View
+// Tooltip
+// Typography
+// Vertical Nav
+
+@forward '../styles/variables/variables';
+
+// Alert
+@forward '../emphasis/alert/variables.alert';
+// End Alert
+
+// Label
+// Has code sharing with badges
+@forward '../emphasis/label/variables.label';
+// END: Label
+
+// Badge
+//Has code sharing with labels
+@forward '../emphasis/badge/variables.badges';
+// END: Badge
+
+// Button
+// Disabled states are global for all buttons, independent of status or type
+@forward '../button/variables.buttons';
+// BUTTON END
+
+// Card
+@forward '../layout/variables.card';
+// END CARD
+
+// Dropdown
+@forward '../popover/dropdown/variables.dropdown';
+// END: Dropdown
+
+// Table
+// NOTE: Datagrid depends on these
+@forward '../data/variables.tables';
+// END Table
+
+// Datagrid
+@forward '../data/datagrid/variables.datagrid';
+// End Datagrid
+
+// Forms
+@forward '../forms/styles/variables.forms';
+@forward '../button/variables.toggles';
+@forward '../forms/datepicker/variables.datepicker';
+@forward '../forms/combobox/variables.combobox';
+
+// Header
+@forward '../layout/main-container/variables.header';
+// END Header
+
+// Login
+@forward '../layout/variables.login';
+// END: Login
+
+// Modal and Wizard (They are genetically related)
+@forward '../modal/variables.modal';
+@forward '../wizard/variables.wizard';
+// END: Modal and Wizard
+
+// Nav
+// There are several components grouped under Nav:
+// Links
+// Responsive Nav
+// Vertical Nav
+// Responsive Nav
+// Global nav variables
+@forward '../layout/nav/variables.nav';
+@forward '../layout/nav/variables.responsive-nav';
+// Subnav - NOTE: Depricated
+@forward '../layout/nav/variables.subnav';
+// Vertical Nav
+@forward '../layout/vertical-nav/variables.vertical-nav';
+// END: Nav variables
+
+// Progress Bars
+@forward '../progress/progress-bars/variables.progress-bars';
+// END Progress bars
+
+// Signpost
+@forward '../popover/signpost/variables.signpost';
+// END Signpost variables
+
+// Spinners
+@forward '../progress/spinner/variables.spinner';
+// END Spinners
+
+// Stack View
+@forward '../data/stack-view/variables.stack-view';
+
+// Tabs
+@forward '../layout/tabs/variables.tabs';
+
+// Tree View
+@forward '../data/tree-view/variables.tree-view';
+
+// Tooltip
+@forward '../popover/tooltip/variables.tooltip';
+
+// Collapsible Panel
+@forward '../collapsible-panel/variables.collapsible-panel';
+
+// Accordion
+@forward '../accordion/variables.accordion';
+
+// Timeline
+@forward '../timeline/variables.timeline';
+
+// Breadcrumbs
+@forward '../layout/breadcrumbs/variables.breadcrumbs';

package/styles/core/base/base.element.scss

@@ -0,0 +1,97 @@
+/*
+ * 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 '../tokens/variables.tokens' as tokens;
+
+// Every Web Component will need to import a minimal amount of core CSS
+:host {
+  all: initial;
+  display: block;
+  visibility: inherit;
+  font-family: tokens.$cds-alias-typography-font-family;
+  contain: layout; // https://developer.mozilla.org/en-US/docs/Web/CSS/contain
+  box-sizing: border-box !important;
+  appearance: none !important;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit !important;
+}
+
+slot {
+  font-family: tokens.$cds-alias-typography-font-family;
+  display: contents !important;
+}
+
+::slotted(*) {
+  font-family: inherit;
+  box-sizing: inherit;
+}
+
+::slotted(*)::placeholder {
+  color: tokens.$cds-alias-typography-color-200;
+}
+
+:host([role='button']),
+:host([_is-anchor]) {
+  cursor: pointer !important;
+
+  ::slotted(*) {
+    cursor: pointer !important;
+  }
+}
+
+:host([role='button'][disabled]) {
+  cursor: not-allowed !important;
+
+  ::slotted(*) {
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+}
+
+// https://developers.google.com/web/fundamentals/web-components/best-practices#add-a-:host-display-style-that-respects-the-hidden-attribute
+// we need the check against hidden='false' here because React is pushing string through instead of adding/removing the boolean attribute
+// https://github.com/lit/lit/issues/3053
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host([hidden*='false']) {
+  display: block !important;
+}
+
+[role='dialog'][hidden],
+[role='dialog'][hidden] > *,
+:host([role='dialog'][hidden]),
+:host([role='dialog'][hidden]) ::slotted(*) {
+  // safari https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/
+  display: block !important;
+  visibility: hidden !important;
+}
+
+[role='dialog'][hidden*='false'],
+[role='dialog'][hidden*='false'] > *,
+:host([role='dialog'][hidden*='false']),
+:host([role='dialog'][hidden*='false']) ::slotted(*) {
+  visibility: visible !important;
+}
+
+// normalize focus styles
+// https://coryrylan.com/blog/dont-override-css-outline-focus-styles
+:host([tabindex='0']:focus),
+:host([tabindex='0']:focus) [focusable],
+:host([_focused]) [focusable],
+:host([_focused]) .input,
+[tabindex='0'][focusable]:focus {
+  outline: #{tokens.$cds-alias-object-interaction-outline-static};
+  outline: #{tokens.$cds-alias-object-interaction-outline-webkit-static};
+  outline-offset: #{tokens.$cds-alias-object-interaction-outline-offset};
+}

package/styles/core/global.scss

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+@forward './tokens/properties.tokens';
+@forward './theme.dark.scss';
+@forward './module.reset';
+@forward './module.typography';
+@forward './module.layout';

package/styles/core/layout/_alignments.scss

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+// common alignment styles shared between vertical and horizontal layouts
+@use 'mixins/mixins';
+@use 'mixins/mixins.alignment' as alignment-mixins;
+@use 'optimize';
+
+@include alignment-mixins.generateHorizontalVerticalAlignments();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include alignment-mixins.generateHorizontalVerticalAlignments($breakpoint);
+  }
+}

package/styles/core/layout/_container.scss

@@ -0,0 +1,29 @@
+/*
+ * 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 './mixins/mixins' as mixins;
+
+[cds-layout='no-scrolling'] {
+  overflow: hidden !important;
+}
+
+[cds-layout~='fill'],
+[cds-layout~='container:fill'] {
+  width: 100% !important;
+}
+
+[cds-layout~='container:center'] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@each $width, $width-value in mixins.$cds-layout-widths {
+  [cds-layout~='container:#{$width}'] {
+    width: 100%;
+    max-width: $width-value;
+  }
+}

package/styles/core/layout/_display.scss

@@ -0,0 +1,58 @@
+/*
+ * 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 '../tokens/variables.tokens' as tokens;
+@use 'mixins/mixins.display' as display-mixins;
+
+[cds-layout~='display:none'] {
+  display: none !important;
+}
+
+[cds-layout~='display:flex'] {
+  display: flex !important;
+}
+
+[cds-layout~='display:contents'] {
+  display: contents !important;
+}
+
+[cds-layout~='display:block'] {
+  display: block !important;
+}
+
+[cds-layout~='display:inline'] {
+  display: inline !important;
+}
+
+@media (min-width: tokens.$cds-global-layout-width-sm-static) {
+  @include display-mixins.display('sm');
+}
+@media (min-width: tokens.$cds-global-layout-width-md-static) {
+  @include display-mixins.display('md');
+}
+@media (min-width: tokens.$cds-global-layout-width-lg-static) {
+  @include display-mixins.display('lg');
+}
+@media (min-width: tokens.$cds-global-layout-width-xl-static) {
+  @include display-mixins.display('xl');
+}
+
+::slotted([cds-layout~='display:screen-reader-only']),
+[cds-layout~='display:screen-reader-only'] {
+  position: absolute !important;
+  // clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  display: block !important;
+}

package/styles/core/layout/_optimize.scss

@@ -0,0 +1,60 @@
+/*
+ * 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 '../tokens/variables.tokens' as tokens;
+@use '../../mixins';
+
+// This is a performance optimization that aliases the token to a "minified" value to reduce overall bundle size.
+@include mixins.root-or-host() {
+  &,
+  [clr-density] {
+    --δ1: #{tokens.$cds-global-layout-space-xxxs};
+    --δ2: #{tokens.$cds-global-layout-space-xxs};
+    --δ3: #{tokens.$cds-global-layout-space-xs};
+    --δ4: #{tokens.$cds-global-layout-space-sm};
+    --δ5: #{tokens.$cds-global-layout-space-md};
+    --δ6: #{tokens.$cds-global-layout-space-lg};
+    --δ7: #{tokens.$cds-global-layout-space-xl};
+    --δ8: #{tokens.$cds-global-layout-space-xxl};
+    --δ9: #{tokens.$cds-global-layout-space-xxxl};
+  }
+}
+
+$δ1: var(--δ1);
+$δ2: var(--δ2);
+$δ3: var(--δ3);
+$δ4: var(--δ4);
+$δ5: var(--δ5);
+$δ6: var(--δ6);
+$δ7: var(--δ7);
+$δ8: var(--δ8);
+$δ9: var(--δ9);
+
+// selectors one location to make it easier to test for shorthand optimizations
+// this is also helpful for tools like AMP that require data-* prefix on all attrs
+$layout: 'cds-layout';
+$horizontal: 'horizontal';
+$vertical: 'vertical';
+$grid: 'grid';
+$gap: 'gap';
+$align: 'align';
+$top: 'top';
+$bottom: 'bottom';
+$left: 'left';
+$right: 'right';
+$center: 'center';
+$stretch: 'stretch';
+$shrink: 'shrink';
+$fill: 'fill';
+$cols: 'cols';
+$rows: 'rows';
+$col: 'col';
+$row: 'row';
+$vertical-center: 'vertical-center';
+$horizontal-center: 'horizontal-center';
+$vertical-stretch: 'vertical-stretch';
+$horizontal-stretch: 'horizontal-stretch';

package/styles/core/layout/_shadow-dom.scss

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+// The following styles are the layout alignment utilities adapted for Shadow DOM
+// support. This enables alignments to be used for sloted content. This is limited
+// to only layout alignment utils to prevent excessive code bloat and duplication between
+// global and component stylesheets. Example:
+
+/*
+  <div cds-layout="horizontal gap:lg">
+    <slot></slot>
+  </div>
+
+  <my-element>
+    <button></button>
+    <button></button>
+    <button cds-layout="align:bottom"></button>
+  </my-element>
+*/
+
+@use './mixins/mixins';
+@use './mixins/mixins.shadow-dom' as shadow-dom-mixins;
+@use 'optimize';
+
+@include shadow-dom-mixins.generateShadowDomVerticalStretch();
+@include shadow-dom-mixins.generateShadowDomVerticalItemAlignment();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include shadow-dom-mixins.generateShadowDomVerticalStretch($breakpoint);
+    @include shadow-dom-mixins.generateShadowDomVerticalItemAlignment($breakpoint);
+  }
+}
+
+@include shadow-dom-mixins.generateShadowDomHorizontalStretch();
+@include shadow-dom-mixins.generateShadowDomHorizontalItemAlignment();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include shadow-dom-mixins.generateShadowDomHorizontalStretch($breakpoint);
+    @include shadow-dom-mixins.generateShadowDomHorizontalItemAlignment($breakpoint);
+  }
+}

package/styles/core/layout/_spacing.scss

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+// why are we doing these in groups?
+// so that more explicit side declarations can override more general axis declarations
+// it's more verbose but allows customization through greater specificity
+// <div cds-layout="p:sm p-t:lg p-b:none">...</div>
+
+// The micro syntax is primarily needed for performance.
+// To support all the sides as well as breakpoints we need
+// a compact syntax to prevent an excessive amount of generated CSS.
+// [type]-[side]@[breakpoint]:[size]
+
+@use './mixins/mixins';
+
+@include mixins.generateGaps();
+@include mixins.spacers();
+@include mixins.axisSpacers();
+@include mixins.sideSpacers();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include mixins.generateGaps($breakpoint);
+    @include mixins.spacers($breakpoint);
+    @include mixins.axisSpacers($breakpoint);
+    @include mixins.sideSpacers($breakpoint);
+  }
+}

package/styles/core/layout/_type-grid.scss

@@ -0,0 +1,66 @@
+/*
+ * 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 '../tokens/variables.tokens' as tokens;
+@use './mixins/mixins';
+@use './mixins/mixins.grid' as grid-mixins;
+@use 'optimize';
+
+[#{optimize.$layout}~='#{optimize.$grid}'] {
+  display: grid;
+  align-items: start;
+  align-content: start;
+  grid-template-columns: repeat(#{tokens.$cds-global-layout-grid-cols}, 1fr);
+  width: 100%;
+
+  &[#{optimize.$layout}*='#{optimize.$rows}'] {
+    grid-template-rows: repeat(12, auto);
+  }
+
+  & > [#{optimize.$layout}*='#{optimize.$row}'] {
+    align-self: stretch;
+  }
+
+  &[#{optimize.$layout}*='#{optimize.$cols}:auto'] {
+    grid-auto-flow: column;
+    grid-template-columns: initial;
+  }
+}
+
+[#{optimize.$layout}*='#{optimize.$cols}\@'] > * {
+  grid-column: span #{tokens.$cds-global-layout-grid-cols};
+}
+
+[#{optimize.$layout}*='#{optimize.$col}\@'] {
+  grid-column: span 12;
+}
+
+@include grid-mixins.generateColumnsAndRows();
+@include grid-mixins.generateExplicitColumnAndRow();
+@include grid-mixins.generatePositions();
+@include grid-mixins.generateAlignments();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include grid-mixins.generateColumnsAndRows($breakpoint);
+  }
+}
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include grid-mixins.generateExplicitColumnAndRow($breakpoint);
+  }
+}
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include grid-mixins.generatePositions($breakpoint);
+  }
+}
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include grid-mixins.generateAlignments($breakpoint);
+  }
+}

package/styles/core/layout/_type-horizontal.scss

@@ -0,0 +1,33 @@
+/*
+ * 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 './mixins/mixins';
+@use 'mixins/mixins.type-horizontal' as horizontal-mixins;
+@use 'optimize';
+
+[#{optimize.$layout}~='#{optimize.$horizontal}'] {
+  display: flex;
+  flex-flow: row wrap;
+  place-items: flex-start flex-start;
+  width: 100%;
+  margin: 0;
+  min-height: 0;
+
+  > [#{optimize.$layout}~='#{optimize.$horizontal}'],
+  > [#{optimize.$layout}~='#{optimize.$vertical}'],
+  > [cds-text] {
+    width: initial !important;
+  }
+}
+
+@include horizontal-mixins.generateHorizontalAlignments();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include horizontal-mixins.generateHorizontalAlignments($breakpoint);
+  }
+}

package/styles/core/layout/_type-vertical.scss

@@ -0,0 +1,26 @@
+/*
+ * 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 './mixins/mixins' as mixins;
+@use 'mixins/mixins.type-vertical' as vertical-mixins;
+@use 'optimize';
+
+[#{optimize.$layout}~='#{optimize.$vertical}'] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+@include vertical-mixins.generateVerticalAlignments();
+
+@each $breakpoint, $breakpoint-value in mixins.$cds-layout-breakpoints {
+  @media (min-width: $breakpoint-value) {
+    @include vertical-mixins.generateVerticalAlignments($breakpoint);
+  }
+}

package/styles/core/layout/mixins/_mixins.alignment.scss

@@ -0,0 +1,35 @@
+/*
+ * 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 '../optimize';
+
+@mixin generateHorizontalVerticalAxisFill($breakpoint: null) {
+  [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$fill}'] > * {
+    flex-grow: 1 !important;
+    flex-basis: 0 !important;
+  }
+}
+@mixin generateHorizontalVerticalWrap($breakpoint: null) {
+  [#{optimize.$layout}~='wrap#{$breakpoint}:none'] {
+    flex-wrap: nowrap !important;
+  }
+}
+@mixin generateHorizontalVerticalItemStretchShrink($breakpoint: null) {
+  [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$stretch}'] {
+    flex-grow: 1 !important;
+  }
+
+  [#{optimize.$layout}*='#{optimize.$align}#{$breakpoint}:#{optimize.$shrink}'] {
+    flex-shrink: 1 !important;
+    flex-grow: 0 !important;
+  }
+}
+@mixin generateHorizontalVerticalAlignments($breakpoint: null) {
+  @include generateHorizontalVerticalAxisFill($breakpoint);
+  @include generateHorizontalVerticalWrap($breakpoint);
+  @include generateHorizontalVerticalItemStretchShrink($breakpoint);
+}

package/styles/core/layout/mixins/_mixins.display.scss

@@ -0,0 +1,23 @@
+/*
+ * 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 display($breakpoint) {
+  [cds-layout~='display\@#{$breakpoint}:none'] {
+    display: none !important;
+  }
+
+  [cds-layout~='display\@#{$breakpoint}:flex'] {
+    display: flex !important;
+  }
+
+  [cds-layout~='display\@#{$breakpoint}:block'] {
+    display: block !important;
+  }
+
+  [cds-layout~='display\@#{$breakpoint}:inline'] {
+    display: inline !important;
+  }
+}