@enjoys/context-engine 1.2.0 → 1.4.1

package/data/completion/css.json

@@ -0,0 +1,1176 @@
+{
+  "language": "css",
+  "completions": [
+    {
+      "label": "display",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the display behavior of an element.\n\nValues: `block`, `inline`, `inline-block`, `flex`, `grid`, `none`, `contents`, `inline-flex`, `inline-grid`, `flow-root`, `table`, `list-item`." },
+      "insertText": "display: ${1|block,inline,inline-block,flex,grid,none,contents,inline-flex,inline-grid,flow-root|};",
+      "insertTextRules": 4,
+      "sortText": "00_display"
+    },
+    {
+      "label": "position",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets how an element is positioned in a document. Works with `top`, `right`, `bottom`, `left`, and `z-index`.\n\nValues: `static`, `relative`, `absolute`, `fixed`, `sticky`." },
+      "insertText": "position: ${1|static,relative,absolute,fixed,sticky|};",
+      "insertTextRules": 4,
+      "sortText": "00_position"
+    },
+    {
+      "label": "flex",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.\n\nSyntax: `flex: <grow> <shrink> <basis>;`\n\nExamples:\n- `flex: 1;` — grow to fill space\n- `flex: 0 0 auto;` — don't grow or shrink\n- `flex: 1 1 0%;` — distribute space evenly" },
+      "insertText": "flex: ${1:1} ${2:1} ${3:0%};",
+      "insertTextRules": 4,
+      "sortText": "00_flex"
+    },
+    {
+      "label": "grid-template-columns",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Defines the columns of a grid container.\n\nExamples:\n- `grid-template-columns: 1fr 1fr 1fr;`\n- `grid-template-columns: repeat(3, 1fr);`\n- `grid-template-columns: minmax(200px, 1fr) 3fr;`\n- `grid-template-columns: auto 1fr auto;`" },
+      "insertText": "grid-template-columns: ${1:repeat(${2:3}, ${3:1fr})};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-template-columns"
+    },
+    {
+      "label": "grid-template-rows",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Defines the rows of a grid container.\n\nExamples:\n- `grid-template-rows: auto 1fr auto;`\n- `grid-template-rows: repeat(3, minmax(100px, auto));`" },
+      "insertText": "grid-template-rows: ${1:auto 1fr auto};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-template-rows"
+    },
+    {
+      "label": "margin",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets the margin area on all four sides.\n\nSyntax: `margin: <top> <right> <bottom> <left>;`\n\nShorthand patterns:\n- `margin: 10px;` — all sides\n- `margin: 10px 20px;` — vertical | horizontal\n- `margin: 10px 20px 30px;` — top | horizontal | bottom\n- `margin: 10px 20px 30px 40px;` — top | right | bottom | left\n- `margin: 0 auto;` — center horizontally" },
+      "insertText": "margin: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_margin"
+    },
+    {
+      "label": "padding",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets the padding area on all four sides.\n\nSyntax: `padding: <top> <right> <bottom> <left>;`\n\nAccepts length, percentage, or `0`. Does not accept negative values or `auto`." },
+      "insertText": "padding: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_padding"
+    },
+    {
+      "label": "color",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the foreground color of text and text decorations.\n\nAccepts: named colors, hex (`#fff`), `rgb()`, `rgba()`, `hsl()`, `hsla()`, `oklch()`, `lab()`, `lch()`, `color()`, `currentColor`, `inherit`, `transparent`." },
+      "insertText": "color: ${1:#000};",
+      "insertTextRules": 4,
+      "sortText": "00_color"
+    },
+    {
+      "label": "background",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `background-color`, `background-image`, `background-position`, `background-size`, `background-repeat`, `background-origin`, `background-clip`, and `background-attachment`.\n\nExamples:\n- `background: #fff;`\n- `background: url('bg.png') no-repeat center/cover;`\n- `background: linear-gradient(to right, #000, #fff);`" },
+      "insertText": "background: ${1:#fff};",
+      "insertTextRules": 4,
+      "sortText": "00_background"
+    },
+    {
+      "label": "border",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `border-width`, `border-style`, and `border-color`.\n\nSyntax: `border: <width> <style> <color>;`\n\nStyles: `none`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`." },
+      "insertText": "border: ${1:1px} ${2|solid,dashed,dotted,double,none|} ${3:#000};",
+      "insertTextRules": 4,
+      "sortText": "00_border"
+    },
+    {
+      "label": "font",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `font-style`, `font-variant`, `font-weight`, `font-size`/`line-height`, and `font-family`.\n\nSyntax: `font: [style] [variant] [weight] size[/line-height] family;`\n\nExample: `font: italic bold 16px/1.5 'Helvetica Neue', sans-serif;`" },
+      "insertText": "font: ${1:16px}/${2:1.5} ${3:sans-serif};",
+      "insertTextRules": 4,
+      "sortText": "00_font"
+    },
+    {
+      "label": "animation",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`.\n\nSyntax: `animation: name duration timing-function delay iteration-count direction fill-mode;`\n\nExample: `animation: fadeIn 0.3s ease-in-out forwards;`" },
+      "insertText": "animation: ${1:name} ${2:0.3s} ${3|ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier()|} ${4:forwards};",
+      "insertTextRules": 4,
+      "sortText": "00_animation"
+    },
+    {
+      "label": "transition",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.\n\nSyntax: `transition: property duration timing-function delay;`\n\nExamples:\n- `transition: all 0.3s ease;`\n- `transition: opacity 0.2s, transform 0.3s ease-out;`" },
+      "insertText": "transition: ${1:all} ${2:0.3s} ${3|ease,ease-in,ease-out,ease-in-out,linear|};",
+      "insertTextRules": 4,
+      "sortText": "00_transition"
+    },
+    {
+      "label": "transform",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Applies a 2D or 3D transformation to an element.\n\nFunctions: `translate()`, `translateX()`, `translateY()`, `rotate()`, `scale()`, `scaleX()`, `scaleY()`, `skew()`, `skewX()`, `skewY()`, `matrix()`, `perspective()`, `translate3d()`, `rotate3d()`, `scale3d()`." },
+      "insertText": "transform: ${1|translate(),translateX(),translateY(),rotate(),scale(),skew(),matrix(),perspective()|};",
+      "insertTextRules": 4,
+      "sortText": "00_transform"
+    },
+    {
+      "label": "z-index",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the z-order of a positioned element and its descendants. Only works on elements with `position` other than `static`.\n\nValues: integer (positive or negative), `auto`." },
+      "insertText": "z-index: ${1:1};",
+      "insertTextRules": 4,
+      "sortText": "00_z-index"
+    },
+    {
+      "label": "overflow",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets what to do when content overflows the element's box.\n\nValues: `visible`, `hidden`, `clip`, `scroll`, `auto`.\n\nAlso: `overflow-x`, `overflow-y` for individual axis control." },
+      "insertText": "overflow: ${1|visible,hidden,clip,scroll,auto|};",
+      "insertTextRules": 4,
+      "sortText": "00_overflow"
+    },
+    {
+      "label": "cursor",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the type of mouse cursor when hovering over an element.\n\nCommon values: `pointer`, `default`, `text`, `move`, `not-allowed`, `grab`, `grabbing`, `crosshair`, `wait`, `progress`, `help`, `zoom-in`, `zoom-out`, `none`, `url()` for custom cursors." },
+      "insertText": "cursor: ${1|pointer,default,text,move,not-allowed,grab,grabbing,crosshair,wait,help,none|};",
+      "insertTextRules": 4,
+      "sortText": "00_cursor"
+    },
+    {
+      "label": "opacity",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the opacity level for an element. Affects the entire element including contents.\n\nRange: `0` (fully transparent) to `1` (fully opaque).\n\nNote: Unlike `visibility: hidden`, opacity `0` still occupies space and receives events." },
+      "insertText": "opacity: ${1:1};",
+      "insertTextRules": 4,
+      "sortText": "00_opacity"
+    },
+    {
+      "label": "box-sizing",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Defines how the width and height of an element are calculated.\n\n- `content-box` (default): Width/height only include content\n- `border-box`: Width/height include padding and border\n\nBest practice: `*, *::before, *::after { box-sizing: border-box; }`" },
+      "insertText": "box-sizing: ${1|border-box,content-box|};",
+      "insertTextRules": 4,
+      "sortText": "00_box-sizing"
+    },
+    {
+      "label": ":hover",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when the user interacts with an element via a pointing device (mouse hover).\n\nSpecificity: adds (0, 1, 0) to the selector.\n\nExample: `a:hover { color: blue; text-decoration: underline; }`" },
+      "insertText": ":hover {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_hover"
+    },
+    {
+      "label": ":focus",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when an element has received focus (keyboard tab, click, or programmatic focus).\n\nBest practice: Always provide visible `:focus` styles for accessibility. Consider `:focus-visible` for keyboard-only focus." },
+      "insertText": ":focus {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_focus"
+    },
+    {
+      "label": "::before",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Creates a pseudo-element as the first child of the selected element. Requires `content` property.\n\nExample:\n```css\n.icon::before {\n  content: '';\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n}\n```" },
+      "insertText": "::before {\n\tcontent: '${1}';\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_before"
+    },
+    {
+      "label": "::after",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Creates a pseudo-element as the last child of the selected element. Requires `content` property.\n\nCommonly used for decorative elements, clearfixes, and overlays." },
+      "insertText": "::after {\n\tcontent: '${1}';\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_after"
+    },
+    {
+      "label": ":nth-child()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches elements based on their position among siblings.\n\nSyntax: `:nth-child(An+B [of S]?)`\n\nExamples:\n- `:nth-child(2)` — second child\n- `:nth-child(odd)` / `:nth-child(2n+1)` — odd children\n- `:nth-child(even)` / `:nth-child(2n)` — even children\n- `:nth-child(3n)` — every third child\n- `:nth-child(-n+3)` — first three children" },
+      "insertText": ":nth-child(${1:2n+1})",
+      "insertTextRules": 4,
+      "sortText": "01_nth-child"
+    },
+    {
+      "label": ":first-child",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches the first child element. Equivalent to `:nth-child(1)`.\n\nExample: `li:first-child { font-weight: bold; }`" },
+      "insertText": ":first-child",
+      "insertTextRules": 0,
+      "sortText": "01_first-child"
+    },
+    {
+      "label": "@media",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Applies styles conditionally based on media queries.\n\nMedia types: `all`, `screen`, `print`\nMedia features: `width`, `height`, `aspect-ratio`, `orientation`, `resolution`, `prefers-color-scheme`, `prefers-reduced-motion`, `hover`, `pointer`.\n\nLogical operators: `and`, `not`, `only`, `,` (or)." },
+      "insertText": "@media ${1|(max-width: 768px),(min-width: 768px),(prefers-color-scheme: dark),(prefers-reduced-motion: reduce)|} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_media"
+    },
+    {
+      "label": "@keyframes",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Defines the keyframes for an animation sequence.\n\nSyntax:\n```css\n@keyframes name {\n  from { /* start state */ }\n  to { /* end state */ }\n}\n```\nOr with percentage stops:\n```css\n@keyframes name {\n  0% { opacity: 0; }\n  50% { opacity: 0.5; }\n  100% { opacity: 1; }\n}\n```" },
+      "insertText": "@keyframes ${1:animationName} {\n\tfrom {\n\t\t${2:opacity: 0;}\n\t}\n\tto {\n\t\t${3:opacity: 1;}\n\t}\n}",
+      "insertTextRules": 4,
+      "sortText": "02_keyframes"
+    },
+    {
+      "label": "@import",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Imports a stylesheet into the current stylesheet. Must appear before all other rules except `@charset` and `@layer`.\n\nSyntax:\n- `@import url('file.css');`\n- `@import url('print.css') print;`\n- `@import url('mobile.css') screen and (max-width: 768px);`\n- `@import 'file.css' layer(name);`" },
+      "insertText": "@import url('${1:file.css}');",
+      "insertTextRules": 4,
+      "sortText": "02_import"
+    },
+    {
+      "label": "@font-face",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Defines a custom font to be used in the document.\n\nDescriptors: `font-family`, `src`, `font-weight`, `font-style`, `font-display`, `unicode-range`, `font-stretch`, `font-variant`, `font-feature-settings`.\n\n`font-display` values: `auto`, `block`, `swap`, `fallback`, `optional`." },
+      "insertText": "@font-face {\n\tfont-family: '${1:FontName}';\n\tsrc: url('${2:font.woff2}') format('woff2'),\n\t     url('${3:font.woff}') format('woff');\n\tfont-weight: ${4|normal,bold,100,200,300,400,500,600,700,800,900|};\n\tfont-style: ${5|normal,italic|};\n\tfont-display: ${6|swap,block,fallback,optional|};\n}",
+      "insertTextRules": 4,
+      "sortText": "02_font-face"
+    },
+    {
+      "label": "@supports",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Feature query — applies styles only if the browser supports a given CSS feature.\n\nExamples:\n- `@supports (display: grid) { ... }`\n- `@supports not (gap: 1rem) { ... }`\n- `@supports (display: grid) and (gap: 1rem) { ... }`\n- `@supports selector(:has()) { ... }`" },
+      "insertText": "@supports (${1:display: grid}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_supports"
+    },
+    {
+      "label": "@layer",
+      "kind": 14,
+      "detail": "CSS At-Rule (Cascade Layers)",
+      "documentation": { "value": "Declares cascade layers to control the order of specificity.\n\nSyntax:\n- `@layer name;` — declare layer order\n- `@layer name { ... }` — assign rules to layer\n- `@layer name1, name2, name3;` — define layer order\n- `@import url('lib.css') layer(lib);`\n\nLayers declared earlier have lower priority." },
+      "insertText": "@layer ${1:layerName} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_layer"
+    },
+    {
+      "label": "@container",
+      "kind": 14,
+      "detail": "CSS At-Rule (Container Queries)",
+      "documentation": { "value": "Applies styles based on the size of a containing element (not the viewport).\n\nRequires `container-type` on the parent:\n```css\n.parent { container-type: inline-size; }\n@container (min-width: 400px) { .child { ... } }\n```\nNamed containers: `container-name: sidebar;` + `@container sidebar (...) { }`" },
+      "insertText": "@container ${1:(min-width: ${2:400px})} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_container"
+    },
+    {
+      "label": "var()",
+      "kind": 14,
+      "detail": "CSS Function — Custom Properties",
+      "documentation": { "value": "Inserts the value of a CSS custom property.\n\nSyntax: `var(--property-name, fallback-value)`\n\nExample:\n```css\n:root { --primary: #3490dc; }\n.btn { color: var(--primary, blue); }\n```\nFallback can itself use `var()`: `var(--a, var(--b, #000))`." },
+      "insertText": "var(--${1:property}${2:, ${3:fallback}})",
+      "insertTextRules": 4,
+      "sortText": "00_var"
+    },
+    {
+      "label": "Flexbox Center",
+      "kind": 15,
+      "detail": "Snippet — Center element with Flexbox",
+      "documentation": { "value": "Centers child elements both horizontally and vertically using Flexbox.\n\nThis is the most common centering technique in modern CSS." },
+      "insertText": "display: flex;\njustify-content: center;\nalign-items: center;",
+      "insertTextRules": 4,
+      "sortText": "03_flexbox-center"
+    },
+    {
+      "label": "Grid Layout",
+      "kind": 15,
+      "detail": "Snippet — Responsive grid layout",
+      "documentation": { "value": "Creates a responsive grid layout using `auto-fill` and `minmax()` for fluid column sizing without media queries." },
+      "insertText": "display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(${1:250px}, 1fr));\ngap: ${2:1rem};",
+      "insertTextRules": 4,
+      "sortText": "03_grid-layout"
+    },
+    {
+      "label": "Media Query Mobile",
+      "kind": 15,
+      "detail": "Snippet — Mobile-first breakpoint",
+      "documentation": { "value": "Mobile-first media query for tablet and above (768px). Common breakpoints:\n- 480px: Mobile landscape\n- 768px: Tablet\n- 1024px: Desktop\n- 1280px: Large desktop" },
+      "insertText": "@media (min-width: ${1|480px,768px,1024px,1280px|}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "03_media-mobile"
+    },
+    {
+      "label": "Custom Property Definition",
+      "kind": 15,
+      "detail": "Snippet — CSS Custom Property on :root",
+      "documentation": { "value": "Defines a CSS custom property (CSS variable) on the `:root` pseudo-class for global usage.\n\nCustom properties are inherited and can be overridden in nested scopes." },
+      "insertText": ":root {\n\t--${1:property-name}: ${2:value};\n}",
+      "insertTextRules": 4,
+      "sortText": "03_custom-property"
+    },
+    {
+      "label": "Dark Mode Toggle",
+      "kind": 15,
+      "detail": "Snippet — prefers-color-scheme dark",
+      "documentation": { "value": "Uses the `prefers-color-scheme` media feature to apply dark mode styles based on user system preference." },
+      "insertText": "@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t--bg: ${1:#1a1a2e};\n\t\t--text: ${2:#e0e0e0};\n\t}\n}",
+      "insertTextRules": 4,
+      "sortText": "03_dark-mode"
+    },
+    {
+      "label": "calc()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Performs calculations to determine CSS property values. Supports `+`, `-`, `*`, `/` and can mix units.\n\nExamples:\n- `width: calc(100% - 2rem);`\n- `font-size: calc(1rem + 0.5vw);`\n- `height: calc(100vh - var(--header-height));`" },
+      "insertText": "calc(${1:100%} ${2|-,+|} ${3:2rem})",
+      "insertTextRules": 4,
+      "sortText": "00_calc"
+    },
+    {
+      "label": "clamp()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Clamps a value between a minimum and maximum.\n\nSyntax: `clamp(MIN, VAL, MAX)`\n\nExample: `font-size: clamp(1rem, 2.5vw, 2rem);` — responsive font that never goes below 1rem or above 2rem." },
+      "insertText": "clamp(${1:1rem}, ${2:2.5vw}, ${3:2rem})",
+      "insertTextRules": 4,
+      "sortText": "00_clamp"
+    },
+    {
+      "label": "gap",
+      "kind": 14,
+      "detail": "CSS Property (Flexbox/Grid)",
+      "documentation": { "value": "Sets the gap (gutter) between rows and columns in flex and grid layouts.\n\nShorthand for `row-gap` and `column-gap`.\n\n- `gap: 1rem;` — uniform gap\n- `gap: 1rem 2rem;` — row gap | column gap" },
+      "insertText": "gap: ${1:1rem};",
+      "insertTextRules": 4,
+      "sortText": "00_gap"
+    },
+    {
+      "label": "Visually Hidden",
+      "kind": 15,
+      "detail": "Snippet — Screen reader only",
+      "documentation": { "value": "Hides an element visually while keeping it accessible to screen readers. Preferred over `display: none` for accessibility." },
+      "insertText": "position: absolute;\nwidth: 1px;\nheight: 1px;\npadding: 0;\nmargin: -1px;\noverflow: hidden;\nclip: rect(0, 0, 0, 0);\nwhite-space: nowrap;\nborder-width: 0;",
+      "insertTextRules": 4,
+      "sortText": "03_visually-hidden"
+    },
+
+    {
+      "label": "width",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the width of an element's content area.\n\nValues: `auto`, `<length>`, `<percentage>`, `min-content`, `max-content`, `fit-content()`." },
+      "insertText": "width: ${1:100%};",
+      "insertTextRules": 4,
+      "sortText": "00_width"
+    },
+    {
+      "label": "height",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the height of an element's content area.\n\nValues: `auto`, `<length>`, `<percentage>`, `min-content`, `max-content`, `fit-content()`, `100vh`, `100dvh`." },
+      "insertText": "height: ${1:auto};",
+      "insertTextRules": 4,
+      "sortText": "00_height"
+    },
+    {
+      "label": "min-width",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the minimum width of an element. Overrides `width` and `max-width` when they result in a smaller value." },
+      "insertText": "min-width: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_min-width"
+    },
+    {
+      "label": "max-width",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the maximum width of an element. Commonly used for centered layouts: `max-width: 1200px; margin: 0 auto;`." },
+      "insertText": "max-width: ${1:1200px};",
+      "insertTextRules": 4,
+      "sortText": "00_max-width"
+    },
+    {
+      "label": "min-height",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the minimum height. Common pattern: `min-height: 100vh;` for full-page layouts." },
+      "insertText": "min-height: ${1:100vh};",
+      "insertTextRules": 4,
+      "sortText": "00_min-height"
+    },
+    {
+      "label": "max-height",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the maximum height. Commonly used with `overflow: auto` for scrollable regions." },
+      "insertText": "max-height: ${1:100%};",
+      "insertTextRules": 4,
+      "sortText": "00_max-height"
+    },
+    {
+      "label": "top",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the vertical position of a positioned element from the top edge." },
+      "insertText": "top: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_top"
+    },
+    {
+      "label": "right",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the horizontal position from the right edge of a positioned element's containing block." },
+      "insertText": "right: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_right"
+    },
+    {
+      "label": "bottom",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the vertical position from the bottom edge of a positioned element's containing block." },
+      "insertText": "bottom: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_bottom"
+    },
+    {
+      "label": "left",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the horizontal position from the left edge of a positioned element's containing block." },
+      "insertText": "left: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_left"
+    },
+    {
+      "label": "inset",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `top`, `right`, `bottom`, `left`.\n\n`inset: 0;` fills the containing block completely." },
+      "insertText": "inset: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_inset"
+    },
+    {
+      "label": "flex-direction",
+      "kind": 14,
+      "detail": "CSS Flexbox Property",
+      "documentation": { "value": "Defines the main axis direction for a flex container.\n\nValues: `row`, `row-reverse`, `column`, `column-reverse`." },
+      "insertText": "flex-direction: ${1|row,row-reverse,column,column-reverse|};",
+      "insertTextRules": 4,
+      "sortText": "00_flex-direction"
+    },
+    {
+      "label": "flex-wrap",
+      "kind": 14,
+      "detail": "CSS Flexbox Property",
+      "documentation": { "value": "Controls whether flex items wrap onto multiple lines.\n\nValues: `nowrap`, `wrap`, `wrap-reverse`." },
+      "insertText": "flex-wrap: ${1|nowrap,wrap,wrap-reverse|};",
+      "insertTextRules": 4,
+      "sortText": "00_flex-wrap"
+    },
+    {
+      "label": "justify-content",
+      "kind": 14,
+      "detail": "CSS Flexbox/Grid Property",
+      "documentation": { "value": "Distributes space along the main axis.\n\nValues: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`." },
+      "insertText": "justify-content: ${1|flex-start,flex-end,center,space-between,space-around,space-evenly|};",
+      "insertTextRules": 4,
+      "sortText": "00_justify-content"
+    },
+    {
+      "label": "align-items",
+      "kind": 14,
+      "detail": "CSS Flexbox/Grid Property",
+      "documentation": { "value": "Aligns flex/grid items along the cross axis.\n\nValues: `stretch`, `flex-start`, `flex-end`, `center`, `baseline`." },
+      "insertText": "align-items: ${1|stretch,flex-start,flex-end,center,baseline|};",
+      "insertTextRules": 4,
+      "sortText": "00_align-items"
+    },
+    {
+      "label": "align-content",
+      "kind": 14,
+      "detail": "CSS Flexbox/Grid Property",
+      "documentation": { "value": "Distributes space between flex/grid lines on the cross axis. Only applies with multiple lines." },
+      "insertText": "align-content: ${1|stretch,flex-start,flex-end,center,space-between,space-around|};",
+      "insertTextRules": 4,
+      "sortText": "00_align-content"
+    },
+    {
+      "label": "align-self",
+      "kind": 14,
+      "detail": "CSS Flexbox/Grid Property",
+      "documentation": { "value": "Overrides `align-items` for this specific flex/grid item on the cross axis." },
+      "insertText": "align-self: ${1|auto,flex-start,flex-end,center,stretch,baseline|};",
+      "insertTextRules": 4,
+      "sortText": "00_align-self"
+    },
+    {
+      "label": "flex-grow",
+      "kind": 14,
+      "detail": "CSS Flexbox Property",
+      "documentation": { "value": "Specifies how much a flex item should grow relative to siblings. Default: `0`." },
+      "insertText": "flex-grow: ${1:1};",
+      "insertTextRules": 4,
+      "sortText": "00_flex-grow"
+    },
+    {
+      "label": "flex-shrink",
+      "kind": 14,
+      "detail": "CSS Flexbox Property",
+      "documentation": { "value": "Specifies how much a flex item should shrink. Default: `1`. Set `0` to prevent shrinking." },
+      "insertText": "flex-shrink: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_flex-shrink"
+    },
+    {
+      "label": "flex-basis",
+      "kind": 14,
+      "detail": "CSS Flexbox Property",
+      "documentation": { "value": "Sets the initial main size of a flex item before space distribution." },
+      "insertText": "flex-basis: ${1:auto};",
+      "insertTextRules": 4,
+      "sortText": "00_flex-basis"
+    },
+    {
+      "label": "order",
+      "kind": 14,
+      "detail": "CSS Flexbox/Grid Property",
+      "documentation": { "value": "Sets the visual order of a flex/grid item. Default: `0`. Negative values move earlier." },
+      "insertText": "order: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_order"
+    },
+    {
+      "label": "grid-area",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Shorthand for `grid-row-start` / `grid-column-start` / `grid-row-end` / `grid-column-end`.\n\nAlso used with `grid-template-areas` for named placement." },
+      "insertText": "grid-area: ${1:name};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-area"
+    },
+    {
+      "label": "grid-template-areas",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Defines named grid areas using ASCII art syntax.\n\nExample:\n```css\ngrid-template-areas:\n  'header header'\n  'sidebar main'\n  'footer footer';\n```" },
+      "insertText": "grid-template-areas:\n\t'${1:header} ${2:header}'\n\t'${3:sidebar} ${4:main}'\n\t'${5:footer} ${6:footer}';",
+      "insertTextRules": 4,
+      "sortText": "00_grid-template-areas"
+    },
+    {
+      "label": "grid-auto-flow",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Controls how auto-placed items flow into the grid.\n\nValues: `row`, `column`, `dense`, `row dense`, `column dense`." },
+      "insertText": "grid-auto-flow: ${1|row,column,dense,row dense,column dense|};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-auto-flow"
+    },
+    {
+      "label": "place-items",
+      "kind": 14,
+      "detail": "CSS Grid Shorthand",
+      "documentation": { "value": "Shorthand for `align-items` + `justify-items`. `place-items: center;` centers grid items." },
+      "insertText": "place-items: ${1:center};",
+      "insertTextRules": 4,
+      "sortText": "00_place-items"
+    },
+    {
+      "label": "place-content",
+      "kind": 14,
+      "detail": "CSS Grid Shorthand",
+      "documentation": { "value": "Shorthand for `align-content` + `justify-content`." },
+      "insertText": "place-content: ${1:center};",
+      "insertTextRules": 4,
+      "sortText": "00_place-content"
+    },
+    {
+      "label": "font-size",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the size of the font.\n\nUnits: `px`, `em`, `rem`, `%`, `vw`. Fluid: `clamp(1rem, 2.5vw, 2rem)`." },
+      "insertText": "font-size: ${1:1rem};",
+      "insertTextRules": 4,
+      "sortText": "00_font-size"
+    },
+    {
+      "label": "font-weight",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the weight (boldness) of the font.\n\n100=Thin, 300=Light, 400=Normal, 500=Medium, 700=Bold, 900=Black." },
+      "insertText": "font-weight: ${1|normal,bold,100,200,300,400,500,600,700,800,900|};",
+      "insertTextRules": 4,
+      "sortText": "00_font-weight"
+    },
+    {
+      "label": "font-family",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the font family. Always end with a generic fallback.\n\nGenerics: `serif`, `sans-serif`, `monospace`, `system-ui`." },
+      "insertText": "font-family: ${1:'Inter'}, ${2:system-ui}, ${3:sans-serif};",
+      "insertTextRules": 4,
+      "sortText": "00_font-family"
+    },
+    {
+      "label": "line-height",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the line height. Unitless values (1.5) are recommended as they scale with font-size. WCAG recommends 1.5+ for body text." },
+      "insertText": "line-height: ${1:1.5};",
+      "insertTextRules": 4,
+      "sortText": "00_line-height"
+    },
+    {
+      "label": "letter-spacing",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets spacing between characters. Negative values tighten text. Useful for headings (-0.025em) or uppercase text (0.05em)." },
+      "insertText": "letter-spacing: ${1:0.025em};",
+      "insertTextRules": 4,
+      "sortText": "00_letter-spacing"
+    },
+    {
+      "label": "text-align",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Aligns inline content within a block.\n\nValues: `left`, `right`, `center`, `justify`, `start`, `end`." },
+      "insertText": "text-align: ${1|left,center,right,justify,start,end|};",
+      "insertTextRules": 4,
+      "sortText": "00_text-align"
+    },
+    {
+      "label": "text-decoration",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for text decoration line, style, color, and thickness.\n\nLines: `none`, `underline`, `overline`, `line-through`.\nStyles: `solid`, `double`, `dotted`, `dashed`, `wavy`." },
+      "insertText": "text-decoration: ${1|none,underline,overline,line-through|};",
+      "insertTextRules": 4,
+      "sortText": "00_text-decoration"
+    },
+    {
+      "label": "text-transform",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Controls capitalization of text.\n\nValues: `none`, `capitalize`, `uppercase`, `lowercase`." },
+      "insertText": "text-transform: ${1|none,capitalize,uppercase,lowercase|};",
+      "insertTextRules": 4,
+      "sortText": "00_text-transform"
+    },
+    {
+      "label": "text-overflow",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies how overflowed text is signaled. Values: `clip`, `ellipsis`.\n\nRequires `overflow: hidden` and `white-space: nowrap`." },
+      "insertText": "text-overflow: ${1|clip,ellipsis|};",
+      "insertTextRules": 4,
+      "sortText": "00_text-overflow"
+    },
+    {
+      "label": "white-space",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Controls how whitespace and newlines are handled.\n\nValues: `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line`, `break-spaces`." },
+      "insertText": "white-space: ${1|normal,nowrap,pre,pre-wrap,pre-line|};",
+      "insertTextRules": 4,
+      "sortText": "00_white-space"
+    },
+    {
+      "label": "word-break",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Controls line breaking rules within words.\n\nValues: `normal`, `break-all`, `keep-all`, `break-word`." },
+      "insertText": "word-break: ${1|normal,break-all,keep-all|};",
+      "insertTextRules": 4,
+      "sortText": "00_word-break"
+    },
+    {
+      "label": "overflow-wrap",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Allows unbreakable strings to be broken to prevent overflow.\n\nValues: `normal`, `break-word`, `anywhere`." },
+      "insertText": "overflow-wrap: ${1|normal,break-word,anywhere|};",
+      "insertTextRules": 4,
+      "sortText": "00_overflow-wrap"
+    },
+    {
+      "label": "background-color",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the background color of an element. Supports all CSS color formats including alpha." },
+      "insertText": "background-color: ${1:#fff};",
+      "insertTextRules": 4,
+      "sortText": "00_background-color"
+    },
+    {
+      "label": "background-image",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets one or more background images. Supports URLs and gradient functions." },
+      "insertText": "background-image: ${1|url(''),linear-gradient(),radial-gradient()|};",
+      "insertTextRules": 4,
+      "sortText": "00_background-image"
+    },
+    {
+      "label": "background-size",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the size of background images.\n\nValues: `auto`, `cover`, `contain`, `<length> <length>`." },
+      "insertText": "background-size: ${1|auto,cover,contain|};",
+      "insertTextRules": 4,
+      "sortText": "00_background-size"
+    },
+    {
+      "label": "background-position",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the initial position of a background image.\n\nKeywords: `top`, `right`, `bottom`, `left`, `center`. Accepts `<position>` pairs." },
+      "insertText": "background-position: ${1:center};",
+      "insertTextRules": 4,
+      "sortText": "00_background-position"
+    },
+    {
+      "label": "background-repeat",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets how background images are repeated.\n\nValues: `repeat`, `no-repeat`, `repeat-x`, `repeat-y`, `space`, `round`." },
+      "insertText": "background-repeat: ${1|no-repeat,repeat,repeat-x,repeat-y,space,round|};",
+      "insertTextRules": 4,
+      "sortText": "00_background-repeat"
+    },
+    {
+      "label": "border-radius",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Rounds the corners of an element.\n\n`border-radius: 50%;` creates a circle. 1-4 values: TL, TR, BR, BL." },
+      "insertText": "border-radius: ${1:0.5rem};",
+      "insertTextRules": 4,
+      "sortText": "00_border-radius"
+    },
+    {
+      "label": "box-shadow",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Adds shadow effects around an element.\n\nSyntax: `[inset] <x> <y> <blur> [spread] <color>`. Supports multiple shadows." },
+      "insertText": "box-shadow: ${1:0 1px 3px rgba(0, 0, 0, 0.12)};",
+      "insertTextRules": 4,
+      "sortText": "00_box-shadow"
+    },
+    {
+      "label": "outline",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Draws a line outside the element's border. Does NOT affect layout.\n\nSyntax: `<width> <style> <color>`." },
+      "insertText": "outline: ${1:2px} ${2|solid,dashed,dotted|} ${3:#000};",
+      "insertTextRules": 4,
+      "sortText": "00_outline"
+    },
+    {
+      "label": "filter",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Applies graphical effects. Functions: `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, `sepia()`, `drop-shadow()`." },
+      "insertText": "filter: ${1|blur(4px),brightness(0.8),grayscale(100%),drop-shadow(2px 4px 6px rgba(0\\,0\\,0\\,0.3))|};",
+      "insertTextRules": 4,
+      "sortText": "00_filter"
+    },
+    {
+      "label": "backdrop-filter",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Applies filter effects to the area behind an element. Requires transparent/semi-transparent background.\n\nGlass morphism: `backdrop-filter: blur(10px);`" },
+      "insertText": "backdrop-filter: blur(${1:10px});",
+      "insertTextRules": 4,
+      "sortText": "00_backdrop-filter"
+    },
+    {
+      "label": "object-fit",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets how replaced elements (`<img>`, `<video>`) resize within their container.\n\nValues: `fill`, `contain`, `cover`, `none`, `scale-down`." },
+      "insertText": "object-fit: ${1|cover,contain,fill,none,scale-down|};",
+      "insertTextRules": 4,
+      "sortText": "00_object-fit"
+    },
+    {
+      "label": "aspect-ratio",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets a preferred aspect ratio. Examples: `16 / 9`, `1` (square), `4 / 3`." },
+      "insertText": "aspect-ratio: ${1:16 / 9};",
+      "insertTextRules": 4,
+      "sortText": "00_aspect-ratio"
+    },
+    {
+      "label": "visibility",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets element visibility. `hidden` hides element but preserves layout space (unlike `display: none`)." },
+      "insertText": "visibility: ${1|visible,hidden,collapse|};",
+      "insertTextRules": 4,
+      "sortText": "00_visibility"
+    },
+    {
+      "label": "pointer-events",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Controls whether an element responds to pointer events. `none` makes clicks pass through." },
+      "insertText": "pointer-events: ${1|auto,none|};",
+      "insertTextRules": 4,
+      "sortText": "00_pointer-events"
+    },
+    {
+      "label": "user-select",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Controls whether text can be selected. `none` prevents selection, `all` selects entire element on click." },
+      "insertText": "user-select: ${1|auto,text,none,all|};",
+      "insertTextRules": 4,
+      "sortText": "00_user-select"
+    },
+    {
+      "label": "resize",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets whether an element is user-resizable. Requires `overflow` other than `visible`." },
+      "insertText": "resize: ${1|none,both,horizontal,vertical|};",
+      "insertTextRules": 4,
+      "sortText": "00_resize"
+    },
+    {
+      "label": "scroll-behavior",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets whether scrolling is instant or smooth. `html { scroll-behavior: smooth; }` for smooth anchor links." },
+      "insertText": "scroll-behavior: ${1|auto,smooth|};",
+      "insertTextRules": 4,
+      "sortText": "00_scroll-behavior"
+    },
+    {
+      "label": "scroll-snap-type",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Enables scroll snapping. Values: `x mandatory`, `y mandatory`, `x proximity`, `y proximity`." },
+      "insertText": "scroll-snap-type: ${1|x mandatory,y mandatory,x proximity,y proximity|};",
+      "insertTextRules": 4,
+      "sortText": "00_scroll-snap-type"
+    },
+    {
+      "label": "will-change",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Hints to the browser about upcoming changes for optimization. Use sparingly." },
+      "insertText": "will-change: ${1|transform,opacity,scroll-position|};",
+      "insertTextRules": 4,
+      "sortText": "00_will-change"
+    },
+    {
+      "label": "contain",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Indicates containment restrictions for performance.\n\nValues: `none`, `strict`, `content`, `size`, `layout`, `style`, `paint`." },
+      "insertText": "contain: ${1|none,strict,content,layout,paint|};",
+      "insertTextRules": 4,
+      "sortText": "00_contain"
+    },
+    {
+      "label": "container-type",
+      "kind": 14,
+      "detail": "CSS Property (Container Queries)",
+      "documentation": { "value": "Establishes element as a containment context for container queries.\n\nValues: `normal`, `inline-size`, `size`." },
+      "insertText": "container-type: ${1|inline-size,size,normal|};",
+      "insertTextRules": 4,
+      "sortText": "00_container-type"
+    },
+    {
+      "label": "container-name",
+      "kind": 14,
+      "detail": "CSS Property (Container Queries)",
+      "documentation": { "value": "Names a container for targeted `@container` queries." },
+      "insertText": "container-name: ${1:name};",
+      "insertTextRules": 4,
+      "sortText": "00_container-name"
+    },
+    {
+      "label": "accent-color",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the accent color for checkboxes, radios, range sliders, and progress bars." },
+      "insertText": "accent-color: ${1:#3490dc};",
+      "insertTextRules": 4,
+      "sortText": "00_accent-color"
+    },
+    {
+      "label": "color-scheme",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Indicates supported color schemes. `light dark` enables native dark mode for form controls and scrollbars." },
+      "insertText": "color-scheme: ${1|light dark,light,dark|};",
+      "insertTextRules": 4,
+      "sortText": "00_color-scheme"
+    },
+    {
+      "label": "mix-blend-mode",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Defines how element content blends with content behind it.\n\nValues: `normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, etc." },
+      "insertText": "mix-blend-mode: ${1|normal,multiply,screen,overlay,darken,lighten|};",
+      "insertTextRules": 4,
+      "sortText": "00_mix-blend-mode"
+    },
+    {
+      "label": "isolation",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Creates a new stacking context. `isolate` prevents `mix-blend-mode` from affecting ancestors." },
+      "insertText": "isolation: ${1|auto,isolate|};",
+      "insertTextRules": 4,
+      "sortText": "00_isolation"
+    },
+    {
+      "label": "min()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Returns the smallest value from a list. Example: `width: min(100%, 600px);`." },
+      "insertText": "min(${1:100%}, ${2:600px})",
+      "insertTextRules": 4,
+      "sortText": "00_min"
+    },
+    {
+      "label": "max()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Returns the largest value. Example: `width: max(300px, 50%);`." },
+      "insertText": "max(${1:300px}, ${2:50%})",
+      "insertTextRules": 4,
+      "sortText": "00_max"
+    },
+    {
+      "label": ":last-child",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches the last child element. Equivalent to `:nth-last-child(1)`." },
+      "insertText": ":last-child",
+      "insertTextRules": 0,
+      "sortText": "01_last-child"
+    },
+    {
+      "label": ":focus-visible",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when element has focus AND the browser determines focus should be visible (typically keyboard focus). Preferred over `:focus` for custom focus indicators." },
+      "insertText": ":focus-visible {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_focus-visible"
+    },
+    {
+      "label": ":focus-within",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when the element or any of its descendants has focus. Useful for highlighting parent containers of focused inputs." },
+      "insertText": ":focus-within {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_focus-within"
+    },
+    {
+      "label": ":has()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class (Selector)",
+      "documentation": { "value": "The parent selector — matches if any descendant matches the argument.\n\nExamples: `.card:has(img)`, `.form:has(:invalid)`, `h2:has(+ p)`." },
+      "insertText": ":has(${1:selector}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_has"
+    },
+    {
+      "label": ":is()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class (Selector)",
+      "documentation": { "value": "Matches any element matched by one of the selectors in the list. Simplifies complex selectors.\n\nSpecificity: Takes the highest specificity selector. Use `:where()` for zero specificity." },
+      "insertText": ":is(${1:selector-list})",
+      "insertTextRules": 4,
+      "sortText": "01_is"
+    },
+    {
+      "label": ":where()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class (Selector)",
+      "documentation": { "value": "Like `:is()` but with zero specificity. Ideal for default styles that should be easily overridable." },
+      "insertText": ":where(${1:selector-list})",
+      "insertTextRules": 4,
+      "sortText": "01_where"
+    },
+    {
+      "label": ":not()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class (Negation)",
+      "documentation": { "value": "Matches elements that do NOT match the given selector.\n\nExample: `p:not(.special)`, `input:not(:disabled)`." },
+      "insertText": ":not(${1:selector})",
+      "insertTextRules": 4,
+      "sortText": "01_not"
+    },
+    {
+      "label": "::marker",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Styles the marker box of a list item (bullet or number). Properties allowed: color, font, content, and a few others." },
+      "insertText": "::marker {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_marker"
+    },
+    {
+      "label": "::selection",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Styles the portion of text selected by the user. Limited properties: `color`, `background-color`, `text-decoration`, `text-shadow`." },
+      "insertText": "::selection {\n\tbackground-color: ${1:#b3d4fc};\n\tcolor: ${2:#000};\n}",
+      "insertTextRules": 4,
+      "sortText": "01_selection"
+    },
+    {
+      "label": "::placeholder",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Styles the placeholder text of input and textarea elements." },
+      "insertText": "::placeholder {\n\tcolor: ${1:#9ca3af};\n\topacity: 1;\n}",
+      "insertTextRules": 4,
+      "sortText": "01_placeholder"
+    },
+    {
+      "label": "@property",
+      "kind": 14,
+      "detail": "CSS At-Rule (Custom Properties)",
+      "documentation": { "value": "Registers a custom property with a type, initial value, and inheritance.\n\nEnables animation of custom properties and type checking." },
+      "insertText": "@property --${1:property-name} {\n\tsyntax: '${2|<color>,<length>,<number>,<percentage>,<integer>|}';\n\tinherits: ${3|false,true|};\n\tinitial-value: ${4:value};\n}",
+      "insertTextRules": 4,
+      "sortText": "02_property"
+    },
+    {
+      "label": "@scope",
+      "kind": 14,
+      "detail": "CSS At-Rule (Scoping)",
+      "documentation": { "value": "Scopes styles to a subtree of the DOM. Limits style applicability without increasing specificity.\n\nSyntax: `@scope (.parent) to (.limit) { }`." },
+      "insertText": "@scope (${1:.parent}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_scope"
+    },
+    {
+      "label": "Truncate Text",
+      "kind": 15,
+      "detail": "Snippet — Single-line text truncation",
+      "documentation": { "value": "Truncates overflowing text with an ellipsis. The classic three-property pattern." },
+      "insertText": "overflow: hidden;\nwhite-space: nowrap;\ntext-overflow: ellipsis;",
+      "insertTextRules": 4,
+      "sortText": "03_truncate"
+    },
+    {
+      "label": "Multi-line Truncate",
+      "kind": 15,
+      "detail": "Snippet — Multi-line text clamp",
+      "documentation": { "value": "Truncates text after N lines using `-webkit-line-clamp`. Works in all modern browsers despite the `-webkit-` prefix." },
+      "insertText": "display: -webkit-box;\n-webkit-line-clamp: ${1:3};\n-webkit-box-orient: vertical;\noverflow: hidden;",
+      "insertTextRules": 4,
+      "sortText": "03_multiline-truncate"
+    },
+    {
+      "label": "Sticky Header",
+      "kind": 15,
+      "detail": "Snippet — Sticky positioned header",
+      "documentation": { "value": "Creates a sticky header that sticks to the top when scrolling past it." },
+      "insertText": "position: sticky;\ntop: 0;\nz-index: 10;\nbackground: ${1:white};",
+      "insertTextRules": 4,
+      "sortText": "03_sticky-header"
+    },
+    {
+      "label": "Absolute Center",
+      "kind": 15,
+      "detail": "Snippet — Center with absolute + translate",
+      "documentation": { "value": "Centers an element absolutely using `translate(-50%, -50%)`." },
+      "insertText": "position: absolute;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);",
+      "insertTextRules": 4,
+      "sortText": "03_absolute-center"
+    },
+    {
+      "label": "Grid Center",
+      "kind": 15,
+      "detail": "Snippet — Center with Grid",
+      "documentation": { "value": "The shortest CSS centering technique: `display: grid; place-items: center;`." },
+      "insertText": "display: grid;\nplace-items: center;",
+      "insertTextRules": 4,
+      "sortText": "03_grid-center"
+    },
+    {
+      "label": "Full-bleed Layout",
+      "kind": 15,
+      "detail": "Snippet — Full-width grid layout",
+      "documentation": { "value": "Creates a layout where content is centered but some elements can break out to full width." },
+      "insertText": "display: grid;\ngrid-template-columns: 1fr min(${1:65ch}, 100% - 2rem) 1fr;\n& > * {\n\tgrid-column: 2;\n}\n& > .full-bleed {\n\tgrid-column: 1 / -1;\n}",
+      "insertTextRules": 4,
+      "sortText": "03_full-bleed"
+    },
+    {
+      "label": "Glass Morphism",
+      "kind": 15,
+      "detail": "Snippet — Frosted glass effect",
+      "documentation": { "value": "Creates a frosted glass effect using `backdrop-filter: blur()` with a semi-transparent background." },
+      "insertText": "background: rgba(${1:255, 255, 255}, ${2:0.15});\nbackdrop-filter: blur(${3:10px});\nborder: 1px solid rgba(255, 255, 255, 0.2);\nborder-radius: ${4:1rem};",
+      "insertTextRules": 4,
+      "sortText": "03_glass-morphism"
+    },
+    {
+      "label": "Scroll Snap Carousel",
+      "kind": 15,
+      "detail": "Snippet — Horizontal scroll snap",
+      "documentation": { "value": "Creates a horizontal carousel with mandatory scroll snap points." },
+      "insertText": "display: flex;\ngap: ${1:1rem};\noverflow-x: auto;\nscroll-snap-type: x mandatory;\nscroll-behavior: smooth;\n& > * {\n\tscroll-snap-align: start;\n\tflex-shrink: 0;\n}",
+      "insertTextRules": 4,
+      "sortText": "03_scroll-snap"
+    },
+    {
+      "label": "Container Query Setup",
+      "kind": 15,
+      "detail": "Snippet — Container query pattern",
+      "documentation": { "value": "Sets up a container query context and a responsive rule that responds to the container's width." },
+      "insertText": "container-type: inline-size;\ncontainer-name: ${1:card};\n\n@container ${1:card} (min-width: ${2:400px}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "03_container-query"
+    },
+    {
+      "label": "Aspect Ratio Box",
+      "kind": 15,
+      "detail": "Snippet — Responsive aspect ratio",
+      "documentation": { "value": "Creates a responsive container that maintains a fixed aspect ratio. Uses the modern `aspect-ratio` property." },
+      "insertText": "width: 100%;\naspect-ratio: ${1:16 / 9};\nobject-fit: cover;\nborder-radius: ${2:0.5rem};\noverflow: hidden;",
+      "insertTextRules": 4,
+      "sortText": "03_aspect-ratio-box"
+    }
+  ]
+}