@semcore/pills 17.2.1 → 18.0.0-prerelease.0

package/lib/esm/style/pills.shadow.css

@@ -1,156 +1,164 @@
 SPills {
+  position: relative;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  isolation: isolate;
-  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+  min-height: var(--intergalactic-form-control-m, 32px);
+  border-radius: var(--intergalactic-pills-rounded, 6px);
+  background: var(--intergalactic-control-pills-bg-normal, oklch(0.166 0.031 175.8 / 0.097));
+  box-sizing: border-box;
 
-  SPill[selected] {
-    background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
-    border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-    z-index: 3;
-  }
-  SPill:focus-visible, SPill[selected] {
-    z-index: 3;
+  &[size='l'] {
+    min-height: var(--intergalactic-form-control-l, 44px);
   }
 
-  SPill:hover, SPill:active {
-    z-index: 2;
+  /*
+    TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
+    As of now JS fallback is used.
+  */
+  /* &:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
+    SPill[aria-checked='true'], SPill[aria-selected='true'] {
+      anchor-name: --active-segment;
+    }
+  } */
+
+  SPillContainer {
+    &:last-of-type {
+      SPillSeparator {
+        display: none;
+      }
+    }
   }
+
+  --transition-fast:
+    left calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    width calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    top calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
+    height calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+
+  --transition-slow:
+    left calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    width calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    top calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    height calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09));
 }
 
 SPill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: normal;
   position: relative;
-  touch-action: manipulation;
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  overflow: visible;
-  text-align: center;
-  vertical-align: middle;
-  font-family: inherit;
+
   cursor: pointer;
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
-  border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  border-radius: var(--intergalactic-control-rounded, 6px);
 
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
+  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
+  
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--intergalactic-rounded-small, 4px);
 
-  &:active {
-    outline: 0;
-    text-decoration: none;
-  }
+  background-color: transparent;
 
   &:hover {
-    background: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180));
+    &[aria-checked='false'],
+    &[aria-selected='false'] {
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--intergalactic-rounded-small, 4px);
+        background: var(--intergalactic-control-pills-bg-hover, oklch(0.151 0.028 176.1 / 0.123));
+      }
+    }
   }
-}
 
-SPill[disabled] {
-  cursor: default;
-  /* Disable link interactions */
-  pointer-events: none;
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
 
-  &>* {
-    opacity: var(--intergalactic-disabled-opacity, 0.4);
+    &>* {
+      opacity: var(--intergalactic-disabled-opacity, 0.4);
+    }
   }
-}
-
-SText {
-  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  display: inline-flex;
-}
-
-SAddon {
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
 
-SPill[size='m'] {
-  height: var(--intergalactic-form-control-m, 28px);
-  min-width: var(--intergalactic-form-control-m, 28px);
-  font-size: var(--intergalactic-fs-200, 14px);
-
-  & SText {
-    margin-left: var(--intergalactic-spacing-2x, 8px);
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+  &[size='m'] {
+    min-width: calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
+    border-width: 2px 3px;
   }
 
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
+  &[size='l'] {
+    min-width: calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
+    border-width: 3px 3px;
   }
 }
 
-SPill[size='l'] {
-  height: var(--intergalactic-form-control-l, 40px);
-  min-width: var(--intergalactic-form-control-l, 40px);
-  font-size: var(--intergalactic-fs-300, 16px);
-
-  & SText {
-    margin-left: var(--intergalactic-spacing-2x, 8px);
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+SPillContainer {
+  display: inline-flex;
 
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
-      margin-right: var(--intergalactic-spacing-3x, 12px);
+  &:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
+    SPillSeparator {
+      background-color: transparent;
     }
   }
 
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
+  &:has(+ SPillContainer SPill[aria-checked='true'], +SPillContainer SPill[aria-selected='true']) {
+    SPillSeparator {
+      background-color: transparent;
     }
+  }
+}
 
-    &:not(:only-child):last-child {
-      margin-right: var(--intergalactic-spacing-3x, 12px);
-    }
+SPillSeparator {
+  align-self: center;
 
-    &:only-child {
-      margin-left: var(--intergalactic-spacing-3x, 12px);
-      margin-right: var(--intergalactic-spacing-3x, 12px);
-    }
+  width: 1px;
+  height: calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px) * 2);
+  background-color: var(--intergalactic-control-pills-border, oklch(0.137 0.026 175.7 / 0.161));
+  
+  &[size='l'] {
+    height: calc(100% - var(--intergalactic-spacing-content-padding-small, 8px) * 2);
   }
 }
 
-SPill[neighborLocation='right'] {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+SSegmentIndicator {
+  position: absolute;
+
+  /*
+    TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
+    As of now JS fallback is used.
+  */
+  /* position-anchor:--active-segment; */
+  /*left:anchor(left);*/
+  /*width:anchor-size(width);*/
+  /*height:anchor-size(height);*/
+  left: var(--global-left);
+  width: var(--global-width);
+  height: var(--global-height);
+  transition: var(--global-speed);
+
+  background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0));
+  box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07));
+  border-radius: var(--intergalactic-rounded-small, 4px);
 }
 
