@uniformdev/design-system 19.30.1-alpha.0 → 19.33.0

package/dist/esm/index.js

@@ -14795,12 +14795,17 @@ var Tile = css62`
   &:focus {
     background: var(--gray-50);
   }
+
+  &[aria-disabled='true'],
+  &:disabled {
+    pointer-events: none;
+  }
 `;
 
 // src/components/Tiles/Tile.tsx
 import { jsx as jsx75 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx75("button", { type: "button", css: Tile, ...props, children });
+var Tile2 = ({ children, disabled, ...props }) => {
+  return /* @__PURE__ */ jsx75("button", { type: "button", css: Tile, disabled, ...props, children });
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15306,6 +15311,13 @@ var linkParameterInput = (withExternalLinkIcon) => css68`
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
+
+  &:focus,
+  &:focus-within {
+    &[readonly] {
+      border-color: var(--white);
+    }
+  }
 `;
 var linkParameterIcon = css68`
   align-items: center;
@@ -17694,7 +17706,7 @@ var segmentedControlItemStyles = css79`
 var segmentedControlInputStyles = css79`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = css79`
+var segmentedControlLabelStyles = (checked, disabled) => css79`
   position: relative;
   display: flex;
   align-items: center;
@@ -17730,6 +17742,36 @@ var segmentedControlLabelStyles = css79`
     color: var(--gray-50);
     background-color: var(--gray-400);
   }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
+    // equivalent to &:has(:checked:not(:disabled))
+    ${checked && !disabled ? `
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;` : void 0}
+
+    // equivalent to &:hover:not(:has(:disabled, :checked))
+    &:hover {
+      ${!checked && !disabled ? `background-color: var(--gray-100);` : void 0}
+    }
+
+    // equivalent to &:has(:disabled)
+    ${disabled ? `
+      color: var(--gray-400);
+      cursor: default;` : void 0}
+
+    // equivalent to &:has(:checked:disabled)
+    ${checked && disabled && `
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+    `}
+  }
 `;
 var segmentedControlLabelIconOnlyStyles = css79`
   padding-inline: 0.5em;
@@ -17794,7 +17836,7 @@ var SegmentedControl = ({
               "label",
               {
                 css: [
-                  segmentedControlLabelStyles,
+                  segmentedControlLabelStyles(option.value === value, isDisabled),
                   sizeStyles,
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],

package/dist/index.d.ts

@@ -22022,8 +22022,9 @@ declare const ResolveIcon: ({ icon, name, styleType, ...props }: ResolveIconProp
 
 type TileProps = {
     children: ReactNode;
+    disabled?: boolean;
 } & HtmlHTMLAttributes<HTMLButtonElement>;
-declare const Tile: ({ children, ...props }: TileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tile: ({ children, disabled, ...props }: TileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the background colour of the outter container

package/dist/index.js

@@ -15023,12 +15023,17 @@ var Tile = import_react77.css`
   &:focus {
     background: var(--gray-50);
   }
+
+  &[aria-disabled='true'],
+  &:disabled {
+    pointer-events: none;
+  }
 `;
 
 // src/components/Tiles/Tile.tsx
 var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
-var Tile2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { type: "button", css: Tile, ...props, children });
+var Tile2 = ({ children, disabled, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { type: "button", css: Tile, disabled, ...props, children });
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
@@ -15529,6 +15534,13 @@ var linkParameterInput = (withExternalLinkIcon) => import_react85.css`
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
+
+  &:focus,
+  &:focus-within {
+    &[readonly] {
+      border-color: var(--white);
+    }
+  }
 `;
 var linkParameterIcon = import_react85.css`
   align-items: center;
@@ -17876,7 +17888,7 @@ var segmentedControlItemStyles = import_react110.css`
 var segmentedControlInputStyles = import_react110.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = import_react110.css`
+var segmentedControlLabelStyles = (checked, disabled) => import_react110.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -17912,6 +17924,36 @@ var segmentedControlLabelStyles = import_react110.css`
     color: var(--gray-50);
     background-color: var(--gray-400);
   }
+
+  // Firefox fallback using emotion variables
+  // we can delete this whole block of code and variables in SegmentedControl.tsx
+  // once Firefox supports :has selector
+  @supports not selector(:has(*)) {
+    // equivalent to &:has(:checked:not(:disabled))
+    ${checked && !disabled ? `
+    background-color: var(--segmented-control-selected-color);
+    outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
+    box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
+    color: white;
+    -webkit-text-stroke-width: thin;
+    z-index: 0;` : void 0}
+
+    // equivalent to &:hover:not(:has(:disabled, :checked))
+    &:hover {
+      ${!checked && !disabled ? `background-color: var(--gray-100);` : void 0}
+    }
+
+    // equivalent to &:has(:disabled)
+    ${disabled ? `
+      color: var(--gray-400);
+      cursor: default;` : void 0}
+
+    // equivalent to &:has(:checked:disabled)
+    ${checked && disabled && `
+    color: var(--gray-50);
+    background-color: var(--gray-400);
+    `}
+  }
 `;
 var segmentedControlLabelIconOnlyStyles = import_react110.css`
   padding-inline: 0.5em;
@@ -17976,7 +18018,7 @@ var SegmentedControl = ({
               "label",
               {
                 css: [
-                  segmentedControlLabelStyles,
+                  segmentedControlLabelStyles(option.value === value, isDisabled),
                   sizeStyles,
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.30.1-alpha.0+fa7b5018a",
+  "version": "19.33.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@uniformdev/canvas": "^19.30.1-alpha.0+fa7b5018a",
-    "@uniformdev/richtext": "^19.30.1-alpha.0+fa7b5018a",
+    "@uniformdev/canvas": "^19.33.0",
+    "@uniformdev/richtext": "^19.33.0",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.24",
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa7b5018a6723a15f1932d306a1e674e4a8baf5d"
+  "gitHead": "a26cf289e832737b2cf4c9b6d767640b627a6368"
 }