-SPill[neighborLocation='both'] {
-  border-radius: 0;
-  /* disable-tokens-validator */
-  margin-left: -1px;
+SText {
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+  min-width: 0.8em;
 }
 
-SPill[neighborLocation='left'] {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  /* disable-tokens-validator */
-  margin-left: -1px;
+SAddon {
+  color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
+
+@media (prefers-reduced-motion) {
+  SSegmentIndicator {
+    transition: none;
+  }
+}

package/lib/types/Pills.d.ts

@@ -9,3 +9,4 @@ export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Int
  */
 declare const Pills: NSPills.Component;
 export default Pills;
+//# sourceMappingURL=Pills.d.ts.map

package/lib/types/Pills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pills.d.ts","sourceRoot":"","sources":["../../src/Pills.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAOnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAuP5C,eAAO,MAAM,SAAS,GAAI,cAAc,SAAS,EAAE,EAAE,SAAS,CAC5D,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,eAAe,CAClD,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC,aAAa,CAAC,CAC3E,GACD,cAAc,KACX,KAAK,CAAC,SAAS,KAAgB,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAE1E;;;;GAIG;AACH,QAAA,MAAM,KAAK,mBAKT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/types/Pills.type.d.ts

@@ -1,9 +1,10 @@
-import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
+import type { NSBox, NSNeighborLocation } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
 import type React from 'react';
 declare namespace NSPills {
     type Value = string | number | boolean | null;
-    type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {
+    type Props<T extends NSPills.Value = NSPills.Value> = NSBox.Props & {
         /** Pills size */
         size?: 'l' | 'm';
         /** Disabled state */
@@ -36,7 +37,7 @@ declare namespace NSPills {
         behavior: Props['behavior'];
     };
     namespace Pill {
-        type Props = BoxProps & NeighborItemProps & {
+        type Props = NSBox.Props & NSNeighborLocation.Detect.Props & {
             /** Pill value */
             value?: NSPills.Value;
             /** Disabled state */
@@ -49,10 +50,10 @@ declare namespace NSPills {
             addonRight?: React.ElementType;
         };
         namespace Text {
-            type Component = typeof Box;
+            type Component = NSText.Component;
         }
         namespace Addon {
-            type Component = typeof Box;
+            type Component = NSBox.Component;
         }
         type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;
     }
@@ -66,14 +67,15 @@ declare namespace NSPills {
         };
     };
 }
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type PillsValue = NSPills.Value;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type PillProps = NSPills.Pill.Props;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type PillsContext = NSPills.Ctx;
-/** @deprecated It will be removed in v18. */
+/** @deprecated It will be removed in v19. */
 export type PillsHandlers = NSPills.Handlers;
 export type { NSPills };
+//# sourceMappingURL=Pills.type.d.ts.map

package/lib/types/Pills.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pills.type.d.ts","sourceRoot":"","sources":["../../src/Pills.type.ts"],"names":[],"mappings":"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"}

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default, wrapPills } from './Pills';
 export * from './Pills.type';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC7C,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/pills",
   "description": "Semrush Pills Component",
-  "version": "17.2.1",
+  "version": "18.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,8 +13,11 @@
     "import": "./lib/esm/index.mjs",
     "require": "./lib/cjs/index.js"
   },
+  "dependencies": {
+    "@semcore/typography": "^18.0.0-prerelease.0"
+  },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.1"
+    "@semcore/base-components": "^18.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -22,11 +25,11 @@
     "directory": "semcore/pills"
   },
   "devDependencies": {
-    "@semcore/core": "17.2.1",
+    "@semcore/core": "18.0.0-prerelease.0",
+    "@semcore/base-components": "18.0.0-prerelease.0",
+    "@semcore/badge": "18.0.0-prerelease.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/badge": "17.2.1",
-    "@semcore/base-components": "17.2.1",
-    "@semcore/icon": "17.2.0"
+    "@semcore/icon": "18.0.0-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"